@extends('layouts.app')
@section('title', 'Permohonan '.strtoupper(App\IPR::where('name', $ipr->name)->pluck('name')[0]))
@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')
@role(['principal_admin', 'super_admin', 'admin'])
@if(Auth::user()->hasRole('principal_admin') || Auth::user()->hasRole('super_admin') || (Auth::user()->hasRole('admin') && Auth::user()->ipr_id == App\IPR::where('name', 'hijrah')->pluck('id')[0]))
<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', 'hijrah')->pluck('display_name')[0] }}
                     <br>
               </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') || $is_permission_own || $is_permission_all)
                       
                        @endif
                        <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>
                        <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="ic_pemohon">No. Identiti Peserta</option>
                            <option value="nama">Nama Peserta</option>
                            <option value="no_telefon">No Telefon</option>
                            <option value="dun">DUN</option>
                            {{-- <option value="status_myidentity">Status Rekod</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">
                        <thead>
                            <tr>
                                <!-- <th>No.</th> -->
                                <th>No. Identiti Peserta</th>
                                <th>Nama Peserta</th>
                                <!-- <th>Cawangan</th> -->
                                <th>No Telefon</th>
                                <th>DUN</th>
                                <!-- <th>Daerah</th> -->
                                <th>Tarikh Permohonan</th>
                                {{-- <th>Status Rekod</th>
                                <th>Tarikh Kematian</th> --}}
                                <th width="10%"></th>
                            </tr>
                        </thead>
                    </table>
                </div>     
            </div>
         </div>
      </div>
   </div>
</div>

{{-- Modal --}}
<div class="modal fade" id="maklumat_permohonan" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="background-color: rgba(0, 0, 0,.6)">
    <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document" style="max-width: 1000px;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLabel">
                    Rumusan Permohonan <br>
                    <small>
                        <i>Tarikh Permohonan: <span id="created_at"></span> </i>
                    </small>
                </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">
                        &times;
                    </span>
                </button>
            </div>
            <div class="modal-body">
                <div class="watermark">
                    <img src="{{ asset('img/logo.png') }}" class="watermark-logo">
                    <div class="watermark-text">{{ Auth::user()->username }}</div>
                </div>
                <div class="m-portlet__body">
                    <div class="m-form__section m-form__section--first">
                        <div class="m-form__heading">
                            <h5 style="color: #f4516c">
                                Maklumat Adun & Parlimen:
                            </h5>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                            Dun:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_dun" readonly>
                            </div>
                            <label class="col-lg-2 col-form-label">
                                Parlimen:
                            </label>
                            <div class="input-group col-lg-4">
                                <input type="text" class="form-control m-input" id="m_parlimen" readonly>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                Cawangan:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_cawangan" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="m-form__seperator m-form__seperator--dashed"></div>
                    <div class="m-form__section m-form__section--middle">
                        <div class="m-form__heading">
                            <h5 style="color: #f4516c">
                                Maklumat Peserta:
                            </h5>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                Nama:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_nama" readonly>
                            </div>
                            <label class="col-lg-2 col-form-label">
                                Agama:
                            </label>
                            <div class="input-group col-lg-4">
                                <input type="text" class="form-control m-input" id="m_agama" readonly>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                No Identiti:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_kp"  readonly>
                            </div>
                            <label class="col-lg-2 col-form-label">
                                Bangsa
                            </label>
                            <div class="input-group col-lg-4">
                                <input type="text" class="form-control m-input" id="m_bangsa"  readonly>
                                
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                Jantina:
                            </label>
                            <div class="input-group m-input-group col-lg-4">
                                <input type="text" class="form-control m-input" id="m_jantina" readonly>
                            </div>
                            <label class="col-lg-2 col-form-label">
                                Status Perkahwinan:
                            </label>
                            <div class="input-group m-input-group col-lg-4">
                            <input type="text" class="form-control m-input" id="m_status_kahwin" readonly>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                            Tempoh Mastautin:
                            </label>
                            <div class="input-group m-input-group col-lg-4">
                                <input type="text" class="form-control m-input" id="m_tempoh_mastautin" readonly>
                            </div>
                            <label class="col-lg-2 col-form-label">
                            Nombor Telefon Bimbit:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_telefon" readonly>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                            Negeri Lahir:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_negeri" readonly >
                            </div>
                            <label class="col-lg-2 col-form-label">
                            Nombor Telefon Rumah / Tetap:
                            </label>
                            <div class="input-group m-input-group col-lg-4">
                                <input type="text" class="form-control m-input" id="m_telefon_tetap"  readonly readonly>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Maklumat Tempat Tinggal -->
                    <div class="m-form__seperator m-form__seperator--dashed"></div>
                    <div class="m-form__section m-form__section--middle">
                        <div class="m-form__heading">
                            <h5 style="color: #f4516c">
                                Maklumat Tempat Tinggal:
                            </h5>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                Alamat:
                            </label>
                            <div class="col-lg-4">
                                <!-- <textarea name="" id="" cols="30" rows="10" class="form-control" id="" readonly></textarea> -->
                                <p id="m_alamat"></p>
                            </div>
                            <label class="col-lg-2 col-form-label">
                                Poskod:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_poskod" readonly>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <!-- <label class="col-lg-2 col-form-label">
                                Bandar
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input"  value="" readonly>
                            </div> -->
                            <label class="col-lg-2 col-form-label">
                                Daerah:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_daerah" readonly>
                            </div>
                            <label class="col-lg-2 col-form-label">
                            Negeri:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" value="Selangor" readonly>
                            </div>
                        </div>
                        <!-- <div class="form-group m-form__group row">
                        
                        </div>
                        <div class="form-group m-form__group row">
                        
                        </div> -->
                    </div>

                    <div class="m-form__seperator m-form__seperator--dashed"></div>
                    <div class="m-form__section m-form__section--middle maklumat_pasangan_info">
                        <div class="m-form__heading">
                        <h5 style="color: #f4516c">
                            Maklumat Pasangan:
                            </h5>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                            Nama:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_nama_pasangan"  readonly>
                            </div>
                            <label class="col-lg-2 col-form-label">
                            No Identiti:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_kp_pasangan" readonly>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                Agama
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input"  id="m_agama_pasangan" readonly>
                            </div>
                            <label class="col-lg-2 col-form-label">
                                Bangsa:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_bangsa_pasangan" readonly>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                            No Telefon Bimbit:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="no_telefon_pasangan" readonly>
                            </div>
                        </div>
                    </div>

                    <d class="maklumat_anak_info">
                        <div class="m-form__seperator m-form__seperator--dashed"></div>
                        <div class="m-form__heading ">
                            <h5 style="color: #f4516c">
                                Maklumat Anak
                            </h5>
                        </div>
                        <div class="form-group m-form__group row">
                            <div class="col-lg-12">
                                <table class="table">
                                    <thead>
                                        <tr>
                                        <th>Nama</th>
                                        <th>No. Kad Pengenalan / Sijil Lahir</th>
                                        <th>Jantina</th>
                                        <th>Tarikh Lahir</th>
                                        <th>Tarikh Pendidikan</th>
                                        <th>Kursus Diminati</th>
                                        </tr>
                                    </thead>
                                    <tbody id="m_maklumat_anak"></tbody>
                                </table>
                            </div>
                        </div>
                    </d>
                    
                    <!-- Maklumat Aktiviti Perniagaan -->
                    <div class="m-form__seperator m-form__seperator--dashed "></div>
                    <div class="m-form__section m-form__section--last ">
                        <div class="m-form__heading">
                            <h5 style="color: #f4516c">
                                Maklumat Aktiviti Perniagaan
                            </h5>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                Jenis Perniagaan / Aktiviti Perniagaan:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_aktiviti" readonly>
                            </div>
                            <label class="col-lg-2 col-form-label">
                                Tempoh Berniaga:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_tempoh_niaga" readonly>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                No Lesen Perniagaan:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_no_ssm" readonly>
                            </div>
                            <!-- <label class="col-lg-2 col-form-label">
                                Status Pemilikan:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" value="" readonly>
                            </div> -->
                            <label class="col-lg-2 col-form-label">
                                Premis:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_jenis_premis" readonly>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                Alamat Perniagaan:
                            </label>
                            <div class="col-lg-4">
                            <p id="m_alamat_perniagaan"></p>
                                <!-- <textarea class="form-control m-input" name="" id="" cols="30" rows="10" readonly>
                                </textarea> -->
                            </div>
                            <label class="col-lg-2 col-form-label">
                                Dun:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input"  id="dun_niaga" readonly>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                Parlimen:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="parlimen_niaga" readonly> 
                            </div>
                        </div>
                    </div>

                    <!-- Tujuan Pinjaman -->
                    <div class="m-form__seperator m-form__seperator--dashed "></div>
                    <div class="m-form__section m-form__section--last ">
                        <div class="m-form__heading">
                            <h5 style="color: #f4516c">
                                Tujuan Pinjaman
                            </h5>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                Nama Bank:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_nama_bank" readonly>
                            </div>
                            <label class="col-lg-2 col-form-label">
                                Tujuan Pinjaman:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_tujuan_pinjaman" readonly>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                No. Akaun Bank:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_no_akaun" readonly>
                            </div>
                            <label class="col-lg-2 col-form-label">
                                Tempoh Bayaran Balik:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_tempoh_bayar" readonly>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                Skim Pinjaman:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_skim_pinjaman" readonly>
                            </div>
                            <label class="col-lg-2 col-form-label">
                                Jumlah Permohonan:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_jumlah_mohon" readonly>
                            </div>
                        </div>
                    </div>

                    <div class="m-form__seperator m-form__seperator--dashed"></div>
                    <div class="m-form__section m-form__section--middle">
                        <div class="m-form__heading">
                            <h5 style="color: #f4516c">
                                Maklumat Pendapatan Bulanan
                            </h5>
                        </div>
                        <div class="form-group m-form__group row">
                            <div class="col-lg-12">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Bil</th>
                                            <th>Perkara</th>
                                            <th>Pendapatan(RM)</th>
                                        </tr>
                                    </thead>
                                    <tbody >
                                        <tr>   
                                            <th>1.</th>
                                            <td>Pendapatan aktiviti perniagaan pemohon</td>
                                            <td><input type="text" class="form-control m-input "  id="m_Pendapatan_Aktiviti"  readonly></td>
                                        </tr>
                                        <tr>   
                                            <th>2.</th>
                                            <td>Pendapatan pasangan</td>
                                            <td><input type="text" class="form-control m-input " id="m_Pendapatan_Pasangan" readonly></td>
                                        </tr>
                                        <tr>   
                                            <th>3.</th>
                                            <td>Lain-lain pendapatan (Sumbangan,kebajikan,pendapatan sampingan)</td>
                                            <td><input type="text" class="form-control m-input " id="m_Pendapatan_Lain" readonly></td>
                                        </tr>
                                        <tr>
                                            <th></th>
                                            <td>
                                                <span style="">Jumlah Pendapatan</span>
                                            </td>
                                            <td><input type="text" class="form-control m-input " id="m_Jumlah_Pendapatan" readonly></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="m-form__seperator m-form__seperator--dashed"></div>
                    <div class="m-form__section m-form__section--middle maklumat_pasangan">
                        <div class="m-form__heading">
                            <h5 style="color: #f4516c">
                                Maklumat Perbelanjaan / Saraan Bulanan
                            </h5>
                        </div>
                        <div class="form-group m-form__group row">
                            <div class="col-lg-12">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Bil</th>
                                            <th>Perkara</th>
                                            <th>Pendapatan(RM)</th>
                                        </tr>
                                    </thead>
                                    <tbody >
                                        <tr>   
                                            <th>1.</th>
                                            <td>Kos aktiviti perniagaan (modal pusingan)</td>
                                            <td><input type="text" class="form-control m-input " id="m_Perbelanjaan_Aktiviti"  readonly></td>
                                        </tr>
                                        <tr>   
                                            <th>2.</th>
                                            <td>Perbelanjaan isi rumah (belanja dapur)</td>
                                            <td><input type="text" class="form-control m-input " id="m_Perbelanjaan_Isi_Rumah"  readonly></td>
                                        </tr>
                                        <tr>   
                                            <th>3.</th>
                                            <td>Perbelanjaan persekolahan (tuisyen/buku/yuran/pengangkutan)</td>
                                            <td><input type="text" class="form-control m-input " id="m_Perbelanjaan_Persekolahan" readonly></td>
                                        </tr>
                                        <tr>   
                                            <th>4.</th>
                                            <td>Sewa (rumah/kenderaan/utiliti/premis/lesen)</td>
                                            <td><input type="text" class="form-control m-input " id="m_Perbelanjaan_Sewa" readonly></td>
                                        </tr>
                                        <tr>   
                                            <th>5.</th>
                                            <td>Perbelanjaan Hutang</td>
                                            <td><input type="text" class="form-control m-input " id="m_Perbelanjaan_Hutang" readonly></td>
                                        </tr>
                                        <tr>
                                            <th></th>
                                            <td>
                                                <span style="">Jumlah Perbelanjaan</span>
                                            </td>
                                            <td><input type="text" class="form-control m-input " id="m_Jumlah_Perbelanjaan"  readonly></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="m-form__seperator m-form__seperator--dashed"></div>
                    <div class="m-form__section m-form__section--middle ">
                        <h5 style="color: #f4516c">
                            Senarai Dokumen Dimuatnaik
                        </h5>
                        <br>
                        <div class="form-group row" id="documentlist"></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>

<div class="modal fade" id="status_myidentity" tabindex="-1" role="dialog" aria-labelledby="statusMyidentity"
    aria-hidden="true" style="background-color: rgba(0, 0, 0,.6)">
    <div class="modal-dialog modal-lg" role="document" style="max-width: 1000px;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    Status Rekod <br>
                    <small>
                        <i>Tarikh Kemaskini: <span id="my_updated_at"></span></i>
                    </small>
                </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">
                        &times;
                    </span>
                </button>
            </div>
            <div class="modal-body">
                <div class="watermark">
                    <img src="{{ asset('img/logo.png') }}" class="watermark-logo">
                    <div class="watermark-text">{{ Auth::user()->username }}</div>
                </div>
                <div class="m-form__section m-form__section--middle">
                    <h5 style="color: #f4516c">Status:</h5><br />
                    <div class="form-group row">
                        <div class="col-md-12">
                            <label class="form-control-label" id="my_status"></label>
                        </div>
                    </div>
                    <div id="maklumat_diri">
                    <hr>
                    <h5 style="color: #f4516c">Maklumat Diri:</h5><br />
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label class="form-control-label">
                                Nama:
                            </label>
                            <input type="text" class="form-control" id="my_nama" readonly>
                        </div>
                        <div class="col-md-6">
                            <label class="form-control-label">
                                No. Kad Pengenalan:
                            </label>
                            <input type="text" class="form-control" id="my_ic" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label class="form-control-label">
                                Alamat Tetap:
                            </label>
                            <textarea class="form-control" id="my_alamat" readonly></textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="form-control-label">
                                Alamat Surat-Menyurat:
                            </label>
                            <textarea class="form-control" id="my_alamat_surat" readonly></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label class="form-control-label">
                                Tarikh Mati:
                            </label>
                            <input type="text" class="form-control" id="my_tarikh_mati" readonly>
                        </div>
                        <div class="col-md-6">
                            <label class="form-control-label">
                                Tarikh Lahir:
                            </label>
                            <input type="text" class="form-control" id="my_tarikh_lahir" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label class="form-control-label">
                                Jantina:
                            </label>
                            <input type="text" class="form-control" id="my_jantina" readonly>
                        </div>
                        <div class="col-md-6">
                            <label class="form-control-label">
                                No Telefon:
                            </label>
                            <input type="text" class="form-control" id="my_tel" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label class="form-control-label">
                                Emel:
                            </label>
                            <input type="text" class="form-control" id="my_emel" readonly>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
            <div id="b_myidentity" class="modal-footer"></div>
        </div>
    </div>
</div>
{{-- End Modal --}}

@endif
@endrole
@endsection

@section('js')
@role(['principal_admin','super_admin','admin'])
<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("2000-01-01");
    var end = moment();
    
    $(document).ready(function() {
        var status = $('#status').val();
        var from_date = start.format('YYYY-MM-DD');
        var to_date = end.format('YYYY-MM-DD');

        $('#permohonan_table').dataTable({
            processing: true,
            paging: true,
            pageLength: 15,
            lengthMenu: [[15, 30, 50, 100], [15, 30, 50, 100]],
            serverSide: true,
            ajax: {
                url:'{{ url('admin/permohonan/hijrah/list') }}',
                data:{status:status, from_date:from_date, to_date:to_date}
            },
            searching : false,
            language: { emptyTable: "Tiada Data" },
            columns: [
                { data: 'ic', name: 'ic' },
                { data: 'Nama_Peserta', name: 'Nama_Peserta' },
                { data: 'No_Telefon_Tetap', name: 'No_Telefon_Tetap' },
                { data: 'Dun', name: 'Dun' },
                { data: 'tarikh_permohonan', name: 'tarikh_permohonan' },
                // { data: 'status_myidentity', name: 'status_myidentity' },
                // { data: 'tarikh_kematian', name: 'tarikh_kematian' },
                { 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({
            processing: true,
            paging: true,
            pageLength: 15,
            lengthMenu: [[15, 30, 50, 100], [15, 30, 50, 100]],
            serverSide: true,
            ajax: {
                url:'{{ url('admin/permohonan/hijrah/list') }}',
                data:{status:status, from_date:from_date, to_date:to_date, q:q, filter_type:filter_type}
            },
            searching : false,
            language: { emptyTable: "Tiada Data" },
            columns: [
                { data: 'ic', name: 'ic' },
                { data: 'Nama_Peserta', name: 'Nama_Peserta' },
                { data: 'No_Telefon_Tetap', name: 'No_Telefon_Tetap' },
                { data: 'Dun', name: 'Dun' },
                { data: 'tarikh_permohonan', name: 'tarikh_permohonan' },
                // { data: 'status_myidentity', name: 'status_myidentity' },
                // { data: 'tarikh_kematian', name: 'tarikh_kematian' },
                { 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('admin/permohonan/hijrah/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('admin/permohonan/hijrah/show')}}',
            type: 'POST',
            data: data,
            success: function(response) {
                $("#preloaders").fadeOut(350);
                url = '{{ url('admin/rumusan') }}?ipr=hijrah&id='+x;

                var data = response.data;
                var permohonan = response.permohonan;
                var pasangan = response.pasangan;
                var anak = response.anak;
                var perniaagaan = response.perniaagaan;
                var kutipan = response.kutipan;
                var peserta_takaful = response.peserta_takaful;
                var document = response.document;

                // Tarikh Permohonan
                $('#created_at').html(moment(permohonan.Tarikh_Mohon, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY'));
                
                // Maklumat Peserta
                $('#m_dun').val(permohonan.Dun);
                $('#m_parlimen').val(permohonan.Parlimen);
                $('#m_cawangan').val(permohonan.Cawangan);
                $('#m_nama').val(permohonan.Nama_Peserta);
                $('#m_agama').val(permohonan.Agama);
                $('#m_kp').val(permohonan.NoKP_Peserta);
                $('#m_bangsa').val(permohonan.Bangsa);
                $('#m_jantina').val(permohonan.Jantina);
                $('#m_status_kahwin').val(permohonan.Status_Perkahwinan);
                $('#m_tempoh_mastautin').val(permohonan.Tempoh_Mastautin);
                $('#m_telefon').val(permohonan.No_Telefon_Bimbit);
                $('#m_negeri').val(permohonan.Negeri);
                $('#m_telefon_tetap').val(permohonan.No_Telefon_Tetap);
                $('#m_alamat').html(permohonan.Alamat_Rumah);
                $('#m_poskod').val(permohonan.Poskod);
                $('#m_daerah').val(permohonan.Daerah);

                // Maklumat Pasangan
                if (permohonan.Status_Perkahwinan == "BERKAHWIN") {
                    $('.maklumat_pasangan_info').show();                    
                } else {
                    $('.maklumat_pasangan_info').hide();                      
                }

                $('#m_nama_pasangan').val(pasangan.Nama_Pasangan);
                $('#m_kp_pasangan').val(pasangan.NoKP_Pasangan);
                $('#no_telefon_pasangan').val(pasangan.Telefon_Bimbit_Pasangan);
                $('#m_agama_pasangan').val(pasangan.Agama);
                $('#m_bangsa_pasangan').val(pasangan.Bangsa);

                $('#m_maklumat_anak').html('');
                anak.forEach(function(d) {
                    html =
                    '<tr>'+
                            '<td>'+
                            '<input type="text" class="form-control m-input" value="'+(d.Nama_Peserta)+'" disabled>'+
                            '</td>'+
                            '<td>'+
                            '<input type="text" class="form-control m-input" value="'+(d.NoKP_Anak)+'" disabled>'+
                            '</td>'+
                            '<td>'+
                            '<input type="text" class="form-control m-input" value="'+(d.Jantina)+'" disabled>'+
                            '</td>'+
                            '<td>'+
                            '<input type="text" class="form-control m-input" value="'+(d.Tarikh_Lahir ? d.Tarikh_Lahir : 'Tiada' )+'" disabled>'+
                            '</td>'+
                            '<td>'+
                            '<input type="text" class="form-control m-input" value="'+(d.Taraf_Pendidikan)+'" disabled>'+
                            '</td>'+
                            '<td>'+
                            '<input type="text" class="form-control m-input" value="'+(d.Nama_Kursus)+'" disabled>'+
                            '</td>'+
                    '</tr>';

                    $('#m_maklumat_anak').append(html);
                });

                // Maklumat Perniagaan
                $('#m_aktiviti').val(perniaagaan.Aktiviti_Perniagaan);
                $('#m_tempoh_niaga').val(perniaagaan.Tempoh_Niaga);
                $('#no_telefon_pasangan').val(perniaagaan.No_Pendaftaran_SSM);
                $('#m_no_ssm').val(perniaagaan.No_Pendaftaran_SSM);
                $('#m_alamat_perniagaan').html(perniaagaan.Alamat_Perniagaan);
                $('#m_jenis_premis').val(perniaagaan.Premis);
                $('#dun_niaga').val(perniaagaan.Dun);
                $('#parlimen_niaga').val(perniaagaan.Parlimen);

                // Tujuan Pinjaman 
                $('#m_nama_bank').val(perniaagaan.Nama_Bank);
                $('#m_tujuan_pinjaman').val(perniaagaan.Tujuan_Pinjaman);
                $('#m_no_akaun').val(perniaagaan.No_Akaun);
                $('#m_tempoh_bayar').val(data.tempoh_bayar);
                $('#m_skim_pinjaman').val(data.skim_pinjaman);
                $('#m_jumlah_mohon').val("RM" + (data.jumlah_permohonan==null?0:parseFloat(data.jumlah_permohonan).toLocaleString()));

                // Maklumat Pendapatan Bulanan
                $('#m_Pendapatan_Aktiviti').val(parseFloat(perniaagaan.Pendapatan_Aktiviti).toFixed(2)? perniaagaan.Pendapatan_Aktiviti : '');
                $('#m_Pendapatan_Pasangan').val(parseFloat(perniaagaan.Pendapatan_Pasangan).toFixed(2) ? perniaagaan.Pendapatan_Pasangan : '');
                $('#m_Pendapatan_Lain').val(parseFloat(perniaagaan.Pendapatan_Lain).toFixed(2) ? perniaagaan.Pendapatan_Lain: '' );
                $('#m_Jumlah_Pendapatan').val(parseFloat(perniaagaan.Jumlah_Pendapatan).toFixed(2) ? perniaagaan.Jumlah_Pendapatan : '' );

                // Maklumat Pendapatan Bulanan
                $('#m_Perbelanjaan_Aktiviti').val(parseFloat(perniaagaan.Perbelanjaan_Aktiviti).toFixed(2) ? perniaagaan.Perbelanjaan_Aktiviti : '');
                $('#m_Perbelanjaan_Isi_Rumah').val(parseFloat(perniaagaan.Perbelanjaan_Isi_Rumah).toFixed(2) ? perniaagaan.Perbelanjaan_Isi_Rumah : '');
                $('#m_Perbelanjaan_Persekolahan').val(parseFloat(perniaagaan.Perbelanjaan_Persekolahan).toFixed(2) ? perniaagaan.Perbelanjaan_Persekolahan : '');
                $('#m_Perbelanjaan_Sewa').val(parseFloat(perniaagaan.Perbelanjaan_Sewa).toFixed(2) ? perniaagaan.Perbelanjaan_Sewa : '');
                $('#m_Perbelanjaan_Hutang').val(parseFloat(perniaagaan.Perbelanjaan_Hutang).toFixed(2) ? perniaagaan.Perbelanjaan_Hutang : '');
                $('#m_Jumlah_Perbelanjaan').val(parseFloat(perniaagaan.Jumlah_Perbelanjaan).toFixed(2) ? perniaagaan.Jumlah_Perbelanjaan : '');

                // Maklumat Dokumen
                $('#documentlist').html('');
                html = '<table  class="table">' ;
                html = html + '<tr>';
                html = html + '<th width="80%">Jenis Fail</th>' ;
                html = html + '<th width="20%">Lihat Fail</th>' ;
                html = html + '</tr>';
                document.forEach(function(d) {
                    path = "{{url('')}}"+d.filename;
                    html = html + '<tr>';
                    html = html + '<td>' + d.type + '</td>' ;
                    if(d.filename == '')
                        html = html + '<td> - Tiada Fail</td>';
                    else
                        html = html + '<td> - <a target="_blank" href="' + path + '">Klik Di Sini</a></td>';
                    
                    html = html + '</tr>';
                    
                    
                });
                html = html + '</table>';
                $('#documentlist').append(html);

                $('.btn-cetak').attr('href', url);
                $('#myidentity-area').html(`<button type="button" onClick="showMyidentity('${permohonan.NoKP_Peserta}')" class="btn btn-warning" id="myidentity_btn">Status Rekod</button>`);
            },
            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');
    }

    function showMyidentity(x){ 
        $('#maklumat_permohonan').modal('hide');

        var data = {
            _token: '{{ csrf_token() }}',
            id: x
        };
        $.ajax({
            url: "{{ url('myidentity/status') }}",
            type: 'POST',
            data: data,
            success: function(response) {
                if (response.status){
                    $('#maklumat_diri').show();
                                            
                    //status myidentity
                    var status_myidentity = '';
                    if (response.data.status_rekod == 'A' || response.data.status_rekod == 'F' || response.data.status_rekod == '1') {
                        status_myidentity = 'Hidup';
                    } else if (response.data.status_rekod == 'B' || response.data.status_rekod == 'H' || response.data.status_rekod == '2') {
                        status_myidentity = 'Meninggal Dunia';
                    } else {
                        if (response.data.taraf_penduduk == 'M' || response.data.taraf_penduduk == 'P'){
                            status_myidentity = response.data.message
                        }else{
                            status_myidentity = response.data.message;  
                        }
                    }
                    $('#my_status').html(status_myidentity);
                    $('#my_updated_at').html(moment(response.data.updated_at, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY'));
                    $('#my_nama').val(response.data.nama); 
                    $('#my_ic').val(response.data.ic_pemohon);
                    $('#my_alamat').val(response.data.alamat_tetap_1 + ',' + response.data.alamat_tetap_2 + ',' + response.data.alamat_tetap_3);
                    $('#my_alamat_surat').val(response.data.alamat_surat_1 + ',' + response.data.alamat_surat_1 + ',' + response.data.alamat_surat_2 + ',' + response.data.alamat_surat_3 + ',' + response.data.alamat_surat_4 + ',' + response.data.alamat_surat_5); 
                    $('#my_tarikh_mati').val(response.data.tarikh_mati);
                    $('#my_tarikh_lahir').val(response.data.tarikh_lahir);

                    // Jantina
                    var jantina = '';
                    switch (response.data.jantina) {
                        case 'L':
                            jantina = 'Lelaki';
                            break;
                    
                        case 'P':
                            jantina = 'Perempuan';
                            break;

                        case 'R':
                            jantina = 'Ragu';
                            break;

                        default:
                            jantina = '';
                            break;
                    }
                    $('#my_jantina').val(jantina);
                    $('#my_tel').val(response.data.tel_bimbit);
                    $('#my_emel').val(response.data.emel);
                    // TODO MAP OTHER VALUES TO ID
                }
                else{
                    $('#maklumat_diri').hide();
                    $('#my_status').html(response.message);
                }
            },
            error: function(response) {
                $.alert({
                    type: 'red',
                    title: 'Whoops, looks like something went wrong!',
                    content: 'Please check with system admin.',
                    typeAnimated: true,
                    icon: 'fa fa-warning',
                    columnClass: 'col-md-6 col-md-offset-3',
                });
            }
        })

        $('#b_myidentity').html(`<button type="button" class="btn btn-secondary" data-dismiss="modal" onClick="showDetail('${x}');">Kembali</button>`)
        $('#status_myidentity').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>
@endrole
@endsection