@extends('templates.master')

@section('breadcrumb')
  <div class="content content-full">
    <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
      <div class="flex-grow-1">
        <h1 class="h3 fw-bold mb-2">
          @php
          $title = "Transaksi Jurnal Kas"
          @endphp
          {{ strtoupper($title) }}
        </h1>
      </div>
      <nav class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3" aria-label="breadcrumb">
        <ol class="breadcrumb breadcrumb-alt">
          <li class="breadcrumb-item">
            <a class="link-fx" href="javascript:void(0)">Dashboard</a>
          </li>
          <li class="breadcrumb-item" aria-current="page">
            {{ ucfirst($title) }}
          </li>
        </ol>
      </nav>
    </div>
  </div>
@endsection

@section('content')
  <div class="block block-rounded">
    <div class="block-header block-header-default">
      <div class="block-title">
        <button type="button" class="btn btn-sm btn-primary" id="create" onclick="showModalCoe()">
          <i class="fa fa-plus"></i> REGISTRASI BARU
        </button>
        <button type="button" class="btn btn-sm btn-secondary" id="reset" onclick="resetFilter()">
          <i class="si si-action-undo"></i> RESET FILTER
        </button>
      </div>
      <button type="button" class="btn-block-option" data-toggle="block-option" data-action="fullscreen_toggle">
        <i class="si si-size-fullscreen"></i>
      </button>
    </div>
    <div class="block-content block-content-full">
      <div class="col-md-6 col-sm-12">
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <select name="kdtelr" id="filter-kdtelr" class="form-control form-select mb-4" onchange="filterByTeler(this.value)">
                <option class="fw-bold" value="">-- SEMUA NOMOR KAS --</option>
                @foreach($teler as $item)
                <option value="{{ $item['KDTELR'] }}">{{ $item['NMTELR'] }} ( {{ $item['KDTELR'] }} ) </option>
                @endforeach
              </select>
            </div>
          </div>
        </div>
      </div>
      <div class="table-responsive">
        @csrf
        <table class="table table-bordered table-striped table-vcenter table-sm" id="tbl-jurnal-kas" style="width:100%">
          <thead class="thead-light">
            <tr>
              <th class="dt-head-center">No</th>
              <th class="dt-head-center">No. Transaksi</th>
              <th class="dt-head-center">No. Ledger</th>
              <th class="dt-head-center">Nama Ledger</th>
              <th class="dt-head-center">Penarikan</th>
              <th class="dt-head-center">Setoran</th>
              <th class="dt-head-center">Keterangan</th>
              <th class="dt-head-center">No. Kas</th>
              <th class="dt-head-center">Aksi</th>
            </tr>
          </thead>
          <tfoot>
            <tr class="table-success">
              <th colspan="4" class="dt-head-center">TOTALS</th>
              <th class="dt-head-right"></th>
              <th class="dt-head-right"></th>
              <th colspan="3"></th>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>

  <!-- Modal Tambah Atau Ubah Data -->
  <div class="modal" id="modal-create-or-edit" tabindex="-1" aria-labelledby="modalDetailTransaksi" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content block-content-full">
        <div id="block-create-or-edit" class="block block-rounded block-mode-fullscreen mb-0">
          <div class="block-header block-header-default">
            <h3 class="block-title">
              {{ ucfirst($title) }}
            </h3>
            <div class="block-options d-flex justify-content-between">
              <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="close">
                <i class="si si-close"></i>
              </button>
            </div>
          </div>
          <div class="block-content">
            <div class="row justify-content-center py-sm-3">
              <div class="col-sm-10 col-md-6">
                <form action="" id="registration-form">
                  @csrf
                  <div class="col-md-12">
                    <div class="mb-4">
                      <div class="form-group">
                        <div class="input-group">
                          <label class="form-label" for="notran">No. Transaksi</label>
                          <label class="form-label" for="norefs">No. Refs</label>
                          <label class="form-label" for="tglbyr">Tanggal</label>
                        </div>
                        <div class="input-group">
                          <input type="text" class="form-control" name="notran" id="notran" readonly>
                          <input type="text" class="form-control" name="norefs" id="norefs">
                          <input type="date" class="form-control" name="tglbyr" id="tglbyr">
                          <input type="hidden" name="tgltra" id="tgltra">
                        </div>
                      </div>
                    </div>
                    <div class="mb-4">
                      <div class="form-group">
                        <div class="input-group">
                          <label class="form-label label-select" for="kdtelr">Kas</label>
                          <label class="form-label" for="jumdeb">Kas Debet</label>
                          <label class="form-label" for="jumcre">Kas Kredit</label>
                        </div>
                        <div class="input-group">
                          <select name="kdtelr" id="kdtelr" class="form-select">
                            <option value="">-- Pilih --</option>
                            @isset($dropdown['teler'])
                              @foreach ($dropdown['teler'] as $item)
                                <option value="{{ $item['KDTELR'] }}">{{ $item['NMTELR'] }} ( {{ $item['KDTELR'] }} )</option>
                              @endforeach
                            @endisset
                          </select>
                          <input type="text" class="form-control number-separator text-end" name="jumdeb" id="jumdeb" value="0" onkeyup="handleNullable(this)">
                          <input type="text" class="form-control number-separator text-end" name="jumcre" id="jumcre" value="0" onkeyup="handleNullable(this)">
                        </div>
                      </div>
                    </div>
                    <div class="mb-4">
                      <div class="form-group">
                          <label class="form-label">No. Ledger</label>
                          <div class="input-group">
                            <div id="r-dropdown" class="dropdown dropend r-dropdown">
                              <button type="button" class="btn btn-primary dropdown-toggle" id="dropdown-ledger" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                -- Pilih --
                              </button>
                              <div id="dropdown-menu-ledger" class="dropdown-menu fs-sm pt-0" aria-labelledby="dropdown-ledger">
                                @isset($dropdown['chart'])
                                  <input type="text" class="form-control r-boxshadow rounded-0 filter-dropdown" placeholder="Search.." id="filter-ledger" onkeyup="searchLedger(this)">
                                  @foreach ($dropdown['chart'] as $item)
                                    <a class="dropdown-item btn" data-id="{{ $item['NOACCT'] }}" data-name="{{ $item['NMACCT'] }}" onclick="setLedger(this)">
                                      ( {{ $item['NOACCT'] }} )
                                      <span>{{ $item['NMACCT'] }}</span>
                                    </a>
                                  @endforeach
                                @endisset
                              </div>
                            </div>
                            <input type="text" class="form-control" name="noacct" id="noacct">
                            <input type="text" class="form-control" name="nmacct" id="nmacct">
                          </div>
                        </div>
                    </div>
                    <div class="mb-4">
                      <div class="form-group">
                        <label class="form-label">Keterangan</label>
                        <textarea name="ketera" id="ketera" class="form-control"></textarea>
                      </div>
                    </div>
                    <div class="mb-4">
                      <div class="d-flex justify-content-end">
                        <button type="button" id="save-jurnal-kas" class="btn btn-sm btn-primary" onclick="saveData()">
                          <div id="save-jurnal-kas-spinner" style="display: none;">
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" ></span>
                            Loading...
                          </div>
                          <div id="save-jurnal-kas-submit">{{ strtoupper("Simpan") }}</div>
                        </button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Modal Tambah Atau Ubah Data -->
