@extends('dashboard.base')

@section('content')
        <div class="container-fluid">
          @include('dashboard.shared.alert')
          <div class="row">
            <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">Filter</h5>
                  {{-- <a href="{{ route('penerimaan.generate') }}" class="btn btn-primary"><span class="cil-plus"></span> Generate Daftar Penerimaan</a> --}}
                </div>
                <div class="card-body">
                  <div class="row">
                    <div class="col-md-2 col-xs-12">
                      <select name="" id="tahun" class="form-control filter" required>
                        <option value="" selected hidden disabled></option>
                        @for ($y = date('Y', strtotime('+1 year')); $y >= 2020; $y--)
                            <option value="{{ $y }}" {{ $filterTahun == $y ? 'selected' : '' }}>{{ $y }}</option>
                        @endfor
                      </select>
                    </div>
                    <div class="col-md-2 col-xs-12">
                      <select name="" id="bulan" class="form-control filter" required>
                        <option value="" selected hidden disabled></option>
                        @foreach (config('constants.bulans') as $key=>$bulan)
                            <option value="{{$key}}" {{$filterBulan==$key?'selected':''}}>{{$bulan}}</option>
                        @endforeach
                      </select>
                    </div>
                    <div class="col-md-2 col-xs-12">
                        <select name="" id="jenis" class="form-control filter" required>
                          <option value="" selected hidden disabled></option>
                          @foreach ($jenispotongans as $key=>$type)
                              <option value="{{$type->id}}" {{$filterJenis==$type->id?'selected':''}}>{{$type->name}}</option>
                          @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 col-xs-12">
                      <select name="" id="pegawai" class="form-control filter" required>
                        <option value="" selected hidden disabled></option>
                        @foreach ($pegawais as $key=>$pegawai)
                            <option value="{{$pegawai->id}}" {{$filterPegawai==$pegawai->id?'selected':''}}>{{$pegawai->name}}</option>
                        @endforeach
                      </select>
                    </div>
                    <div class="col-md-2 col-xs-12">
                      <button id="btn-filter" class="btn btn-success btn-block">Tampilkan</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="animated fadeIn">
            <div class="row">
              <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">Daftar Potongan</h5>
                    </div>
                    <div class="card-body">
                      @if (count($potongans) == 0)
                        {{-- <div class="alert alert-warning m-0" role="alert" bis_skin_checked="1">Maaf, daftar potongan tidak tersedia. Silahkan membuat daftar dengan tombol <b>Generate</b></div> --}}
                      @else    
                        <div class="table-responsive table-responsive-sm">
                          <table id="table" class="table table-responsive-sm table-striped table-bordered">
                            <thead>
                              <tr>
                                <th style="width: 5%">No</th>
                                <th width="20%">Pegawai</th>
                                <th>Jenis Potongan</th>
                                <th>Tahun</th>
                                <th>Bulan</th>
                                <th width="20%">Keterangan</th>
                                <th width="10%">Jumlah</th>
                                <th></th>
                                <th></th>
                              </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            <tfoot>
                              <tr>
                                  <th colspan="6" style="text-align:right">Total Keseluruhan:</th>
                                  <th></th>
                              </tr>
                            </tfoot>
                          </table>
                        </div>
                      @endif
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>

@endsection

@section('javascript')
<script>
    $(document).ready(function() {
      var table = $('#table').DataTable({
          "processing": true,
          "serverSide" : true,
          "deferLoading": true,
          "pageLength": 50,
          "language": {
            processing: '<div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>'
          },
          ajax: {
            url: "{{ route('potongan.instansi.list') }}",
            type: "GET",
            data: function (d) {
                d.tahun = $("#tahun").val();
                d.bulan = $("#bulan").val();
                d.jenis = $("#jenis").val();
                d.pegawai = $("#pegawai").val();
            }
          },
          columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'pegawai', name: 'pegawai'},
            {data: 'type', name: 'type'},
            {data: 'tahun', name: 'tahun'},
            {data: 'bulan', name: 'bulan'},
            {data: 'keterangan', name: 'keterangan'},
            {data: 'jumlah', name: 'jumlah'},
            {data: 'nominal', name: 'nominal'},
            {data: 'action', name: 'action'}
          ],
          columnDefs: [
            {
              "targets": [7],
              "visible": false
            }
          ],
          footerCallback: function ( row, data, start, end, display ) {
            var api = this.api(), data;
 
            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
 
            // Total over all pages
            total = api
                .column(7)
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0);
 
            // Update footer
            $( api.column(6).footer() ).html(
                'Rp '+total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
            );
          }
        });
      $("#tahun").select2({placeholder: "Pilih tahun", allowClear: true});
      $("#bulan").select2({placeholder: "Pilih bulan", allowClear: true});
      $("#jenis").select2({placeholder: "Pilih jenis", allowClear: true});
      $("#pegawai").select2({placeholder: "Pilih pegawai", allowClear: true});
      $("#btn-filter").click(function(){
        $(this).prop('disabled', true).html('Loading...');
        $(".filter").prop('disabled', true);
        table.ajax.reload(function(){
          $(".filter").prop('disabled', false);
          $("#btn-filter").prop('disabled', false).html('Tampilkan');
        });
      })
    });
    $('#table').on('click', '.form-delete', function(e){
      e.preventDefault();
      var form = $(this);
      swal({
        title: "Apakah Anda yakin?",
        icon: "warning",
        buttons: {
          cancel: {
            text: "Batal",
            visible: true
          },
          confirm: {
            text: "Hapus"
          }
        },
        dangerMode: true,
      })
      .then((yes) => {
        if (yes) {
          form.submit()
        }
      });
    });
</script>
@endsection