@extends('layout.master-laporan')

@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="#">Logistik</a></li>
        <li class="breadcrumb-item active" aria-current="page">Kartu Stok</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 action="" id="filter">
            <div class="row">
                <div class="col-12">
                    <h6 class="card-title">Kartu Stok</h6>
                </div>
                <div class="col-12 col-md-3 col-lg-2">
                    <div class="mb-2">
                        <select name="produk_filter" id="produk_filter" class="form-control select2Custom required">
                            <option value="">Pilih Barang</option>
                            @foreach ($dataBarang as $item)
                              <option value="{{ $item->id }}">{{ $item->nama_produk }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-12 col-md-3 col-lg-2">
                  <div class="mb-2">
                      <select name="gudang_filter" id="gudang_filter" class="form-control select2Custom">
                          <option value="">Pilih Gudang</option>
                          @foreach ($dataGudang as $item)
                            <option value="{{ $item->id }}">{{ $item->nama }}</option>
                          @endforeach
                      </select>
                  </div>
                </div>
                <div class="col-12 col-md-3 col-lg-2">
                    <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-2 col-lg-2">
                  <div class="mb-2">
                    <select name="sort_filter" id="sort_filter" disabled class="form-control">
                      <option value="">Pilih Nomor Urut</option>
                    </select>
                  </div>
                </div>
                <div class="col-12 col-md-3">
                    <div class="row">
                        <div class="col-6 pe-1">
                            <button type="submit" 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>
            </form>
            <div class="row mt-4 mb-4 border p-3">
                <div class="col-12">
                    <label><b>Nama Barang :</b> <span id="namaProdukDetail">-</span></label>
                </div>
                <div class="col-6 mt-2">
                    <label><b>Supplier / Alias :</b></label>
                    <br />
                    <span id="supplierDetail">
                        -
                    </span>
                </div>
                <div class="col-6 mt-2">
                    <label><b>Satuan :</b> <span id="satuanDetail">-</span></label>
                </div>
            </div>
        </div>
      <div class="card-body">
        <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
          <thead>
            <tr>
              <th>No</th>
              <th>Tanggal</th>
              <th>Nomor Referensi</th>
              <th>Pelaksana</th>
              <th>Keterangan</th>
              <th>Gudang</th>
              <th>Nomor Urut</th>
              <th>Masuk</th>
              <th>Keluar</th>
              <th>Saldo</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td colspan="10" class="text-center">Pilih Barang Terlebih Dahulu</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <th colspan="7">Total</th>
              <th>0</th>
              <th>0</th>
              <th></th>
            </tr>
          </tfoot>
        </table>
      </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('logistik/kartu-stok') }}";

    $('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 = null;

    const datatableReload = (url) => {
      if(datatable){
        datatable.ajax.url(url).load();
      }else{
        datatable = $('#datatable-serverside').DataTable({
          lengthMenu: lengthMenuDatatable(),
          processing: true,
          serverSide: true,
          ajax: url,
          columns: [
            {data: 'DT_RowIndex', name: 'id', searchable: false},
            {data: 'tanggal_transaksi', name: 'tanggal_transaksi'},
            {data: 'nomor_referensi', name: 'nomor_referensi', searchable: false, orderable: false},
            {data: 'creator.name', name: 'creator.name', defaultContent: '-'},
            {data: 'keterangan', name: 'keterangan'},
            {data: 'gudang.nama', name: 'gudang.nama'},
            {data: 'stok_barang.sort', name: 'stok_barang.sort'},
            {data: 'masuk', name: 'masuk'},
            {data: 'keluar', name: 'keluar'},
            {data: 'saldo', name: 'saldo'},
          ],
          footerCallback: function (row, data, start, end, display) {
            const api = this.api();
            const json = api.ajax.json();
            api.column(7).footer().innerHTML = formatNumberComma(json.totalMasuk ?? 0) + ' ' + (json.unit_satuan_stock || '-');
            api.column(8).footer().innerHTML = formatNumberComma(json.totalKeluar ?? 0) + ' ' + (json.unit_satuan_stock || '-');
            // api.column(9).footer().innerHTML = formatNumberComma((json.totalMasuk ?? 0) - (json.totalKeluar ?? 0)) + ' ' + (json.unit_satuan_stock || '-');
          }
        });
      }
    }

    $('#filter').on('submit', function(e){
      e.preventDefault();
      if (cekForm('filter') == true) {
        var daterange = $('#daterange').val();
        var produk_filter = $('#produk_filter').val();
        sendJson(URLs+'/read', {
          _token: "{{ csrf_token() }}",
          id_barang: produk_filter,
        }, rFilter, '');
      }
    });

    function rFilter(data){
        $('#namaProdukDetail').html(data.nama_produk);
        $('#supplierDetail').html(data.supplier_alias);
        $('#satuanDetail').html(data.unit);
        let URL_filter = URLs + "/get-data" + `?daterange=${$('#daterange').val()}&id_barang=${$('#produk_filter').val()}&id_gudang=${$('#gudang_filter').val()}&id_stok_barang=${$('#sort_filter').val()}`;
        datatableReload(URL_filter);
    }

    function filterReset(){
      $('#daterange').val('');
      $('#produk_filter').val('').trigger('change');
      $('#gudang_filter').val('').trigger('change');
      $('#sort_filter').val('').trigger('change');

      var data = {
        _token: "{{ csrf_token() }}",
        id_barang: null
      };

      sendJson(URLs+'/read', data, rFilter, '');
    }

    $('#sort_filter').select2({
      ajax: {
        url: "{{ route('api.list.stok-barang') }}",
        dataType: 'json',
        delay: 250,
        data: function (params) {
          return {
            search: params.term,
            id_barang: $('#produk_filter').val(),
            id_gudang: $('#gudang_filter').val(),
          };
        },
        processResults: function (data) {
          return {
            results: $.map(data, function (item) {
              return {
                text: item.sort,
                id: item.id
              }
            })
          };
        },
        cache: true
      },
    });

    $('#produk_filter').change(function(){
      if($(this).val()){
        $('#sort_filter').prop('disabled', false);
      }else{
        $('#sort_filter').prop('disabled', true);
      }
    });
  </script>
@endpush