@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="#">Surat Jalan</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data Barang Belum Sampai</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 Belum Sampai</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 PO</th>
                              <th>Supplier</th>
                              <th>Tanggal PO</th>
                              <th>Barang</th>
                              <!-- <th>Alias</th> -->
                              <th>Jumlah</th>
                              <th>Satuan</th>
                              <th>Ratio</th>
                              <th>Harga</th>
                              <th>Total</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/surat-jalan') }}";
    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-sampai',
      columns: [
        {data: 'DT_RowIndex', name: 'id', searchable: false},
        {data: 'nomor_po', name: 'nomor_po'},
        {data: 'supplier', name: 'supplier'},
        {data: 'tanggal_po', name: 'tanggal_po'},
        {data: 'barang', name: 'barang'},
        // {data: 'alias', name: 'alias'},
        {data: 'jumlah', name: 'jumlah', className: 'text-end'},
        {data: 'satuan', name: 'satuan'},
        {data: 'ratio', name: 'ratio', className: 'text-end'},
        {data: 'harga', name: 'harga', className: 'text-end'},
        {data: 'total', name: 'total', className: '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