@extends('template.master')

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

@section('body')

        <!-- 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>Penerimaan Bantuan</h4>
            <div class="text-start mb-3">
              <button type="button" class="btn btn-primary"><i class='bx bx-download icon-export'></i>Export</button>
            </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-6">
                    {{-- <label for="jenis_bantuan" class="form-label">Jenis Bantuan</label> --}}
                    <select id="jenis_bantuan" class="selectpicker w-100" data-style="btn-default">
                      <option value="">Semua Jenis bantuan</option>
                      <option value="KUBE">KUBE</option>
                      <option value="BNPT">BNPT</option>
                      <option value="PKH">PKH</option>
                      <option value="KISS">KISS</option>
                      <option value="BSPS">BSPS</option>
                      <option value="PISEW">PISEW</option>
                      <option value="KIP">KIP</option>
                      <option value="KKS">KKS</option>
                    </select>
                  </div>
                  <div class="col-md-6">
                    <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="penerima_bantuan" class="stripe" style="width:100%">
                    <thead>
                        <tr>
                          <th>Nama</th>
                          <th>Alamat</th>
                          <th>Kecamatan</th>
                          <th>Kelurahan</th>
                          <th>Pekerjaan</th>
                          <th>Pendidikan</th>
                          <th>Tipe Anggota</th>
                          <th>Jenis Bantuan</th>
                          <th>Desil Kesejahteraan</th>
                          <th></th>
                        </tr>
                    </thead>
                  </table>
                </div>
              </div>
            </div>


          </div>

          <div class="content-backdrop fade"></div>
          <div class="modal fade" id="viewData" aria-labelledby="viewDataLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="viewDataLabel">Loading</h5>
                    <button type="button" class="btn" data-bs-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body" id="modalBodyView">
                    <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="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 class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                  </div>
                </div>
            </div>
          </div>
        </div>
        <!-- Content wrapper -->
       


@endsection
@section('jquery')
<script>
  $('#viewDataLabel').html('Loading ...');
  $(document).ready(function() {
    $('#btn-caritable').prop('disabled', false);
    var jenis_bansos;
    
    $('#viewData').on('shown.bs.modal', function (e) {
	    var id = $(e.relatedTarget).data('id');
	    // alert(id);
	    if(! id){	      
        $('#nama').val('');
        $('#alamat').val('');
        $('#kecamatan').val('');
        $('#kelurahan').val('');
        $('#ttl').val('');
        $('#pekerjaan').val('');
        $('#pendidikan').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(){
            $('#modalBodyView').hide();
            $('#viewDataLabel').html('Loading ...');
          },
          success : function(res){            
            $('#modalBodyView').show();
            $('#viewDataLabel').html('Detail Data');
            var obj = JSON.parse(res);	  
            console.log(obj);
            
            $('#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(obj.data[0].tanggal_lahir);
            $('#pekerjaan').val(obj.data[0].pekerjaan);
            $('#pendidikan').val(obj.data[0].pendidikan);
            $('#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);
			    }
			  });
	  	}
	  });

    $('#jenis_bantuan').on('change', function(e){
      jenis_bantuan = $('#jenis_bantuan').val();
    })
    
    var table = new DataTable('#penerima_bantuan', {
      ordering: false,
      scrollX: true,
      "processing": true,
      "serverSide": true,
      ajax: {
        url: "{{route('api.getrawdataper')}}",
        type: "POST",
        headers: {
          'X-CSRF-TOKEN': '{{csrf_token()}}'
        },
        // data: 'status_anggota="'+status_anggota+'"&desil="'+desil+'"',
        "data": function(d) {                    
          d.skala_bansos = 'Nasional';
          d.jenis_bansos = jenis_bansos;
          d.id = '';
        },
        dataType: "json",
        cache: false,
      },
      columns: [
        { data: 'nama'},
        { data: 'alamat'},
        { data: 'kecamatan'},
        { data: 'kelurahan'},
        { data: 'pekerjaan'},
        { data: 'pendidikan'},
        { data: 'type_anggota'},
        { data: 'jenis'},
        { data: 'desil_kesejahteraan'},
        { 
          data: 'key_p3ke',
          "render": function(data, type, row, meta) {
            return `
              <button type="button" class="btn btn-success" data-bs-toggle="modal" data-id="`+data+`" data-bs-target="#viewData">Detail</button>                
            `
          },
        },
      ],
    })

    $('#btn-caritable').on('click', function(e){
      table.ajax.reload();
    })
  });
</script>
@endsection