@extends('template.master')

@section('title', 'Dashboard TKPK - Penerimaan Bantuan - Program Nasional')
@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>Penerima Bantuan - Program Nasional</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" name="jenis_bantuan" class="selectpicker w-100" data-style="btn-default">
                      <option value="">Semua Jenis bantuan</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>
                    </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 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="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>
        </div>
        <!-- Content wrapper -->
       


@endsection
@section('jquery')
<script>
  $('#viewDataLabel').html('Loading ...');
  $(document).ready(function() {
    $('#btn-caritable').prop('disabled', false);
    var jenis_bantuan;
    
    $('#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('');
        $('#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);
              $('#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();
            }
			    }
			  });
	  	}
	  });

    $('#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_bantuan;
          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