@extends('template.master')

@section('title', 'Dashboard TKPK - P3KE')
@section('description', 'Meta Description - Deskripsi setiap view dalam website')

@section('body')
<style>
  .swal2-container {
    z-index: 3051;
  }
  .select2-container.select2-container--default.select2-container--open  {
    z-index: 5000;
  }
</style>
        <!-- Content wrapper -->
        <div class="content-wrapper">
          <!-- Content -->

          <div class="container-xxl flex-grow-1 container-p-y">
            <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Pages/</span> Pensasaran Percepatan Penghapusan Kemiskinan Ekstrem (P3KE)</h4>
            
            <div class="text-start mb-3">
              @if (Session::get('user')->user_role != "diskominfo")
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addData">
                  Tambah
                </button>
              @else

              @endif
          </div>
          
            <div class="card mb-3">
              <div class="container">
                <h5 class="main-filter"><i class='bx bx-filter-alt icon-filter' ></i>Filter Berdasarkan :</h5>
                <div class="row">
                  <div class="col-md-4">
                    {{-- <label for="selectpickerBasic" class="form-label">Status Keluarga</label> --}}
                    <select id="stts_anggota" name="stts_anggota" class="selectpicker w-100" data-style="btn-default">
                      <option value="">Semua Status Anggota</option>
                      <option value="individu">Individu</option>
                      <option value="kepkel">Kepala Keluarga</option>
                    </select>
                  </div>
                  <div class="col-md-4">
                    {{-- <label for="selectpickerBasic" class="form-label">Desil Kesejahteraan</label> --}}
                    <select id="desil" name="desil" class="selectpicker w-100" data-style="btn-default">
                      <option value="">Semua Desil Kesejahteraan</option>
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                    </select>
                  </div>
                  {{-- <div class="col-md-4">
                    <label for="selectpickerBasic" class="form-label">Jenis PSKS</label>
                    <select id="selectpickerBasic" class="selectpicker w-100" data-style="btn-default">
                      <option>--Pilih--</option>
                      <option>Pekerja Sosial (Profesional)</option>
                      <option>Pekerja Sosial Masyarakat (PSM)</option>
                      <option>Taruna siaga Bencana (TAGANA)</option>
                      <option>Lembaga Kesejahteraan Sosial (LKS)</option>
                      <option>Karang taruna.</option>
                      <option>Lembaga Konsultasi Kesejahteraan Keluarga</option>
                    </select>
                  </div> --}}
                  <div class="col-md-4">
                    <button class="btn btn-primary selectpicker w-100" id="btn-caritable" disabled>Cari</button>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="card">
              <div class="container">
                <div class="card-datatable text-nowrap">
                  <table id="data_p3ke" class="stripe" style="width:100%">
                    <thead>
                        <tr>
                            <th>Nama</th>
                            <th>Alamat</th>
                            <th>Kecamatan</th>
                            <th>Kelurahan</th>
                            <th>Tanggal Lahir</th>
                            {{-- <th>Pekerjaan</th>
                            <th>Pendidikan</th>
                            <th>Status Perkawinan</th>
                            <th>Nama Kepala Keluarga</th>
                            <th>Status Keluarga</th>
                            <th>Tipe Anggota</th> --}}
                            <th></th>
                        </tr>
                    </thead> 
                  </table>
                </div>
              </div>
                
              </div>


          </div>

          <div class="content-backdrop fade"></div>
          {{-- View Modal --}}
          <div class="modal fade" id="viewData" aria-labelledby="viewDataLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-simple">
                <div class="modal-content p-3 p-md-5">
                  <div class="modal-body" id="modalBodyView">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    <div class="text-center mb-4">
                      <h3 class="mb-2" id="viewDataLabel">Loading ...</h3>
                      <p class="text-danger d-none" id="error_info">Maaf terdapat kesalahan, silakan coba lagi.</p>
                    </div>
                    <form class="forms-sample" id="viewDataForm">
                      <div class="form-group">
                        <label for="nama">Nama</label>
                        <input type="hidden" name="idData" id="idData">
                        <input type="text" class="form-control" id="nama" name="nama" readonly>
                      </div>
                      <div class="form-group">
                        <label for="alamat">Alamat</label>
                        <textarea name="alamat" id="alamat" class="form-control" cols="30" rows="5" readonly></textarea>
                      </div>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="kecamatan">Kecamatan</label>
                            <input type="text" class="form-control" id="kecamatan" name="kecamatan" readonly>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="kelurahan">Kelurahan</label>
                            <input type="text" class="form-control" id="kelurahan" name="kelurahan" readonly>
                          </div>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="ttl">Tanggal Lahir</label>
                        <input type="text" class="form-control" id="ttl" name="ttl" readonly>
                      </div>
                      <div class="form-group">
                        <label for="jk">Jenis Kelamin</label>
                        <input type="text" class="form-control" id="jk" name="jk" readonly>
                      </div>
                      <div class="form-group">
                        <label for="usia">Usia</label>
                        <input type="text" class="form-control" id="usia" name="usia" readonly>
                      </div>
                      <div class="form-group">
                        <label for="pekerjaan">Pekerjaan</label>
                        <input type="text" class="form-control" id="pekerjaan" name="pekerjaan" readonly>
                      </div>
                      <div class="form-group">
                        <label for="pendidikan">Pendidikan</label>
                        <input type="text" class="form-control" id="pendidikan" name="pendidikan" readonly>
                      </div>
                      <div class="form-group">
                        <label for="st_kawin">Status Perkawinan</label>
                        <input type="text" class="form-control" id="st_kawin" name="st_kawin" readonly>
                      </div>
                      <div class="form-group">
                        <label for="nm_kepkel">Nama Kepala Keluarga</label>
                        <input type="text" class="form-control" id="nm_kepkel" name="nm_kepkel" readonly>
                      </div>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="st_keluarga">Status Keluarga</label>
                            <input type="text" class="form-control" id="st_keluarga" name="st_keluarga" readonly>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="tp_anggota">Tipe Anggota</label>
                            <input type="text" class="form-control" id="tp_anggota" name="tp_anggota" readonly>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="desil_sejahtera">Desil Kesejahteraan</label>
                            <input type="text" class="form-control" id="desil_sejahtera" name="desil_sejahtera" readonly>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="r_stunting">Resiko Stunting</label>
                            <input type="text" class="form-control" id="r_stunting" name="r_stunting" readonly>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="st_dtks">Status DTKS</label>
                            <input type="text" class="form-control" id="st_dtks" name="st_dtks" readonly>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="bansos">Bansos</label>
                            <input type="text" class="form-control" id="bansos" name="bansos" readonly>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="rekom_layak">Rekomen Kelayakan</label>
                            <input type="text" class="form-control" id="rekom_layak" name="rekom_layak" readonly>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="hasil_verval">Hasil Verivali</label>
                            <input type="text" class="form-control" id="hasil_verval" name="hasil_verval" readonly>
                          </div>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="ket_verval">Keterangan Verivali</label>
                        <input type="text" class="form-control" id="ket_verval" name="ket_verval" readonly>
                      </div>
                    </form>
                  </div>
                </div>
            </div>
          </div>
          {{-- /View Modal --}}
          
          {{-- Tambah Modal --}}
          <div class="modal fade" id="addData" aria-labelledby="addDataLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-simple">
                <div class="modal-content p-3 p-md-5">
                  <div class="modal-body" id="modalBodyAdd">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    <div class="text-center mb-4">
                      <h3 class="mb-2" id="addDataLabel">Tambah Data</h3>
                      <p class="text-mute">Penambahan data P3KE.</p>
                    </div>
                    <form class="forms-sample" id="addDataForm">
                      @csrf
                      <div class="form-group">
                        <label for="nama">Nama</label>
                        <input type="text" class="form-control" id="namaAdd" name="namaAdd">
                      </div>
                      <div class="form-group">
                        <label for="alamat">Alamat</label>
                        <textarea name="alamatAdd" id="alamatAdd" class="form-control" cols="30" rows="5"></textarea>
                      </div>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="kecamatan">Kecamatan</label>
                            <select name="kecamatanAdd" class="js-example-basic form-control" id="kecamatanAdd" style="width: 100%;" data-placeholder="Pilih Kecamatan">									  			
                              <option value="" disabled selected>Pilih Kecamatan</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="kelurahan">Kelurahan</label>
                            <select name="kelurahanAdd" class="js-example-basic form-control" id="kelurahanAdd" style="width: 100%;" data-placeholder="Pilih Kelurahan">									  			
                              <option value="" disabled selected>Pilih Kelurahan</option>
                            </select>
                          </div>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="ttl">Tanggal Lahir</label>
                        <input type="date" class="form-control" id="ttlAdd" name="ttlAdd">
                      </div>
                      <div class="form-group">
                        <label for="jk">Jenis Kelamin</label>
                        <select name="jkAdd" class="js-example-basic form-control" id="jkAdd" style="width: 100%;" data-placeholder="Pilih Jenis Kelamin">									  			
                          <option value="" disabled selected>Pilih Jenis Kelamin</option>
                          <option value="Pria">Pria</option>
                          <option value="Wanita">Wanita</option>
                        </select>
                      </div>
                      <div class="form-group">
                        <label for="pekerjaan">Pekerjaan</label>
                        <input type="text" class="form-control" id="pekerjaanAdd" name="pekerjaanAdd">
                      </div>
                      <div class="form-group">
                        <label for="pendidikan">Pendidikan</label>
                        <input type="text" class="form-control" id="pendidikanAdd" name="pendidikanAdd">
                      </div>
                      <div class="form-group">
                        <label for="st_kawin">Status Perkawinan</label>
                        <input type="text" class="form-control" id="st_kawinAdd" name="st_kawinAdd">
                      </div>
                      <div class="form-group">
                        <label for="nm_kepkel">Nama Kepala Keluarga</label>
                        <input type="text" class="form-control" id="nm_kepkelAdd" name="nm_kepkelAdd">
                      </div>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="st_keluarga">Status Keluarga</label>
                            <input type="text" class="form-control" id="st_keluargaAdd" name="st_keluargaAdd">
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="tp_anggota">Tipe Anggota</label>
                            <input type="text" class="form-control" id="tp_anggotaAdd" name="tp_anggotaAdd">
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="desil_sejahtera">Desil Kesejahteraan</label>
                            <input type="text" class="form-control" id="desil_sejahteraAdd" name="desil_sejahteraAdd">
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="r_stunting">Resiko Stunting</label>
                            <input type="text" class="form-control" id="r_stuntingAdd" name="r_stuntingAdd">
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="st_dtks">Status DTKS</label>
                            <input type="text" class="form-control" id="st_dtksAdd" name="st_dtksAdd">
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="bansos">Bansos</label>
                            <select name="bansosAdd[]" class="js-example-basic-multiple form-control" id="bansosAdd" multiple="multiple" style="width: 100%;" data-placeholder="Pilih Bansos">
                              <option value="PemakamanGratis">Pemakaman Gratis</option>
                              <option value="RASTRA">RASTRA</option>
                              <option value="UMKM">UMKM</option>
                              <option value="PBI">PBI</option>
                              <option value="TransportasiGratis">Transportasi Gratis</option>
                              <option value="PBBGratis">PBB Gratis</option>
                              <option value="PajakKendaraanGratis">Pajak Kendaraan Gratis</option>
                              <option value="ATMBeras">ATM Beras</option>
                              <option value="RTLH">RTLH</option>
                              <option value="KUBE">KUBE</option>
                              <option value="BPNT">BPNT</option>
                              <option value="PKH">PKH</option>
                              <option value="KIS">KIS</option>
                              <option value="BSPS">BSPS</option>
                              <option value="PISEW">PISEW</option>
                              <option value="KIP">KIP</option>
                              <option value="KKS">KKS</option>
                              <option value="CSR">CSR</option>
                              <option value="LKK">LKK</option>
                              <option value="BAZNAZ">BAZNAZ</option>
                              <option value="PLN">PLN</option>
                              <option value="PERTAMINA">PERTAMINA</option>
                              <option value="BUMN">BUMN</option>
                            </select>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="rekom_layak">Rekomen Kelayakan</label>
                            <input type="text" class="form-control" id="rekom_layakAdd" name="rekom_layakAdd">
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="hasil_verval">Hasil Verivali</label>
                            <input type="text" class="form-control" id="hasil_vervalAdd" name="hasil_vervalAdd">
                          </div>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="ket_verval">Keterangan Verivali</label>
                        <input type="text" class="form-control" id="ket_vervalAdd" name="ket_vervalAdd">
                      </div>
                      <div class="col-12 text-center">
                        <button type="button" class="btn btn-primary me-sm-3 me-1" id="btn-simpanData">Submit</button>
                        <button
                          type="reset"
                          class="btn btn-label-secondary"
                          data-bs-dismiss="modal"
                          aria-label="Close"
                        >
                          Cancel
                        </button>
                      </div>
                    </form>
                  </div>
                </div>
            </div>
          </div>
          {{-- /Tambah Modal --}}

          {{-- Edit Modal --}}
          <div class="modal fade" id="editData" aria-labelledby="editDataLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-simple">
                <div class="modal-content p-3 p-md-5">
                  <div class="modal-body" id="modalBodyEdit">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    <div class="text-center mb-4">
                      <h3 class="mb-2" id="editDataLabel">Update Data</h3>
                      <p class="text-danger d-none" id="error_info">Maaf terdapat kesalahan, silakan coba lagi.</p>
                    </div>
                    <form class="forms-sample" id="editDataForm">
                      @csrf
                      <div class="form-group">
                        <label for="nama">Nama</label>
                        <input type="hidden" name="idDataEdit" id="idDataEdit">
                        <input type="text" class="form-control" id="namaEdit" name="namaEdit">
                      </div>
                      <div class="form-group">
                        <label for="alamat">Alamat</label>
                        <textarea name="alamatEdit" id="alamatEdit" class="form-control" cols="30" rows="5"></textarea>
                      </div>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="kecamatan">Kecamatan</label>
                            <select name="kecamatanEdit" class="js-example-basic form-control" id="kecamatanEdit" style="width: 100%;" data-placeholder="Pilih Kecamatan">                          
                              <option value="" disabled selected>Pilih Kecamatan</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="kelurahan">Kelurahan</label>
                            <select name="kelurahanEdit" class="js-example-basic form-control" id="kelurahanEdit" style="width: 100%;" data-placeholder="Pilih Kelurahan">                          
                              <option value="" disabled selected>Pilih Kelurahan</option>
                            </select>
                          </div>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="ttl">Tanggal Lahir</label>
                        <input type="date" class="form-control" id="ttlEdit" name="ttlEdit">
                      </div>
                      <div class="form-group">
                        <label for="jk">Jenis Kelamin</label>
                        <select name="jkEdit" class="js-example-basic form-control" id="jkEdit" style="width: 100%;" data-placeholder="Pilih Jenis Kelamin">                          
                          <option value="" disabled selected>Pilih Jenis Kelamin</option>
                          <option value="Pria">Pria</option>
                          <option value="Wanita">Wanita</option>
                        </select>
                      </div>
                      <div class="form-group">
                        <label for="pekerjaan">Pekerjaan</label>
                        <input type="text" class="form-control" id="pekerjaanEdit" name="pekerjaanEdit">
                      </div>
                      <div class="form-group">
                        <label for="pendidikan">Pendidikan</label>
                        <input type="text" class="form-control" id="pendidikanEdit" name="pendidikanEdit">
                      </div>
                      <div class="form-group">
                        <label for="st_kawin">Status Perkawinan</label>
                        <input type="text" class="form-control" id="st_kawinEdit" name="st_kawinEdit">
                      </div>
                      <div class="form-group">
                        <label for="nm_kepkel">Nama Kepala Keluarga</label>
                        <input type="text" class="form-control" id="nm_kepkelEdit" name="nm_kepkelEdit">
                      </div>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="st_keluarga">Status Keluarga</label>
                            <input type="text" class="form-control" id="st_keluargaEdit" name="st_keluargaEdit">
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="tp_anggota">Tipe Anggota</label>
                            <input type="text" class="form-control" id="tp_anggotaEdit" name="tp_anggotaEdit">
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="desil_sejahtera">Desil Kesejahteraan</label>
                            <input type="text" class="form-control" id="desil_sejahteraEdit" name="desil_sejahteraEdit">
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="r_stunting">Resiko Stunting</label>
                            <input type="text" class="form-control" id="r_stuntingEdit" name="r_stuntingEdit">
                          </div>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="bansosText">Bansos Saat Ini</label>
                        <input type="text" class="form-control" id="bansostextEdit" name="bansostextEdit" readonly>
                      </div>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="st_dtks">Status DTKS</label>
                            <input type="text" class="form-control" id="st_dtksEdit" name="st_dtksEdit">
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="bansos">Bansos</label>
                            <select name="bansosEdit[]" class="js-example-basic-multiple form-control" id="bansosEdit" multiple="multiple" style="width: 100%;" data-placeholder="Pilih Bansos">
                              <option value="PemakamanGratis">Pemakaman Gratis</option>
                              <option value="RASTRA">RASTRA</option>
                              <option value="UMKM">UMKM</option>
                              <option value="PBI">PBI</option>
                              <option value="TransportasiGratis">Transportasi Gratis</option>
                              <option value="PBBGratis">PBB Gratis</option>
                              <option value="PajakKendaraanGratis">Pajak Kendaraan Gratis</option>
                              <option value="ATMBeras">ATM Beras</option>
                              <option value="RTLH">RTLH</option>
                              <option value="KUBE">KUBE</option>
                              <option value="BPNT">BPNT</option>
                              <option value="PKH">PKH</option>
                              <option value="KIS">KIS</option>
                              <option value="BSPS">BSPS</option>
                              <option value="PISEW">PISEW</option>
                              <option value="KIP">KIP</option>
                              <option value="KKS">KKS</option>
                              <option value="CSR">CSR</option>
                              <option value="LKK">LKK</option>
                              <option value="BAZNAZ">BAZNAZ</option>
                              <option value="PLN">PLN</option>
                              <option value="PERTAMINA">PERTAMINA</option>
                              <option value="BUMN">BUMN</option>
                            </select>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="rekom_layak">Rekomen Kelayakan</label>
                            <input type="text" class="form-control" id="rekom_layakEdit" name="rekom_layakEdit">
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="hasil_verval">Hasil Verivali</label>
                            <input type="text" class="form-control" id="hasil_vervalEdit" name="hasil_vervalEdit">
                          </div>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="ket_verval">Keterangan Verivali</label>
                        <input type="text" class="form-control" id="ket_vervalEdit" name="ket_vervalEdit">
                      </div>
                      <br>
                      <div class="col-12 text-center">
                        <button type="button" class="btn btn-primary me-sm-3 me-1" id="btn-simpanEditData">Submit</button>
                        <button
                          type="reset"
                          class="btn btn-label-secondary"
                          data-bs-dismiss="modal"
                          aria-label="Close"
                        >
                          Cancel
                        </button>
                      </div>
                    </form>
                  </div>
                </div>
            </div>
          </div>
          {{-- /Edit Modal --}}
        </div>
        <!-- Content wrapper -->
       


