@extends('layouts.dun')
@section('title', 'Permohonan IGEMS')
@section('permohonan', 'm-menu__item--active')
@section(App\Cluster::where('id', $ipr->cluster_id)->pluck('name')[0], 'm-menu__item--active')
@section(App\IPR::where('name', $ipr->name)->pluck('name')[0], 'm-menu__item--active')
@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">
<style>
    .range_inputs {
        display: none;
    }
</style>
@endsection
@section('content')
      <div class="row">
         <div class="col-lg-12">
            <div class="m-portlet m-portlet--mobile">
               <div class="m-portlet__body">
                  <div class="m-portlet__head-caption">
                     <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">
                        Permohonan {{ App\IPR::where('name', 'igems')->pluck('display_name')[0] }}<br>
                        <span>
                        </span>
                     </div>
                  </div>

                  <div class="datatable" >
                     <div class="col-md-12">
                        <form class="pull-right" id="search_form" style="margin-top: 15px;">
                           <div class="input-group">
                              @if(Auth::user()->hasRole('super_admin') || Auth::user()->hasRole('principal_admin') || $is_permission_export)
                              <div class="" style="margin-right:5px">
                                 <a href="#" id="export_file" onclick="exportFile();return false;" class="btn btn-info m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill" style="padding:.75rem 1rem">
                                 <span>
                                 <i class="la la-file-excel-o"></i>
                                 <span>
                                 Export
                                 </span>
                                 </span>
                                 </a>
                              </div>
                              @endif
                              <div id="permohonan_range" style="background: #fff; cursor: pointer; padding: 10px 10px; border: 1px solid #ebedf2;">
                                 <i class="fa fa-calendar"></i>&nbsp;<span></span> <i class="fa fa-caret-down"></i>
                              </div>
                              <input type="hidden" id="status" value="{{$status}}" />
                              <input type="hidden" id="from_date" value="" />
                              <input type="hidden" id="to_date" value="" />
                              <select class="form-control" id="filter_type" style="height:unset;padding:5px 5px;">
                                 <option value="id_ahli">Id Permohonan</option>
                                 <option value="nama_pm">Nama Pemohon</option>
                                 <option value="kp_pm">No. Identiti</option>
                                 <option value="status_permohonan">Status Permohonan</option>
                                 <option value="semua" selected="selected">Semua</option>
                              </select>
                              <input type="text" class="form-control" id="q" placeholder="Carian..." style="height:unset;padding:5px 5px;">
                              <button type="button" class="btn btn-default" id="filter"><span class="fa fa-search"></span></button>
                           </div>
                        </form>
                     </div>
                     <div class="table-responsive">
                        <table class="table table-striped" id="permohonan_table" style="overflow-x: auto !important;width: 100% !important;">
                           <thead>
                              <tr>
                                 <th>Id Permohonan</th>
                                 <th>Tarikh Permohonan</th>
                                 <th>Nama Pemohon</th>
                                 <th>No. Identiti</th>
                                 <th>Alamat</th>
                                 <th>DUN</th>
                                 <th>Status Permohonan</th>
                                 <th width="10%"></th>
                              </tr>
                           </thead>
                        </table>
                     </div>  
                  </div>
               </div>
            </div>
         </div>
      </div>

      {{-- Modal IGEMS --}}
      <div class="modal fade" id="maklumat_permohonan" tabindex="-1" role="dialog" aria-hidden="true" style="background-color: rgba(0, 0, 0,.6)">
         <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
               <div class="modal-header">
                  <h4 class="modal-title">
                     {{ $ipr->display_name }}
                  </h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">
                           &times;
                     </span>
                  </button>
               </div>
               <div class="modal-body">
                  <p id="tarikh_permohonan"></p>
                  <div class="m-portlet__body">
                     <ul class="nav nav-tabs  m-tabs-line m-tabs-line--danger" role="tablist">
                        <li class="nav-item m-tabs__item">
                           <a class="nav-link m-tabs__link active" data-toggle="tab" href="#maklumat_ahli_ipb" role="tab" id="igems_ahli">
                              <h5>Maklumat Ahli</h5>
                           </a>
                        </li>
                        <!-- if(status->pasangan) -->
                        <li class="nav-item m-tabs__item pasangan">
                           <div class="">
                              <a class="nav-link m-tabs__link" data-toggle="tab" href="#maklumat_pasangan_ipb" role="tab">
                                 <h5>Maklumat Pasangan</h5>
                              </a>
                           </div>
                        </li>
                        <!-- endif -->
                        <li class="nav-item m-tabs__item kursus" id="igems_kursus">
                           <div class="">
                              <a class="nav-link m-tabs__link" data-toggle="tab" href="#maklumat_kursus_ipb" role="tab">
                                 <h5>Maklumat Kursus</h5>
                              </a>
                           </div>
                        </li>
                     </ul>
                     <div class="tab-content">
                        <div class="tab-pane active" id="maklumat_ahli_ipb" role="tabpanel">
                           <div class="m-form__section m-form__section--first">
                              <div class="col-md-12" style="background-color: #f4516c; color:white; padding:5px; text-align: center">
                                    <h5>Maklumat Ahli</h5>
                              </div>
                              <br>
                              <div class="form-group row">
                                    <div class="col-md-12">
                                       <label class="form-control-label">
                                          Nama Pemohon:
                                       </label>
                                       <input type="text" class="form-control"  id="nama_pm" readonly>
                                    </div>
                              </div>
                              <div class="form-group row">
                                 <div class="col-md-12">
                                    <label class="form-control-label">
                                       Status Permohonan:
                                    </label>
                                    <input type="text" class="form-control" id="status_pm" readonly><br>
                                    <input type="text" class="form-control" id="ulasan_layak_pm" value="Anda layak menerima insentif RM300 selepas anda dan pasangan menghadiri kursus." readonly>
                                 </div>
                              </div>
                              <!-- Permohonan Ditolak -->
                              <div class="form-group row permohonan_ditolak">
                                 <div class="col-md-12">
                                    <label class="form-control-label" id="sebab_pm">
                                       Sebab Tidak Layak:
                                    </label>
                                    <br>
                                    <span id="pm_gagal"></span>
                                 </div>
                              </div>
                              <!-- Permohonan Ditolak -->
                           </div>
                        </div>

                        <!-- Maklumat Pasangan -->
                        <div class="tab-pane" id="maklumat_pasangan_ipb" role="tabpanel">
                           <div class="m-form__section m-form__section--first">
                              <div class="col-md-12" style="background-color: #f4516c; color:white; padding:5px; text-align: center">
                                    <h5>Maklumat Pasangan</h5>
                              </div>
                              <br>
                              <div class="form-group row">
                                    <div class="col-md-12">
                                       <label class="form-control-label">
                                          Nama Pasangan:
                                       </label>
                                       <input type="text" class="form-control"  id="nama_ps" readonly>
                                    </div>
                                    <!-- <div class="col-md-6">
                                       <label class="form-control-label">
                                          Tarikh Permohonan:
                                       </label>
                                       <input type="text" class="form-control tarikh_permohonan"   readonly>
                                    </div> -->
                              </div>
                              <div class="form-group row">
                                 <div class="col-md-12">
                                    <label class="form-control-label">
                                       Status Permohonan:
                                    </label>
                                    <input type="text" class="form-control" id="status_ps" readonly><br>
                                    <input type="text" class="form-control" id="ulasan_layak_ps" value="Anda layak menerima insentif RM300 selepas anda dan pasangan menghadiri kursus." readonly>
                                 </div>
                              </div>
                              <!-- Permohonan Ditolak -->
                              <div class="form-group row permohonan_ditolak_pasangan">
                                 <div class="col-md-12">
                                    <label class="form-control-label" id="sebab_ps">
                                       Sebab Tidak Layak:
                                    </label>
                                    <br>
                                    <span id="ps_gagal"></span>
                                 </div>
                              </div>
                              <!-- Permohonan Ditolak -->
                           </div>
                        </div>
                           
                        <div class="tab-pane" id="maklumat_kursus_ipb" role="tabpanel">
                           <div class="m-form__section m-form__section--first">
                              <div class="col-md-12" style="background-color: #f4516c; color:white; padding:5px; text-align: center">
                                    <h5>Maklumat Kursus</h5>
                              </div>
                              <br>
                              <div class="form-group row">
                                    <div class="col-md-12">
                                       <label class="form-control-label">
                                          Status Kehadiran Kursus:
                                       </label>
                                       <div type="text" class="form-control"  id="makluman3" readonly></div>
                                    </div>
                              </div>
                              <div class="form-group row">
                                 <div class="col-md-12">
                                    <label class="form-control-label">
                                    Kursus Pilihan:
                                    </label>
                                 </div>
                              </div>
                              <div class="form-group row">
                                 <div class="col-md-3">
                                    <label class="form-control-label">
                                    Tarikh:
                                    </label>
                                    <input type="text" class="form-control" id="tarikh_kursus" readonly>
                                 </div>
                                 <div class="col-md-3">
                                    <label class="form-control-label">
                                    Masa Mula:
                                    </label>
                                    <input type="text" class="form-control" id="start_kursus" readonly>
                                 </div>
                                 <div class="col-md-3">
                                    <label class="form-control-label">
                                    Masa Tamat:
                                    </label>
                                    <input type="text" class="form-control" id="end_kursus" readonly>
                                 </div>
                                 <div class="col-md-3">
                                    <label class="form-control-label">
                                    Daerah: 
                                    </label>
                                    <input type="text" class="form-control" id="daerah_kursus" readonly>
                                 </div>
                              </div>
                              <div class="form-group row">
                                 <div class="col-md-12 ">
                                    <label class="form-control-label">
                                       Status Panggilan Jemputan Hadir Kursus:
                                    </label>
                                    <strong>
                                       <div id="makluman4"></div><br>
                                       <div>
                                          <b>Tarikh: </b><input type="text" class="form-control" id="tarikh" readonly>
                                       </div>
                                       <div>
                                          <b>Tempat: </b><input type="text" class="form-control" id="tempat_kursus" readonly>
                                       </div><br>
                                       <div id="makluman5"></div><b><div id="emel"></div></b><br/>
                                       <hr>
                                       <div id="emel_kursus">
                                          <b><div id="makluman6"></div></b><br>
                                       </div>
                                       <div id="tidak_hadir_kursus">
                                          <b><div id="makluman7"></div></b><br>
                                       </div>
                                       <div id="hadir_kursus">
                                          <b><div id="makluman8"></div></b><br>
                                          <div id="makluman9"></div><br/>
                                          <b><div id="makluman10"></div></b>
                                       </div>
                                       <br>
                                    </strong>
                                 </div>
                              </div>

                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="modal-footer">
                     <div class="d-flex mr-auto">
                        <div id="kemaskini_area" class="mr-2"></div>
                        <div id="myidentity-area"></div>
                     </div>
                  <a class="btn btn-primary btn-cetak"  target="_blank">Cetak</a>
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">
                  Kembali
                  </button>
               </div>
            </div>
         </div>
      </div>
      {{-- End Modal --}}
