@extends('layout.master-laporan')

@push('plugin-styles')
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
  <style type="text/css">
		.pagination li{
			float: left;
			list-style-type: none;
			margin:5px;
		}
	</style>
@endpush

@section('content')
  <nav class="page-breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#!">Pembelian</a></li>
      <li class="breadcrumb-item"><a href="{{ route('pembelian.invoice.index') }}">Invoice Pembelian</a></li>
      <li class="breadcrumb-item active" aria-current="page">Laporan Pembayaran Invoice</li>
    </ol>
  </nav>

  <div class="row">
    <div class="col-md-12 grid-margin stretch-card">
      <div class="card">
        <div class="card-header bg-white">
          <form id="formFilter">
            <div class="row">
              <div class="col-12">
                <h6 class="card-title">Data Laporan Pembayaran Invoice</h6>
              </div>
              <div class="col-12 col-md-4">
                <div class="mb-2">
                  <label for="daterange">Tanggal Bayar</label>
                  <input type="text" name="daterange" id="daterange" class="form-control" value="{{ request()->daterange }}" placeholder="Tanggal Bayar" readonly>
                </div>
              </div>
              <div class="col-12 col-md-4">
                <div class="mb-2">
                  <label for="metodeBayar">Metode Pembayaran</label>
                  <select name="metodeBayar" id="metodeBayar" class="form-control select2Custom">
                    <option value="">Pilih Metode Pembayaran</option>
                    @foreach ($dataMetodeBayar as $item)
                      <option value="{{$item->id}}" @selected(request()->metodeBayar == $item->id) >{{$item->nama}}</option>
                    @endforeach
                  </select>
                </div>
              </div>
              <div class="col-12 col-md-4">
                <div class="mb-2">
                  <label for="supplier">Supplier</label>
                  <select name="supplier" id="supplier" class="form-control select2Custom">
                    <option value="">Pilih Supplier</option>
                    @foreach ($dataSupplier as $item)
                      <option value="{{$item->id}}" @selected(request()->supplier == $item->id)>{{$item->nama}}</option>
                    @endforeach
                  </select>
                </div>
              </div>
              <div class="col-12 col-md-4">
                <div class="mb-2">
                  <label for="tipe">Tipe</label>
                  <select name="tipe" id="tipe" class="form-control select2Custom">
                    <option value="">Pilih Tipe</option>
                    <option value="INVOICE" @selected(request()->tipe == 'INVOICE')>Pelunasan</option>
                    <option value="PO" @selected(request()->tipe == 'PO')>Uang Muka</option>
                  </select>
                </div>
              </div>
              <div class="col-12 col-md-4">
                <div class="mb-2">
                  <label for="show">Show</label>
                  <select name="show" id="show" class="form-control select2Custom">
                    <option value="10" @selected(request()->show == 10)>10</option>
                    <option value="25" @selected(request()->show == 25)>25</option>
                    <option value="50" @selected(request()->show == 50)>50</option>
                    <option value="100" @selected(request()->show == 100)>100</option>
                  </select>
                </div>
              </div>
              <div class="col-12 col-md-4">
                <div class="mb-2">
                  <label for="urutkan">Urutkan</label>
                  <select name="urutkan" id="urutkan" class="form-control select2Custom">
                    <option value="old" @selected(request()->urutkan == 'old')>Tanggal Terlama</option>
                    <option value="new" @selected(request()->urutkan == 'new')>Tanggal Terbaru</option>
                  </select>
                </div>
              </div>
              <div class="col-12">
                <div class="mb-2">
                  <label for="detail">Pencarian Detail</label>
                  <input type="text" name="detail" id="detail" class="form-control" value="{{ request()->detail }}" placeholder="Pencarian Detail">
                </div>
              </div>
              <div class="col-12">
                <div class="row">
                  <div class="col-6 pe-1">
                    <button type="submit" 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="filterReset()">Reset</button>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table id="datatable-serverside" class="table table-sm" style="width: 100%">
              <thead>
                <tr>
                  <th class="kolomNomor">No.</th>
                  <th>Nomor</th>
                  <th>Nomor Invoice/PO</th>
                  <th>Supplier</th>
                  <th>Tanggal Bayar</th>
                  <th>Tipe</th>
                  <th>Metode Bayar</th>
                  <th>Bukti Transfer</th>
                  <th>No Rek</th>
                  <th>Keterangan</th>
                  <th>Created By</th>
                  <th class="text-end">Total Bayar</th>
                </tr>
              </thead>
              <tbody>
                @forelse ($data as $no => $item)
                  <tr>
                    <td> {{$no + 1}} </td>
                    <td> {{$item->bayarInvoice->nomor}} </td>
                    <td> {{($item->invoice->no_faktur ?? $item->po->nomor_po)}} </td>
                    <td> {{($item->bayarInvoice->supplier->kode ?? '') . ' | ' . ($item->bayarInvoice->supplier->nama ?? '')}} </td>
                    <td> {{date('d-m-Y', strtotime($item->bayarInvoice->tanggal))}} </td>
                    <td> {{ $item->bayarInvoice->tipe_label }} </td>
                    <td> {{$item->bayarInvoice->metodebayar->nama ?? '-'}} </td>
                    <td> {{$item->bayarInvoice->nomor_transaksi_bank ?? '-'}} </td>
                    <td> {{replaceLastDigitsWithAsterisks($item->bayarInvoice->rekening->no_rekening ?? '-')}} </td>
                    <td> {{$item->bayarInvoice->keterangan ?? '-'}} </td>
                    <td> {{$item->bayarInvoice->createdBy->name ?? '-'}} </td>
                    <td class="text-end"> {{formatNumber($item->total_bayar)}} </td>
                  </tr>
                @empty
                  <tr>
                    <td colspan="12" class="text-center">Belum Ada Data</td>
                  </tr>
                @endforelse
                <tr>
                  <td colspan="10"></td>
                  <td>
                    <h5>Total</h5>
                  </td>
                  <td class="text-end">
                    <h5>{{ formatNumber($total) }}</h5>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <div class="mt-3">
            {!! $data->appends($_GET)->links() !!}
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('plugin-scripts')
  <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
@endpush

@push('custom-scripts')
  <script defer>
    const formFilter = () => {
      event.preventDefault();
      console.log('formFilter');
    }

    const filterReset = () => {
      $('#daterange').val('');
      $('#metodeBayar').val('').trigger('change');
      $('#supplier').val('').trigger('change');
      $('#tipe').val('').trigger('change');
      $('#show').val('10').trigger('change');
      $('#urutkan').val('old').trigger('change');
      $('#detail').val('');

      $('#formFilter').submit();
    }

    $('input[name="daterange"]').daterangepicker({
      autoUpdateInput: false,
      locale: {
        cancelLabel: 'Clear'
      }
    });

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

    $('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
      $(this).val('');
    });
  </script>
@endpush