@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>
                  @if (auth()->user()->menuroles == 'admin' || auth()->user()->menuroles == 'kasubag_keuangan' || auth()->user()->menuroles == 'petugas_keuangan')  
                  <a href="{{ route('penerimaan.generate') }}" class="btn btn-primary"><span class="cil-plus"></span> Generate Daftar Penerimaan</a>
                  @endif
                </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 ? ($filterTahun == $y ? 'selected' : '') : (date('Y') == $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 ? ($filterBulan == $key ? 'selected' : '') : (date('m') == $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 (config('constants.salary_types') as $key=>$type)
                            <option value="{{$key}}" {{ $filterJenis == $key ? 'selected' : '' }}>{{$type}}</option>
                        @endforeach
                      </select>
                    </div>
                    <div class="col-md-2 col-xs-12">
                      <select name="" id="jenis-pegawai" class="form-control filter" required>
                        <option value="" selected hidden disabled></option>
                            <option value="1" {{ $filterJenisPegawai == 1 ? 'selected' : '' }}>ASN</option>
                            <option value="2" {{ $filterJenisPegawai == 2 ? 'selected' : '' }}>Hakim</option>
                            <option value="3" {{ $filterJenisPegawai == 3 ? 'selected' : '' }}>PPNPN</option>
                      </select>
                    </div>
                    <div class="col-md-3 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-1 col-xs-12">
                      <button id="btn-filter" class="btn btn-success btn-block"><span class="cil-search"></span></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 Penerimaan</h5>
                      <div class="d-flex flex-column">
                        @if (auth()->user()->menuroles == 'admin' || auth()->user()->menuroles == 'kasubag_keuangan' || auth()->user()->menuroles == 'petugas_keuangan')
                        <p class="my-0"><small>Harap memilih tahun, bulan, dan jenis untuk dapat mendownload data</small></p>
                        <div class="d-flex justify-content-end">
                          <a id="btn-download-excel" class="btn btn-success disabled" href="{{route('penerimaan.download-excel')}}" target="_blank"><span class="cil-cloud-download mr-1"></span>Download Rekap Excel</a>
                          <a id="btn-download" class="btn btn-danger disabled ml-1" href="{{route('penerimaan.download')}}" target="_blank"><span class="cil-cloud-download mr-1"></span>Download Rekap PDF</a>
                          <a id="btn-download2" class="btn btn-dark disabled ml-1" href="{{route('penerimaan.download-daftar')}}" target="_blank"><span class="cil-cloud-download mr-1"></span>Download Daftar TTD</a>
                        </div>
                        @endif
                        
                      </div>
                    </div>
                    <div class="card-body">
                      @if (count($slips) == 0)
                        @if (auth()->user()->menuroles == 'admin' || auth()->user()->menuroles == 'kasubag_keuangan' || auth()->user()->menuroles == 'petugas_keuangan')
                        <div class="alert alert-warning m-0" role="alert" bis_skin_checked="1">Maaf, daftar penerimaan tidak tersedia. Silahkan membuat daftar dengan tombol <b>Generate</b></div>
                        @else
                        <div class="alert alert-warning m-0" role="alert" bis_skin_checked="1">Maaf, daftar penerimaan tidak tersedia. Silahkan menghubungi petugas keuangan untuk informasi lebih lanjut</div>
                        @endif
                      @endif
                      <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>Tahun</th>
                                <th>Bulan</th>
                                <th>Jenis</th>
                                <th width="20%">Pegawai</th>
                                <th>Jumlah</th>
                                <th>Potongan</th>
                                <th>Diterima</th>
                                <th>Keterangan</th>
                                <th style="width: 15%"></th>
                              </tr>
                            </thead>
                            <tbody>
                            </tbody>
                          </table>
                        </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
@endsection

@section('javascript')
<script>
    window.onload = function(){
      $("#btn-filter").click();
    }
    $(document).ready(function() {
      var table = $('#table').DataTable({
          "processing": true,
          "pagination": false,
          "serverSide" : true,
          "deferLoading": true,
          "pageLength": 50,
          "language": {
            processing: '<div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>'
          },
          ajax: {
            url: "{{ route('penerimaan.index') }}",
            type: "GET",
            data: function (d) {
                d.tahun = $("#tahun").val();
                d.bulan = $("#bulan").val();
                d.jenis = $("#jenis").val();
                d.jenispegawai = $("#jenis-pegawai").val();
                d.pegawai = $("#pegawai").val();
            }
          },
          columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'year', name: 'year'},
            {data: 'bulan', name: 'bulan'},
            {data: 'type', name: 'type'},
            {data: 'pegawai', name: 'pegawai'},
            {data: 'jumlah', name: 'jumlah'},
            {data: 'potongan', name: 'potongan'},
            {data: 'diterima', name: 'diterima'},
            {data: 'keterangan', name: 'keterangan'},
            {data: 'action', name: 'action'}
          ]
      });
      $("#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});
      $("#jenis-pegawai").select2({placeholder: "Pilih jenis 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('<span class="cil-search"></span>');
          $('#btn-download-excel, #btn-download, #btn-download2').addClass('disabled');
          if ( table.data().count() !== 0 && $('#tahun').val() != null && $('#bulan').val() != null && $('#jenis').val() != null) {
            $('#btn-download-excel, #btn-download, #btn-download2').removeClass('disabled');
          }
        });
      });
      $('#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