@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">
          {{ 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">
      <h3 class="block-title">
        <button type="button" class="btn btn-sm btn-primary" onclick="createData()">
          <i class="fa fa-plus"></i> TAMBAH BARU
        </button>
      </h3>
      <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="d-flex justifify-flex-start">
				<div class="form-group me-2">
					<select id="filter-teler" class="form-control form-select mb-4" onchange="searchData(this.value)">
						<option class="fw-bold" value="">-- SEMUA TELER --</option>
						@foreach($params['teler'] as $item)
						<option value="{{ $item['KDTELR'] }}">{{ $item['NMTELR'] }} ( {{ $item['KDTELR'] }} )</option>
						@endforeach
					</select>
				</div>
			</div>
      <div class="table-responsive">
        <table id="tbl-transaksi" class="table table-bordered table-striped table-vcenter table-sm" style="width:100%">
          <thead class="thead-light">
            <tr>
              <th rowspan="2" class="dt-head-center">No</th>
              <th rowspan="2" class="dt-head-center">No. Transaksi</th>
              <th rowspan="2" class="dt-head-center">No. Refs</th>
              <th rowspan="2" class="dt-head-center">Tgl. Bayar</th>
              <th colspan="2" class="dt-head-center">Jenis BOK</th>
              <th colspan="3" class="dt-head-center">Transaksi BOK</th>
              <th rowspan="2" class="dt-head-center">Kas</th>
              <th rowspan="2" class="dt-head-center">Keterangan</th>
              <th rowspan="2" class="dt-head-center">Kode Teler</th>
              <th rowspan="2" class="dt-head-center">Aksi</th>
            </tr>
            <tr>
              <th class="dt-head-center">Kode</th>
              <th class="dt-head-center">Nama</th>
              <th class="dt-head-center">Harga</th>
              <th class="dt-head-center">Jumlah</th>
              <th class="dt-head-center">Total</th>
            </tr>
          </thead>
          <tfoot>
            <tr class="table-success">
              <th colspan="6" class="dt-head-center">TOTALS</th>
              <th class="dt-head-right"></th>
              <th></th>
              <th class="dt-head-right"></th>
              <th colspan="4" class="dt-head-center"></th>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>

  <!-- Modal Create Or Edit  -->
  <div class="modal" id="modal-coe" tabindex="-1" aria-labelledby="modal-coe" aria-modal="true" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
        <div id="block-coe" 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" id="btn-close-modal" 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="transaction-form">
                  @csrf
                  <input type="hidden" class="form-control" name="nourut" id="nourut">
                  <div class="row g-3 mb-4">
                    <div class="col-6">
                      <div class="form-group">
                        <label class="form-label" for="jnsbok">Kode BOK</label>
                        <select class="js-select2 form-select" name="jnsbok" id="jnsbok" style="width: 100%" data-container="#modal-coe" data-placeholder="-- PILIH --">
                          <option value="">-- Pilih --</option>
                          @foreach ($params['jenis'] as $item)
                          <option value="{{ $item['JNSBOK'] }}">{{ $item['KETERA'] }} ( {{ $item['JNSBOK'] }} )</option>
                          @endforeach
                        </select>
                      </div>
                    </div>
                    <div class="col-12">
                      <hr>
                    </div>
                    <div class="col-12">
                      <p class="fw-semibold">Transaksi</p>
                      <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" class="form-control" name="tgltra" id="tgltra">
                      </div>
                    </div>
                    <div class="col-12">
                      <div class="input-group">
                        <label class="form-label" for="kdtelr">No. Kas</label>
                        <label class="form-label" for="hrgbok">Harga</label>
                      </div>
                      <div class="input-group">
                        <select class="js-select2 form-select" name="kdtelr" id="kdtelr" style="width: 50%" data-container="#modal-coe" data-placeholder="-- PILIH --">
                          <option value="">-- Pilih --</option>
                          @foreach ($params['ddteler'] as $item)
                          <option value="{{ $item['KDTELR'] }}">{{ $item['NMTELR'] }} ( {{ $item['KDTELR'] }} )</option>
                          @endforeach
                        </select>
                        <input type="text" class="form-control number-separator text-end" name="hrgbok" id="hrgbok" value="0">
                      </div>
                    </div>
                    <div class="col-12">
                      <div class="input-group">
                        <label class="form-label" for="jumbok">Jumlah</label>
                        <label class="form-label" for="satuan">Satuan</label>
                      </div>
                      <div class="input-group">
                        <input type="text" class="form-control number-separator text-end" name="jumbok" id="jumbok" value="0">
                        <div class="col-6">
                          <div class="input-group">
                            <select class="js-select2 form-select" name="satuan" id="satuan" style="width: 90%" data-container="#modal-coe" data-placeholder="-- PILIH --">
                              <option value="">-- Pilih --</option>
                              @foreach ($params['satuan'] as $item)
                              <option value="{{ $item['KODE'] }}">{{ $item['KETERA'] }}</option>
                              @endforeach
                            </select>
                            <button type="button" class="btn btn-primary" id="btn-satuan" onclick="addSatuan()">
                              <i class="fa fa-plus"></i>
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-12">
                      <div class="form-group">
                        <label class="form-label" for="ketera">Keterangan</label>
                        <textarea name="ketera" id="ketera" class="form-control"></textarea>
                      </div>
                    </div>
                    <div class="col-12">
                      <div class="d-flex justify-content-end mt-3">
                        <button type="button" id="btn-save" class="btn btn-sm btn-primary" onclick="saveData()">
                          <div id="save-spinner" style="display: none;">
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" ></span>
                            Loading...
                          </div>
                          <div id="save-submit">{{ strtoupper("Simpan") }}</div>
                        </button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Modal Create Or Edit  -->

  <!-- Modal Create New Satuan  -->
  <div class="modal" id="modal-create-satuan" tabindex="-1" aria-labelledby="modalCreateSatuan" aria-modal="true" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div id="block-create-satuan" class="block block-rounded block-mode-fullscreen mb-0">
          <div class="block-header block-header-default">
            <h3 class="block-title">BOK Satuan</h3>
            <div class="block-options d-flex justify-content-between">
              <button type="button" id="btn-close-modal" 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 py-md-4">
              <div class="col-sm-10 col-md-6">
                <form id="satuan-form">
                  @csrf
                  <div class="mb-4">
                    <label class="form-label" for="stkode">Kode</label>
                    <input type="text" class="form-control" id="stkode" name="stkode">
                  </div>
                  <div class="mb-4">
                    <label class="form-label" for="stketera">Keterangan</label>
                    <input type="text" class="form-control" id="stketera" name="stketera">
                  </div>
                  <div class="mb-4">
                    <button type="button" id="btn-save-satuan" class="btn btn-sm btn-primary" onclick="saveSatuanData()">
                      <div id="save-satuan-spinner" style="display: none;">
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" ></span>
                        Loading...
                      </div>
                      <div id="save-satuan-submit">{{ strtoupper("Simpan") }}</div>
                    </button>
                  </div>
                </form>
                <div class="table-responsive">
                  <table id="tbl-satuan" class="table table-bordered table-striped table-vcenter table-sm" style="width:100%">
                    <thead class="thead-light">
                      <tr>
                        <th class="dt-head-center">No</th>
                        <th class="dt-head-center">Kode</th>
                        <th class="dt-head-center">Keterangan</th>
                        <th class="dt-head-center">Aksi</th>
                      </tr>
                    </thead>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Modal Create New Satuan  -->
@endsection

@push('css')
    <link rel="stylesheet" href="{{ asset('assets/js/plugins/select2/css/select2.min.css') }}">
@endpush

@section('js')
<script src="{{ asset('assets/js/plugins/select2/js/select2.full.min.js') }}"></script>
<script>One.helpersOnLoad(['jq-select2']);</script>
<script type='text/javascript'>
  let table = $('#tbl-transaksi').DataTable({
    processing: true,
    serverSide: false,
    autoWidth: false,
    ajax: '{{ url("transaksi/bok") }}/{{ session()->get("kantor") }}',
    columns: [
      {
        data: 'DT_RowIndex',
        name: 'DTROWIDX'
      },
      {
        data: 'NOTRAN',
        name: 'NOTRAN'
      },
			{
        data: 'NOREFS',
        name: 'NOREFS'
      },
			{
        data: 'TGLBYR',
        name: 'TGLBYR'
      },
      {
        data: 'JNSBOK',
        name: 'JNSBOK'
      },
      {
        data: 'NMJNSBOK',
        name: 'NMJNSBOK'
      },
      {
        data: 'HRGBOK',
        name: 'HRGBOK'
      },
      {
        data: 'JUMBOK',
        name: 'JUMBOK'
      },
      {
        data: 'NOMBOK',
        name: 'NOMBOK'
      },
      {
        data: 'NMTELR',
        name: 'NMTELR'
      },
      {
        data: 'KETERA',
        name: 'KETERA'
      },
      {
        data: 'KDTELR',
        name: 'KDTELR'
      },
      {
        data: 'NOTRAN',
        name: 'ACTION'
      },
    ],
    columnDefs: [
      {
        targets: 0,
        className: 'text-center',
        width: '60px',
        orderable: false,
        searchable: false
      },
      {
        targets: 3,
        render: function(data) {
          const date = new Date(data);
          const result = date.toLocaleDateString('en-GB', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
          });

          return result;
        }
      },
      {
        targets: [6, 8],
        className: 'dt-body-right',
        render: function(data) {
          return app.numberSeparator(data);
        }
      },
      {
        targets: 7,
        render: function(data, type, row, meta) {
          return data + ' ' + row.NMSATUAN;
        }
      },
      {
        targets: 11,
        orderable: false,
        visible: false
      },
      {
        targets: -1,
        className: 'dt-body-center',
				width: '100px',
        orderable: false,
        searchable: false,
        render: function(data) {
          let button = '<div class="btn-group">';
            button += '<button class="btn btn-sm btn-success" onclick="editData(this)">';
            button += '<i class="fa fa-pencil-alt"></i>';
            button += '</button>';
            button += '<button id="btn-trash-penerimaan-setoran" class="btn btn-sm btn-danger" data-id="' + data + '" onclick="deleteData(this)">';
            button += '<i class="fa fa-trash"></i>';
            button += '</button>';
            button += '</div>';

          return button; 
        }
      }
    ],
    createdRow: function (row, data, dataIndex) {
        $(row).children(':first').addClass('fw-bold');
    },
    footerCallback: function() {
      const api = this.api();

      setFooter(api);
    },
    initComplete: function () {
      app.scrollOnTop();
    }
  });

  let tableSatuan = $('#tbl-satuan').DataTable({
    processing: true,
    serverSide: false,
    autoWidth: false,
    ajax: '{{ url("transaksi/bok/satuan") }}/{{ session()->get("kantor") }}',
    order: [[1, 'desc']],
    columns: [
      {
        data: 'DT_RowIndex',
        name: 'DTROWIDX'
      },
      {
        data: 'KODE',
        name: 'KODE'
      },
			{
        data: 'KETERA',
        name: 'KETERA'
      },
      {
        data: 'KODE',
        name: 'ACTION'
      },
    ],
    columnDefs: [
      {
        targets: 0,
        className: 'text-center',
        width: '60px',
        orderable: false,
        searchable: false
      },
      {
        targets: -1,
        className: 'dt-body-center',
				width: '100px',
        orderable: false,
        searchable: false,
        render: function(data) {
          let button = '<div class="btn-group">';
            button += '<button class="btn btn-sm btn-success" onclick="editSatuanData(this)">';
            button += '<i class="fa fa-pencil-alt"></i>';
            button += '</button>';
            button += '<button id="btn-trash-penerimaan-setoran" class="btn btn-sm btn-danger" data-id="' + data + '" onclick="deleteSatuanData(this)">';
            button += '<i class="fa fa-trash"></i>';
            button += '</button>';
            button += '<button id="btn-trash-penerimaan-setoran" class="btn btn-sm btn-primary" data-id="' + data + '" onclick="setSatuan(this)">';
            button += '<i class="fa fa-check"></i>';
            button += '</button>';
            button += '</div>';

          return button; 
        }
      }
    ],
    createdRow: function (row, data, dataIndex) {
      $(row).children(':first').addClass('fw-bold');
    }
  });

  // Handle Table On Draw
  table.on('draw', function() {
    reorderNumber();
  });

  // Handle Table Satuan On Draw
  tableSatuan.on('draw', function() {
    reorderNumber();
  });

	// Handle Modal Create Or Edit Transaksi On Close
  $('#modal-coe').on('hidden.bs.modal', function () {
		$('#transaction-form')[0].reset();
    $('#jnsbok').val('').trigger('change');
    $('#jnsbok').attr('readonly', false);
		$('#kdtelr').val('').trigger('change');
    $('#satuan').val('').trigger('change');
		$('#norefs').val('');
  });

  // Handle Modal Create Or Edit Satuan On Close
  $('#modal-create-satuan').on('hidden.bs.modal', function () {
		$('#satuan-form')[0].reset();
  });

  // Handle Reorder Number
  function reorderNumber() {
    let i = 1;

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

  // Handle Search By Desa
  function searchData(value) {
    table
      .column(11)
      .search(value)
      .draw();
  };

  // Handle Set Footer
  function setFooter(api) {
    api.columns([6, 8], { page: 'current' }).every( function () {
      if(this.data().length !== 0) {
        const sum = sumArray(this.data());
    
        $(this.footer()).text(app.numberSeparator(sum.toString()));
      }
      else {
        $(this.footer()).text('0');
      }
    });
  }

  // Handle Get Total
  function sumArray(arr) {
    const sum = arr.reduce(function(a, b) {
      return parseInt(a) + parseInt(b);
    });
    
    return sum;
  };

  // Handle Create Data
  function createData() {
    showModal();
  }

  // Handle Edit Data
  function editData(self) {
    const row = table.row($(self).parents('tr')).data();

    $('#jnsbok').val(row.JNSBOK).trigger('change');
    $('#jnsbok').attr('readonly', 'readonly');
    $('#nama').val(row.NAMA);
    $('#rumpun').val(row.RUMPUN);
    $('#desa').val(row.DESA);
    $('#notran').val(row.NOTRAN);
		$('#norefs').val(row.NOREFS);
    $('#tgltra').val(
      row.TGLTRA !== '1899-12-30 00:00:00' && row.TGLTRA !== null ?
      row.TGLTRA.split(' ')[0] : ''
    );
		$('#tglbyr').val(
      row.TGLBYR !== '1899-12-30 00:00:00' && row.TGLBYR !== null ?
      row.TGLBYR.split(' ')[0] : ''
    );
    $('#kdtelr').val(row.KDTELR).trigger('change');
    $('#hrgbok').val(app.numberSeparator(row.HRGBOK));
    $('#jumbok').val(app.numberSeparator(row.JUMBOK));
    $('#satuan').val(row.SATUAN).trigger('change');
    $('#ketera').val(row.KETERA);

    showModal();
  }

	// Handle Save Data
	function saveData() {
    if($('#jnsbok').val() === '') {
      document.activeElement.blur();

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

      return;
    }

		if($('#tglbyr').val() === '' || $('#tglbyr').val() === null) {
      document.activeElement.blur();

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

      return;
    }

    if($('#kdtelr').val() === '') {
      document.activeElement.blur();

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

      return;
    }

    if($('#hrgbok').val() === '0') {
      document.activeElement.blur();

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

      return;
    }

    if($('#jumbok').val() === '0') {
      document.activeElement.blur();

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

      return;
    }

    if($('#satuan').val() === '0') {
      document.activeElement.blur();

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

      return;
    }

    // if(parseInt($('#debbrc').val().replace(/,/g,"")) > parseInt($('#sldbrc').val().replace(/,/g,""))) {
    //   document.activeElement.blur();

    //   swal.fire(
    //     'Informasi',
    //     'Penarikan Tidak Boleh Lebih Besar Dari Saldo!',
    //     'warning'
    //   )
    //   .then(function() {
    //     $("#debbrc").focus();
    //   });

    //   return;
    // }

    // if($('#debbrc').val() === '0' && $('#crebrc').val() === '0') {
    //   document.activeElement.blur();

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

    //   return;
    // }

		// if(parseInt($('#debbrc').val().replace(/,/g,"")) > 0 && parseInt($('#crebrc').val().replace(/,/g,"")) > 0) {
    //   document.activeElement.blur();

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

    //   return;
    // }

    if($('#ketera').val() === '') {
      document.activeElement.blur();

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

      return;
    }

		const params = {
			'_token': $('input[name="_token"]').val(),
      'jnsbok': $('#jnsbok').val(),
			'notran': $('#notran').val(),
			'norefs': $('#norefs').val(),
      'tgltra': $('#tgltra').val(),
			'tglbyr': $('#tglbyr').val(),
      'kdtelr': $('#kdtelr').val(),
      'hrgbok': $('#hrgbok').val().replace(/,/g,""),
      'jumbok': $('#jumbok').val().replace(/,/g,""),
      'nombok': parseFloat($('#hrgbok').val().replace(/,/g,"")) * parseFloat($('#jumbok').val().replace(/,/g,"")),
      'satuan': $('#satuan').val(),
      'ketera': $('#ketera').val(),
			'idinpt': @json(session()->get('name'))
		}

    // console.log(JSON.stringify(params));

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

    $.ajax({
      type: 'POST',
      url: '{{ url("transaksi/bok/store-or-update") }}/{{ session()->get("kantor") }}',
      data: params,
      success: function(res) {
        // console.log(res);
        if(res.success) {
          table.ajax.url('{{ url("transaksi/bok") }}/{{ 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-spinner', '#save-submit', false);
      },
      error: function(err) {
        console.log(err);
      }
    });
	}

  // 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');
        const url = '{{ url("transaksi/bok") }}/{{ session()->get("kantor") }}/' + id;

        $.ajax({
          type: 'GET',
          url: url,
          success: function(res) {
            if(res.success) {
              // Remove selected Data
              table.row($(self).parents('tr')).remove().draw();

              swal.fire(
                'Sukses',
                res.message,
                'success'
              )
            }
            else {
              swal.fire(
                'Informasi',
                res.message,
                'warning'
              )
            }
          }
        });
      }
    });
  };

	// Handle After Saved Data
	function afterSavedData() {
    const rows = table.rows().data().toArray();
    const array = [];

    $.each(rows, function (i, e) {
      const matchingItems = $.grep(array, function (item) {
        return item.KDTELR === e.KDTELR;
      });
      if (matchingItems.length === 0){
        array.push(e);
      }
    });

    $('#filter-teler').html('');
    $('#filter-teler').append('<option class="fw-bold" value="">-- SEMUA TELER --</option>');

    $(array).each(function(idx, row) {
      $('#filter-teler').append('<option value="' + row.KDTELR + '">' + row.NMTELR + ' ( ' + row.KDTELR + ' ) ' + '</option>');
    });

		$('#modal-coe').modal('hide');
	}

	// Handle Show Modal
	function showModal() {
		$('#modal-coe').modal('show');
	}
  
  // Handle Show Modal Create Satuan
	function addSatuan() {
    let array = [];
    let satuan = tableSatuan.rows().data().toArray();

    $(satuan).each(function(idx, row) {
      array.push(parseInt(row.KODE));
    });

    $('#stkode').val(Math.max(...array) + 1);
		$('#modal-create-satuan').modal('show');
	}

  // Handle Edit Satuan
  function editSatuanData(self) {
    const row = tableSatuan.row($(self).parents('tr')).data();

    $('#stkode').val(row.KODE);
    $('#stketera').val(row.KETERA);
  }

  // Handle Set Satuan
  function setSatuan(self) {
    const kode = $(self).data('id');

    $('#satuan').val(kode).trigger('change');
    $('#modal-create-satuan').modal('hide');
  }

  // Handle Save Satuan
  function saveSatuanData() {
    const formData = $('#satuan-form').serializeArray();
    const url = '{{ url("transaksi/bok/store-or-update-satuan") }}/{{ session()->get("kantor") }}';
    const satuan = @json($params['satuan']);

    if($('#stkode').val().length < 2) {
      document.activeElement.blur();

      swal.fire(
        'Informasi',
        'Kode Harus 2 digit!',
        'warning'
      )
      .then(function() {
        $("#stkode").focus();
      });

      return;
    }

    if($('#stketera').val() === '') {
      document.activeElement.blur();

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

      return;
    }

    if(satuan.some(o => o.KODE === $('#stkode').val())) {
      swal.fire({
        title: "Kode Sudah Ada, Yakin Mau Ubah Data Ini?",
        icon: "info",
        confirmButtonText: "YA",
        cancelButtonText: "BATAL",
        showCancelButton: true,
      }).then((result) => {
        if(result.isConfirmed) {
          procSaveSatuanData(url, formData);
        }
      });

      return;
    }

    procSaveSatuanData(url, formData);
  }

  // Handle Process Save Data Satuan
  function procSaveSatuanData(url, formData) {
    // Disabled Button And Show Loading
    app.showSpinner('#save-satuan-spinner', '#save-satuan-submit', true);

    $.ajax({
      type: 'POST',
      url: url,
      data: formData,
      success: function(res) {
        // console.log(res);
        tableSatuan.ajax.url('{{ url("transaksi/bok/satuan") }}/{{ session()->get("kantor") }}').load(afterSavedDataSatuan);

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

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

  // Handle After Save Data Satuan
  function afterSavedDataSatuan() {
    const data = tableSatuan.rows().data().toArray();
    const lastData = tableSatuan.row(':first').data();
    const newKode = parseInt(lastData.KODE) + 1;
    const array = [];

    $(data).each(function(idx, row) {
      array.push({
        id: row.KODE,
        text: row.KETERA
      })
    });

    $('#satuan').html('').select2({
      data: array,
      dropdownParent: $('#modal-coe')
    });
    $('#stkode').val(newKode);
    $('#stketera').val('');
  }

  // Handle Delete Satuan Data
  function deleteSatuanData(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');
        const url = '{{ url("transaksi/bok/satuan") }}/{{ session()->get("kantor") }}/' + id;

        $.ajax({
          type: 'GET',
          url: url,
          success: function(res) {
            if(res.success) {
              tableSatuan.ajax.url('{{ url("transaksi/bok/satuan") }}/{{ session()->get("kantor") }}').load(afterSavedDataSatuan);

              swal.fire(
                'Sukses',
                res.message,
                'success'
              )
            }
            else {
              swal.fire(
                'Informasi',
                res.message,
                'warning'
              )
            }
          }
        });
      }
    });
  };
</script>
@endsection