@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">Faktur Pembelian</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 Faktur Pembelian
      </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" id="supplier" 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="tipe" id="tipe" class="form-control select2Custom">
                <option value="">Pilih Tipe</option>
                <option value="SURAT_JALAN">Surat Jalan</option>
                <option value="PO">PO</option>
              </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"
                value="{{ date('01/m/Y', strtotime($startDate)) }} - {{ date('d/m/Y', strtotime($endDate)) }}"
                class="form-control" placeholder="Tanggal Invoice" 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="no_faktur">Nomor Faktur</option>
                <option value="nama_supplier">Supplier</option>
                <option value="tanggal">Tanggal</option>
                <option value="tanggal_jatuh_tempo">Tanggal Jatuh Tempo</option>
                <option value="tipe">Tipe</option>
                <option value="status">Status</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-pembelian-data">
                @include('pages.laporan.pembelian.invoice-pembelian.pagination-invoice-pembelian',
                ['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-pembelian?page=" + page,
      data: {
        supplier: $('#supplier').val(),
        tipe: $('#tipe').val(),
        status: $('#status').val(),
        daterange: $('#daterange').val(),
        orderby: $('#order_by').val(),
        sortby: $('#sort_by').val()
      },
      success: function(data) {
        $('#invoice-pembelian-data').html(data);
      }
    });
  }

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

  $('#supplier').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: {
      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(){
    $('#supplier').val('').trigger('change');
    $('#tipe').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-pembelian/export-excel?supplier=${$('#supplier').val()}&tipe=${$('#tipe').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-pembelian/preview-pdf?supplier=${$('#supplier').val()}&tipe=${$('#tipe').val()}&status=${$('#status').val()}&daterange=${$('#daterange').val()}&orderby=${$('#order_by').val()}&sortby=${$('#sort_by').val()}`;
    window.open(url, "_blank");
  }
</script>
@endpush