@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="#">Laporan</a></li>
    <li class="breadcrumb-item"><a href="#">Logistik</a></li>
    <li class="breadcrumb-item active" aria-current="page">Stok</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
        <h5 class="card-header bg-white">
            Laporan Logistik Stok
        </h5>
      <div class="card-body">
        <div class="row">
            <div class="col-12 col-md-6 col-lg-3">
                <div class="mb-2">
                    <select name="supplier_filter" id="supplier_filter" class="form-control select2Custom">
                        <option value="">Pilih Supplier</option>
                    </select>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-3">
                <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-6 col-lg-3">
              <div class="mb-2">
                <select name="order_by" id="order_by" class="form-control select2Custom">
                  <option value="">Pilih Order By</option>
                  <option value="nama">Nama Barang</option>
                  <option value="jumlah_valid">Stok</option>
                </select>
              </div>
            </div>
            <div class="col-12 col-md-6 col-lg-3">
              <div class="mb-2">
                <select name="sort_by" id="sort_by" class="form-control select2Custom">
                  <option value="ASC">A-Z</option>
                  <option value="DESC">Z-A</option>
                </select>
              </div>
            </div>
            <div class="col-12 col-md-6 col-lg-3">
                <div class="row">
                    <div class="col-3 pe-1">
                        <button type="button" id="btnFilter" class="btn btn-primary btn-custom2 w-100" title="Filter"><span class="mdi mdi-filter"></span></button>
                    </div>
                    <div class="col-3">
                        <button type="button" class="btn btn-light btn-custom8 w-100" onclick="filterReset()" title="Reset"><span class="mdi mdi-refresh"></span></button>
                    </div>
                    <div class="col-3 ps-1">
                        <button type="button" class="btn btn-success w-100" onclick="downloadExcel()" title="Excel"><span class="mdi mdi-microsoft-excel"></span></button>
                    </div>
                    <div class="col-3 ps-1">
                        <button type="button" class="btn btn-danger w-100" onclick="printData()" title="Print"><span class="mdi mdi-printer"></span></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-12">
                <div class="table-responsive">
                    <div id="purchase-order-data">
                        @include('pages.laporan.logistik.stok.pagination-stok', ['data' => $data])
                    </div>
                </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>
    function fetch_data(page)
    {
        $.ajax({
            url: "/laporan/logistik/stok?page=" + page,
            data: {
                supplier: $('#supplier_filter').val(),
                status: $('#status_filter').val(),
                orderby: $('#order_by').val(),
                sortby: $('#sort_by').val()
            },
            success: function(data)
            {
                $('#purchase-order-data').html(data);
            }
        });
    }

    $(document).on('click', '.pagination a', function(event){
        event.preventDefault();
        var page = $(this).attr('href').split('page=')[1];
        fetch_data(page);
    });

    $('#supplier_filter').select2({
        ajax: {
            url: '{{ route("kontak.supplier") }}',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    search: params.term
                };
            },
            processResults: function (data) {
                return {
                    results: $.map(data, function (item) {
                        return {
                            text: item.nama,
                            id: item.id
                        }
                    })
                };
            },
            cache: true
        },
        minimumInputLength: 3,
    });

    $('#btnFilter').on('click', function(e){
        fetch_data(1);
    });

    function filterReset(){
      $('#supplier_filter').val('').trigger('change');
      $('#status_filter').val('');
      fetch_data(1);
    }

    function downloadExcel(){
      let url = `/laporan/logistik/stok/export-excel?supplier=${$('#supplier_filter').val()}&status=${$('#status_filter').val()}&orderby=${$('#order_by').val()}&sortby=${$('#sort_by').val()}`;
      window.open(url, "_blank");
    }

    function printData(){
      let url = `/laporan/logistik/stok/preview-pdf?supplier=${$('#supplier_filter').val()}&status=${$('#status_filter').val()}&orderby=${$('#order_by').val()}&sortby=${$('#sort_by').val()}`;
      window.open(url, "_blank");
    }
  </script>
@endpush