@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 == 'instansi_internal')  
                  <a href="{{ route('keuangan.input') }}" class="btn btn-primary"><span class="cil-plus"></span> Tambah Transaksi</a>
                  @endif
                </div>
                <div class="card-body">
                  <div class="row">
                    <div class="col-md-4 col-xs-12">
                        <label>Instansi</label>
                        <select name="" id="instansi" class="form-control filter" required>
                          <option value="" selected hidden disabled></option>
                          @foreach ($instansis as $key=>$item)
                              <option value="{{$item->id}}" {{ $filterInstansi&&$filterInstansi==$item->id?'selected':''}}>{{$item->name}}</option>
                          @endforeach
                        </select>
                    </div>
                    <div class="col-md-3 col-xs-12">
                        <label>Dari Tanggal</label>
                        <input type="date" id="datefrom" class="form-control" value="{{ date('Y-m-d') }}" required>
                    </div>
                    <div class="col-md-3 col-xs-12">
                        <label>Sampai Tanggal</label>
                        <input type="date" id="dateto" class="form-control" value="{{ date('Y-m-d') }}" required>
                    </div>
                    
                    <div class="col-md-2 col-xs-12 d-flex align-items-end">
                      <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-body">
                      <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>Instansi</th>
                                <th>Tanggal</th>
                                <th style="width: 10%">Jenis Transaksi</th>
                                <th>Nama Transaksi</th>
                                <th>Jumlah</th>
                                <th style="width: 20%"></th>
                              </tr>
                            </thead>
                          <tbody>
                          </tbody>
                        </table>
                      </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
@endsection

@section('javascript')
<script>
    var table;
    $(document).ready(function() {
      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('keuangan.index') }}",
            type: "GET",
            data: function (d) {
                d.instansi_id = $("#instansi").val();
                d.tgl_awal = $("#datefrom").val();
                d.tgl_akhir = $("#dateto").val();
            }
          },
          columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'instansi.name', name: 'instansi'},
            {data: 'tanggal', name: 'tanggal'},
            {data: 'jenis', name: 'jenis'},
            {data: 'deskripsi', name: 'deskripsi'},
            {data: 'nominal', name: 'nominal'},
            {data: 'action', name: 'action'}
          ]
        });
      $("#instansi").select2({placeholder: "Pilih instansi", 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');
          $('#btn-download').addClass('disabled');
          if ( table.data().count() !== 0 && $('#tahun').val() != null && $('#bulan').val() != null && $('#jenis').val() != null) {
            $('#btn-download').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