@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="#">Master</a></li>
      <li class="breadcrumb-item"><a href="/master/pajak">Pajak</a></li>
      <li class="breadcrumb-item active" aria-current="page">{{ $pajak->nama }}</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 onsubmit="formFilter()">
            <div class="row">
              <div class="col-12">
                <h6 class="card-title">List Transaksi ({{ $pajak->nama }})</h6>
              </div>
              <div class="col-12 col-md-3">
                <div class="mb-2">
                  <select name="tipe" id="tipe" class="form-control select2Custom">
                    <option value="">Pilih Tipe</option>
                    @foreach ($listType as $key => $item)
                      <option value="{{ $key }}">{{ $item }}</option>
                    @endforeach
                  </select>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="mb-2">
                  <input type="text" name="daterange" id="daterange" class="form-control"
                    placeholder="Tanggal Invoice Pembelian" readonly>
                </div>
              </div>
              <div class="col-12 col-md-3">
                <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">
          <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
            <thead>
              <tr>
                <th class="kolomNomor">No.</th>
                <th>Nomor Referensi</th>
                <th>Tanggal</th>
                <th>Tipe</th>
                <th>Rate</th>
                <th>Amount</th>
              </tr>
            </thead>
            <tfoot>
              <tr>
                <th colspan="5" class="text-end">Total</th>
                <th>0</th>
              </tr>
            </tfoot>
          </table>
        </div>
        <div class="card-footer" style="text-align: right;">
          <a class="btn btn-light btn-custom8" href="/master/pajak">Kembali</a>
        </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>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.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>
    let URLs = "/master/pajak/{{ $pajak->id }}/list-transaksi";

    let datatable = $('#datatable-serverside').DataTable({
      lengthMenu: lengthMenuDatatable(),
      processing: true,
      serverSide: true,
      ajax: URLs,
      columns: [
        {
          data: 'DT_RowIndex',
          name: 'id',
          searchable: false
        },
        {
          data: 'nomor',
          name: 'nomor',
          searchable: false,
          orderable: false
        },
        {
          data: 'tanggal_transaksi',
          name: 'tanggal_transaksi',
        },
        {
          data: 'type',
          name: 'type',
          render: function(data) {
            return data.replace('_', ' ');
          }
        },
        {
          data: 'rate',
          name: 'rate',
          render: function(data) {
            return formatNumber(Math.abs(data)) + '%';
          },
          class: 'text-end'
        },
        {
          data: 'amount',
          name: 'amount',
          render: function(data) {
            return formatNumber(Math.abs(data));
          },
          class: 'text-end'
        },
      ],
      footerCallback: function (row, data, start, end, display) {
        let api = this.api();
        api.column(5).footer().innerHTML = formatNumber(Math.abs(data[0]?.total_amount ?? 0));
      }
    });

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

    function formFilter() {
        event.preventDefault();
        let url = URLs + `?daterange=${$('#daterange').val()}&tipe=${$('#tipe').val()}`;
        datatable.ajax.url(url).load();
    }

    function filterReset() {
        $('#tipe').val('').trigger('change');
        $('#daterange').val('');
        datatable.ajax.url(URLs).load();
    }
  </script>
@endpush