@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 class="form-control form-select mb-4" onchange="searchData(this)">
						<option class="fw-bold" value="" data-name="">-- SEMUA DESA --</option>
						@foreach($desa as $item)
						<option value="{{ $item['IDDESA'] }}" data-name="{{ $item['NAMADESA'] }}">{{ $item['NAMADESA'] }} ( {{ $item['IDDESA'] }} )</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. Rekening</th>
              <th rowspan="2" class="dt-head-center">Nama</th>
              <th rowspan="2" class="dt-head-center">Rumpun</th>
              <th rowspan="2" class="dt-head-center">Desa</th>
              <th rowspan="2" class="dt-head-center">Sisa Pokok</th>
              <th rowspan="2" class="dt-head-center">Sisa Margin</th>
              <th rowspan="2" class="dt-head-center">Jangka Waktu</th>
              <th rowspan="2" class="dt-head-center">Tgl. Bayar</th>
              <th colspan="6" class="dt-head-center">Restruk</th>
              <th rowspan="2" class="dt-head-center">Aksi</th>
            </tr>
            <tr>
              <th class="dt-head-center">Tgl. Restruk</th>
              <th class="dt-head-center">Tgl. Angs. Restruk</th>
              <th class="dt-head-center">Jangka Waktu</th>
              <th class="dt-head-center">Jth. Tempo Restruk</th>
              <th class="dt-head-center">Plafon</th>
              <th class="dt-head-center">Margin</th>
            </tr>
          </thead>
        </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 block-mode-loading-oneui 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" name="nourut" id="nourut">
                  <input type="hidden" name="action-update" id="action-update" value="0">
                  <div class="row g-3 mb-4">
                    <div class="col-12">
                      <div class="input-group">
                        <label class="form-label" for="nompyd">No. Rekening</label>
                        <label class="form-label" for="nama">Nama</label>
                      </div>
                      <div class="input-group">
                        <div class="col-6">
                          <div class="input-group">
                            <button type="button" class="btn btn-primary" id="btn-nompyd" onclick="setAnggota()">Pilih</button>
                            <input type="text" class="form-control" name="nompyd" id="nompyd" readonly>
                          </div>
                        </div>
                        <input type="text" class="form-control" name="nama" id="nama" readonly>
                      </div>
                    </div>
                    <div class="col-12">
                      <div class="input-group">
                        <label class="form-label" for="rumpun">Rumpun</label>
                        <label class="form-label" for="desa">Desa</label>
                      </div>
                      <div class="input-group">
                        <input type="text" class="form-control" name="rumpun" id="rumpun" readonly>
                        <input type="text" class="form-control" name="desa" id="desa" readonly>
                      </div>
                    </div>
                    <div class="col-12">
                      <div class="input-group">
                        <label class="form-label" for="plafonrestruk">Sisa Pokok</label>
                        <label class="form-label" for="marginrestruk">Sisa Margin</label>
                        <label class="form-label" for="jwakturestruk">Jangka Waktu ( Perminggu )</label>
                      </div>
                      <div class="input-group">
                        <input type="text" class="form-control number-separator text-end" name="plafonrestruk" id="plafonrestruk" value="0" readonly>
                        <input type="text" class="form-control number-separator text-end" name="marginrestruk" id="marginrestruk" value="0" disabled>
                        <input type="text" class="form-control number-separator text-end" name="jwakturestruk" id="jwakturestruk" value="0" onchange="jwaktuSettled(this)" disabled>
                      </div>
                    </div>
                    <div class="col-12">
                      <hr>
                    </div>
                    <div class="col-12">
                      <p class="fw-semibold">Restruk</p>
                      <div class="input-group">
                        <label class="form-label" for="tglrestruk">Tgl. Restruk</label>
                        <label class="form-label" for="tglangrestruk">Tgl. Angs. Restruk</label>
                        <label class="form-label" for="tgjtmprestruk">Tgl. Jatuh Tempo</label>
                      </div>
                      <div class="input-group">
                        <input type="date" class="form-control" name="tglrestruk" id="tglrestruk" onfocus="setDataValue(this)" onchange="tglRestSettled(this)" disabled>
                        <input type="date" class="form-control" name="tglangrestruk" id="tglangrestruk" onfocus="setDataValue(this)" onchange="setJatuhTempo()" disabled>
                        <input type="date" class="form-control" name="tgjtmprestruk" id="tgjtmprestruk" readonly>
                      </div>
                    </div>
                    <div class="col-12">
                      <hr>
                    </div>
                    <div class="col-12">
                      <p class="fw-semibold">Angsuran</p>
                      <div class="input-group">
                        <label class="form-label" for="angpkk">Pokok</label>
                        <label class="form-label" for="angmgn">Margin</label>
                        <label class="form-label" for="angsur">Total</label>
                      </div>
                      <div class="input-group">
                        <input type="text" class="form-control number-separator text-end" name="angpkk" id="angpkk" value="0" readonly>
                        <input type="text" class="form-control number-separator text-end" name="angmgn" id="angmgn" value="0" readonly>
                        <input type="text" class="form-control number-separator text-end" name="angsur" id="angsur" value="0" readonly>
                      </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 List anggota  -->
  <div class="modal" id="modal-anggota" tabindex="-1" aria-labelledby="modal-anggota" aria-modal="true" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div id="block-rek" class="block block-rounded block-mode-fullscreen mb-0">
          <div class="block-header block-header-default">
            <h3 class="block-title">Pilih Nomor Rekening</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">
                <div class="d-flex justifify-flex-start">
                  <div class="form-group me-2">
                    <select id="ftrek-bydesa" class="form-control form-select mb-4" onchange="searchDataAnggota(this)">
                      <option class="fw-bold" value="" data-name="">-- SEMUA DESA --</option>
                      @foreach($desa as $item)
                      <option value="{{ $item['IDDESA'] }}" data-name="{{ $item['NAMADESA'] }}">{{ $item['NAMADESA'] }} ( {{ $item['IDDESA'] }} )</option>
                      @endforeach
                    </select>
                  </div>
                </div>
                <div class="table-responsive">
                  <table id="tbl-rekanggota" 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">No. Rekening</th>
                          <th class="dt-head-center">Nama</th>
                          <th class="dt-head-center">Rumpun</th>
                          <th class="dt-head-center">Desa</th>
                          <th class="dt-head-center">Aksi</th>
                        </tr>
                      </thead>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Modal List anggota  -->
