@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">Info Stok Barang Ready</li>
    </ol>
  </nav>

  <div class="row">
    <div class="col-md-12 grid-margin stretch-card">
      <div class="card">
        <div class="card-header bg-white">
          <h4>Info Stok Barang Ready</h4>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-12 col-md-4">
              <div class="mb-2">
                <select name="supplier_filter" id="supplier_filter" class="form-control select2Custom">
                  <option value="">Pilih Supplier</option>
                  @foreach ($dataSupplier as $item)
                    <option value="{{ $item->id }}">{{ $item->nama }}</option>
                  @endforeach
                </select>
              </div>
            </div>
            <div class="col-12 col-md-5">
              <div class="mb-2">
                <select name="status_filter" id="status_filter" class="form-control select2Custom">
                  <option value="">Pilih Status Stok</option>
                  <option value="Stok Habis">Stok Habis</option>
                  <option value="Stok Hampir Habis">Stok Hampir Habis</option>
                  <option value="Stok Kurang">Stok Kurang</option>
                  <option value="Stok Aman">Stok Aman</option>
                </select>
              </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-custom1 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 class="row mt-5">
            <div class="col-md-12">
              <table id="datatable-serverside" class="table bg-white" style="width: 100%;">
              <thead class="table-primary">
                <tr>
                  <th class="kolomNomor">No.</th>
                  <th>Nama Barang</th>
                  <th>Supplier / Alias</th>
                  <th>Dipesan</th>
                  <th>Diterima</th>
                  <th>Stok</th>
                  <th>AVG Cost (Perpetual)</th>
                  <th>Sisa Stok (Perpetual)</th>
                  <th>AVG Cost (Periodic)</th>
                  <th>Sisa Stok (Periodic)</th>
                  <th>Keterangan</th>
                  <th class="kolomAksi">Aksi</th>
                </tr>
              </thead>
            </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="ModalRecalculateHpp">
    <div class="modal-dialog modal-md">
      <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title h4">Recalculate Hpp</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
        </div>
        <div class="modal-body">
            <form id="form-recalculate-hpp">
                <input type="hidden" name="id_barang" id="id_barang">
                <div class="row">
                    <div class="col-12">
                        <label for="tanggal_transaksi" class="form-label">Tanggal Transaksi</label>
                        <input type="date" class="form-control required" name="tanggal_transaksi" id="tanggal_transaksi" placeholder="Tanggal Transaksi">
                        <small class="text-muted">*Perhitungan ulang HPP dimulai dari tanggal transaksi yang dipilih</small>
                    </div>
                    <div class="col-12 mt-3" style="text-align: right;">
                        <button type="submit" class="btn btn-primary btn-custom1">Simpan</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                    </div>
                </div>
            </form>
        </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 src="https://unpkg.com/sticky-table-headers"></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/info-stok-barang') }}";

    let datatable = $('#datatable-serverside').DataTable({
      lengthMenu: lengthMenuDatatable(),
      processing: true,
      serverSide: true,
      ajax: URLs + '/get-data',
      searching: false,
      columns: [{
          data: 'DT_RowIndex',
          name: 'id'
        },
        {
          data: 'nama_barang',
          name: 'nama_barang'
        },
        {
          data: 'supplier',
          name: 'supplier'
        },
        {
          data: 'dipesan',
          name: 'dipesan'
        },
        {
          data: 'diterima',
          name: 'diterima'
        },
        {
          data: 'stok',
          name: 'stok'
        },
        {
          data: 'hpp_perpetual',
          name: 'hpp_perpetual',
          class: 'text-end',
          searchable: false,
          orderable: false,
          visible: boolPhpToJs("{{ ($GlobalVar->hpp_setting == 'perpetual' && auth()->user()->can('hpp.view')) || $GlobalVar->is_testing == 1 }}"),
        },
        {
          data: 'sisa_stok_perpetual',
          name: 'sisa_stok_perpetual',
          class: 'text-end',
          visible: boolPhpToJs("{{ ($GlobalVar->hpp_setting == 'perpetual' && auth()->user()->can('hpp.view')) || $GlobalVar->is_testing == 1 }}"),
        },
        {
          data: 'hpp_periodic',
          name: 'hpp_periodic',
          class: 'text-end',
          searchable: false,
          orderable: false,
          visible: boolPhpToJs("{{ ($GlobalVar->hpp_setting == 'periodic' && auth()->user()->can('hpp.view')) || $GlobalVar->is_testing == 1 }}"),
        },
        {
          data: 'sisa_stok_periodic',
          name: 'sisa_stok_periodic',
          class: 'text-end',
          visible: boolPhpToJs("{{ ($GlobalVar->hpp_setting == 'periodic' && auth()->user()->can('hpp.view')) || $GlobalVar->is_testing == 1 }}"),
        },
        {
          data: 'keterangan',
          name: 'keterangan',
          searchable: false,
          orderable: false,
          class: 'text-center'
        },
        {
          data: 'actions',
          name: 'actions',
          searchable: false,
          orderable: false,
          class: 'text-center'
        },
      ],
    });

    $('#btnFilter').on('click', function(e) {
      var supplier_filter = $('#supplier_filter').val();
      var status_filter = $('#status_filter').val();
      if ((supplier_filter != null && supplier_filter != '') || (status_filter != null && status_filter != '')) {
        var URL_filter = URLs + "/get-data" +
          `?supplier=${$('#supplier_filter').val()}&status=${$('#status_filter').val()}`;
        datatable.ajax.url(URL_filter).load();
      } else {
        swal('Perhatian', 'Pastikan Sudah Memilih Supplier ataupun Status Stok', 'info');
      }
    });

    function filterReset() {
      $('#supplier_filter').val('').trigger('change');
      $('#status_filter').val('').trigger('change');
      datatable.ajax.url(URLs + "/get-data").load();
    }

    @canany(['hpp.create', 'hpp.edit'])
      const recalculateHpp = (id) => {
        $('#id_barang').val(id);
        $('#ModalRecalculateHpp').modal('show');
      }

      $('#ModalRecalculateHpp').on('hidden.bs.modal', function () {
        $('#form-recalculate-hpp')[0].reset();
      });

      $('#form-recalculate-hpp').on('submit', function(e) {
        e.preventDefault();
        if(cekForm('form-recalculate-hpp')){
            const data = {
                _token: '{{ csrf_token() }}',
                tanggal_transaksi: $('#tanggal_transaksi').val()
            }
            const url = URLs + '/recalculate-hpp/' + $('#id_barang').val();
            sendJson(url, data, callbackRecalculateHpp);
        }
      });

      const callbackRecalculateHpp = (response) => {
        const title = response.type == 'success' ? 'Berhasil' : 'Gagal';
        swal({
            title: title,
            text: response.message,
            type: response.type,
        }).then(() => {
            if(response.type == 'success'){
                $('#ModalRecalculateHpp').modal('hide');
                datatable.ajax.reload();
            }
        });
      }
    @endcanany
    $("#datatable-serverside").stickyTableHeaders({fixedOffset: $('.bottom-navbar')});
  </script>
@endpush