@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">Invoice Ekspedisi</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 Invoice Ekspedisi
      </h5>
      <div class="card-body">
        <div class="row">
          <div class="col-12 col-md-6 col-lg-3">
            <div class="mb-2">
              <select name="ekspedisi" id="ekspedisi" class="form-control select2Custom">
                <option value="">Pilih Ekspedisi</option>
                @foreach ($dataEkspedisi as $item)
                <option value="{{$item->id}}">{{$item->nama}}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-12 col-md-6 col-lg-3">
            <div class="mb-2">
              <select name="status" id="status" class="form-control select2Custom">
                <option value="">Pilih Status</option>
                @foreach ($listStatus as $key => $item)
                <option value="{{$key}}">{{$item}}</option>
                @endforeach
              </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 Invoice Ekspedisi" 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">Nomor Invoice</option>
                <option value="nama_ekspedisi">Ekspedisi</option>
                <option value="tanggal">Tanggal</option>
                <option value="status">Status</option>
                <option value="grand_total">Total</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="invoice-ekspedisi-data">
                @include('pages.laporan.pembelian.invoice-ekspedisi.pagination-invoice-ekspedisi', ['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/invoice-ekspedisi?page=" + page,
      data: {
        ekspedisi: $('#ekspedisi').val(),
        status: $('#status').val(),
        daterange: $('#daterange').val(),
        orderby: $('#order_by').val(),
        sortby: $('#sort_by').val()
      },
      success: function(data)
      {
        $('#invoice-ekspedisi-data').html(data);
      }
    });
  }

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

  $('input[name="daterange"]').daterangepicker({
    autoUpdateInput: false,
    locale: {
      cancelLabel: 'Clear',
      format: 'DD/MM/YYYY'
    }
  });
  $('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(){
    $('#ekspedisi').val('').trigger('change');
    $('#status').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/invoice-ekspedisi/export-excel?ekspedisi=${$('#ekspedisi').val()}&status=${$('#status').val()}&daterange=${$('#daterange').val()}&orderby=${$('#order_by').val()}&sortby=${$('#sort_by').val()}`;
    window.open(url, "_blank");
  }

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