@endsection
@section('jquery')
<script>
  $('#viewDataLabel').html('Loading ...');
  function loadKecamatan() {		
    $.ajax({
      url: "{{route('api.getfilterkecamatan')}}",
      type: "GET",
      dataType: "json",
      // data: "key=Role User",
      cache: false,
      success: function(json) {
        $("#kecamatanAdd").select2({
          data: json
        });
        $("#kecamatanEdit").select2({
          data: json
        });
      },
      error: function (xhr, ajaxOptions, thrownError) {
      }
		});		
  }

  function loadKelurahan(kecamatan) {
    $.ajax({
      url: "{{route('api.getfilterkelurahan')}}",
      type: "GET",
      dataType: "json",
      data: "kecamatan="+kecamatan,
      cache: false,
      success: function(json) {
        $("#kelurahanAdd").select2({
          data: json
        });
        $("#kelurahanEdit").select2({
          data: json
        });
      },
      error: function (xhr, ajaxOptions, thrownError) {
      }
		});		
  }

  function delpkke(IdPkke,Nama){
    Swal.fire({
      title: "Apakah anda yakin ingin menghapus "+Nama+" ?",
      showDenyButton: true,
      confirmButtonText: "Hapus",
      denyButtonText: `Batal`
    }).then((result) => {
      /* Read more about isConfirmed, isDenied below */
      if (result.isConfirmed) {
        $.ajax({
          url : "{{route('api.delpkke')}}",
          type : "GET",
          data : 'id='+ IdPkke,
          processData : false,
          contentType : false,
          cache : false,
          dataType: "json",
          success : function(res){
            if (res.status != '200'){
              const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: true,              
              });
              Toast.fire({
                icon: 'error',
                title: res.message
              })
            } else {
              const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
              });
              Toast.fire({
                icon: 'success',
                title: 'Penerima Berhasil Dihapus'
              })
            }
            $('#data_p3ke').DataTable().ajax.reload();
          },
          error: function (xhr, ajaxOptions, thrownError) {
          }
        })
      } else if (result.isDenied) {
        Swal.fire("Changes are not saved", "", "info");
      }
    });
  }
  $(document).ready(function() {
    $("#kelurahanAdd").select2({
      dropdownParent: $("#addData"),
    });
    $("#kecamatanAdd").select2({
      dropdownParent: $("#addData"),
    });
    $("#kelurahanEdit").select2({
      dropdownParent: $("#editData"),
    });
    $("#kecamatanEdit").select2({
      dropdownParent: $("#editData"),
    });
    $("#bansosEdit").select2({
      // dropdownParent: $("#editData"),
    });
    loadKecamatan();
    $("#bansosAdd").select2();
    $('#btn-caritable').prop('disabled', false);
    var status_anggota;
    var desil;
    
    $('#viewData').on('shown.bs.modal', function (e) {
      $('#error_info').addClass('d-none');
	    var id = $(e.relatedTarget).data('id');
	    // alert(id);
	    if(! id){	      
        $('#nama').val('');
        $('#alamat').val('');
        $('#kecamatan').val('');
        $('#kelurahan').val('');
        $('#ttl').val('');
        $('#pekerjaan').val('');
        $('#pendidikan').val('');
        $('#jk').val('');
        $('#usia').val('');
        $('#st_kawin').val('');
        $('#nm_kepkel').val('');
        $('#st_keluarga').val('');
        $('#tp_anggota').val('');
        $('#desil_sejahtera').val('');
        $('#r_stunting').val('');
        $('#st_dtks').val('');
        $('#bansos').val('');
        $('#rekom_layak').val('');
        $('#hasil_verval').val('');
        $('#ket_verval').val('');
	    }else{
	      $.ajax({
          type : 'POST',
          headers: {
            'X-CSRF-TOKEN': '{{csrf_token()}}'
          },
          url : "{{route('api.getdetailrawdata')}}",
          data :  'id='+ id,
          beforeSend: function(){
            $('#viewDataForm').hide();
            $('#viewDataLabel').html('Loading ...');
          },
          success : function(res){            
            $('#viewDataForm').show();
            $('#viewDataLabel').html('Detail Data');
            var obj = JSON.parse(res);
            if (obj.status == 200){
              $('#idData').val(obj.data[0].key_p3ke);
              $('#nama').val(obj.data[0].nama);
              $('#alamat').val(obj.data[0].alamat);
              $('#kecamatan').val(obj.data[0].kecamatan);
              $('#kelurahan').val(obj.data[0].kelurahan);
              $('#ttl').val(moment(new Date(obj.data[0].tanggal_lahir)).locale("id").format('LL'));
              $('#pekerjaan').val(obj.data[0].pekerjaan);
              $('#pendidikan').val(obj.data[0].pendidikan);
              $('#jk').val(obj.data[0].jenis_kelamin);
              $('#usia').val(obj.data[0].usia);
              $('#st_kawin').val(obj.data[0].status_kawin);
              $('#nm_kepkel').val(obj.data[0].nama_kepkel);
              $('#st_keluarga').val(obj.data[0].status_keluarga);
              $('#tp_anggota').val(obj.data[0].type_anggota);
              $('#desil_sejahtera').val(obj.data[0].desil_kesejahteraan);
              $('#r_stunting').val(obj.data[0].resiko_stunting);
              $('#st_dtks').val(obj.data[0].status_dtks);
              $('#bansos').val(obj.data[0].bansos);
              $('#rekom_layak').val(obj.data[0].rekomen_kelayakan);
              $('#hasil_verval').val(obj.data[0].hasil_verivali);
              $('#ket_verval').val(obj.data[0].ket_verval);
            } else {
              $('#error_info').removeClass('d-none');
              $('#viewDataForm').hide();
            }
          }
        });
      }
    });

    $('#editData').on('shown.bs.modal', function (e) {
      $('#error_info').addClass('d-none');
	    var id = $(e.relatedTarget).data('id');
	    // alert(id);
	    if(! id){	      
        $('#namaEdit').val('');
        $('#alamatEdit').val('');
        $('#kecamatanEdit').val('');
        $('#kelurahanEdit').val('');
        $('#ttlEdit').val('');
        $('#pekerjaanEdit').val('');
        $('#pendidikanEdit').val('');
        $('#jkEdit').val('');
        $('#st_kawinEdit').val('');
        $('#nm_kepkelEdit').val('');
        $('#st_keluargaEdit').val('');
        $('#tp_anggotaEdit').val('');
        $('#desil_sejahteraEdit').val('');
        $('#r_stuntingEdit').val('');
        $('#st_dtksEdit').val('');
        $('#bansosEdit').val('');
        $('#rekom_layakEdit').val('');
        $('#hasil_vervalEdit').val('');
        $('#ket_vervalEdit').val('');
	    }else{
	      $.ajax({
          type : 'POST',
          headers: {
            'X-CSRF-TOKEN': '{{csrf_token()}}'
          },
          url : "{{route('api.getdetailrawdata')}}",
          data :  'id='+ id,
          beforeSend: function(){
            $('#editDataForm').hide();
            $('#editDataLabel').html('Loading ...');
          },
          success : function(res){            
            $('#editDataForm').show();
            $('#editDataLabel').html('Update Data');
            var obj = JSON.parse(res);
            loadKelurahan(obj.data[0].kecamatan);
            if (obj.status == 200){
              $('#idDataEdit').val(obj.data[0].key_p3ke);
              $('#namaEdit').val(obj.data[0].nama);
              $('#alamatEdit').val(obj.data[0].alamat);
              $('#kecamatanEdit').val(obj.data[0].kecamatan).trigger("change");
              $('#kelurahanEdit').val(obj.data[0].kelurahan).trigger("change");
              $('#ttlEdit').val(moment(obj.data[0].tanggal_lahir).format('YYYY-MM-DD'));
              $('#pekerjaanEdit').val(obj.data[0].pekerjaan);
              $('#jkEdit').val(obj.data[0].jenis_kelamin);
              $('#pendidikanEdit').val(obj.data[0].pendidikan);
              $('#st_kawinEdit').val(obj.data[0].status_kawin);
              $('#nm_kepkelEdit').val(obj.data[0].nama_kepkel);
              $('#st_keluargaEdit').val(obj.data[0].status_keluarga);
              $('#tp_anggotaEdit').val(obj.data[0].type_anggota);
              $('#desil_sejahteraEdit').val(obj.data[0].desil_kesejahteraan);
              $('#r_stuntingEdit').val(obj.data[0].resiko_stunting);
              $('#st_dtksEdit').val(obj.data[0].status_dtks);
              $('#bansostextEdit').val(obj.data[0].bansos);
              $('#rekom_layakEdit').val(obj.data[0].rekomen_kelayakan);
              $('#hasil_vervalEdit').val(obj.data[0].hasil_verivali);
              $('#ket_vervalEdit').val(obj.data[0].ket_verval);
            } else {
              $('#error_info').removeClass('d-none');
              $('#editDataForm').hide();
            }
          }
        });
      }
    });

    $('#stts_anggota').on('change', function(e){
      status_anggota = $('#stts_anggota').val();
    })
    
    $('#kecamatanAdd').on('change', function(e){
      kecamatan = $('#kecamatanAdd').val();
      loadKelurahan(kecamatan);
    })

    $('#kecamatanEdit').on('change', function(e){
      kecamatan = $('#kecamatanEdit').val();
      loadKelurahan(kecamatan);
    })

    $('#desil').on('change', function(e){
      desil = $('#desil').val();
    })
    
    var table = new DataTable('#data_p3ke', {
      ordering: false,
      scrollX: true,
      "processing": true,
      "serverSide": true,
      ajax: {
        url: "{{route('api.getrawdata')}}",
        type: "POST",
        headers: {
          'X-CSRF-TOKEN': '{{csrf_token()}}'
        },
        // data: 'status_anggota="'+status_anggota+'"&desil="'+desil+'"',
        "data": function(d) {
          d.status_anggota = status_anggota;
          d.desil = desil;
          d.id = '';
        },
        dataType: "json",
        cache: false,
      },
      columns: [
        { data: 'nama'},
        { data: 'alamat'},
        { data: 'kecamatan'},
        { data: 'kelurahan'},
        { 
          data: 'tanggal_lahir',
          render: function (data, type, row) {            
            return moment(new Date(data)).locale("id").format('LL');
          },
        },
        // { data: 'pekerjaan'},
        // { data: 'pendidikan'},
        // { data: 'status_kawin'},
        // { data: 'nama_kepkel'},
        // { data: 'status_keluarga'},
        // { data: 'type_anggota'},
        { 
          data: 'key_p3ke',
          "render": function(data, type, row, meta) {
            if ('{{Session::get('user')->user_role}}' == 'dinsos'){
              return `
                <button type="button" class="btn btn-success" data-bs-toggle="modal" data-id="`+data+`" data-bs-target="#viewData"><i class="fas fa-eye"></i></button>
                <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-id="`+data+`" data-bs-target="#editData"><i class="fas fa-pen"></i></button>
                <a class="btn btn-danger text-white" onclick="delpkke(`+data+`,'`+row.nama+`')"><i class="fas fa-times"></i></a>
              `
            } else {
              return `
                <button type="button" class="btn btn-success" data-bs-toggle="modal" data-id="`+data+`" data-bs-target="#viewData"><i class="fas fa-eye"></i></button>
              `
            }
            
          },
        },
      ],
    })

    $('#btn-caritable').on('click', function(e){
      table.ajax.reload();
    })

    $('#btn-simpanData').on('click', function(e){
      e.preventDefault();
      var form = $('#addDataForm').get(0);
      var form_data = new FormData(form);
      var obj;

      $.ajax({
        url : "{{route('api.savetambahpkke')}}",
        type : "POST",
        data : form_data,
        processData : false,
        contentType : false,
        cache : false,
        dataType: "json",
        beforeSend: function(){
          $('#btn-simpanData').prop('disabled', true);
        },
        success : function(res){
          $('#btn-simpanData').prop('disabled', false);
          // console.log(res);
          if (res.status != '200'){
            const Toast = Swal.mixin({
              toast: true,
              position: 'top-end',
              showConfirmButton: true,              
            });
            Toast.fire({
              icon: 'error',
              title: res.message
            })
            table.ajax.reload();
          } else {
            const Toast = Swal.mixin({
              toast: true,
              position: 'top-end',
              showConfirmButton: false,
              timer: 3000,
              timerProgressBar: true,
            });
            Toast.fire({
              icon: 'success',
              title: 'Sukses Tambah Data'
            })
            table.ajax.reload();
          }
          $('.modal-backdrop').remove();
          $('#addData').modal('hide');
        },
        error: function (xhr, ajaxOptions, thrownError) {
          $('#btn-simpanData').prop('disabled', false);
        }
      })
    })

    $('#btn-simpanEditData').on('click', function(e){
      e.preventDefault();
      var form = $('#editDataForm').get(0);
      var form_data = new FormData(form);
      var obj;

      $.ajax({
        url : "{{route('api.saveeditpkke')}}",
        type : "POST",
        data : form_data,
        processData : false,
        contentType : false,
        cache : false,
        dataType: "json",
        beforeSend: function(){
          $('#btn-simpanEditData').prop('disabled', true);
        },
        success : function(res){
          $('#btn-simpanEditData').prop('disabled', false);
          // console.log(res);
          if (res.status != '200'){
            const Toast = Swal.mixin({
              toast: true,
              position: 'top-end',
              showConfirmButton: true,              
            });
            Toast.fire({
              icon: 'error',
              title: res.message
            })
            table.ajax.reload();
          } else {
            const Toast = Swal.mixin({
              toast: true,
              position: 'top-end',
              showConfirmButton: false,
              timer: 3000,
              timerProgressBar: true,
            });
            Toast.fire({
              icon: 'success',
              title: 'Sukses Edit Data'
            })
            table.ajax.reload();
          }
          $('.modal-backdrop').remove();
          $('#editData').modal('hide');
        },
        error: function (xhr, ajaxOptions, thrownError) {
          $('#btn-simpanEditData').prop('disabled', false);
        }
      })
    })
    
    $('#editData').on('hidden.bs.modal', function () {
      $(this).find('form').trigger('reset');
      $('#bansosEdit').val(null).trigger('change');
    })
    $('#addData').on('hidden.bs.modal', function () {
      $(this).find('form').trigger('reset');
      $('#bansosAdd').val(null).trigger('change');
    })
  });
</script>
@endsection