@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">Arus Kas</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 Arus Kas</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="tag" id="tag" class="form-control select2Custom">
                  {{-- <option value="">Semua Tag</option> --}}
                  @foreach ($tags as $key => $val)
                    <option value="{{ $key }}">{{ $val }}</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.arus-kas.table', ['data' => $data])
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('custom-scripts')
  <script>
    const fetch_data = (page, options) => {
      $.ajax({
        url: "/finance/laporan/arus-kas",
        data: {
          tanggal: options.tanggal || '',
        },
        beforeSend: () => {
          beforeAjax();
        },
        success: function(data) {
          swal.close();
          $('#jurnal-data').html(data);
        },
        error: function(xhr, status, error) {
          swal.close();
          errorSend(xhr, error);
        }
      });
    }

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

    const filterReset = () => {
      $('#tanggal').val('');
      fetch_data(1, {});
    }
  </script>
@endpush