@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" />
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Logistik</a></li>
    <li class="breadcrumb-item active" aria-current="page">Stok Opname (Isi)</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-header bg-white">
        <form onsubmit="formFilter()">
            <div class="row">
                <div class="col-12">
                    <h6 class="card-title">Data Stok Opname</h6>
                </div>
                <div class="col-12 col-md-9">
                    <div class="mb-2">
                        <input type="text" name="daterange" id="daterange" class="form-control" placeholder="Tanggal Invoice Pembelian" readonly>
                    </div>
                </div>
                <div class="col-12 col-md-3">
                    <div class="row">
                        <div class="col-6 pe-1">
                            <button type="submit" 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>
        </form>
    </div>
      <div class="card-body">
        <h6 class="card-title">Data Stok Opname (Isi)</h6>
        <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
          <thead>
            <tr>
              <th class="kolomNomor">No.</th>
              <th>Nomor</th>
              <th>Gudang</th>
              <th>Tanggal</th>
              <th>Pelaksana</th>
              <th class="kolomAksi">Aksi</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="card-footer" style="text-align: right;">
        @can('stok-opname.create')
          <a class="btn btn-info btn-custom1" href="stok-opname/input">Tambah Data</a>
        @endcan
      </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>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.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('logistik/stok-opname') }}";

    let datatable = $('#datatable-serverside').DataTable({
      lengthMenu: lengthMenuDatatable(),
      processing: true,
      serverSide: true,
      ajax: URLs+'/get-data',
      columns: [
        {data: 'DT_RowIndex', name: 'id'},
        {data: 'nomor', name: 'nomor'},
        {data: 'gudang.nama', name: 'gudang.nama'},
        {data: 'tanggal_stok_opname', name: 'tanggal_stok_opname'},
        {data: 'creator.name', name: 'creator.name'},
        {data: 'aksi', name: 'aksi', searchable: false, orderable: false, class: 'text-center'},
      ],
    });

    function hapusData(id) {
        swal({
            title: "Konfirmasi",
            text: "Apakah anda ingin menghapus data ?",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "Batal",
            confirmButtonText: "Lanjutkan"
        }).then(function() {
            let data = {
              _token: '{{ csrf_token() }}'
            };

            let url = "{{ route('logistik.stok-opname.destroy', ':id') }}";
            url = url.replace(':id', id);
            sendJson(url, data, rSends);
        })
    }

    function formFilter() {
      event.preventDefault();
      let url = URLs + `/get-data?daterange=${$('#daterange').val()}`;
      datatable.ajax.url(url).load();
    }

    function filterReset() {
      $('#daterange').val('');
      datatable.ajax.url(URLs+ '/get-data').load();
    }

    $('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('');
    });
  </script>
@endpush