@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="#!">Finance</a></li>
      <li class="breadcrumb-item active" aria-current="page">Jurnal Umum</li>
    </ol>
  </nav>

  <div class="row">
    <div class="col-md-12 grid-margin stretch-card">
      <div class="card">
        <div class="card-header">
          <h4>Data Jurnal Umum</h4>
        </div>
        <div class="card-body">
          <div class="col-12">
          </div>
          <div class="row">
            <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-3">
                <div class="row">
                    <div class="col-6 pe-1">
                        <button type="button" id="btnFilter" 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>
          <div class="table-responsive">
            <table id="datatable-serverside" class="table" style="width: 100%">
              <thead>
                <tr>
                  <th class="kolomNomor">No.</th>
                  <th>Tanggal</th>
                  <th>Nomor</th>
                  <th>Jenis</th>
                  <th>Keterangan</th>
                  <th class="kolomAksi">Aksi</th>
                </tr>
              </thead>
            </table>
          </div>
        </div>
        <div class="card-footer text-end">
          @can('jurnal-umum.create')
            <a class="btn btn-info btn-custom1" href="{{ route('finance.jurnal-umum.create') }}">Tambah Data</a>
          @endcan
        </div>
      </div>
    </div>
  </div>

  @include('pages.finance.jurnal-umum.modal')
@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>
    let datatable = $('#datatable-serverside').DataTable({
      lengthMenu: lengthMenuDatatable(),
      processing: true,
      serverSide: true,
      ajax: "{{ route('finance.jurnal-umum.index') }}",
      columns: [{
          data: 'DT_RowIndex',
          name: 'id'
        },
        {
          data: 'tanggal',
          name: 'tanggal'
        },
        {
          data: 'nomor',
          name: 'nomor'
        },
        {
          data: 'invert',
          name: 'invert'
        },
        {
          data: 'keterangan',
          name: 'keterangan'
        },
        {
          data: 'aksi',
          name: 'aksi',
          searchable: false,
          orderable: false
        },
      ],
      order: [
        [1, 'desc']
      ]
    });

    function hapus(id) {
      swal({
        title: "Konfirmasi",
        text: "Apakah anda ingin menghapus data ?",
        type: "warning",
        showCancelButton: true,
        cancelButtonText: "Batal",
        confirmButtonText: "Lanjutkan"
      }).then(function() {
        let url = "{{ route('finance.jurnal-umum.destroy', ':id') }}";
        url = url.replace(':id', id);
        sendJson(url, {
          _token: "{{ csrf_token() }}"
        }, rSends);
      })
    }

    function rSends(data) {
      let titles = data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info");
      swal({
        title: titles,
        text: data.response,
        type: data.type,
        confirmButtonText: "OK"
      }).then(function() {
        if (data.type == "success") {
          datatable.ajax.reload();
        }
      })
    }

    const lihatLaporanJurnal = (id, nomor) => {
      $('#modalLaporanJurnal #nomor').text(`#${nomor}`);
      let url = "{{ route('finance.jurnal-umum.lihat-laporan-jurnal', ':id') }}";
      url = url.replace(':id', id);
      sendJson(url, {_token: "{{ csrf_token() }}"}, callbackLihatLaporanJurnal);
    }

    const callbackLihatLaporanJurnal = (data) => {
      let tbody = $('#modalLaporanJurnal tbody');
      tbody.html('');
      data.forEach((item, index) => {
        let tr = $('<tr></tr>');
        tr.append('<td>' + (index + 1) + '</td>');
        tr.append('<td>' + formatDate(item.date) + '</td>');
        tr.append('<td>' + item.coa?.kode + '</td>');
        tr.append('<td>' + item.coa?.nama + '</td>');
        tr.append('<td class="text-end">' + (item.type == 'debit' ? formatNumber(item.amount, 2) : formatNumberComma(0)) + '</td>');
        tr.append('<td class="text-end">' + (item.type == 'credit' ? formatNumber(item.amount, 2) : formatNumberComma(0)) + '</td>');
        tbody.append(tr);
      });
      $('#modalLaporanJurnal tfoot').html(`
        <tr>
          <th colspan="4">Total</th>
          <th class="text-end">${formatNumber(data.reduce((acc, curr) => curr.type == 'debit' ? acc + parseFloat(curr.amount) : acc, 0), 2)}</th>
          <th class="text-end">${formatNumber(data.reduce((acc, curr) => curr.type == 'credit' ? acc + parseFloat(curr.amount) : acc, 0), 2)}</th>
        </tr>
      `);
      swal.close();
      $('#modalLaporanJurnal').modal('show');
    }

    var URLs = "{{ url('finance/jurnal-umum') }}";
    $('#btnFilter').on('click', function(e){
      var tanggal = $('#tanggal').val();
      if((tanggal != null && tanggal != '')){
          var URL_filter = URLs + `?tanggal=${$('#tanggal').val()}`;
          datatable.ajax.url(URL_filter).load();
      }else{
          swal('Perhatian', 'Pastikan Sudah Menentukan Tanggal', 'info');
      }
    });

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