@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="#">Perusahaan</a></li>
      <li class="breadcrumb-item active" aria-current="page">Lookup Gudang Cabang</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>Lookup Gudang Cabang</h4>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-6 col-md-4">
              <div class="mb-2">
                <select name="filter_cabang" id="filter_cabang" class="form-control select2Custom">
                  <option value="">Pilih Cabang</option>
                  @foreach ($cabang as $row)
                    <option value="{{ $row->id }}">{{ $row->nama_perusahaan }}</option>
                  @endforeach
                </select>
              </div>
            </div>
            <div class="col-6 col-md-4">
              <div class="mb-2">
                <select name="filter_gudang" id="filter_gudang" class="form-control select2Custom">
                  <option value="">Pilih Gudang</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-custom2 w-100">Filter</button>
                </div>
                {{-- <div class="col-6 ps-1">
                  <button type="button" class="btn btn-light btn-custom8 w-100" onclick="">Reset</button>
                </div> --}}
              </div>
            </div>
          </div>
          <div class="row mt-5">
            <div class="col-md-12">
              <div class="table-responsive">
            <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
              <thead>
                <tr>
                  <th>No</th>
                  <th>Nama Barang</th>
                  <th>Supplier/Alias</th>
                  <th>Stok</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td colspan="4" class="text-center">Silahkan pilih cabang dan gudang terlebih dahulu</td>
                </tr>
              </tbody>
            </table>
          </div>
            </div>
          </div>
        </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>
    $(document).ready(function() {

      $('#filter_cabang').on('change', function() {
        $('#filter_gudang').empty();
        $('#filter_gudang').append('<option value="">Pilih Gudang</option>');
        $('#filter_gudang').prop('disabled', true);

        var id = $(this).val();
        var url = "{{ route('perusahaan.lookup-gudang-cabang.get-gudang-milik-cabang') }}";
        var data = {
          id: id
        };

        $.get(url, data, function(response) {
          response.forEach(item => {
            $('#filter_gudang').append(`<option value="${item.id}">${item.nama}</option>`);
          });
          $('#filter_gudang').prop('disabled', false);
        });
      });

      $('#btnFilter').on('click', function() {
        let URL_filter = "{{ route('perusahaan.lookup-gudang-cabang.get-data') }}";
        URL_filter += `?id=${$('#filter_cabang').val()}&id_gudang=${$('#filter_gudang').val()}`;
        datatableReload(URL_filter);
      });
    })

    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: 'nama_barang',
              name: 'nama_barang'
            },
            {
              data: 'supplier',
              name: 'supplier'
            },
            {
              data: 'stok',
              name: 'stok'
            },
          ],
        });
      }
    }
  </script>
@endpush