@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>
        <button type="button" class="btn btn-sm btn-secondary" id="reset" onclick="resetFilter()">
          <i class="si si-action-undo"></i> RESET FILTER
        </button>
      </div>
      <button type="button" class="btn-block-option" data-toggle="block-option" data-action="fullscreen_toggle">
        <i class="si si-size-fullscreen"></i>
      </button>
    </div>
    <div class="block-content block-content-full">
			<div class="d-flex justifify-flex-start">
				<div class="form-group me-2">
					<select name="iddesa" id="filter-desa" class="form-control 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-control 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-pembiayaan" 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 Anggota</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">
              Registrasi Pembiayaan
            </h3>
            <div class="block-options d-flex justify-content-between">
              <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="close">
                <i class="si si-close"></i>
              </button>
            </div>
          </div>
          <div class="block-content">
            <div class="row justify-content-center">
              <form action="" id="registration-form" class="form-validation">
                @csrf
                <input type="hidden" id="idinpt" name="idinpt" value="{{ session()->get('name') }}">
								<div class="row mb-4">
									<div class="col-6">
										<div class="row g-3">
											<div class="col-6">
												<label for="reg-desa" class="form-label">Desa</label>
												<select name="reg_desa" id="reg-desa" class="form-control form-select" onchange="setRegRumpun(this.value)">
													<option class="fw-bold" value="" hidden>-- PILIH DESA --</option>
													@foreach($desa as $item)
													<option value="{{ $item['IDDESA'] }}">{{ $item['NAMADESA'] }} ( {{ $item['IDDESA'] }} )</option>
													@endforeach
												</select>
											</div>
											<div class="col-6">
												<label for="reg-majelis" class="form-label">Rumpun</label>
												<select name="reg_majelis" id="reg-majelis" class="form-control form-select" onchange="setDdAnggota(this.value)">
													<option class="fw-bold" value="">-- PILIH RUMPUN --</option>
												</select>
											</div>
											<div class="col-6">
												<label for="tglreg" class="form-label">Tgl Registrasi</label>
												<input type="date" class="form-control" name="tglreg" id="tglreg" value="{{ date('Y-m-d', strtotime($params['datenow'])) }}">
											</div>
											<div class="col-6">
												<label for="petugas" class="form-label">Petugas</label>
												<select name="petugas" id="petugas" class="form-control form-select">
													<option class="fw-bold" value="" hidden>-- PILIH PETUGAS --</option>
													@foreach($params['petugas'] as $item)
													<option value="{{ $item['IDPETUGAS'] }}">{{ $item['NAMAPETUGAS'] }} ( {{ $item['IDPETUGAS'] }} )</option>
													@endforeach
												</select>
											</div>
                      <div class="col-12">
                        <label for="nompyd" class="form-label">No. Rekening</label>
                        <input type="text" class="form-control" name="nompyd" id="nompyd" readonly>
                      </div>
											<div class="col-6">
												<div class="form-group">
													<label class="form-label">ID Anggota</label>
													<div class="input-group">
														<div id="r-dropdown" class="dropdown dropend r-dropdown">
															<button type="button" id="btn-dd-anggota" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
																Pilih
															</button>
															<div id="dropdown-anggota" class="dropdown-menu fs-sm pt-0" aria-labelledby="dropdown-anggota">
                                <p class="position-absolute top-50 start-50 translate-middle text-muted">Belum Ada Rumpun Yang Dipilih.</p>
															</div>
														</div>
														<input type="text" class="form-control" name="idanggota" id="idanggota" readonly>
													</div>
												</div>
											</div>
											<div class="col-6 mb-3">
												<label for="nama" class="form-label">Nama Anggota</label>
												<input type="text" class="form-control" name="nama" id="nama" readonly>
											</div>
                      {{-- <div class="col-12">
                        <div id="pembiayaan-lain-block" class="block block-rounded block-bordered block-mode-loading-oneui">
                          <div class="block-header block-header-default">
                            <h3 class="block-title">Pembiayaan Lain</h3>
                            <div class="block-options">
                              <button type="button" class="btn-block-option" data-toggle="block-option" data-action="fullscreen_toggle">
                                <i class="si si-size-fullscreen"></i>
                              </button>
                              <button type="button" class="btn-block-option" data-toggle="block-option" data-action="pinned_toggle">
                                <i class="si si-pin"></i>
                              </button>
                              <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle">
                                <i class="si si-arrow-up"></i>
                              </button>
                            </div>
                          </div>
                          <div class="block-content">
                            <div class="row g-3 mb-4">
                              <div class="col-12">
                                <select name="prodlain" id="prodlain" class="form-control form-select">
                                  <option class="fw-bold" value="">-- PILIH PRODUK --</option>
                                  @foreach($params['prodlain'] as $item)
                                  <option value="{{ $item['kd_barang'] }}">{{ $item['nama_barang'] }} ( {{ $item['kd_barang'] }} )</option>
                                  @endforeach
                                </select>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div> --}}
                      <div class="col-12">
                        <div id="pembiayaan-block" class="block block-rounded block-bordered block-mode-loading-oneui">
                          <div class="block-header block-header-default">
                            <h3 class="block-title">Pembiayaan</h3>
                            <div class="block-options">
                              <button type="button" class="btn-block-option" data-toggle="block-option" data-action="fullscreen_toggle">
                                <i class="si si-size-fullscreen"></i>
                              </button>
                              <button type="button" class="btn-block-option" data-toggle="block-option" data-action="pinned_toggle">
                                <i class="si si-pin"></i>
                              </button>
                              <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle">
                                <i class="si si-arrow-up"></i>
                              </button>
                            </div>
                          </div>
                          <div class="block-content">
                            <div class="row g-3 mb-4">
                              <div class="col-6">
                                <label for="produk" class="form-label">Produk</label>
                                <select name="produk" id="produk" class="form-control form-select" onchange="produkSeted(this.value)">
                                  <option class="fw-bold" value="" hidden>-- PILIH PRODUK --</option>
                                  @foreach($params['produk'] as $item)
                                  <option value="{{ $item['KDPROD'] }}">{{ $item['NMPROD'] }} ( {{ $item['KDPROD'] }} )</option>
                                  @endforeach
                                </select>
                              </div>
                              <div class="col-6">
                                <label for="tenor" class="form-label">Jangka Waktu</label>
                                <select name="tenor" id="tenor" class="form-control form-select" onchange="tenorSeted(this)">
                                  <option class="fw-bold" value="" hidden>-- PILIH TENOR --</option>
                                  @foreach($params['tenor'] as $item)
                                  <option value="{{ $item['KODE'] }}" data-flgrup="{{ $item['FLGRUP'] }}" data-nilai="{{ $item['NILAI'] }}">{{ $item['KETERA'] }}</option>
                                  @endforeach
                                </select>
                                <input type="hidden" name="jwaktu" id="jwaktu">
                                <input type="hidden" name="swaktu" id="swaktu">
                              </div>
                              <div class="col-6">
                                <label for="pydke" class="form-label">Pembayaran Ke</label>
                                <input type="text" class="form-control" name="pydke" id="pydke">
                              </div>
                              <div class="col-6">
                                <label for="plafon" class="form-label">Plafon</label>
                                <input type="text" class="form-control number-separator" name="plafon" id="plafon" onchange="plafonSeted(this)">
                              </div>
                              <div class="col-6">
                                <!-- Hitung Margin
                                .... -->
                                <label for="margin" class="form-label">Margin</label>
                                <input type="text" class="form-control" name="margin" id="margin" readonly>
                              </div>
                              <div class="col-6">
                                <label for="totpmbyn" class="form-label">Total</label>
                                <input type="text" class="form-control" name="totpmbyn" id="totpmbyn" readonly>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-12">
                        <div id="angsuran-block" class="block block-rounded block-bordered block-mode-loading-oneui">
                          <div class="block-header block-header-default">
                            <h3 class="block-title">Angsuran</h3>
                            <div class="block-options">
                              <button type="button" class="btn-block-option" data-toggle="block-option" data-action="fullscreen_toggle">
                                <i class="si si-size-fullscreen"></i>
                              </button>
                              <button type="button" class="btn-block-option" data-toggle="block-option" data-action="pinned_toggle">
                                <i class="si si-pin"></i>
                              </button>
                              <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle">
                                <i class="si si-arrow-up"></i>
                              </button>
                            </div>
                          </div>
                          <div class="block-content">
                            <div class="row g-3 mb-4">
                              <div class="col-6">
                                <!-- Hitung Pokok
                                .... -->
                                <label for="angpkk" class="form-label">Pokok</label>
                                <input type="text" class="form-control" name="angpkk" id="angpkk" readonly>
                              </div>
                              <div class="col-6">
                                <!-- Hitung Margin
                                .... -->
                                <label for="angmgn" class="form-label">Margin</label>
                                <input type="text" class="form-control" name="angmgn" id="angmgn" readonly>
                              </div>
                              <div class="col-6">
                                <label for="angmgo" class="form-label">Minggon</label>
                                <input type="text" class="form-control" name="angmgo" id="angmgo">
                              </div>
                              <div class="col-6">
                                <label for="totangs" class="form-label">Total</label>
                                <input type="text" class="form-control" name="totangs" id="totangs" readonly>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-12">
                        <div id="pembayaran-block" class="block block-rounded block-bordered block-mode-loading-oneui">
                          <div class="block-header block-header-default">
                            <h3 class="block-title">Pembayaran</h3>
                            <div class="block-options">
                              <button type="button" class="btn-block-option" data-toggle="block-option" data-action="fullscreen_toggle">
                                <i class="si si-size-fullscreen"></i>
                              </button>
                              <button type="button" class="btn-block-option" data-toggle="block-option" data-action="pinned_toggle">
                                <i class="si si-pin"></i>
                              </button>
                              <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle">
                                <i class="si si-arrow-up"></i>
                              </button>
                            </div>
                          </div>
                          <div class="block-content">
                            <div class="row g-3 mb-4">
                              <div class="col-6">
                                <!-- Tentukan Simpanan 4%
                                4% dari angka plafon -->
                                <label for="bay4pr" class="form-label">Simpanan 4%</label>
                                <input type="text" class="form-control" name="bay4pr" id="bay4pr">
                              </div>
                              <div class="col-6">
                                <!-- Tentukan Dana Kebajikan
                                1% Dari angka plafon -->
                                <label for="baykbj" class="form-label">Dana Kebajikan</label>
                                <input type="text" class="form-control" name="baykbj" id="baykbj">
                              </div>
                              <div class="col-6">
                                <!-- Tentukan Asuransi
                                0.5% Dari Angka Plafon -->
                                <label for="bayasu" class="form-label">Asuransi</label>
                                <input type="text" class="form-control" name="bayasu" id="bayasu">
                              </div>
                              <div class="col-6">
                                <!-- Tentukan Infaq
                                Ambil Dari Table pas_kant field NOMINF -->
                                <label for="bayinf" class="form-label">Infaq</label>
                                <input type="text" class="form-control" name="bayinf" id="bayinf">
                              </div>
                              <div class="col-6">
                                <label for="totpembyrn" class="form-label">Total</label>
                                <input type="text" class="form-control" name="totpembyrn" id="totpembyrn" readonly>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-12">
                        <div id="tanggal-block" class="block block-rounded block-bordered block-mode-loading-oneui">
                          <div class="block-header block-header-default">
                            <h3 class="block-title">Tanggal</h3>
                            <div class="block-options">
                              <button type="button" class="btn-block-option" data-toggle="block-option" data-action="fullscreen_toggle">
                                <i class="si si-size-fullscreen"></i>
                              </button>
                              <button type="button" class="btn-block-option" data-toggle="block-option" data-action="pinned_toggle">
                                <i class="si si-pin"></i>
                              </button>
                              <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle">
                                <i class="si si-arrow-up"></i>
                              </button>
                            </div>
                          </div>
                          <div class="block-content">
                            <div class="row g-3 mb-4">
                              <div class="col-6">
                                <label for="tgdrop" class="form-label">Tanggal Cair</label>
                                <input type="date" class="form-control" name="tgdrop" id="tgdrop" data-val="" onclick="setDataValue(this)" onchange="setOtherDate(this.value)">
                              </div>
                              <div class="col-6">
                                <!-- Tentukan Tanggal Angsuran
                                plus semingu dari tanggal droping -->
                                <label for="tglang" class="form-label">Tanggal Angsuran</label>
                                <input type="date" class="form-control" name="tglang" id="tglang">
                              </div>
                              <div class="col-6">
                                <!-- Tentukan Tanggal Jatuh Tempo
                                proc_jatuhtempo(jangka waktu, satuan waktu, tanggal angsuran)  -->
                                <label for="tgjtmp" class="form-label">Tanggal Jatuh Tempo</label>
                                <input type="date" class="form-control" name="tgjtmp" id="tgjtmp" readonly>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-12">
                        <div id="tujuan-block" class="block block-rounded block-bordered block-mode-loading-oneui">
                          <div class="block-header block-header-default">
                            <h3 class="block-title">Tujuan</h3>
                            <div class="block-options">
                              <button type="button" class="btn-block-option" data-toggle="block-option" data-action="fullscreen_toggle">
                                <i class="si si-size-fullscreen"></i>
                              </button>
                              <button type="button" class="btn-block-option" data-toggle="block-option" data-action="pinned_toggle">
                                <i class="si si-pin"></i>
                              </button>
                              <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle">
                                <i class="si si-arrow-up"></i>
                              </button>
                            </div>
                          </div>
                          <div class="block-content">
                            <div class="row g-3 mb-4">
                              <div class="col-6">
                                <label for="petugas" class="form-label">Tujuan</label>
                                <select name="kdtuju" id="kdtuju" class="form-control form-select">
                                  <option class="fw-bold" value="">-- PILIH TUJUAN --</option>
                                  @foreach($params['kdtuju'] as $item)
                                  <option value="{{ $item['KODE'] }}">{{ $item['KETERA'] }} ( {{ $item['KODE'] }} )</option>
                                  @endforeach
                                </select>
                              </div>
                              <div class="col-6">
                                <label for="ketuju" class="form-label">Keterangan</label>
                                <input type="text" class="form-control" name="ketuju" id="ketuju">
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
										</div>
									</div>
									<div class="col-6">
                    <div id="no-content" class="position-relative w-100 h-100">
                      <p class="position-absolute top-50 start-50 translate-middle text-muted">Belum Ada Anggota Yang Dipilih.</p>
                    </div>
                    <div id="anggota-container" data-anggota="0" data-anggota-keluarga="0" class="block block-rounded block-transparent block-mode-loading-oneui mb-0" style="display: none">
                      <div class="block-header d-flex justify-flex-start p-0 mb-4" aria-label="Small Horizontal Primary" role="tablist">
                        <h3 id="tabs-title" class="block-title mb-0">Anggota</h3>
                        <div class="btn-group btn-group-sm ms-auto" role="group">
                          <button type="button" class="btn btn-primary" onclick="toPrevPage(this)" disabled>
                            <i class="si si-arrow-left"></i>
                          </button>
                          <button type="button" class="btn btn-primary" onclick="toNextPage(this)">
                            <i class="si si-arrow-right"></i>
                          </button>
                        </div>
                      </div>
                      <div class="block-content tab-content tab-content-pn p-0 js-sidebar-scroll">
                        <div class="tab-pane active" role="tabpanel" aria-labelledby="data-anggota" data-title="Anggota">
                          @include('registrasi_transaksi.pembiayaan.detail_anggota._anggota')
                        </div>
                        <div class="tab-pane" role="tabpanel" aria-labelledby="data-pasangan" data-title="Pasangan">
                          @include('registrasi_transaksi.pembiayaan.detail_anggota._pasangan')
                        </div>
                        <div class="tab-pane" role="tabpanel" aria-labelledby="data-keluarga" data-title="Anggota Keluarga">
                          @include('registrasi_transaksi.pembiayaan.detail_anggota._keluarga')
                        </div>
                        <div class="tab-pane" role="tabpanel" aria-labelledby="data-keluarga" data-title="Indeks Rumah">
                          @include('registrasi_transaksi.pembiayaan.detail_anggota._index_rumah')
                        </div>
                        <div class="tab-pane" role="tabpanel" aria-labelledby="data-keluarga" data-title="Aset Rumah Tangga">
                          @include('registrasi_transaksi.pembiayaan.detail_anggota._aset_rumah')
                        </div>
                        <div class="tab-pane" role="tabpanel" aria-labelledby="data-keluarga" data-title="Usaha Rumah Tangga">
                          @include('registrasi_transaksi.pembiayaan.detail_anggota._usaha')
                        </div>
                        <div class="tab-pane" role="tabpanel" aria-labelledby="data-keluarga" data-title="Pendapatan">
                          @include('registrasi_transaksi.pembiayaan.detail_anggota._pendapatan')
                        </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-pembiayaan" class="btn btn-sm btn-primary" onclick="saveData()">
              <div id="save-pembiayaan-spinner" style="display: none;">
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" ></span>
                Loading...
              </div>
              <div id="save-pembiayaan-submit">{{ strtoupper("Simpan") }}</div>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Modal Tambah Atau Ubah Data -->