@endsection

@section('js')
<script type='text/javascript'>
  let table = $('#tbl-jurnal-kas').DataTable({
    processing: true,
    serverSide: false,
    autoWidth: false,
    order: [[1, 'desc']],
    search: {
      regex: true
    },
    ajax: '{{ url("transaksi/jurnal-kas") }}/{{ session()->get("kantor") }}',
    columns: [
      {
        data: 'DT_RowIndex',
        name: 'ROWIDX',
      },
      {
        data: 'NOTRAN',
        name: 'NOTRAN'
      },
      {
        data: 'NOACCT',
        name: 'NOACCT'
      },
      {
        data: 'NMACCT',
        name: 'NMACCT'
      },
      {
        data: 'JUMDEB',
        name: 'JUMDEB'
      },
      {
        data: 'JUMCRE',
        name: 'JUMCRE'
      },
      {
        data: 'KETERA',
        name: 'KETERA'
      },
      {
        data: 'KDTELR',
        name: 'KDTELR'
      },
      {
        data: 'NOTRAN',
        name: 'ACTION'
      },
    ],
    columnDefs: [
      {
        targets: 0,
        className: 'dt-body-center',
        width: '60px',
        orderable: false,
        searchable: false
      },
      {
        targets: [2, 3],
        orderable: false
      },
      {
        targets: [4, 5],
        className: 'dt-body-right',
        render: function(data) {

          return app.numberSeparator(data);
        }
      },
      {
        targets: 7,
        orderable: false,
        visible: false
      },
      {
        targets: -1,
        className: 'text-center',
        orderable: false,
        searchable: false,
        render: function(data) {
          let button = '<div class="btn-group">';
            button += '<button id="edit" class="btn btn-sm btn-success" data-id="' + data + '" onclick="editData(this)">';
            button += '<i class="fa fa-pencil-alt"></i>';
            button += '</button>';
            button += '<button id="delete" class="btn btn-sm btn-danger" data-id="' + data + '" onclick="deleteData(this)">';
            button += '<i class="fa fa-trash-alt"></i>';
            button += '</button>';
            button += '</div>';

          return button; 
        }
      }
    ],
    createdRow: function (row, data, dataIndex) {
        $(row).children(':eq(0)').addClass('fw-bold');
    },
    footerCallback: function() {
      const api = this.api();
      api.columns([4, 5]).every( function () {
        if(this.data().length !== 0) {
          const sum = this
              .data()
              .reduce(function (a,b) {
                  return parseInt(a) + parseInt(b);
              });
      
          $(this.footer()).text(app.numberSeparator(sum.toString()));
        }
        else {
          $(this.footer()).text('0');
        }
      });
    },
    initComplete: function () {
      setFilterOnHeadTable();
      app.scrollOnTop();
    }
  });

  // Handle Reorder Number Of table
  table.on('order.dt search.dt', function () {
      let i = 1;

      table.cells(null, 0, { search: 'applied', order: 'applied' }).every(function (cell) {
          this.data(i++);
      });
  }).draw();

  // Handle Clear Result After Filter Ledger
  $('#r-dropdown').on('hidden.bs.dropdown', function () {
    const tlrFilterElm = $('#filter-ledger');

    tlrFilterElm.val('');
    tlrFilterElm.siblings('.dropdown-item').show();
  });

  // Handle Modal Create Or Edit Transaksi Close
  $('#modal-create-or-edit').on('hidden.bs.modal', function () {
    const buttonElm = $('#dropdown-ledger');
    const formElm = $('#registration-form');
    const noacctElm = $('#noacct');
    const nmacctElm = $('#nmacct');
    
    formElm[0].reset();
    buttonElm.prop('disabled', false);
    noacctElm.prop('readonly', false);
    nmacctElm.prop('readonly', false);
  });

  // Add Element Not Found To Dropdown
  if($('.r-dropdown .dropdown-menu').length) {
    $('.r-dropdown .dropdown-menu').append('<p class="r-notfound" style="display: none; padding: .6rem 0.8rem;">Not Found.</p>');
  }

  // Handle Select Ledger
  function setLedger(self) {    
    const noLedger = $(self).data('id');
    const nameLedger = $(self).data('name');

    $('input[name=noacct]').val(noLedger);
    $('input[name=nmacct]').val(nameLedger);
  };

  // Handle Search Ledger
  function searchLedger(self) {
    const value = self.value;
    const siblings = $(self).siblings('.dropdown-item');
    let found = 0;

    $(siblings).each(function(idx, elm) {
      const name = $(elm).data('name');
      
      if (name.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
        $(elm).show();
        found = found + 1;
      }
      else {
        $(elm).hide();
      }    
    });

    if(found === 0) {
      $(self).siblings('.r-notfound').show();
    }
    else {
      $(self).siblings('.r-notfound').hide();
    }
  };

  // Handle Input If Value Undifined
  function handleNullable(self) {
    const value = self.value;
    if(value === '') {
      $(self).val('0');
    }
  };

  //Handle Filter By Kode Teler
  function filterByTeler(value) {
    const noctFilterElm = $('#filter-noacct');
    const nmctFilterElm = $('#filter-nmacct');
    const noacct = $.fn.dataTable.util.escapeRegex(noctFilterElm.val());
    const nmacct = $.fn.dataTable.util.escapeRegex(nmctFilterElm.val());
    const teler = $.fn.dataTable.util.escapeRegex(value);

    table
      .columns(2).search(noacct)
      .columns(3).search(nmacct)
      .columns(7).search(teler)
      .draw();
  }

  // Handle Edit Transaksi
  function editData(self) {
    const modalElm = $('#modal-create-or-edit');
    const buttonElm = $('#dropdown-ledger');
    const data = table.row($(self).parents('tr')).data();
    const tglbyr = data.TGLBYR.split(' ')[0];
    const tgltra = data.TGLTRA.split(' ')[0];

    $('#notran').val(data.NOTRAN);
    $('#tglbyr').val(tglbyr);
    $('#tgltra').val(tgltra);
    $('#norefs').val(data.NOREFS);
    $('#kdtelr').val(data.KDTELR);
    $('#jumdeb').val(app.numberSeparator(data.JUMDEB));
    $('#jumcre').val(app.numberSeparator(data.JUMCRE));
    $('#noacct').val(data.NOACCT);
    $('#noacct').prop('readonly', true);
    $('#nmacct').val(data.NMACCT);
    $('#nmacct').prop('readonly', true);
    $('#ketera').val(data.KETERA);
    
    buttonElm.prop('disabled', true);  
    modalElm.modal('show');
  };

  // Handle Save Data
  function saveData() {
    const formElm = $('#registration-form');
    const formData = formElm.serializeArray();
    const unFormData = unserialize(formElm.serialize());

    if(unFormData.tglbyr === '') {
      document.activeElement.blur();

      swal.fire(
        'Informasi',
        'Tentukan Tanggal!',
        'warning'
      )
      .then(function() {
        $("#tglbyr").focus();
      });

      return;
    }

    if(unFormData.kdtelr === '') {
      document.activeElement.blur();

      swal.fire(
        'Informasi',
        'Pilih Kas!',
        'warning'
      ).then(function() {
        $('#kdtelr').focus();
      });

      return;
    }

    if(unFormData.jumcre === '0' && unFormData.jumdeb === '0') {
      document.activeElement.blur();

      swal.fire(
        'Informasi',
        'Tidak Ada Nominal Transaksi Yang Disimpan!',
        'warning'
      ).then(function() {
        $('#jumdeb').focus();
      });

      return;
    }

    if(parseInt(unFormData.jumcre.replace(/,/g,"")) > 0 && parseInt(unFormData.jumdeb.replace(/,/g,"")) > 0) {
      document.activeElement.blur();

      swal.fire(
        'Informasi',
        'Tentukan Angka Kredit Atau Debet Salah Satu Saja!',
        'warning'
      ).then(function() {
        $('#jumdeb').focus();
      });

      return;
    }

    if(unFormData.noacct === '') {
      document.activeElement.blur();

      swal.fire(
        'Informasi',
        'Pilih Nomor Ledger!',
        'warning'
      ).then(function() {
        $('#dropdown-ledger').focus();
      });

      return;
    }

    if(unFormData.ketera === '') {
      document.activeElement.blur();

      swal.fire(
        'Informasi',
        'Keterangan Harus Diisi!',
        'warning'
      )
      .then(function() {
        $('#ketera').focus();
      });

      return;
    }

    // Disabled Button And Show Loading
    app.showSpinner('#save-jurnal-kas-spinner', '#save-jurnal-kas-submit', true);

    $.ajax({
      type: 'POST',
      url: '{{ url("transaksi/jurnal-kas/store-or-update") }}/{{ session()->get("kantor") }}',
      data: formData,
      success: function(res) {
        console.log(JSON.stringify(res));
        if(res.success) {
          table.ajax.url('{{ url("transaksi/jurnal-kas") }}/{{ session()->get("kantor") }}').load(afterSavedData);

          // Show Notif Success
          swal.fire(
            'Sukses',
            res.message,
            'success'
          );
        }
        else {
            // Show Notif Fails
          swal.fire(
            'Informasi',
            res.message,
            'warning'
          );
        }

        // Enable Button
        app.hideSpinner('#save-jurnal-kas-spinner', '#save-jurnal-kas-submit', false);
      },
      error: function(res) {
        console.log(res);
      }
    });
  }

  // Handle Delete Data
  function deleteData(self) {
    swal.fire({
      title: "Yakin Mau Hapus Data Ini?",
      icon: "info",
      confirmButtonText: "YA",
      cancelButtonText: "BATAL",
      showCancelButton: true,
    }).then((result) => {
      if(result.isConfirmed) {
        const id = $(self).data('id');

        $.ajax({
          type: 'GET',
          url: '{{ url("transaksi/jurnal-kas/") }}/{{ session()->get("kantor") }}/' + id,
          success: function(res) {
            if(res.success) {
              // Remove selected Data
              table.row($(self).parents('tr')).remove().draw();

              swal.fire(
                'Sukses',
                res.message,
                'success'
              )
            }
          }
        });
      }
    });
  }

  // Handle After Saved Data
  function afterSavedData() {
    const notranElm = $('#notran');
    const notran = notranElm.val();

    if(notran === '') {
      resetFilter();
      setFilterOnHeadTable();
    }

    // Close Modal
    closeModalCoe();
  }

  // Handle Unserialize Data
  function unserialize(serializedData) {
    let urlParams = new URLSearchParams(serializedData); // get interface / iterator
    let unserializedData = {}; // prepare result object
    for (let [key, value] of urlParams) { // get pair > extract it to key/value
      unserializedData[key.toLowerCase()] = value;
    }

    return unserializedData;
  }

  // Handle Add Filter On Head Table
  function setFilterOnHeadTable() {
    table
        .columns([2, 3])
        .every(function (colIdx) {
            const column = this;
            // const data = table.row($(this).parents('tr')).data();
            const titleFilter = colIdx === 2 ? 'NO. LEDGER' : 'NAMA LEDGER';
            const idFilter = colIdx === 2 ? 'filter-noacct' : 'filter-nmacct';
            const select = $('<select id="'+ idFilter +'" class="form-control form-select" onchange="setSiblings(this)"><option class="fw-bold" value="">-- ' + titleFilter + ' --</option></select>')
                .appendTo($(column.header()).empty())
                .on('change', function () {
                    const val = $.fn.dataTable.util.escapeRegex($(this).val());

                    column.search(val ? '^' + val + '$' : '', true, false).draw();
                });

            column
                .data()
                .unique()
                .sort()
                .each(function (d, j) {   
                  select.append('<option value="' + d + '" data-sib="' + getSiblingsValue(colIdx, d) + '">' + d + '</option>');
                });
        });
  }

  // Handle Modal COE Show
  function showModalCoe() {
    const modalElm = $('#modal-create-or-edit');
    
    modalElm.modal('show');
  }

  // Handle Modal COE Close
  function closeModalCoe() {
    const modalElm = $('#modal-create-or-edit');
    
    modalElm.modal('hide');
  }

  // Handle Set Selected LedGer
  function setSiblings(self) {
    const rowElm = $(self).closest('tr');
    const sibElm = $(rowElm).find('select');

    $(sibElm).each(function(idx, elm) {
      if($(elm).attr('id') !== $(self).attr('id')) {
        const dataSib = $(self).children('option:selected').data('sib');

        $(elm).val(dataSib);

        if($(self).val() === '') {
          table
            .columns(2).search('')
            .columns(3).search('')
            .draw();

          return;
        }

        if(idx === 0) {
          table
            .columns(2).search(dataSib)
            .draw();
        }
        else {
          table
            .columns(3).search(dataSib)
            .draw();
        }
      }
    });
  }

  // Handle Get Sibling Value
  function getSiblingsValue(colIdx, val) {
    const columns = table.settings().init().columns;
    const colName = columns[colIdx].name;
    let value = '';

    table.rows(function (idx, data, node) {
      if(colName === 'NOACCT') {
        if(data.NOACCT === val){
          value = data.NMACCT;

          return false;
        }
      }
      
      if(colName === 'NMACCT') {
        if(data.NMACCT === val){
          value = data.NOACCT;

          return false;
        }
      }
    });

    return value;
  }

  // Handle Reset Filter
  function resetFilter() {
    const tlrFilterElm = $('#filter-kdtelr');
    const noctFilterElm = $('#filter-noacct');
    const nmctFilterElm = $('#filter-nmacct');

    table
      .columns(2).search('')
      .columns(3).search('')
      .columns(7).search('')
      .draw();

      tlrFilterElm.val('');
      noctFilterElm.val('');
      nmctFilterElm.val('');
  }
</script>
@endsection