@extends('layout.master')

@push('plugin-styles')
  <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="#!">Finance</a></li>
      <li class="breadcrumb-item" aria-current="page">Laporan</li>
      <li class="breadcrumb-item active" aria-current="page">Jurnal</li>
    </ol>
  </nav>

  <div class="row">
    <div class="col-md-12 grid-margin stretch-card">
      <div class="card">
        <div class="card-header bg-white">
          <div class="row">
            <div class="col-12 mb-3">
              <h3>Laporan Jurnal</h3>
            </div>
            <div class="col-12 col-md-4">
              <div class="mb-2">
                <input type="text" name="tanggal" id="tanggal" class="form-control daterange-picker"
                  placeholder="Tanggal Transaksi" readonly>
              </div>
            </div>
            <div class="col-12 col-md-4">
              <div class="mb-2">
                <select name="transaksi" id="transaksi" class="form-control select2Custom">
                  <option value="">Semua Transaksi</option>
                  @foreach ($listTransaksi as $key => $val)
                    <option value="{{ $key }}">{{ $val }}</option>
                  @endforeach
                </select>
              </div>
            </div>
            <div class="col-12 col-md-4">
              <div class="mb-2">
                <select name="coa" id="coa" class="form-control select2Custom">
                  <option value="">Semua COA</option>
                  @foreach ($listCoa as $coa)
                    <option value="{{ $coa->id }}">{{ $coa->kode_nama }}</option>
                  @endforeach
                </select>
              </div>
            </div>

            <div class="col-12 col-md-6 col-lg-3">
              <div class="row">
                <div class="col-4 pe-1">
                  <button type="button" onclick="filter()" class="btn btn-primary btn-custom2 w-100" title="Filter"><span
                      class="mdi mdi-filter"></span></button>
                </div>
                <div class="col-4">
                  <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-4 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>
        <div class="card-body">
          <div class="table-responsive" id="jurnal-data">
            @include('pages.finance.laporan.jurnal.table', ['data' => $data])
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('custom-scripts')
  <script>
    const fetch_data = (page, options) => {
      $.ajax({
        url: "/finance/laporan/jurnal?page=" + page,
        data: {
          tanggal: options.tanggal || '',
          transaksi: options.transaksi || '',
          coa: options.coa || ''
        },
        beforeSend: () => {
          $('#jurnal-data table tbody').html(
            `<tr>
              <td colspan="6" class="text-center">
                <div class="spinner-border text-primary" role="status">
                  <span class="visually-hidden">Loading...</span>
                </div>
              </td>
            </tr>`
          );
        },
        success: function(data) {
          $('#jurnal-data').html(data);
        }
      });
    }

    const filter = () => {
      const options = {
        tanggal: $('#tanggal').val(),
        transaksi: $('#transaksi').val(),
        coa: $('#coa').val()
      }
      fetch_data(1, options);
    }

    const filterReset = () => {
      $('#tanggal').val('');
      $('#transaksi').val('').trigger('change');
      $('#coa').val('').trigger('change');
      fetch_data(1, {});
    }

    $(document).on('click', '.pagination a', function(event) {
      event.preventDefault();
      const page = $(this).attr('href').split('page=')[1];
      const options = {
        tanggal: $('#tanggal').val(),
        transaksi: $('#transaksi').val(),
        coa: $('#coa').val()
      }
      fetch_data(page, options);
    });
  </script>
@endpush