@endsection

@section('js')
<script type='text/javascript'>
  let table = $('#tbl-pembiayaan').DataTable({
    processing: true,
    serverSide: false,
    autoWidth: false,
    order: [[1, 'desc']],
    search: {
      regex: true
    },
    ajax: '{{ url("registrasi-transaksi/pembiayaan") }}/{{ session()->get("kantor") }}',
    columns: [
      {
        data: 'DT_RowIndex',
        name: 'ROWIDX',
      },
      {
        data: 'NOMPYD',
        name: 'NOMPYD'
      },
      {
        data: 'NAMA',
        name: 'NAMA'
      },
      {
        data: 'NMPROD',
        name: 'NMPROD'
      },
			{
        data: 'IDMAJELIS',
        name: 'IDMAJELIS'
      },
      {
        data: 'NOMPYD',
        name: 'ACTION'
      },
    ],
    columnDefs: [
      {
        targets: 0,
        className: 'dt-body-center',
				width: '60px',
        orderable: false,
        searchable: false
      },
      {
        targets: 3,
        width: '300px',
        orderable: false
      },
      {
        targets: 4,
        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);
    setFilterOnHeadTable(table);
  });

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

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

  // Handle Modal Create Or Edit Transaksi On Close
  $('#modal-create-or-edit').on('hidden.bs.modal', function () {
    const buttonElm = $('#btn-dd-anggota');
    const formElm = $('#registration-form');
    const regDesaElm = $('#reg-desa');
    const regMajelisElm = $('#reg-majelis');
    const anggotaElm = $('#anggota-container');
    const noContentElm = $('#no-content');
    
    formElm[0].reset();
    buttonElm.prop('disabled', false);
    regDesaElm.prop('disabled', false);
    regMajelisElm.html('<option class="fw-bold" value="">-- SEMUA RUMPUN --</option>');
    regMajelisElm.prop('readonly', false);

    anggotaElm.data('anggota', '');
    anggotaElm.hide();
    noContentElm.show();
  });

  // 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(4)
				.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 Rumpun For Regitration
	function setRegRumpun(value) {
    const rumpunElm = $('#reg-majelis');

    if($('#anggota-container').is(':visible')) {
      resetAnggota();
    }

    if($('#dropdown-anggota .dropdown-item').length > 0) {
      $('#dropdown-anggota').html('<p class="position-absolute top-50 start-50 translate-middle text-muted">Belum Ada Rumpun Yang Dipilih.</p>');
    }

    $.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 For Regitration
	function setDdAnggota(value) {
		const ddAnggota = $('#dropdown-anggota');

    if($('#anggota-container').is(':visible')) {
      resetAnggota();
    }

		$.ajax({
			type: 'GET',
			url: '{{ url("registrasi-transaksi/pembiayaan/getddanggota") }}/{{ session()->get("kantor") }}/' + value,
			success: function(data) {
				ddAnggota.html('<input type="text" class="form-control r-boxshadow rounded-0 filter-dropdown" placeholder="Search.." id="filter-anggota" onkeyup="searchDdAnggota(this)">');

				$.each(data, function(i, val) {
					let elm = '<a class="dropdown-item btn" data-id="' + val.IDANGGOTA + '" data-name="' + val.NAMA + '" onclick="setRegAnggota(this)">';
							elm += '( ' + val.IDANGGOTA  + ' ) ';
							elm += '<span>' + val.NAMA + '</span>';
					
          ddAnggota.append(elm);
        });

				ddAnggota.append('<p class="r-notfound" style="display: none; padding: .6rem 0.8rem;">Not Found.</p>');
			}
		});
	}

	// Handle Search By Rumpun
	function searchData(value) {
		table
			.column(4)
			.search(value)
			.draw();
	}
	
	// Handle Select Ledger
  function setRegAnggota(self) {    
    const id = $(self).data('id');
    const name = $(self).data('name');

    One.block('state_loading', '#anggota-container');
    $('#idanggota').val(id);
    $('#nama').val(name);
    $('#anggota-container').data('anggota', id);

    if($('#anggota-container').is(':hidden')) {
      $('#no-content').hide();
      $('#anggota-container').show();
    }

    getInputAnggota(id);
  };

  // Handle Get Input Anggota
  function getInputAnggota(id) {
    $.ajax({
      type: 'GET',
      url: '{{ url("registrasi-transaksi/pembiayaan/getanggota") }}/{{ session()->get("kantor") }}/' + id,
      success: function(res) {
        const data = res[0];

        setInputAnggota(data);
      }
    });

    $(document).ajaxStop(function() {
      One.block('state_normal', '#anggota-container');
    });

    // One.block('state_normal', '#anggota-container');
  }

  // Handle Set Input Anggota
  function setInputAnggota(data) {
    // Data Anggota
    $('#stnikah').val(data.STNIKAH);
    $('#penddk').val(data.PENDDK);
    $('#pekerj').val(data.PEKERJ);
    $('#ketkerj').val(data.KETKERJ);
    $('#alamt1').val(data.ALAMT1);
    $('#alamt2').val(data.ALAMT2);
    $('#rt').val(data.RT);
    $('#rw').val(data.RW);
    $('#notelp').val(data.NOTELP);
    $('#agama').val(data.AGAMA);
    $('#nomoid').val(data.NOMOID);
    $('#jenisid').val(data.JENISID);

    // Data Pasangan
    $('#pasnama').val(data.PASNAMA);
    $('#pastmplahir').val(data.PASTMPLAHIR);
    $('#pastglahir').val(
      data.PASTGLAHIR !== '1899-12-30 00:00:00' && data.PASTGLAHIR !== null ?
      data.PASTGLAHIR.split(' ')[0] : ''
    );
    $('#paspenddk').val(data.PASPENDDK);
    $('#paspekerj').val(data.PASPEKERJ);
    $('#pasketkerj').val(data.PASKETKERJ);
    $('#pasagama').val(data.PASAGAMA);

    // Data Keluarga
    // Tgg 1
    $('#tggnama').val(data.TGGNAMA);
    $('#tggtglahir').val(
      data.TGGTGLAHIR !== '1899-12-30 00:00:00' && data.TGGTGLAHIR !== null ?
      data.TGGTGLAHIR.split(' ')[0] : ''
    );
    $('#tgghubungan').val(data.TGGHUBUNGAN);
    $('#tggstnikah').val(
      data.TGGSTNIKAH !== '' && data.TGGSTNIKAH !== null ?
      data.TGGSTNIKAH : '0'
    );
    $('#tggpekerj').val(data.TGGPEKERJ);
    $('#tggpenddk').val(data.TGGPENDDK);
    $('#tggjenkel').val(data.TGGJENKEL);

    // Tgg 2
    $('#tggnama1').val(data.TGGNAMA1);
    $('#tggtglahir1').val(
      data.TGGTGLAHIR1 !== '1899-12-30 00:00:00' && data.TGGTGLAHIR1 !== null ?
      data.TGGTGLAHIR1.split(' ')[0] : ''
    );
    $('#tgghubungan1').val(data.TGGHUBUNGAN1);
    $('#tggstnikah1').val(data.TGGSTNIKAH1);
    $('#tggpekerj1').val(data.TGGPEKERJ1);
    $('#tggpenddk1').val(data.TGGPENDDK1);
    $('#tggjenkel1').val(data.TGGJENKEL1);

    // Tgg 3
    $('#tggnama2').val(data.TGGNAMA2);
    $('#tggtglahir2').val(
      data.TGGTGLAHIR2 !== '1899-12-30 00:00:00' && data.TGGTGLAHIR2 !== null ?
      data.TGGTGLAHIR2.split(' ')[0] : ''
    );
    $('#tgghubungan2').val(data.TGGHUBUNGAN2);
    $('#tggstnikah2').val(data.TGGSTNIKAH2);
    $('#tggpekerj2').val(data.TGGPEKERJ2);
    $('#tggpenddk2').val(data.TGGPENDDK2);
    $('#tggjenkel2').val(data.TGGJENKEL2);

    // Tgg 4
    $('#tggnama3').val(data.TGGNAMA3);
    $('#tggtglahir3').val(
      data.TGGTGLAHIR3 !== '1899-12-30 00:00:00' && data.TGGTGLAHIR3 !== null ?
      data.TGGTGLAHIR3.split(' ')[0] : ''
    );
    $('#tgghubungan3').val(data.TGGHUBUNGAN3);
    $('#tggstnikah3').val(data.TGGSTNIKAH3);
    $('#tggpekerj3').val(data.TGGPEKERJ3);
    $('#tggpenddk3').val(data.TGGPENDDK3);
    $('#tggjenkel3').val(data.TGGJENKEL3);

    // Tgg 5
    $('#tggnama4').val(data.TGGNAMA4);
    $('#tggtglahir4').val(
      data.TGGTGLAHIR4 !== '1899-12-30 00:00:00' && data.TGGTGLAHIR4 !== null ?
      data.TGGTGLAHIR4.split(' ')[0] : ''
    );
    $('#tgghubungan4').val(data.TGGHUBUNGAN4);
    $('#tggstnikah4').val(data.TGGSTNIKAH4);
    $('#tggpekerj4').val(data.TGGPEKERJ4);
    $('#tggpenddk4').val(data.TGGPENDDK4);
    $('#tggjenkel4').val(data.TGGJENKEL4);

    // Index Rumah
    $('#idxstrumah').val(data.IDXSTRUMAH);
    $('#idxjnbangunan').val(data.IDXJNBANGUNAN);
    $('#idxjnatap').val(data.IDXJNATAP);
    $('#idxjnjamban').val(data.IDXJNJAMBAN);
    $('#idxjnlistrik').val(data.IDXJNLISTRIK);
    $('#idxjnseptic').val(data.IDXJNSEPTIC);
    $('#idxjndinding').val(data.IDXJNDINDING);
    $('#idxjnlantai').val(data.IDXJNLANTAI);
    $('#idxjnsumair').val(data.IDXJNSUMAIR);

    // Aset Rumah Tangga
    $('#lhnrumahluas').val(app.numberSeparator(data.LHNRUMAHLUAS));
    $('#lhnrumahnilai').val(app.numberSeparator(data.LHNRUMAHNILAI));
    $('#lhnsawahluas').val(app.numberSeparator(data.LHNSAWAHLUAS));
    $('#lhnsawahnilai').val(app.numberSeparator(data.LHNSAWAHNILAI));
    $('#lhnkebunluas').val(app.numberSeparator(data.LHNKEBUNLUAS));
    $('#lhnkebunnilai').val(app.numberSeparator(data.LHNKEBUNNILAI));
    $('#lhnpekarluas').val(app.numberSeparator(data.LHNPEKARLUAS));
    $('#lhnpekarnilai').val(app.numberSeparator(data.LHNPEKARNILAI));
    $('#tnkunggasjml').val(app.numberSeparator(data.TNKUNGGASJML));
    $('#tnkunggasnilai').val(app.numberSeparator(data.TNKUNGGASNILAI));
    $('#tnkdombajml').val(app.numberSeparator(data.TNKDOMBAJML));
    $('#tnkdombanilai').val(app.numberSeparator(data.TNKDOMBANILAI));
    $('#tnksapijml').val(app.numberSeparator(data.TNKSAPIJML));
    $('#tnksapinilai').val(app.numberSeparator(data.TNKSAPINILAI));
    $('#simtabungan').val(app.numberSeparator(data.SIMTABUNGAN));
    $('#simdeposito').val(app.numberSeparator(data.SIMDEPOSITO));
    $('#simlain').val(app.numberSeparator(data.SIMLAIN));
    $('#elkhpjml').val(app.numberSeparator(data.ELKHPJML));
    $('#elkhpnilai').val(app.numberSeparator(data.ELKHPNILAI));
    $('#elktvjml').val(app.numberSeparator(data.ELKTVJML));
    $('#elktvnilai').val(app.numberSeparator(data.ELKTVNILAI));
    $('#elkdvdjml').val(app.numberSeparator(data.ELKDVDJML));
    $('#elkdvdnilai').val(app.numberSeparator(data.ELKDVDNILAI));
    $('#elkkulkasjml').val(app.numberSeparator(data.ELKKULKASJML));
    $('#elkkulkasnilai').val(app.numberSeparator(data.ELKKULKASNILAI));
    $('#elkmcucijml').val(app.numberSeparator(data.ELKMCUCIJML));
    $('#elkmcucinilai').val(app.numberSeparator(data.ELKMCUCINILAI));
    $('#elklainjml').val(app.numberSeparator(data.ELKLAINJML));
    $('#elklainnilai').val(app.numberSeparator(data.ELKLAINNILAI));
    $('#kndsepedajml').val(app.numberSeparator(data.KNDSEPEDAJML));
    $('#kndsepedanilai').val(app.numberSeparator(data.KNDSEPEDANILAI));
    $('#kndmotorjml').val(app.numberSeparator(data.KNDMOTORJML));
    $('#kndmotornilai').val(app.numberSeparator(data.KNDMOTORNILAI));
    $('#kndmobiljml').val(app.numberSeparator(data.KNDMOBILJML));
    $('#kndmobilnilai').val(app.numberSeparator(data.KNDMOBILNILAI));
    $('#kndlainjml').val(app.numberSeparator(data.KNDLAINJML));
    $('#kndlainnilai').val(app.numberSeparator(data.KNDLAINNILAI));

    // Usaha
    $('#ushlokasi').val(data.USHLOKASI);
    $('#ushomset').val(app.numberSeparator(data.USHOMSET));

    // Pendapatan
    $('#pendsuamitetap').val(app.numberSeparator(data.PENDSUAMITETAP));
    $('#pendsuamittetap').val(app.numberSeparator(data.PENDSUAMITTETAP));
    $('#pendistritetap').val(app.numberSeparator(data.PENDISTRITETAP));
    $('#pendistrittetap').val(app.numberSeparator(data.PENDISTRITTETAP));
    $('#pendlaintetap').val(app.numberSeparator(data.PENDLAINTETAP));
    $('#pendlainttetap').val(app.numberSeparator(data.PENDLAINTTETAP));

    // Pengeluaran
    $('#bykonberas').val(app.numberSeparator(data.BYKONBERAS));
    $('#bysatberas').val(data.BYSATBERAS);
    $('#byhrgberas').val(app.numberSeparator(data.BYHRGBERAS));

    const totalbyberas = parseInt(data.BYKONBERAS) * parseInt(data.BYHRGBERAS);
    $('#totalbyberas').val(app.numberSeparator(totalbyberas));
    $('#bydapur').val(app.numberSeparator(data.BYDAPUR));
    $('#byrekening').val(app.numberSeparator(data.BYREKENING));
    $('#bypenddk').val(app.numberSeparator(data.BYPENDDK));
    $('#bylain').val(app.numberSeparator(data.BYLAIN));
    
    const totalPend = parseInt(data.PENDSUAMITETAP)
                      + parseInt(data.PENDSUAMITTETAP)
                      + parseInt(data.PENDISTRITETAP)
                      + parseInt(data.PENDISTRITTETAP)
                      + parseInt(data.PENDLAINTETAP)
                      + parseInt(data.PENDLAINTTETAP);
    const totalPeng = totalbyberas
                      + parseInt(data.BYDAPUR)
                      + parseInt(data.BYREKENING)
                      + parseInt(data.BYPENDDK)
                      + parseInt(data.BYLAIN);
    const savingCap = totalPend - totalPeng;

    $('#total-pendapatan').text(app.numberSeparator(totalPend));
    $('#saving-capacity').text(app.numberSeparator(savingCap));

    getTotalAnggotaKeluarga(data.IDANGGOTA).then(function(data) {
      if(data !== 0) {
        let totalPerkap = Math.round(totalPend / data);

        $('#total-perkapita').text(app.numberSeparator(totalPerkap));
        $('#anggota-container').data('anggota-keluarga', data);
      }
    });
  }

  // Handle get Total Anggota Keluarga
  async function getTotalAnggotaKeluarga(id) {
      let result;

      try {
        result = await $.ajax({
          type: 'GET',
          url: '{{ url("anggota-pendapatan/gettotalanggotakeluarga") }}/{{ session()->get('kantor') }}/' + id
        });
      } catch (error) {
          console.log(error);
      }
      
      return result;
    }

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

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

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

	// Handle To Next Page
	function toNextPage(self) {
		const tabContent = $('.tab-content-pn');
		const tabActive = tabContent.children('.active');
		const tabNext = tabActive.next();
    const tabsTitle = $('#tabs-title');
    const title = tabNext.data('title');

		if(tabNext.length !== 0) {
      if(tabNext.next().length === 0) {
				$(self).prop('disabled', true);
			}

			if($(self).prev().is(':disabled')) {
				$(self).prev().prop('disabled', false);
			}
      
			tabActive.removeClass('active');
			tabNext.addClass('active');
      tabsTitle.text(title);
		}
	}

	// Handle To Prev Page
	function toPrevPage(self) {
		const tabContent = $('.tab-content-pn');
		const tabActive = tabContent.children('.active');
		const tabPrev = tabActive.prev();
    const tabsTitle = $('#tabs-title');
    const title = tabPrev.data('title');

		if(tabPrev.length !== 0) {
      if(tabPrev.prev().length === 0) {
				$(self).prop('disabled', true);
			}

			if($(self).next().is(':disabled')) {
				$(self).next().prop('disabled', false);
			}
      
			tabActive.removeClass('active');
			tabPrev.addClass('active');
      tabsTitle.text(title);
		}
	}

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

  // Handle Produk Seted
  function produkSeted(value) {
    if($('#tenor').val().length > 0 && $('#plafon').val().length > 0) {
      setOtherField();
    }
  }

  // Handle Jangka Waktu Seted
  function tenorSeted(self) {
    const jWaktu = $(self).find(':selected').data('nilai');
    const sWaktu = $(self).find(':selected').data('flgrup');

    $('#jwaktu').val(jWaktu);
    $('#swaktu').val(sWaktu);

    if($('#tgdrop').val().length > 0) {
      setOtherDate($('#tgdrop').val());
    }

    if($('#produk').val().length > 0 && $('#plafon').val().length > 0) {
      setOtherField();
    }
  }

  // Handle Plafon Seted
  function plafonSeted(self) {
    if($('#produk').val().length === 0) {
      document.activeElement.blur();

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

      return;
    }

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

      swal.fire(
        'Informasi',
        'Pilih Jangka Waktu Terlebih Dahulu!',
        'warning'
      ).then(function() {
        $(self).val('');
        $("#tenor").focus();
      });

      return;
    }

    setOtherField();
  }

  /*
  Set Pembiayaan Margin
  Set Angsuran Pokok
  Set Angsuran Margin
  Set Bayar Simpanan 4%
  Set Bayar Dana Kebajikan
  Set Bayar Asuransi
  Set Bayar Infaq
  */
  function setOtherField() {
    const token = $('input[name=_token]').val();
    const iPlafon = $('#plafon').val().replace(/,/g,"");
    const ijWaktu = $('#tenor').find(':selected').data('nilai');
    const isWaktu = $('#tenor').find(':selected').data('flgrup');
    const iKdprod = $('#produk').val();

    const params = {
      _token: token,
      iplafon: iPlafon,
      ijwaktu: ijWaktu,
      iswaktu: isWaktu,
      ikdprod: iKdprod
    }

    $.ajax({
      type: 'POST',
      url: '{{ url("registrasi-transaksi/pembiayaan/getprocpydangs") }}/{{ session()->get("kantor") }}',
      data: params,
      beforeSend : function() {
        $('#save-pembiayaan').prop('disabled', true);
      },
      success: function(res) {
        // console.log(res);
        const data = res[0];
        const totAngs = parseFloat(data.OANGSUR) + parseFloat(data.NILNOM);
        const margin = parseFloat(data.OANGMGN * ijWaktu);
        const totPmbyn = parseFloat(iPlafon) + margin;
        const bay4pr = (4/100) * parseFloat(iPlafon);
        const baykbj = (1/100) * parseFloat(iPlafon);
        const bayasu = (1/100) * parseFloat(iPlafon);
        const bayinf = parseFloat(@json($params['depr'][0]['NOMINF']));
        const totpembyrn = bay4pr + baykbj + bayasu + bayinf;

        $('#angpkk').val(app.numberSeparator(data.OANGPKK));
        $('#angmgn').val(app.numberSeparator(data.OANGMGN));
        $('#angmgo').val(app.numberSeparator(data.NILNOM));
        $('#totangs').val(app.numberSeparator(totAngs));
        $('#margin').val(app.numberSeparator(margin));
        $('#totpmbyn').val(app.numberSeparator(totPmbyn));
        $('#bay4pr').val(app.numberSeparator(bay4pr));
        $('#baykbj').val(app.numberSeparator(baykbj));
        $('#bayasu').val(app.numberSeparator(bayasu));
        $('#bayinf').val(app.numberSeparator(bayinf));
        $('#totpembyrn').val(app.numberSeparator(totpembyrn));
      },
      complete: function() {
        $('#save-pembiayaan').prop('disabled', false);
      }
    });
  }

  /*
  Set Tanggal Angsuran
  Set Tanggal Jatuh Tempo
  */
  function setOtherDate(value) {
    const tglCair = new Date(value);
    tglCair.setDate(tglCair.getDate() + 7);
    const tglAngs = tglCair.getFullYear()
                    + "-" + ('0' + (tglCair.getMonth() +1 )).slice(-2)
                    + "-" + ('0' + tglCair.getDate()).slice(-2);
    const ijWaktu = $('#tenor').find(':selected').data('nilai');
    const isWaktu = $('#tenor').find(':selected').data('flgrup');
    const params = {
      _token: $('input[name=_token]').val(),
      ijwaktu: ijWaktu,
      iswaktu: isWaktu,
      itglang: tglAngs
    }

    $('#tglang').attr('min', value);

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

      return;
    }

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

        $('#tglang').val(tglAngs);
        $('#tgjtmp').val(data.OTGJTMP.split(' ')[0]);
      },
      complete: function() {
        $('#save-pembiayaan').prop('disabled', false);
      }
    });
  }

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

  // Handle Reset Tanggal
  function resetAnggota(){
    $('#idanggota').val('');
    $('#nama').val('');
    $('#no-content').show();
    $('#anggota-container').hide();
    $(':input', '#anggota-container')
    .val('')
    .prop('checked', false)
    .prop('selected', false);
  }

  // Handle Add Filter On Head Table
  function setFilterOnHeadTable(table) {
    table
        .columns([3])
        .every(function () {
          const column = table.column( this, {search: 'applied'} );
          const currSearch = column.search();
          const select = $('<select id="filter-produk" class="form-control form-select"><option class="fw-bold" value="">-- PRODUK --</option></select>')
              .appendTo($(column.header()).empty())
              .on('change', function () {
                  const val = $.fn.dataTable.util.escapeRegex($(this).val());

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

          column
              .data()
              .unique()
              .sort()
              .each(function (d, j) {   
                select.append('<option value="' + d + '">' + d + '</option>');
              });
          
          if (currSearch) {
            select.val( currSearch.substring(1, currSearch.length-1) );
          }
        });
  }

  // Handle Edit Transaksi
  function editData(self) {
    const data = table.row($(self).parents('tr')).data();
    const nmMajelis = $.map(@json($params['majelis']), function(item) {
      if(item.IDMAJELIS === data.IDMAJELIS) return item.NAMAMAJELIS;
    });
    
    // Disabled Button, input, Select
    $('#reg-desa')
      .val(data.IDDESA)
      .prop('disabled', true);
    $('#reg-majelis')
        .html('<option value="' + data.IDMAJELIS + '">' + nmMajelis[0] + ' ' + '( ' + data.IDMAJELIS + ' )' + '</option>')
        .prop('readonly', true);
    $('#btn-dd-anggota').prop('disabled', true);

    // Pass Data
    $('#petugas').val(data.IDPETUGAS);
    $('#nompyd').val(data.NOMPYD);
    $('#idanggota').val(data.IDANGGOTA);
    $('#nama').val(decodeHTMLEntities(data.NAMA));
    $('#produk').val(data.KDPROD);
    $('#tenor').val(data.KDTENOR);
    $('#jwaktu').val(data.JWAKTU);
    $('#swaktu').val(data.SWAKTU);
    $('#pydke').val(data.PYDKE);
    $('#plafon').val(app.numberSeparator(data.PLAFON));
    $('#margin').val(app.numberSeparator(data.MARGIN));

    const plafon = data.PLAFON !== null ? parseFloat(data.PLAFON) : 0;
    const margin = data.MARGIN !== null ? parseFloat(data.MARGIN) : 0;
    $('#totpmbyn').val(app.numberSeparator(plafon + margin));

    $('#angpkk').val(app.numberSeparator(data.ANGPKK));
    $('#angmgn').val(app.numberSeparator(data.ANGMGN));
    $('#angmgo').val(app.numberSeparator(data.ANGMGO));

    const angpkk = data.PLAFON !== null ? parseFloat(data.PLAFON) : 0;
    const angmgn = data.ANGMGN !== null ? parseFloat(data.ANGMGN) : 0;
    const angmgo = data.ANGMGO !== null ? parseFloat(data.ANGMGO) : 0;
    $('#totangs').val(app.numberSeparator(angpkk + angmgn + angmgo));

    $('#bay4pr').val(app.numberSeparator(data.BAY4PR));
    $('#baykbj').val(app.numberSeparator(data.BAYKBJ));
    $('#bayasu').val(app.numberSeparator(data.BAYASU));
    $('#bayinf').val(app.numberSeparator(data.BAYINF));

    const bay4pr = data.BAY4PR !== null ? parseFloat(data.BAY4PR) : 0;
    const baykbj = data.BAYKBJ !== null ? parseFloat(data.BAYKBJ) : 0;
    const bayasu = data.BAYASU !== null ? parseFloat(data.BAYASU) : 0;
    const bayinf = data.BAYINF !== null ? parseFloat(data.BAYINF) : 0;
    $('#totpembyrn').val(app.numberSeparator(bay4pr + baykbj + bayasu + bayinf));

    $('#kdtuju').val(data.KDTUJU);
    $('#ketuju').val(data.KETUJU);
    $('#tglreg').val(data?.TGLREG !== null ? data?.TGLREG.split(' ')[0] : '');
    $('#tgdrop').val(data?.TGDROP !== null ? data?.TGDROP.split(' ')[0] : '');
    $('#tglang').val(data?.TGLANG !== null ? data?.TGLANG.split(' ')[0] : '');
    $('#tglang').attr('min', data?.TGDROP !== null ? data?.TGDROP.split(' ')[0] : '');
    $('#tgjtmp').val(data?.TGJTMP !== null ? data?.TGJTMP.split(' ')[0] : '');

    $('#anggota-container').data('anggota', data.IDANGGOTA);

    if($('#anggota-container').is(':hidden')) {
      $('#no-content').hide();
      $('#anggota-container').show();
    }

    setInputAnggota(data);
    showModalCoe();
  };

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

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

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

      swal.fire(
        'Informasi',
        'Tentukan Rumpun!',
        'warning'
      )
      .then(function() {
        $("#reg-majelis").focus();
      });

      return;
    }

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

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

      return;
    }

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

      swal.fire(
        'Informasi',
        'Pilih Anggota!',
        'warning'
      ).then(function() {
        $('#btn-dd-anggota').focus();
      });

      return;
    }

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

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

      return;
    }

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

      swal.fire(
        'Informasi',
        'Tentukan Jangka Waktu!',
        'warning'
      )
      .then(function() {
        $('#tenor').focus();
      });

      return;
    }

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

      swal.fire(
        'Informasi',
        'Tentukan Pembayaran Ke!',
        'warning'
      )
      .then(function() {
        $('#pydke').focus();
      });

      return;
    }

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

      swal.fire(
        'Informasi',
        'Tentukan Plafon!',
        'warning'
      )
      .then(function() {
        $('#plafon').focus();
      });

      return;
    }

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

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

      return;
    }

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

      swal.fire(
        'Informasi',
        'Pilih Tujuan Pembiayaan!',
        'warning'
      )
      .then(function() {
        $('#kdtuju').focus();
      });

      return;
    }

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

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

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

        $.ajax({
          type: 'GET',
          url: '{{ url("registrasi-transaksi/pembiayaan/") }}/{{ 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');
  }

  // Handle Reset Filter
  function resetFilter() {
    table
      .columns(3).search('')
      .columns(4).search('')
      .draw();

      $('#filter-desa').val('');
      $('#filter-rumpun').val('');
      $('#filter-produk').val('');
  }

  // Handle Check Holiday Date For Tgl Angsuran
  function holidayCheck(tglAng) {
    const harakt = @json($params['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 Decode Html Special Char
  function decodeHTMLEntities(text) {
    let textArea = document.createElement('textarea');
    textArea.innerHTML = text;

    return textArea.value;
  }
</script>
@endsection