@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("registrasi-transaksi/restruk-pembiayaan") }}/{{ session()->get("kantor") }}',
    columns: [
      {
        data: 'DT_RowIndex',
        name: 'DTROWIDX'
      },
      {
        data: 'NOMPYD',
        name: 'NOMPYD'
      },
			{
        data: 'NAMA',
        name: 'NAMA'
      },
			{
        data: 'RUMPUN',
        name: 'RUMPUN'
      },
      {
        data: 'DESA',
        name: 'DESA'
      },
      {
        data: 'SALPKK',
        name: 'SALPKK'
      },
      {
        data: 'SALMGN',
        name: 'SALMGN'
      },
      {
        data: 'SALCNT',
        name: 'SALCNT'
      },
      {
        data: 'TGBYAT',
        name: 'TGBYAT'
      },
      {
        data: 'TGLRESTRUK',
        name: 'TGLRESTRUK'
      },
      {
        data: 'TGLANGRESTRUK',
        name: 'TGLANGRESTRUK'
      },
      {
        data: 'JWAKTURESTRUK',
        name: 'JWAKTURESTRUK'
      },
      {
        data: 'TGJTMPRESTRUK',
        name: 'TGJTMPRESTRUK'
      },
      {
        data: 'PLAFONRESTRUK',
        name: 'PLAFONRESTRUK'
      },
      {
        data: 'MARGINRESTRUK',
        name: 'MARGINRESTRUK'
      },
      {
        data: 'NOMPYD',
        name: 'ACTION'
      },
    ],
    columnDefs: [
      {
        targets: 0,
        className: 'dt-body-center',
        width: '60px',
        orderable: false,
        searchable: false
      },
      {
        targets: [8, 9, 10, 12],
        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: [5, 6, 7, 11, 13, 14],
        className: 'dt-body-right',
        render: function(data) {
          return app.numberSeparator(data);
        }
      },
      {
        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');
    },
    initComplete: function () {
      app.scrollOnTop();
    }
  });

  let tableRekAnggota = $('#tbl-rekanggota').DataTable({
    processing: true,
    serverSide: false,
    autoWidth: false,
    data: @json($anggota),
    columns: [
      {
        data: null,
        name: 'DTROWIDX'
      },
      {
        data: 'NOMPYD',
        name: 'NOMPYD'
      },
			{
        data: 'NAMA',
        name: 'NAMA'
      },
			{
        data: 'RUMPUN',
        name: 'RUMPUN'
      },
      {
        data: 'DESA',
        name: 'DESA'
      },
      {
        data: 'NOMPYD',
        name: 'ACTION'
      },
    ],
    columnDefs: [
      {
        targets: 0,
        className: 'text-center',
        width: '60px',
        orderable: false,
        searchable: false,
        render: function (data, type, row, meta) {
          return meta.row + meta.settings._iDisplayStart + 1;
        }
      },
      {
        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="rekSettled(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 Modal Create Or Edit Transaksi On Close
  $('#modal-coe').on('hidden.bs.modal', function () {
		$('#transaction-form')[0].reset();
    $('#btn-nompyd').prop('disabled', false);
    $('#action-update').val('0');

    disableInput();
  });

  // Handle Modal List Rekening Anggota On Close
  $('#modal-anggota').on('hidden.bs.modal', function () {
		tableRekAnggota
      .column(4)
      .search('')
      .draw();

    tableRekAnggota
      .search('')
      .draw();

    $('#ftrek-bydesa').val('');
  });

  // 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(self) {
    const value = $(self).find(':selected').data('name');

    table
      .column(4)
      .search(value)
      .draw();
  };

  // Handle Search By Desa
  function searchDataAnggota(self) {
    const value = $(self).find(':selected').data('name');

    tableRekAnggota
      .column(4)
      .search(value)
      .draw();
  };

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

  // Handle Set anggota
  function setAnggota() {
    $('#modal-anggota').modal('show');
  }

  // Handle anggota On Select
  function rekSettled(self) {
    const row = tableRekAnggota.row($(self).parents('tr')).data();
    const token = $('input[name=_token]').val();
    const iPlafon = row.SALPKK;
    const jWaktu = row.SALCNT;
    const sWaktu = row.SWAKTU;
    const kdProd = row.KDPROD;
    const tglRestruk = new Date(row.TGLRESTRUK);

    tglRestruk.setDate(tglRestruk.getDate() + 7);
    const tglAng = tglRestruk.getFullYear()
                    + "-" + ('0' + (tglRestruk.getMonth() +1 )).slice(-2)
                    + "-" + ('0' + tglRestruk.getDate()).slice(-2);

    let params = {
      _token: token,
      iplafon: iPlafon,
      ijwaktu: jWaktu,
      iswaktu: sWaktu,
      ikdprod: kdProd,
      itglang: tglAng
    }

    // console.log(JSON.stringify(params));
    One.block('state_loading', '#block-coe');
    $('#modal-anggota').modal('hide');

    $.ajax({
      type: 'POST',
      url: '{{ url("registrasi-transaksi/restruk-pembiayaan/getprocpydangs-and-getprocjthtmpo") }}/{{ session()->get("kantor") }}',
      data: params,
      success: function(res) {
        // console.log(res);
        const data = res[0];

        $('#nompyd').val(row.NOMPYD);
        $('#nama').val(row.NAMA);
        $('#rumpun').val(row.RUMPUN);
        $('#desa').val(row.DESA);
        $('#plafonrestruk').val(app.numberSeparator(row.SALPKK));
        $('#marginrestruk').val(app.numberSeparator(row.SALMGN));
        $('#jwakturestruk').val(app.numberSeparator(row.SALCNT));
        $('#jwakturestruk').data('swaktu', sWaktu);
        $('#jwakturestruk').data('kdprod', kdProd);
        $('#tglrestruk').val(
          row.TGLRESTRUK !== '1899-12-30 00:00:00' && row.TGLRESTRUK !== null ?
          row.TGLRESTRUK.split(' ')[0] : ''
        );
        $('#tglangrestruk').val(tglAng);
        $('#tgjtmprestruk').val(
          data.OTGJTMP !== '1899-12-30 00:00:00' && data.OTGJTMP !== null ?
          data.OTGJTMP.split(' ')[0] : ''
        );        
        $('#angpkk').val(app.numberSeparator(data.OANGPKK));
        $('#angmgn').val(app.numberSeparator(data.OANGMGN));
        $('#angsur').val(app.numberSeparator(data.OANGSUR));

        setTimeout(afterRekSettled, 500);
      }
    });
  }

  // Handle After Success Anggota Rekening Settled
  function afterRekSettled() {
    enableInput();
    One.block('state_normal', '#block-coe');
  }

  // Handle Enable Form Input
  function enableInput() {
    $('#marginrestruk').prop('disabled', false);
    $('#jwakturestruk').prop('disabled', false);
    $('#tglrestruk').prop('disabled', false);
    $('#tglangrestruk').prop('disabled', false);
  }

  // Handle Disable Form Input
  function disableInput() {
    $('#marginrestruk').prop('disabled', true);
    $('#jwakturestruk').prop('disabled', true);
    $('#tglrestruk').prop('disabled', true);
    $('#tglangrestruk').prop('disabled', true);
  }

  // Handle Edit Data
  function editData(self) {
    const row = table.row($(self).parents('tr')).data();
    const token = $('input[name=_token]').val();
    const iPlafon = row.PLAFONRESTRUK;
    const jWaktu = row.JWAKTURESTRUK;
    const sWaktu = row.SWAKTU;
    const kdProd = row.KDPROD;

    let params = {
      _token: token,
      iplafon: iPlafon,
      ijwaktu: jWaktu,
      iswaktu: sWaktu,
      ikdprod: kdProd
    }

    // console.log(JSON.stringify(params));
    One.block('state_loading', '#block-coe');
    showModal();

    $.ajax({
      type: 'POST',
      url: '{{ url("registrasi-transaksi/restruk-pembiayaan/getprocpydangs") }}/{{ session()->get("kantor") }}',
      data: params,
      success: function(res) {
        // console.log(res);
        const data = res[0];

        $('#action-update').val('1');
        $('#btn-nompyd').prop('disabled', true);
        $('#nompyd').val(row.NOMPYD);
        $('#nama').val(row.NAMA);
        $('#rumpun').val(row.RUMPUN);
        $('#desa').val(row.DESA);
        $('#plafonrestruk').val(app.numberSeparator(row.PLAFONRESTRUK));
        $('#marginrestruk').val(app.numberSeparator(row.MARGINRESTRUK));
        $('#jwakturestruk').val(app.numberSeparator(row.JWAKTURESTRUK));
        $('#jwakturestruk').data('swaktu', sWaktu);
        $('#jwakturestruk').data('kdprod', kdProd);
        $('#tglrestruk').val(
          row.TGLRESTRUK !== '1899-12-30 00:00:00' && row.TGLRESTRUK !== null ?
          row.TGLRESTRUK.split(' ')[0] : ''
        );
        $('#tglangrestruk').val(
          row.TGLANGRESTRUK !== '1899-12-30 00:00:00' && row.TGLANGRESTRUK !== null ?
          row.TGLANGRESTRUK.split(' ')[0] : ''
        );
        $('#tgjtmprestruk').val(
          row.TGJTMPRESTRUK !== '1899-12-30 00:00:00' && row.TGJTMPRESTRUK !== null ?
          row.TGJTMPRESTRUK.split(' ')[0] : ''
        );
        $('#angpkk').val(app.numberSeparator(data.OANGPKK));
        $('#angmgn').val(app.numberSeparator(data.OANGMGN));
        $('#angsur').val(app.numberSeparator(data.OANGSUR));

        setTimeout(afterEditData, 500);
      }
    });
  }

  // Handle After Edit Data
  function afterEditData() {
    enableInput();
    One.block('state_normal', '#block-coe');
  }

  // Handle Janggka Waktu Change Value
  function jwaktuSettled(self) {
    const token = $('input[name=_token]').val();
    const iPlafon = $('#plafonrestruk').val().replace(/,/g,"");
    const jWaktu = $(self).val().replace(/,/g,"");
    const sWaktu = $(self).data('swaktu');
    const kdprod = $(self).data('kdprod');
    const tglrestruk = new Date($('#tglrestruk').val());

    tglrestruk.setDate(tglrestruk.getDate() + 7);
    const tglang = tglrestruk.getFullYear()
                    + "-" + ('0' + (tglrestruk.getMonth() +1 )).slice(-2)
                    + "-" + ('0' + tglrestruk.getDate()).slice(-2);

    let params = {
      _token: token,
      iplafon: iPlafon,
      ijwaktu: jWaktu,
      iswaktu: sWaktu,
      ikdprod: kdprod
    }

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

    $.ajax({
      type: 'POST',
      url: '{{ url("registrasi-transaksi/restruk-pembiayaan/getprocpydangs") }}/{{ session()->get("kantor") }}',
      data: params,
      success: function(res) {
        // console.log(res);
        const data = res[0];

        $('#angpkk').val(app.numberSeparator(data.OANGPKK));
        $('#angmgn').val(app.numberSeparator(data.OANGMGN));
        $('#angsur').val(app.numberSeparator(data.OANGSUR));
      }
    });
  }

  // Hadnle Tanggal Restruk Change Value
  function tglRestSettled(self) {
    const value = $(self).val();

    if(!holidayCheck(value)) {
      swal.fire(
        'Informasi',
        'Hari Libur!',
        'warning'
      ).then(function() {
        $('#tglrestruk').val($('#tglrestruk').data('val'));
      });

      return;
    }

    const tglCair = new Date(value);
    tglCair.setDate(tglCair.getDate() + 7);
    const tglAng = tglCair.getFullYear()
                    + "-" + ('0' + (tglCair.getMonth() +1 )).slice(-2)
                    + "-" + ('0' + tglCair.getDate()).slice(-2);

    $('#tglangrestruk').attr('min', value);
    $('#tglangrestruk').val(tglAng);
    $('#tglangrestruk').trigger('change');
  }

  //Handle Set Tanggal Jatuh Tempo
	function setJatuhTempo() {
		const token = $('input[name=_token]').val();
		const ijWaktu = $('#jwakturestruk').val();
		const isWaktu = $('#jwakturestruk').data('iswaktu');
		const tglAng = $('#tglangrestruk').val();

    if(!holidayCheck(tglAng)) {
      swal.fire(
        'Informasi',
        'Hari Libur!',
        'warning'
      ).then(function() {
        $('#tglangrestruk').val($('#tglangrestruk').data('val'));
      });

      return;
    }

		const params = {
      _token: token,
      ijwaktu: ijWaktu,
      iswaktu: isWaktu,
      itglang: tglAng
    }

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

		$.ajax({
      type: 'POST',
      url: '{{ url("registrasi-transaksi/restruk-pembiayaan/getprocjthtmpo") }}/{{ session()->get("kantor") }}',
      data: params,
      success: function(res) {
        // console.log(res);
        const data = res[0];

        $('#tgjtmprestruk').val(data.OTGJTMP.split(' ')[0]);
      }
    });
	}

  // Handle Check Holiday Date For Tgl Angsuran
  function holidayCheck(tglAng) {
    const harakt = @json($harakt);
    const tDate = new Date(tglAng);
    const tDay = tDate.getDay();
    const cHarakt = harakt[0].HARAKT.charAt(tDay);

    if(cHarakt === 'L') {
      return false;
    }

    return true;
  }

  // Handle Set Current Value For Date
  function setDataValue(self) {
    $(self).data('val', $(self).val());
  }

	// Handle Save Data
	function saveData() {
    if(!validateData()) {
      return;
    }

		const params = {
			'_token': $('input[name="_token"]').val(),
      'update': $('#action-update').val(),
      'nompyd': $('#nompyd').val(),
			'plafonrestruk': $('#plafonrestruk').val().replace(/,/g,""),
			'marginrestruk': $('#marginrestruk').val().replace(/,/g,""),
      'jwakturestruk': $('#jwakturestruk').val().replace(/,/g,""),
			'tglrestruk': $('#tglrestruk').val(),
      'tglangrestruk': $('#tglangrestruk').val(),
      'tgjtmprestruk': $('#tgjtmprestruk').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("registrasi-transaksi/restruk-pembiayaan/store-or-update") }}/{{ session()->get("kantor") }}',
      data: params,
      success: function(res) {
        // console.log(res);
        if(res.success) {
          table.ajax.url('{{ url("registrasi-transaksi/restruk-pembiayaan") }}/{{ session()->get("kantor") }}').load(afterSavedData);
          tableRekAnggota.ajax.url('{{ url("registrasi-transaksi/restruk-pembiayaan/list-norek") }}/{{ session()->get("kantor") }}').load();

          // 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 Validate Before Save Data
  function validateData() {
    if($('#nompyd').val() === '') {
      document.activeElement.blur();

      swal.fire(
        'Informasi',
        'Tentukan Rekening Anggota!',
        'warning'
      )
      .then(function() {
        $("#btn-nompyd").focus();
      });

      return false;
    }

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

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

      return false;
    }

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

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

      return false;
    }

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

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

      return false;
    }

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

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

      return false;
    }

    return true;
  }

  // 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("registrasi-transaksi/restruk-pembiayaan") }}/{{ 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();
              tableRekAnggota.ajax.url('{{ url("registrasi-transaksi/restruk-pembiayaan/list-norek") }}/{{ session()->get("kantor") }}').load();

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

	// Handle After Saved Data
	function afterSavedData() {
		$('#modal-coe').modal('hide');
	}

	// Handle Show Modal
	function showModal() {
		$('#modal-coe').modal('show');
	}
</script>
@endsection