@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">
      <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>
      </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="d-flex justifify-flex-start">
				<div class="form-group me-2">
					<select name="iddesa" id="filter-desa" class="form-select" onchange="setRumpun(this.value)">
						<option class="fw-bold" value="">-- SEMUA DESA --</option>
						@foreach($desa as $item)
						<option value="{{ $item['IDDESA'] }}">{{ $item['NAMADESA'] }} ( {{ $item['IDDESA'] }} )</option>
						@endforeach
					</select>
				</div>
				<div class="form-group">
					<select name="idmajelis" id="filter-rumpun" class="form-select" onchange="searchData(this.value)">
						<option class="fw-bold" value="">-- SEMUA RUMPUN --</option>
					</select>
				</div>
			</div>
      <div class="table-responsive">
        @csrf
        <table class="table table-bordered table-striped table-vcenter table-sm" id="tbl-deposito" style="width:100%">
          <thead class="thead-light">
            <tr>
              <th class="dt-head-center">No</th>
              <th class="dt-head-center">No. Resi</th>
              <th class="dt-head-center">Nama Anggota</th>
              <th class="dt-head-center">Nominal</th>
              <th class="dt-head-center">Produk</th>
              <th class="dt-head-center">Id Majelis</th>
              <th class="dt-head-center">Aksi</th>
            </tr>
          </thead>
        </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-xl">
      <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">
              Input Registrasi Simpanan Berjangka (SIBERANI)
            </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">
              <form action="" id="registration-form" class="p-2">
                @csrf
                <input type="hidden" id="idinpt" name="idinpt" value="{{ session()->get('name') }}">
                <input type="hidden" id="notran" name="notran">
                <div class="row">
                  <div class="col-sm-12 col-md-6 p-0">
                    <div id="block-data-pribadi" class="block block-mode-loading-oneui">
                      <div class="block-header">
                        <h3 class="block-title">Data Pribadi</h3>
                      </div>
                      <div class="block-content">
                        <div class="row g-3">
                          <div class="col-6">
                            <label class="form-label fs-sm" for="adesa">Desa</label>
                            <select name="adesa" id="adesa" class="form-select" onchange="setAgtRumpun(this.value)">
                              <option class="fw-bold" value="" hidden>-- PILIH --</option>
                              @foreach($desa as $item)
                              <option value="{{ $item['IDDESA'] }}">{{ $item['NAMADESA'] }} ( {{ $item['IDDESA'] }} )</option>
                              @endforeach
                            </select>
                          </div>
                          <div class="col-6">
                            <label class="form-label fs-sm" for="aidmajelis">Rumpun</label>
                            <select name="aidmajelis" id="aidmajelis" class="form-select" onchange="setDdAnggota(this.value)">
                              <option class="fw-bold" value="" hidden>-- PILIH --</option>
                            </select>
                          </div>
                          <div class="col-12">
                            <label class="form-label fs-sm" for="idanggota">ID Anggota</label>
                            <select class="js-select2 form-select" name="idanggota" id="idanggota" style="width: 100%" data-container="#modal-create-or-edit" onchange="setAnggota(this.value)">
                              <option class="fw-bold" value="" hidden>-- PILIH --</option>
                            </select>
                          </div>
                          <div class="col-6">
                            <label class="form-label fs-sm" for="nama">Nama</label>
                            <input type="text" class="form-control" name="nama" id="nama" readonly>
                          </div>
                          <div class="col-6">
                            <label class="form-label fs-sm" for="nomktp">No. KTP/Identitas</label>
                            <input type="text" class="form-control" name="nomktp" id="nomktp">
                          </div>
                          <div class="col-6">
                            <label class="form-label fs-sm" for="tplahir">Tempat Lahir</label>
                            <input type="text" class="form-control" name="tplahir" id="tplahir">
                          </div>
                          <div class="col-6">
                            <label class="form-label fs-sm" for="tglahir">Tgl Lahir</label>
                            <input type="date" class="form-control" name="tglahir" id="tglahir">
                          </div>
                          <div class="col-12">
                            <label class="form-label fs-sm" for="alamt1">Alamat</label>
                            <textarea class="form-control mb-4" name="alamt1" id="alamt1"></textarea>
                            <textarea class="form-control" name="alamt2" id="alamt2"></textarea>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-12 col-md-6 p-0">
                    <div id="block-aw" class="block block-mode-loading-oneui">
                      <div class="block-header">
                        <h3 class="block-title">Ahli Waris</h3>
                      </div>
                      <div class="block-content">
                        @include('registrasi_transaksi.deposito.detail_anggota._keluarga')
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-12 col-md-6 p-0">
                    <div class="block">
                      <div class="block-header">
                        <h3 class="block-title">Simpanan Berjaka</h3>
                      </div>
                      <div class="block-content">
                        <div class="row g-3">
                          <div class="col-12">
                            <label class="form-label fs-sm" for="kdprod">Produk</label>
                            <select name="kdprod" id="kdprod" class="form-select" onchange="produkSeted(this)">
                              <option value="" hidden>-- PILIH --</option>
                              @foreach($params['produk'] as $item)
                              <option value="{{ $item['KDPROD'] }}" data-jwaktu="{{ $item['JWAKTU'] }}" data-ratnsb="{{ $item['RATNSB'] }}">
                                {{ $item['NMPROD'] }} ( {{ $item['KDPROD'] }} )
                              </option>
                              @endforeach
                            </select>
                          </div>
                          <div class="col-6">
                            <label class="form-label fs-sm" for="valdep">Nominal Siberani</label>
                            <input type="text" class="form-control number-separator text-end" name="valdep" id="valdep" value="0" onkeyup="handleNullable(this)">
                          </div>
                          <div class="col-6">
                            <label class="form-label fs-sm" for="jenset">Jenis Setoran</label>
                            <select class="form-select" name="jenset" id="jenset">
                              <option value="" hidden>-- PILIH --</option>
                              <option value="1">TUNAI</option>
                              <option value="2">SUKARELA</option>
                            </select>
                          </div>
                          <div class="col-6">
                            <label class="form-label fs-sm" for="tglval">Tgl Valuta</label>
                            <input type="date" class="form-control" name="tglval" id="tglval" onchange="setJatuhTempo(this)">
                          </div>
                          <div class="col-6">
                            <label class="form-label fs-sm" for="jwaktu">Jangka Waktu ( bulan )</label>
                            <input type="text" class="form-control" name="jwaktu" id="jwaktu" readonly>
                          </div>
                          <div class="col-6">
                            <label class="form-label fs-sm" for="tgjtmp">Tgl Jatuh Tempo</label>
                            <input type="date" class="form-control" name="tgjtmp" id="tgjtmp" readonly>
                          </div>
                          <div class="col-6">
                            <label class="form-label fs-sm" for="ratnsb">Rate Bagi Hasil Pertahun ( % )</label>
                            <input type="text" class="form-control" name="ratnsb" id="ratnsb" readonly>
                          </div>
                          <div class="col-6">
                            <label class="form-label fs-sm" for="flgaro">Perpanjang Otomatis?</label>
                            <select class="form-select" name="flgaro" id="flgaro">
                              <option value="" hidden>-- PILIH --</option>
                              <option value="Y">YA</option>
                              <option value="T">TIDAK</option>
                            </select>
                          </div>
                          <div class="col-6">
                            <label class="form-label fs-sm" for="kdtelr">Kas Petugas</label>
                            <select name="kdtelr" id="kdtelr" class="form-select">
                              <option value="" hidden>-- PILIH --</option>
                              @foreach($params['petugas'] as $item)
                              <option value="{{ $item['KDTELR'] }}">{{ $item['NMTELR'] }} ( {{ $item['KDTELR'] }} )</option>
                              @endforeach
                            </select>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-12 col-md-6 p-0">
                    <div class="block">
                      <div class="block-header">
                        <h3 class="block-title">Setoran</h3>
                      </div>
                      <div class="block-content">
                        <div class="row g-3">
                          <div class="col-6">
                            <label class="form-label fs-sm" for="baywjb">Simpanan Wajib</label>
                            <input type="text" class="form-control number-separator text-end" name="baywjb" id="baywjb" value="0" onkeyup="handleNullable(this)">
                          </div>
                          <div class="col-6">
                            <label class="form-label fs-sm" for="bayskr">Simpanan Sukarela</label>
                            <input type="text" class="form-control number-separator text-end" name="bayskr" id="bayskr" value="0" onkeyup="handleNullable(this)">
                          </div>
                          <div class="col-12">
                            <label class="form-label fs-sm" for="refptgs">Referensi Petugas</label>
                            <textarea class="form-control" name="refptgs" id="refptgs"></textarea>
                          </div>
                          <div class="col-12">
                            <label class="form-label fs-sm" for="rekdep">No. Resi</label>
                            <input type="text" class="form-control" name="rekdep" id="rekdep" readonly>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
          <div class="block-content block-content-full text-end bg-body d-flex justify-content-end">
            <button type="button" id="save-deposito" class="btn btn-sm btn-primary" onclick="saveData()">
              <div id="save-deposito-spinner" style="display: none;">
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" ></span>
                Loading...
              </div>
              <div id="save-deposito-submit">{{ strtoupper("Simpan") }}</div>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Modal Tambah Atau Ubah Data -->