@endsection
@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<script>
   var start = moment("2008-01-01");
   var end = moment();
   
   $(document).ready(function(response) {

      var from_date = start.format('YYYY-MM-DD');
      var to_date = end.format('YYYY-MM-DD');

      $('#permohonan_table').dataTable({
         scrollX: true,
         processing: true,
         paging: true,
         pageLength: 15,
         lengthMenu: [[15, 30, 50, 100], [15, 30, 50, 100]],
         serverSide: true,
         ajax: {
            url: '{{ url('dun/permohonan/igems/list?status=') }}{{ $status }}',
            data:{from_date:from_date, to_date:to_date}
         },
         searching: false,
         language: {
            emptyTable: "Tiada Data"
         },
         columns: [
            { data: 'id_ahli', name: 'id_ahli' },
            { data: 'tkh_mohon', name: 'tkh_mohon' },
            { data: 'nama_pm', name: 'nama_pm' },
            { data: 'kp_pm', name: 'kp_pm' },
            { data: 'alamat', name: 'alamat' },
            { data: 'dun', name: 'dun' },
            { data: 'status_permohonan', name: 'status_permohonan' },
            { data: 'action', name: 'action', orderable: false, searchable: false },
         ],
      });
   });
   
   $('#search_form').submit(function (event) {
       event.preventDefault();
       $("#filter").trigger("click");
   });
   
   $('#filter').click(function(){
       var status = $('#status').val();
       var from_date = $('#from_date').val();
       var to_date = $('#to_date').val();
       var q = $('#q').val();
       var filter_type = $("#filter_type").val();
   
       $('#permohonan_table').dataTable().fnDestroy();
       $('#permohonan_table').dataTable({});
       $('#permohonan_table').dataTable().fnDestroy();
       $('#permohonan_table').dataTable({
           scrollX: true,
           processing: true,
           paging: true,
           pageLength: 15,
           lengthMenu: [[15, 30, 50, 100], [15, 30, 50, 100]],
           serverSide: true,
           ajax: {
               url:'{{ url('dun/permohonan/igems/list') }}',
               data:{status, from_date, to_date, q, filter_type}
           },
           searching: false,
           language: {
               emptyTable: "Tiada Data"
           },
           columns: [
               { data: 'id_ahli', name: 'id_ahli' },
               { data: 'tkh_mohon', name: 'tkh_mohon' },
               { data: 'nama_pm', name: 'nama_pm' },
               { data: 'kp_pm', name: 'kp_pm' },
               { data: 'alamat', name: 'alamat' },
               { data: 'dun', name: 'dun' },
               { data: 'status_permohonan', name: 'status_permohonan' },
               { data: 'action', name: 'action', orderable: false, searchable: false },
           ],
       });
   });
   
   $(function() {
       $(window).resize(function() {});
   });
   
   $(function() {
       function cb(start, end) {
           $('#permohonan_range span').html(start.format('D MMMM YYYY') + ' - ' + end.format('D MMMM YYYY'));
           $('#from_date').val(start.format('YYYY-MM-DD'));
           $('#to_date').val(end.format('YYYY-MM-DD'));
       }
   
       $('#permohonan_range').daterangepicker({
            showDropdowns: true,
            minYear: 2008,
            maxYear: 2020,
            startDate: start,
            endDate: end,
            ranges: {
               'Semua': [start, end],
               'Hari Ini': [moment(), moment()],
               '7 Hari Terakhir': [moment().subtract(6, 'days'), moment()],
               'Bulan Ini': [moment().startOf('month'), moment().endOf('month')],
               'Tahun Ini': [moment().startOf('years'), moment().endOf('years')]
           },
            locale: {
               format: 'DD/MM/YYYY'
           },
           autoApply: true,
           opens: 'left'
       }, cb);
   
       cb(start, end);
   
   });
   
   function exportFile() {
       var status = $('#status').val();
       var from_date = $('#from_date').val();
       var to_date = $('#to_date').val();
       var q = $('#q').val();
       var filter_type = $('#filter_type').val();
   
       window.open('{{ url('dun/permohonan/igems/export?_token=') }}{{csrf_token()}}&status='+status+'&from_date='+from_date+'&to_date='+to_date+'&q='+q+'&filter_type='+filter_type, '_blank');
   }
   
   function showDetail(x) {
       var data = {
           _token: '{{ csrf_token() }}',
           id: x
       };
   
       $.ajax({
           url: '{{ url('dun/permohonan/igems/show') }}',
           type: 'POST',
           data: data,
           success: function(response) {
            try {
               url = '{{ url('admin/rumusan') }}/igems/'+x;
               $('#nama_pm').val(response.pemohon.nama_pm);
               $('#kp_pm').val(response.pemohon.kp_pm);
               $('#dun').val(response.pemohon.dun);
               $('#status_pm').val(response.pemohon.status_pm);
               $('#status_ps').val(response.pemohon.status_ps);
               $('#pm_gagal').html(response.sebab_gagal_pm);
               $('#ps_gagal').html(response.sebab_gagal_ps);
               $('#tarikh_kursus').val(response.kursus.tarikh);
               $('#tarikh').val(response.kursus.tarikh);
               $('#tempat_kursus').val(response.kursus.tempat!='' ? response.kursus.tempat : response.kursus.daerah);
               $('#daerah_kursus').val(response.kursus.daerah);
               $('#start_kursus').val(response.kursus.time_start);
               $('#end_kursus').val(response.kursus.time_end);
               $('#nama_ps').val(response.pemohon.nama_ps);
               $('#kp_ps').val(response.pemohon.kp_ps);
               $('#makluman3').html(response.makluman["3"].makluman);
               $('#makluman4').html(response.makluman["4"].makluman);
               $('#makluman5').html(response.makluman["5"].makluman + ' <b>' + response.pemohon.emel + '</b>');
               $('#makluman6').html(response.makluman["6"].makluman);
               $('#makluman7').html(response.makluman["7"].makluman);
               $('#makluman8').html(response.makluman["8"].makluman);
               $('#makluman9').html(response.makluman["9"].makluman + ' <b>' + response.pemohon.emel + '</b>');
               $('#makluman10').html(response.makluman["10"].makluman);

               if (response.pemohon.pengesahan == 'Hadir') {
                  $('#emel_kursus').hide();
                  $('#hadir_kursus').show();
                  $('#tidak_hadir_kursus').hide();
               } else if (response.pemohon.pengesahan == 'Tidak Hadir') {
                  $('#emel_kursus').hide();
                  $('#hadir_kursus').hide();
                  $('#tidak_hadir_kursus').show();
               } else {
                  $('#emel_kursus').show();
                  $('#hadir_kursus').hide();
                  $('#tidak_hadir_kursus').hide();
               }

               if(response.pemohon.status_pm == 'Layak' || response.pemohon.status_ps == 'Layak') {
                  $('#igems_kursus').show();

               } else {
                  $('#igems_kursus').hide();

               } 

               if(response.pemohon.status_pm == 'Layak') {
                  $('#ulasan_layak_pm').show();
                  $('#ulasan_layak').show();
               } else {
                  $('#ulasan_layak_pm').hide();
                  $('#ulasan_layak').hide();
               } 

               if(response.pemohon.status_ps == 'Layak') {
                  $('#ulasan_layak_ps').show();
                  $('#ulasan_layak').show();
               } else {
                  $('#ulasan_layak_ps').hide();
                  $('#ulasan_layak').hide();
               } 

               if(response.pemohon.status_pm == 'Layak' && response.pemohon.status_ps == 'Layak') {
                  $('#sebab_pm').hide();
                  $('#sebab_ps').hide();
                  $('#pm_gagal').hide();
                  $('#ps_gagal').hide();
               } else if(response.pemohon.status_pm == 'Tidak Layak' && response.pemohon.status_ps == 'Tidak Layak'){
                  $('#sebab_pm').show();
                  $('#sebab_ps').show();
                  $('#pm_gagal').show();
                  $('#ps_gagal').show();
               }else if(response.pemohon.status_pm == 'Layak' && response.pemohon.status_ps == 'Tidak Layak'){
                  $('#sebab_pm').hide();
                  $('#sebab_ps').show();
                  $('#pm_gagal').hide();
                  $('#ps_gagal').show();
               }else{
                  $('#sebab_pm').show();
                  $('#sebab_ps').hide();
                  $('#pm_gagal').show();
                  $('#ps_gagal').hide();
               }

               if(response.pemohon.status_pm == 'Belum Disemak') {
                  $('#sebab_pm').hide();
                  $('#sebab_ps').hide();
                  $('#pm_gagal').hide();
                  $('#ps_gagal').hide();
                  
               } else {
                  
               } 

               if(response.pemohon.status_ps == 'Belum Disemak'){
                  $('#sebab_pm').hide();
                  $('#sebab_ps').hide();
                  $('#pm_gagal').hide();
                  $('#ps_gagal').hide();

               } else {
                  
               } 

               $('.bob-marley').hide();
               if(response.pemohon.status_pemohon == 'Belum Dibayar') {
                  $('.ulasan_permohonan').show();
               } else {
                  $('.ulasan_permohonan').hide();
               } 

               }
            catch (error) {
               console.log("Smart Sistem Inisiatif Peduli Rakyat")
            }
               
            // Cetak
            $('.btn-cetak').attr('href', url);
           },
           error: function(response) {
               $.alert({
                   type: 'red',
                   title: 'Whoops, looks like something went wrong!',
                   content: 'Please check your console.error().',
                   typeAnimated: true,
                   icon: 'fa fa-warning',
                   columnClass: 'col-md-6 col-md-offset-3',
               });
           }
       });
   
       $('#maklumat_permohonan').modal('show');
   } 

   String.prototype.capitalize = function() {
      return this.charAt(0).toUpperCase() + this.slice(1);
   }

   $('.modal').on("hidden.bs.modal", function (e) {
      if($('.modal:visible').length)
      {
            $('.modal-backdrop').first().css('z-index', parseInt($('.modal:visible').last().css('z-index')) - 10);
            $('body').addClass('modal-open');
      }
   }).on("show.bs.modal", function (e) {
      if($('.modal:visible').length)
      {
            $('.modal-backdrop.in').first().css('z-index', parseInt($('.modal:visible').last().css('z-index')) + 10);
            $(this).css('z-index', parseInt($('.modal-backdrop.in').first().css('z-index')) + 10);
      }
   });
</script>
@endsection