@extends('dashboard.base')

@section('content')

        <div class="container-fluid">
          <div class="animated fadeIn">
            <div class="row justify-content-md-center">
              <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="m-0">Tambah Daftar Penerimaan</h5>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="">
                            @csrf
                            <div class="row">
                                <div class="col">
                                    <div class="form-group">
                                        <label>Tahun</label><br>
                                        <select class="form-control col-sm-12 col-md-12" name="tahun" id="tahun">
                                            <option value="" selected hidden disabled></option>
                                            @for ($y = date('Y', strtotime('+1 year')); $y >= 2020; $y--)
                                            <option value="{{ $y }}">{{ $y }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form-group">
                                        <label>Bulan</label><br>
                                        <select class="form-control col-sm-12 col-md-12" name="bulan" id="bulan">
                                            <option value="" selected hidden disabled></option>
                                            @foreach (config('constants.bulans') as $key=>$bulan)
                                                <option value="{{$key}}">{{$bulan}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form-group">
                                        <label>Jenis</label><br>
                                        <select class="form-control col-sm-12 col-md-12" name="jenis" id="jenis">
                                            <option value="" selected hidden disabled></option>
                                            @foreach (config('constants.salary_types') as $key=>$type)
                                                <option value="{{$key}}">{{$type}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex flex-row mt-2">
                                <button class="btn btn-primary mr-2" type="button" id="btn-buat" disabled>{{ __('Buat') }}</button>
                                <a href="{{ route('penerimaan.index') }}" class="btn btn-outline-dark">{{ __('Kembali') }}</a> 
                            </div>
                        </form>
                    </div>
                </div>
              </div>
              <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="m-0">Draft penerimaan</h5>
                        <button type="button" class="btn btn-success btn-save" disabled><span class="cil-check-alt"></span> Simpan</button>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="table" class="table table-sm table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th style="width: 5%">No</th>
                                        <th style="width: 10%">No. Pegawai /  NIP</th>
                                        <th style="width: 30%">Nama Pegawai</th>
                                        <th style="width: 20%">Jabatan</th>
                                        <th style="width: 20%">Pangkat / Golongan Ruang</th>
                                        <th>Jumlah (Rp)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer d-flex justify-content-between align-items-center">
                        <h5 class="m-0"></h5>
                        <button type="button" class="btn btn-success btn-save" disabled><span class="cil-check-alt"></span> Simpan</button>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>

@endsection

@section('javascript')
<script>
    $(document).ready(function(){
        var table = $('#table').DataTable({
          "processing": true,
          "serverSide" : true,
          "deferLoading": 0,
          "pageLength": 50,
          "language": {
            processing: '<div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>'
          },
          ajax: {
            url: "{{ route('penerimaan.generate') }}",
            type: "GET",
            data: function (d) {
                d.tahun = $("#tahun").val();
                d.bulan = $("#bulan").val();
                d.jenis = $("#jenis").val();
            }
          },
          columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'no_pegawai', name: 'no_pegawai'},
            {data: 'name', name: 'name'},
            {data: 'jabatan', name: 'jabatan'},
            {data: 'pangkat', name: 'pangkat'},
            {data: 'jumlah', name: 'jumlah'}
          ],
          columnDefs: [
                {
                    targets: 5,
                    className: 'text-right'
                }
            ]
        });
        $("#tahun").select2({placeholder: "Pilih tahun"});
        $("#bulan").select2({placeholder: "Pilih bulan"});
        $("#jenis").select2({placeholder: "Pilih jenis"});
        $("#btn-buat").on('click', function(){
          $(this).prop('disabled', true).html('Loading...');
          table.ajax.reload(function(){
            $('#btn-buat').prop('disabled', false).html('Buat');
            $('.btn-save').prop('disabled', false);
          });
        });
        $("select").on('change', function(){
            if($("#tahun").val() !== null && $("#bulan").val() !== null && $("#jenis").val() !== null){
                $("#btn-buat").prop('disabled', false);
            }
        });
        $(".btn-save").click(function(){
            $(".btn-save").prop('disabled', true).html('Menyimpan...');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('input[name="_token"]').val()
                }
            });

            $.ajax({
                type: "POST",
                url: "{{ route('penerimaan.store') }}",
                dataType: 'json',
                success: function (data) {
                    swal("Sukses!", "Data penerimaan berhasil disimpan", "success")
                    .then((value) => {
                        window.location.href = "{{ route('penerimaan.index')}}";
                    });
                    table.clear().draw();
                    $(".btn-save").html('<span class="cil-check-alt"></span> Simpan');
                },
                error: function (data) {
                    swal("Gagal!", "Data penerimaan gagal disimpan", "error");
                    console.log(data);
                }
            });
        });
    });
</script>
@endsection