@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Pembelian</a></li>
    <li class="breadcrumb-item"><a href="#">Terima Paket</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data Barang Datang (Belum Cek)</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
        <div class="card-header bg-white">
            <div class="row">
                <div class="col-12">
                    <h6 class="card-title">Data Barang Datang (Belum Cek)</h6>
                </div>
                <div class="col-12 col-md-9">
                    <div class="mb-2">
                        <input type="text" name="daterange" id="daterange" class="form-control" placeholder="date range" readonly>
                    </div>
                </div>
                <div class="col-12 col-md-3">
                    <div class="row">
                        <div class="col-6 pe-1">
                            <button type="button" id="btnFilter" class="btn btn-primary btn-custom2 w-100">Filter</button>
                        </div>
                        <div class="col-6 ps-1">
                            <button type="button" class="btn btn-light btn-custom8 w-100" onclick="filterReset()">Reset</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      <div class="card-body">
        <div class="row">
            <div class="mb-2">
                <x-checkbox-view-nama-top />
            </div>
            <div class="col-12">
              <div class="table-responsive">
                  <table id="datatable-serverside" class="table" style="width: 100%;">
                      <thead>
                          <tr>
                              <th class="kolomNomor">No.</th>
                              <th>Nomor Surat Jalan</th>
                              <th>Tanggal Surat Jalan</th>
                              <th>Supplier</th>
                              <th>Barang</th>
                              <!-- <th>Alias</th> -->
                              <th>QTY Bruto</th>
                          </tr>
                      </thead>
                  </table>
              </div>
            </div>
        </div>
      </div>
      {{-- <div class="card-footer" style="text-align: right;">
        <a class="btn btn-light btn-custom8" href="/pembelian/surat-jalan">Kembali</a>
      </div> --}}
    </div>
  </div>
</div>
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
  <script src="{{ asset('assets/js/data-table.js') }}"></script>
  <script src="{{ asset('assets/js/sweet-alert.js') }}"></script>

  <script>
    var URLs = "{{ url('pembelian/terima-paket') }}";
    var jmlBerkasAll = 0;

    $('input[name="daterange"]').daterangepicker({
      autoUpdateInput: false,
      locale: {
        cancelLabel: 'Clear'
      }
    });
    $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
      $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
    });
    $('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
      $(this).val('');
    });

    let datatable = $('#datatable-serverside').DataTable({
      lengthMenu: lengthMenuDatatable(),
      processing: true,
      serverSide: true,
      ajax: URLs+'/get-data-belum-buka-paket',
      columns: [
        {data: 'DT_RowIndex', name: 'id', searchable: false},
        {data: 'nomor_surat_jalan', name: 'nomor_surat_jalan'},
        {data: 'tanggal_surat_jalan', name: 'tanggal_surat_jalan'},
        {data: 'supplier', name: 'supplier'},
        {data: 'barang', name: 'barang'},
        // {data: 'alias', name: 'alias'},
        {data: 'berat_bruto', name: 'berat_bruto', class: 'text-end'},
      ],
      order: [[ 0, "desc" ]],
    });

    $('#btnFilter').on('click', function(e){
        var daterange = $('#daterange').val();
        if(daterange != null && daterange != ''){
            var URL_filter = URLs + "/get-data-belum-buka-paket" + `?daterange=${$('#daterange').val()}`;
            datatable.ajax.url(URL_filter).load();
        }else{
            swal('Perhatian', 'Pastikan Sudah Menentukan Tanggal', 'info');
        }
    });

    function filterReset(){
      $('#daterange').val('');
      datatable.ajax.url(URLs + "/get-data").load();
    }
  </script>
@endpush