@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-deposito').DataTable({
    processing: true,
    serverSide: false,
    pageLength: 10,
    order: [[1, 'desc']],
    search: {
      regex: true
    },
    ajax: '{{ url("registrasi-transaksi/deposito") }}/{{ session()->get("kantor") }}',
    columns: [
      {
        data: 'DT_RowIndex',
        name: 'ROWIDX',
      },
      {
        data: 'REKDEP',
        name: 'REKDEP'
      },
      {
        data: 'NAMA',
        name: 'NAMA'
      },
      {
        data: 'VALDEP',
        name: 'VALDEP'
      },
      {
        data: 'PRODUK',
        name: 'PRODUK'
      },
      {
        data: 'IDMAJELIS',
        name: 'IDMAJELIS'
      },
      {
        data: 'REKDEP',
        name: 'ACTION'
      },
    ],
    columnDefs: [
      {
        targets: 0,
        className: 'dt-body-center',
				width: '60px',
        orderable: false,
        searchable: false
      },
      {
        targets: 1,
        width: '300px',
        orderable: false
      },
      {
        targets: 3,
        className: 'dt-body-right',
        render: function(data) {
          return app.numberSeparator(data);
        }
      },
      {
        targets: 5,
        orderable: false,
        visible: false
      },
      {
        targets: -1,
        className: 'dt-body-center',
        orderable: false,
        searchable: false,
        render: function(data) {
          let button = '<div class="btn-group">';
            button += '<button id="edit" class="btn btn-sm btn-success" 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');
    },
    initComplete: function () {
      app.scrollOnTop();
    }
  });

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

  // Handle Modal Create Or Edit Transaksi On Close
  $('#modal-create-or-edit').on('hidden.bs.modal', function () {
    const formElm = $('#registration-form');
    const regDesaElm = $('#adesa');
    const regMajelisElm = $('#aidmajelis');
    const ddAnggotaElm = $('#idanggota');
    
    formElm[0].reset();
    regDesaElm.prop('disabled', false);
    regMajelisElm.html('<option value="" hidden>-- PILIH --</option>');
    regMajelisElm.prop('disabled', false);
    ddAnggotaElm.html('<option value="" hidden>-- PILIH --</option>');;
  });

  // // Handle Loader Input
  // $('input[data-toggle=r-loading], select[data-toggle=r-loading]').each(function(idx, elm) {
  //   const target = $(elm).data('target');
  //   const bgOpacity = '<div class="bg-opacity position-absolute top-0 start-0" style="display: none; width: 100%; height: 100%; background: #fff; border: 1px solid #dfe3ea; border-radius: 0.25rem; opacity: 0.8;"></div>';
  //   let loader = '<div class="r-loader position-absolute top-50 end-0 translate-middle" style="display: none; z-index: 9999">';
  //       loader += '<i class="fa fa-fw fa-circle-notch fa-spin"></i>';
  //       loader += '</div>';

  //   $(target).wrap('<div class="r-loader-input position-relative"></div>');
  //   $(target).before(bgOpacity);
  //   $(target).after(loader);

  //   $(elm).on('change', function() {
  //     $(target).siblings('.bg-opacity').show();
  //     $(target).siblings('.r-loader').show();
  //   });

  //   $(document).ajaxStop(function() {
  //     $(target).siblings('.bg-opacity').hide();
  //     $(target).siblings('.r-loader').hide();
  //   });
  // });

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

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

	// Handle Set Rumpun
	function setRumpun(value) {
    const rumpunElm = $('#filter-rumpun');

    if(value === '') {
      // Reset Filter Table
      table
        .columns(5)
				.search('')
        .draw();
      
				rumpunElm.html('<option class="fw-bold" value="">-- SEMUA RUMPUN --</option>');

      return;
    }

    $.ajax({
      type: 'GET',
      url: '{{ url("rumpun") }}/getbydesa/{{ session()->get("kantor") }}/' + value,
      success: function(data) {
        // console.log(data);
        rumpunElm.html('<option class="fw-bold" value="">-- SEMUA RUMPUN --</option>');

        $.each(data, function(i, val) {
          rumpunElm.append('<option value="' + val.IDMAJELIS + '">' + val.NAMAMAJELIS + '( ' + val.IDMAJELIS + ' )'  +'</option>');
        });
      }
    });
  };

  // Handle Set Anggota Rumpun
	function setAgtRumpun(value) {
    const rumpunElm = $('#aidmajelis');

    $.ajax({
      type: 'GET',
      url: '{{ url("rumpun") }}/getbydesa/{{ session()->get("kantor") }}/' + value,
      success: function(data) {
        // console.log(data);
        rumpunElm.html('<option class="fw-bold" value="" hidden>-- PILIH --</option>');

        $.each(data, function(i, val) {
          rumpunElm.append('<option value="' + val.IDMAJELIS + '">' + val.NAMAMAJELIS + '( ' + val.IDMAJELIS + ' )'  +'</option>');
        });
      }
    });
  };

  // Handle Set Dropdown Anggota
  function setDdAnggota(value) {
    const selElm = $('#idanggota');

    $.ajax({
			type: 'GET',
			url: '{{ url("registrasi-transaksi/deposito/getddanggota") }}/{{ session()->get("kantor") }}/' + value,
			success: function(res) {
				// console.log(res);
        selElm.html('<option class="fw-bold" value="" hidden>-- PILIH --</option>');

        $.each(res, function(i, val) {
          selElm.append('<option value="' + val.IDANGGOTA + '">' + val.NAMA + ' ( ' + val.IDANGGOTA + ' )'  +'</option>');
        });

        resetAnggota();
			}
		});
  }

  // Handle Reset Anggota
  function resetAnggota() {
    $('#block-data-pribadi, #block-aw').find('input, select, textarea').not('#adesa, #aidmajelis').each(function(idx, elm) {
      $(elm).val('');
    });
  }

  // Handle Set Anggota
  function setAnggota(value) {
    $.ajax({
      type: 'GET',
      url: '{{ url("registrasi-transaksi/deposito/getanggota") }}/{{ session()->get("kantor") }}/' + value,
      success: function(res) {
        console.log(JSON.stringify(res));
        const data = res[0];

        $('#nama').val(data.NAMA);
        $('#nomktp').val(data.NOMOID);
        $('#tplahir').val(data.TMPLAHIR);
        $('#tglahir').val(
          data.TGLAHIR !== '1899-12-30 00:00:00' && data.TGLAHIR !== null ?
          data.TGLAHIR.split(' ')[0] : ''
        );
        $('#alamt1').val(data.ALAMT1);
        $('#alamt2').val(data.ALAMT2);
        $('#aw_nama1').val(data.TGGNAMA);
        $('#aw_hubungan1').val(data.TGGHUBUNGAN);
        $('#aw_jenkel1').val(data.TGGJENKEL);
        $('#aw_tglahir1').val(
          data.TGGTGLAHIR !== '1899-12-30 00:00:00' && data.TGGTGLAHIR !== null ?
          data.TGGTGLAHIR.split(' ')[0] : ''
        );
        $('#aw_nama2').val(data.TGGNAMA1);
        $('#aw_hubungan2').val(data.TGGHUBUNGAN1);
        $('#aw_jenkel2').val(data.TGGJENKEL1);
        $('#aw_tglahir2').val(
          data.TGGTGLAHIR1 !== '1899-12-30 00:00:00' && data.TGGTGLAHIR1 !== null ?
          data.TGGTGLAHIR1.split(' ')[0] : ''
        );
        $('#aw_nama3').val(data.TGGNAMA2);
        $('#aw_hubungan3').val(data.TGGHUBUNGAN2);
        $('#aw_jenkel3').val(data.TGGJENKEL2);
        $('#aw_tglahir3').val(
          data.TGGTGLAHIR2 !== '1899-12-30 00:00:00' && data.TGGTGLAHIR2 !== null ?
          data.TGGTGLAHIR2.split(' ')[0] : ''
        );
        $('#aw_nama4').val(data.TGGNAMA3);
        $('#aw_hubungan4').val(data.TGGHUBUNGAN3);
        $('#aw_jenkel4').val(data.TGGJENKEL3);
        $('#aw_tglahir4').val(
          data.TGGTGLAHIR3 !== '1899-12-30 00:00:00' && data.TGGTGLAHIR3 !== null ?
          data.TGGTGLAHIR3.split(' ')[0] : ''
        );
        $('#aw_nama5').val(data.TGGNAMA4);
        $('#aw_hubungan5').val(data.TGGHUBUNGAN4);
        $('#aw_jenkel5').val(data.TGGJENKEL4);
        $('#aw_tglahir5').val(
          data.TGGTGLAHIR4 !== '1899-12-30 00:00:00' && data.TGGTGLAHIR4 !== null ?
          data.TGGTGLAHIR4.split(' ')[0] : ''
        );
      }
    });
  }

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

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

  // Handle Produk Seted
  function produkSeted(self) {
    const jwaktu = $(self).find(':selected').data('jwaktu');
    const ratnsb = $(self).find(':selected').data('ratnsb');

    $('#jwaktu').val(jwaktu);
    $('#ratnsb').val(ratnsb);

    if($('#tglval').val() !== '') {
      setJatuhTempo('#tglval');
    }
  }

  // Handle Set Tgl Jatuh Tempo
  function setJatuhTempo(self) {
    const value = $(self).val();
    const jwaktu = $('#jwaktu').val();

    if(jwaktu === '') {
      document.activeElement.blur();

      swal.fire(
        'Informasi',
        'Tentukan Produk Terlebih Dahulu!',
        'warning'
      )
      .then(function() {
        $("#kdprod").focus();
        $(self).val('');
      });

      return;
    }

    const date = new Date(value);
    const newDate = new Date(date.setMonth(date.getMonth() + parseInt(jwaktu)));
    const tgjtmp = newDate.getFullYear()
                    + "-" + ('0' + (newDate.getMonth() +1 )).slice(-2)
                    + "-" + ('0' + newDate.getDate()).slice(-2);

    $('#tgjtmp').val(tgjtmp);
  }

  // Handle Set Loader In Input
  function loaderInput(set) {
    if(set) {
      $('.r-loader-input .r-loader').show();
    }
    else {
      $('.r-loader-input .r-loader').hide();
    }
  }

  // Handle Edit Transaksi
  function editData(self) {
    const row = table.rows($(self).parents('tr')).data().toArray();
    const data = row[0];

    // Data Pribadi
    $('#adesa').val(data.IDDESA);
    $('#adesa').prop('disabled', true);
    $('#aidmajelis').html('<option value="' + data.IDMAJELIS + '">' + data.NAMAMAJELIS + ' ( ' + data.IDMAJELIS + ' )' + '</option>');
    $('#aidmajelis').prop('disabled', true);
    $('#idanggota').html('<option value="' + data.IDANGGOTA + '">' + data.NAMA + ' ( ' + data.IDANGGOTA + ' )' + '</option>');
    $('#idanggota').prop('readOnly', true);
    $('#nama').val(data.NAMA);
    $('#nomktp').val(data.NOMKTP);
    $('#tplahir').val(data.TPLAHIR);
    $('#tglahir').val(
      data.TGLAHIR !== '1899-12-30 00:00:00' && data.TGLAHIR !== null ?
      data.TGLAHIR.split(' ')[0] : ''
    );
    $('#alamt1').val(data.ALAMT1);
    $('#alamt2').val(data.ALAMT2);

    // Simpanan Berjaka
    $('#notran').val(data.NOTRAN);
    $('#kdprod').val(data.KDPROD);
    $('#valdep').val(app.numberSeparator(data.VALDEP));
    $('#jenset').val(data.JENSET);
    $('#tglval').val(
      data.TGLVAL !== '1899-12-30 00:00:00' && data.TGLVAL !== null ?
      data.TGLVAL.split(' ')[0] : ''
    );
    $('#jwaktu').val(data.JWAKTU);
    $('#tgjtmp').val(
      data.TGJTMP !== '1899-12-30 00:00:00' && data.TGJTMP !== null ?
      data.TGJTMP.split(' ')[0] : ''
    );
    $('#ratnsb').val(data.RATNSB);
    $('#flgaro').val(data.FLGARO);
    $('#kdtelr').val(data.KDTELR);

    // Ahli Waris
    $('#aw_nama1').val(data.AW_NAMA1);
    $('#aw_hubungan1').val(data.AW_HUBUNGAN1);
    $('#aw_tplahir1').val(data.AW_TPLAHIR1);
    $('#aw_tglahir1').val(
      data.AW_TGLAHIR1 !== '1899-12-30 00:00:00' && data.AW_TGLAHIR1 !== null ?
      data.AW_TGLAHIR1.split(' ')[0] : ''
    );
    $('#aw_jenkel1').val(data.AW_JENKEL1);
    $('#aw_alamt11').val(data.AW_ALAMT11);
    $('#aw_alamt21').val(data.AW_ALAMT21);
    $('#aw_nama2').val(data.AW_NAMA2);
    $('#aw_hubungan2').val(data.AW_HUBUNGAN2);
    $('#aw_tplahir2').val(data.AW_TPLAHIR2);
    $('#aw_tglahir2').val(
      data.AW_TGLAHIR2 !== '1899-12-30 00:00:00' && data.AW_TGLAHIR2 !== null ?
      data.AW_TGLAHIR2.split(' ')[0] : ''
    );
    $('#aw_jenkel2').val(data.AW_JENKEL2);
    $('#aw_alamt12').val(data.AW_ALAMT12);
    $('#aw_alamt22').val(data.AW_ALAMT22);
    $('#aw_nama3').val(data.AW_NAMA3);
    $('#aw_hubungan3').val(data.AW_HUBUNGAN3);
    $('#aw_tplahir3').val(data.AW_TPLAHIR3);
    $('#aw_tglahir3').val(
      data.AW_TGLAHIR3 !== '1899-12-30 00:00:00' && data.AW_TGLAHIR3 !== null ?
      data.AW_TGLAHIR3.split(' ')[0] : ''
    );
    $('#aw_jenkel3').val(data.AW_JENKEL3);
    $('#aw_alamt13').val(data.AW_ALAMT13);
    $('#aw_alamt23').val(data.AW_ALAMT23);
    $('#aw_nama4').val(data.AW_NAMA4);
    $('#aw_hubungan4').val(data.AW_HUBUNGAN4);
    $('#aw_tplahir4').val(data.AW_TPLAHIR4);
    $('#aw_tglahir4').val(
      data.AW_TGLAHIR4 !== '1899-12-30 00:00:00' && data.AW_TGLAHIR4 !== null ?
      data.AW_TGLAHIR4.split(' ')[0] : ''
    );
    $('#aw_jenkel4').val(data.AW_JENKEL4);
    $('#aw_alamt14').val(data.AW_ALAMT14);
    $('#aw_alamt24').val(data.AW_ALAMT24);

    // Setoran
    $('#baywjb').val(app.numberSeparator(data.BAYWJB));
    $('#bayskr').val(app.numberSeparator(data.BAYSKR));
    $('#refptgs').val(data.REFPTGS);
    $('#rekdep').val(data.REKDEP);

    showModalCoe();
  };

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

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

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

      return;
    }

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

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

      return;
    }

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

      swal.fire(
        'Informasi',
        'Tentukan Nominal Siberani!',
        'warning'
      ).then(function() {
        $('#valdep').focus();
      });

      return;
    }

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

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

      return;
    }

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

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

      return;
    }

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

      swal.fire(
        'Informasi',
        'Pilih Perpanjang Otomatis!',
        'warning'
      )
      .then(function() {
        $('#flgaro').focus();
      });

      return;
    }

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

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

      return;
    }

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

      swal.fire(
        'Informasi',
        'Tentukan Referensi Petugas!',
        'warning'
      )
      .then(function() {
        $('#refptgs').focus();
      });

      return;
    }

    unFormData.valdep = unFormData.valdep.replace(/,/g,"");
    unFormData.baywjb = unFormData.baywjb.replace(/,/g,"");
    unFormData.bayskr = unFormData.bayskr.replace(/,/g,"");

    if(unFormData.tglahir === '') {
      unFormData.tglahir = '1899-12-30';
    }

    if(unFormData.aw_tglahir1 === '') {
      unFormData.aw_tglahir1 = '1899-12-30';
    }

    if(unFormData.aw_tglahir2 === '') {
      unFormData.aw_tglahir2 = '1899-12-30';
    }

    if(unFormData.aw_tglahir3 === '') {
      unFormData.aw_tglahir3 = '1899-12-30';
    }

    if(unFormData.aw_tglahir4 === '') {
      unFormData.aw_tglahir4 = '1899-12-30';
    }

    console.log(JSON.stringify(unFormData));

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

    $.ajax({
      type: 'POST',
      url: '{{ url("registrasi-transaksi/deposito/store-or-update") }}/{{ session()->get("kantor") }}',
      data: unFormData,
      success: function(res) {
        console.log(res);
        if(res.success) {
          table.ajax.url('{{ url("registrasi-transaksi/deposito") }}/{{ session()->get("kantor") }}').load(hideModalCoe);

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

        // Enable Button
        app.hideSpinner('#save-deposito-spinner', '#save-deposito-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');

        $.ajax({
          type: 'GET',
          url: '{{ url("registrasi-transaksi/deposito/") }}/{{ 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 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 Modal COE Show
  function showModalCoe() {
    const modalElm = $('#modal-create-or-edit');
    
    modalElm.modal('show');
  }

  // Handle Modal COE Close
  function hideModalCoe() {
    const modalElm = $('#modal-create-or-edit');
    
    modalElm.modal('hide');
  }
</script>
@endsection