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

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
        <div class="card-header">
          <h4>Laporan Purchase Order</h4>
        </div>
      <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">
                    <input type="text" name="daterange" id="daterange" class="form-control" value="{{ date('01/m/Y', strtotime($startDate)) }} - {{ date('d/m/Y', strtotime($endDate)) }}" placeholder="Tanggal PO" readonly>
                </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="nomor_po">Nomor PO</option>
                        <option value="tanggal_po">Tanggal PO</option>
                        <option value="nama_supplier">Supplier</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-sm 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-sm 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-sm 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-sm 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.pembelian.po.pagination-po', ['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/pembelian/po?page=" + page,
            data: {
                supplier: $('#supplier_filter').val(),
                daterange: $('#daterange').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];
        var supplier = $('#supplier_filter').val();
        var daterange = $('#daterange').val();
        fetch_data(page, supplier, daterange);
    });

    $('#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,
    });

    $('input[name="daterange"]').daterangepicker({
      autoUpdateInput: false,
      locale: {
        format: 'DD/MM/YYYY',
        cancelLabel: 'Clear'
      }
    });
    $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
      $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
    });
    $('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
      $(this).val('');
    });

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

    function filterReset(){
        $('#supplier_filter').val('').trigger('change');
        $('#daterange').val("{{ date('01/m/Y', strtotime($startDate)) }} - {{ date('d/m/Y', strtotime($endDate)) }}");
        $('#order_by').val('').change();
        $('#sort_by').val('ASC').change();
        fetch_data(1);
    }

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

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