@extends('layouts.app')
@section('title', 'Senarai '.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>
   .form-control[disabled] {
   border: 0px;
   background: transparent;
   }
</style>
@endsection
@section('content')
@role(['super_admin','principal_admin','admin'])
@if(Auth::user()->hasRole('super_admin') || Auth::user()->hasRole('principal_admin') || (Auth::user()->hasRole('admin') && Auth::user()->ipr_id == App\IPR::where('name', 'ceria')->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">
                  Senarai {{ App\IPR::where('name', 'ceria')->pluck('display_name')[0] }}
               </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)
                        <div class="" style="margin-right:5px">
                           <a href="{{ url('admin/permohonan/ceria/add') }}" 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-plus"></i>
                                <span>Senarai Baru</span>
                            </span>
                           </a>
                        </div>
                        @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>
                        @if(Auth::user()->hasRole('super_admin') || Auth::user()->hasRole('principal_admin') || $is_permission_export)
                       
                        @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='' selected='selected'>Semua DUN</option>
                            @php 
                            foreach($adun as $data) {
                            echo "<option value='$data->id'>$data->nama</option>";
                            }
                            @endphp
                        </select> -->
                        <select class="form-control" id="filter_type" style="height:unset;padding:5px 5px;">
                           <option value="id_permohonan">Id Permohonan</option>
                           <!-- <option value="nama_pangsapuri">Nama Pangsapuri</option> -->
                           <option value="nama_pengurusan">Nama Pengurusan</option>
                           <option value="pbt">PBT</option>
                           <option value="dun">Dun</option>
                           <option value="daerah">Daerah</option>
                           <option value="status">Status</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>
               <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 Pangsapuri</th> -->
                        <th>Nama Pengurusan</th>
                        <th>PBT</th>
                        <th>Dun</th>
                        <th>Status</th>
                        <th width="10%"></th>
                     </tr>
                  </thead>
               </table>
            </div>
         </div>
      </div>
   </div>
</div>

{{-- Start 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" 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="m_tarikh_permohonan"></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">
            <hr class="modal-hr">
            <div class="m-form__section m-form__section--second">
                <div class="m-form__heading">
                    <h5 style="color: #f4516c">
                        Maklumat Pemohon:
                    </h5>
                </div>
                <div class="m-portlet__body">
                    <!-- Maklumat Pemohon -->
                    <div class="m-form__section m-form__section--first">
                        <div class="form-group m-form__group row">

                            <label class="col-lg-2 col-form-label form-control-label">
                                Nama Pangsapuri:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_nama_pangsapuri" readonly>
                            </div>

                            <label class="col-lg-2 col-form-label form-control-label">
                                Kategori Rumah:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_ketegori_rumah" readonly>
                            </div>
                        </div>

                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label form-control-label">
                                Kategori Pengurusan Rumah:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_ketegori_pengurusan_rumah" readonly>
                            </div>

                            <label class="col-lg-2 col-form-label form-control-label">
                                Dun:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_dun" readonly>
                            </div>
                            
                        </div>

                        <div class="form-group m-form__group row">

                            <label class="col-lg-2 col-form-label form-control-label">
                                Pengerusi/Orang Untuk dihubungi:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_no_utk_dihubungi" readonly>
                            </div>


                            <label class="col-lg-2 col-form-label form-control-label">
                                PBT:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_pbt" readonly>
                            </div>
                            
                        </div>

                        <div class="form-group m-form__group row">

                            <label class="col-lg-2 col-form-label form-control-label">
                                Nombor Telefon Pejabat:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_no_tel_pejabat" readonly>
                            </div>

                            <label class="col-lg-2 col-form-label form-control-label">
                                Nombor Telefon Bimbit:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_no_tel" readonly>
                            </div>
                        </div>

                        <div class="form-group m-form__group row">

                            <label class="col-lg-2 col-form-label form-control-label">
                                Nombor Telefon Fax:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_no_tel_fax" readonly>
                            </div>

                            <label class="col-lg-2 col-form-label form-control-label">
                                Emel:
                            </label>
                            <div class="col-lg-4">
                                <input type="email" class="form-control m-input" id="m_emel" readonly>
                            </div>

                        </div>

                        <div class="form-group m-form__group row">

                            <label class="col-lg-2 col-form-label form-control-label">
                                Alamat:
                            </label>
                            <div class="col-lg-4">
                                <textarea class="form-control " name="m_alamat" id="m_alamat" cols="30" rows="5" readonly></textarea>
                            </div>
                        
                        </div>
                     
                    </div>

                    <!-- Butiran Pangsapuri -->
                    <hr class="modal-hr">

                    <div class="m-form__section m-form__section--first">
                        <div class="m-form__heading">
                            <h5 style="color: #f4516c">
                                Butiran Pangsapuri
                            </h5>
                        </div>

                        <div class="form-group m-form__group row">

                            <label class="col-lg-2 col-form-label form-control-label">
                                Bil Blok Pangsapuri:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_bil_blok" readonly>
                            </div>

                            <label class="col-lg-2 col-form-label form-control-label">
                                Bil Unit Rumah:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_bil_unit_rumah"  readonly>
                            </div>
                        </div>

                        <div class="form-group m-form__group row">

                            <label class="col-lg-2 col-form-label form-control-label">
                                Bil Tingkat Blok:
                            </label>
                            <div class="col-lg-4">
                            <input type="text" class="form-control m-input" id="m_bil_tingkat_blok" readonly>
                            </div>

                            <label class="col-lg-2 col-form-label form-control-label">
                                Bil Unit Lif:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_bil_unit_lif" readonly>
                            </div>

                        </div>

                        <div class="form-group m-form__group row">

                            <label class="col-lg-2 col-form-label form-control-label">
                                Jenis Kerosakan yang ingin dibaik pulih:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_jenis_kerosakan" readonly>
                            </div>

                            <label class="col-lg-2 col-form-label form-control-label">
                                Lain-lain kerosakan:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_lain_kerosakan" readonly>
                            </div>

                        </div>

                        <div class="form-group m-form__group row">

                            <label class="col-lg-2 col-form-label form-control-label">
                                Anggran Kos Baik Pulih:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="m_anggaran_kos" readonly>
                            </div>

                        </div>
                  </div>

                   <!-- Butiran Pangsapuri -->
                    <hr class="modal-hr">

                    <div class="m-form__section m-form__section--first">
                                <div class="m-form__heading">
                                    <h3 class="m-form__heading-title">
                                    Senarai Semak Dokumen:
                                    </h3>
                                </div>

                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th scope="col" width="70%"> <b>Dokumen</b> </th>
                                            <th scope="col" width="30%"> <b>Muat Naik</b> </th>
                                        </tr>
                                    </thead>
                                    <tbody id="maklumat_dokumen"></tbody>
                                </table>
                            </div>
               </div>
            </div>
            
            <hr class="modal-hr">
            <div class="m-form__section m-form__section--middle">
               <h5 style="color: #f4516c">
                  Maklumat Permohonan:
               </h5>
               <br>
               <div class="form-group row">
                  <div class="col-md-6">
                     <label for="recipient-name" class="form-control-label">
                     Status Permohonan:
                     </label>
                     <input type="text" class="form-control" id="m_status" readonly>
                  </div>
                  <div class="col-md-6">
                     <label for="recipient-name" class="form-control-label">
                        Nama Peyelia:
                     </label>
                     <input type="text" class="form-control" id="m_penyelia_admin" readonly>
                  </div>
               </div>
               <div class="form-group row">
                  <div class="col-md-6">
                     <label for="recipient-name" class="form-control-label"  id="m_alasan2">
                     Alasan:
                     </label>
                     <textarea name="m_ulasan_admin" class="form-control" id="m_ulasan_admin" cols="30" rows="10" readonly></textarea>
                     <!-- <input type="text" class="form-control" id="m_alasan" readonly> -->
                  </div>
               </div>
            </div>
         </div>
         <div class="modal-footer">
            <!-- <div id="kemaskini_area" style="margin-left: 2rem;left: 0;position: absolute;"></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="sejarah_kemaskini" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 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" id="exampleModalLabel">
               Sejarah Kemaskini Permohonan <br>
               <small>
               <i>ID Permohonan: <span id="m_id_permohonan"></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="datatable">
               <table class="table table-striped">
                  <thead>
                     <tr>
                        <th width="10%">Bil</th>
                        <th width="50%">Maklumat Kemaskini</th>
                        <th>Tarikh Kemaskini</th>
                        <th>Dikemaskini Oleh</th>
                     </tr>
                  </thead>
                  <tbody id="m_sejarah_kemaskini"></tbody>
               </table>
            </div>
         </div>
         <div class="modal-footer" id="b_sejarah_kemaskini">
         </div>
      </div>
   </div>
</div>
{{-- End Modal --}}
@endif
@endrole
@endsection
@section('js')
@role(['super_admin','principal_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("2020-01-01");
   var end = moment();
   
   $(document).ready(function(response) {
       $('#permohonan_table').dataTable({
               scrollX: true,
               processing: true,
               paging: true,
               pageLength: 15,
               lengthMenu: [[15, 30, 50, 100], [15, 30, 50, 100]],
               serverSide: true,
               ajax: '{{ url('admin/permohonan/ceria/list?status=') }}{{ $status }}',
               searching: false,
               language: {
               emptyTable: "Tiada Data"
           },
           columns: [
               { data: 'id_permohonan', name: 'id_permohonan' },
               { data: 'tarikh_permohonan', name: 'tarikh_permohonan' },
               { data: 'nama_pengurusan', name: 'nama_pengurusan' },
               { data: 'pbt', name: 'pbt' },
               { data: 'dun', name: 'dun' },
               { data: 'status', name: 'status', orderable: false },
               { 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();
       var filter_dun = $("#filter_dun").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('admin/permohonan/ceria/list') }}',
               data:{status, from_date, to_date, q, filter_type, filter_dun}
           },
           searching: false,
           language: {
               emptyTable: "Tiada Data"
           },
           columns: [
               { data: 'id_permohonan', name: 'id_permohonan' },
               { data: 'tarikh_permohonan', name: 'tarikh_permohonan' },
               { data: 'nama_pengurusan', name: 'nama_pengurusan' },
               { data: 'pbt', name: 'pbt' },
               { data: 'dun', name: 'dun' },
               { data: 'status', name: 'status', orderable: false },
               { 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: 2020,
               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();
       var filter_dun = $('#filter_dun').val();
   
       window.open('{{ url('admin/permohonan/ceria/export?_token=') }}{{csrf_token()}}&status='+status+'&from_date='+from_date+'&to_date='+to_date+'&q='+q+'&filter_type='+filter_type+'&filter_dun='+filter_dun, '_blank');
   }
   
   function showDetail(id) {
       var data = { _token: '{{ csrf_token() }}', id };
   
       $.ajax({
           url: '{{ url('admin/permohonan/ceria/show') }}',
           type: 'POST',
           data: data,
           success: function(response) {
               try {
                   var permohonan_ceria = response.permohonan_ceria,
                       audit = response.audit
                       url = '{{ url('admin/rumusan') }}/ceria/'+id;
                   
                   $status_permohonan = "";
                   $('#m_alasan2').hide();
                   $('#m_alasan').val(permohonan_ceria.alasan).hide();
   
                   if(permohonan_ceria.status == '0') {
                       $status_permohonan = "Diproses";
                   } else if(permohonan_ceria.status == '1') {
                       $status_permohonan = "Diproses";
                   } else if(permohonan_ceria.status == '2') {
                       $status_permohonan = "Lulus";
                   } else if(permohonan_ceria.status == '3') {
                       $status_permohonan = "Gagal";
                       $('#m_alasan2').show();
                       $('#m_alasan').val(permohonan_ceria.alasan).show();
                   }

                //     if(permohonan.status == '0') {
                //         $('#m_status').val("Diproses") 
                //    } else if(permohonan.status == '1') {
                //         $('#m_status').val("Diproses") 
                //    } else if(permohonan.status == '2') {
                //         $('#m_status').val("Lulus") 
                //    } else if(permohonan.status == '3') {
                //         $('#m_status').val("Gagal") 
                    //    $('#m_alasan2').show();
                    //    $('#m_alasan').val(permohonan.alasan).show();
       
                

                   $('#m_status').val($status_permohonan) 
   
                    $('#m_tarikh_permohonan').html(moment(permohonan_ceria.tarikh_permohonan, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY'));

                    $('#m_nama_pangsapuri').val(permohonan_ceria.nama_pangsapuri);
                    $('#m_nama_pengurusan').val(permohonan_ceria.nama_pengurusan);
                    $('#m_ketegori_rumah').val(permohonan_ceria.ketegori_rumah);
                    $('#m_ketegori_pengurusan_rumah').val(permohonan_ceria.pbt);
                    $('#m_no_utk_dihubungi').val(permohonan_ceria.no_utk_dihubungi);
                    $('#m_no_tel_pejabat').val(permohonan_ceria.no_tel_pejabat);
                    $('#m_no_tel_fax').val(permohonan_ceria.no_tel_fax);
                    $('#m_no_tel').val(permohonan_ceria.no_tel);
                    $('#m_emel').val(permohonan_ceria.emel);
                    $('#m_pbt').val(permohonan_ceria.pbt);
                    $('#m_dun').val(permohonan_ceria.dun);

                //    Maklumat Pangsapuri
                    $('#m_bil_blok').val(permohonan_ceria.bil_blok);
                    $('#m_bil_unit_rumah').val(permohonan_ceria.bil_unit_rumah);
                    $('#m_bil_tingkat_blok').val(permohonan_ceria.bil_tingkat_blok);
                    $('#m_bil_unit_lif').val(permohonan_ceria.bil_unit_lif);
                    $('#m_jenis_kerosakan').val(permohonan_ceria.jenis_kerosakan);
                    $('#m_lain_kerosakan').val(permohonan_ceria.lain_kerosakan);
                    $('#m_anggaran_kos').val(permohonan_ceria.anggaran_kos);

                    if(permohonan_ceria.alamat_1 == null ) {
                        $('#m_alamat').val("Tiada Data");
                    } else {
                        $('#m_alamat').html([
                            permohonan_ceria.alamat_1+', ',
                            permohonan_ceria.alamat_2 ? permohonan_ceria.alamat_2+', ' : '',
                            permohonan_ceria.alamat_3 ? permohonan_ceria.alamat_3+', ' : '',
                            permohonan_ceria.bandar+', ',
                            permohonan_ceria.poskod+', ',
                            permohonan_ceria.daerah+', ',
                            permohonan_ceria.negeri
                        ]);
                    }

                //    Malumat Dokumen
               
                   $('#maklumat_dokumen').html('');
                   
                        html =
                        '<tr>'+
                            '<td>Salinan Borang Permohonan Skim Ceria</td>'+
                            '<td> <a href="'+(permohonan_ceria.salinan_borang)+'" download> Muat Turun </a> </td>'+
                        '</tr>'+
                        '<tr>'+
                            '<td>Laporan Kerosakan Bergambar</td>'+
                           ' <td> <a href="'+(permohonan_ceria.laporan_bergambar)+'" download> Muat Turun </a> </td>'+
                       '</tr>'+
                        '<tr>'+
                            '<td>Pelan Susunatur Kawasan Pemajuan (Jika Ada)</td>'+
                            '<td> <a href="'+(permohonan_ceria.pelan_susunatur)+'" download> Muat Turun </a> </td>'+
                       ' </tr>'+
                        '<tr>'+
                            '<td>Salinan Sijil JMB/MC atau Surat Lantikan</td>'+
                           '<td> <a href="'+(permohonan_ceria.sijil_jmb)+'" download> Muat Turun </a> </td>'+
                        '</tr>'+
                        '<tr>'+
                            '<td>Salinan Perjanjian Jual Beli yang Pertama (Beli dengan Pemaju) yang telah dicop sah oleh COB, PBT</td>'+
                            '<td> <a href="'+(permohonan_ceria.salinan_jual_beli)+'" download> Muat Turun </td>'+
                        '</tr>'+
                        '<tr>'+
                           ' <td>Laporan Pengurusan Kewangan JMB/MC 3 Bulan Terkini</td>'+
                            '<td> <a href="'+(permohonan_ceria.laporan_kewangan)+'" download> Muat Turun </a> </td>'+
                        '</tr>';

                        $('#maklumat_dokumen').append(html);
                         

                    if(permohonan_ceria.ulasan_admin == null) {
                        $('#m_penyelia_admin').val("Tiada Data");
                        $('#m_ulasan_admin').val(" ");
                    } else {

                        var json = permohonan_ceria.ulasan_admin;
                        var obj = JSON.parse(json);
                        $('#m_penyelia_admin').val(obj.penyelia_admin);
                        $('#m_ulasan_admin').val(obj.ulasan_admin);
                    }

                   $('#kemaskini_area').html('<button type="button" onClick="showAudit('+id+')" class="btn btn-primary" id="audit_btn">Sejarah Kemaskini</button>');
   
                   $('.btn-cetak').attr('href', url);
               } catch (error) {
               }
               
               $('.btn-cetak').attr('href', url);
           }, 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',
               });
           }
       });
   
       $('#maklumat_permohonan').modal('show');
       $('#sejarah_kemaskini').modal('hide');
   }
   
   function showAudit(id) {
       $('#maklumat_permohonan').modal('hide');
       $('#m_sejarah_kemaskini').html('');
       $('#m_id_permohonan').html(id);
       $('#b_sejarah_kemaskini').html('<button type="button" onClick="showDetail('+id+');" class="btn btn-secondary">Kembali</button>');
   
       var data = { _token: '{{ csrf_token() }}', id };
   
       $('#maklumat_permohonan').modal('hide');
       $.ajax({
           url: '{{ url('admin/permohonan/blueprint/audit') }}',
           type: 'POST',
           data: data,
           success: function(response) {
               var audit = response.audit;
               if (Array.isArray(audit) && audit.length) {
                   audit.forEach(function(d, i) {
                       var ori_data = JSON.parse(d.ori_data);
                       var new_data = JSON.parse(d.new_data);
   
                       var changes_maklumat = "";
                       for (var key in ori_data.maklumat) {
                           var item = key.replace(/_/g, " ").capitalize();
                           changes_maklumat = changes_maklumat + (changes_maklumat == '' ? '' : "<br/>");
                           if (key == 'pendapatan') {
                               changes_maklumat = changes_maklumat + item + ': RM' + (parseFloat(ori_data.maklumat[key]).toFixed(2) ?? '') + ' → RM' + (parseFloat(new_data.maklumat[key]).toFixed(2) ?? '');
                           } else {
                               changes_maklumat = changes_maklumat + item + ': ' + (ori_data.maklumat[key] ?? '') + ' → ' + (new_data.maklumat[key] ?? '');
                           }
                       }
   
                       var changes_alamat = "";
                       for (var key in ori_data.alamat) {
                           var item = key.replace(/_/g, " ").capitalize();
                           changes_alamat = changes_alamat + (changes_alamat == '' ? '' : "<br/>");
                           changes_alamat = changes_alamat + item + ': ' + (ori_data.alamat[key] ?? '') + ' → ' + (new_data.alamat[key] ?? '');
                       }
   
                       var changes_kemaskini = "";
                       var changes_tambah = "";
                       for (var key in new_data.pasangan) {
                           if (ori_data.pasangan[key]) {
                               changes_kemaskini = changes_kemaskini + (changes_kemaskini == '' ? '<b>Kemaskini Data Pasangan</b><br/>' : "<br/>");
                               if (ori_data.pasangan[key]['ic_pasangan'] != new_data.pasangan[key]['ic_pasangan']) {
                                   changes_kemaskini = changes_kemaskini + 'IC: ' + (ori_data.pasangan[key]['ic_pasangan'] ?? '') + ' → ' + (new_data.pasangan[key]['ic_pasangan']+'<br/>' ?? '');
                               }
                               if (ori_data.pasangan[key]['nama'] != new_data.pasangan[key]['nama']) {
                                   changes_kemaskini = changes_kemaskini + 'Nama: ' + (ori_data.pasangan[key]['nama'] ?? '') + ' → ' + (new_data.pasangan[key]['nama']+'<br/>' ?? '');
                               }
                               if (ori_data.pasangan[key]['email'] != new_data.pasangan[key]['email']) {
                                   changes_kemaskini = changes_kemaskini + 'Email: ' + (ori_data.pasangan[key]['email'] ?? '') + ' → ' + (new_data.pasangan[key]['email']+'<br/>' ?? '');
                               }
                               if (ori_data.pasangan[key]['no_tel_bimbit'] != new_data.pasangan[key]['no_tel_bimbit']) {
                                   changes_kemaskini = changes_kemaskini + 'No. Tel Bimbit: ' + (ori_data.pasangan[key]['no_tel_bimbit'] ?? '') + ' → ' + (new_data.pasangan[key]['no_tel_bimbit']+'<br/>' ?? '');
                               }
                               if (ori_data.pasangan[key]['pendapatan'] != new_data.pasangan[key]['pendapatan']) {
                                   changes_kemaskini = changes_kemaskini + 'Pendapatan: RM' + (parseFloat(ori_data.pasangan[key]['pendapatan']).toFixed(2) ?? '') + ' → ' + ('RM'+parseFloat(new_data.pasangan[key]['pendapatan']).toFixed(2)+'<br/>' ?? '');
                               }
                           } else {
                               changes_tambah = changes_tambah + (changes_tambah == '' ? '<b>Tambah Data Pasangan</b><br/>' : "<br/>");
                               changes_tambah = changes_tambah + 'IC: ' + (new_data.pasangan[key]['ic_pasangan']+'<br/>' ?? '');
                               changes_tambah = changes_tambah + 'Nama: ' + (new_data.pasangan[key]['nama']+'<br/>' ?? '');
                               changes_tambah = changes_tambah + 'Email: ' + (new_data.pasangan[key]['email']+'<br/>' ?? '');
                               changes_tambah = changes_tambah + 'No. Tel Bimbit: ' + (new_data.pasangan[key]['no_tel_bimbit']+'<br/>' ?? '');
                               changes_tambah = changes_tambah + 'Pendapatan: ' + ('RM'+parseFloat(new_data.pasangan[key]['pendapatan']).toFixed(2)+'<br/>' ?? '');
                           }
                       }
   
                       var changes_padam = "";
                       if (new_data.length > 0) {
                           for (var key in ori_data.pasangan) {
                               changes_padam = changes_padam + (changes_padam == '' ? '<b>Padam Data Pasangan</b><br/>' : "<br/>");
                               changes_padam = changes_padam + 'IC: ' + (ori_data.pasangan[key]['ic_pasangan']+'<br/>' ?? '');
                               changes_padam = changes_padam + 'Nama: ' + (ori_data.pasangan[key]['nama']+'<br/>' ?? '');
                               changes_padam = changes_padam + 'Email: ' + (ori_data.pasangan[key]['email']+'<br/>' ?? '');
                               changes_padam = changes_padam + 'No. Tel Bimbit: ' + (ori_data.pasangan[key]['no_tel_bimbit']+'<br/>' ?? '');
                               changes_padam = changes_padam + 'Pendapatan: ' + ('RM'+ori_data.pasangan[key]['pendapatan']+'<br/>' ?? '');
                           }
                       }
   
                       var changes = changes_maklumat+(changes_maklumat?'<br/>':'')+changes_alamat+(changes_alamat?'<br/>':'')+changes_kemaskini+(changes_kemaskini?'<br/>':'')+changes_tambah+(changes_tambah?'<br/>':'')+changes_padam;
   
                       html =
                       '<tr>'+
                           '<td>'+(i+1)+'</td>'+
                           '<td>'+changes+'</td>'+
                           '<td>'+ moment(d.created_at, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY hh:mm A')+'</td>'+
                           '<td>'+d.name+'</td>'+
                       '</tr>';
   
                       $('#m_sejarah_kemaskini').append(html);
                   });
               } else {
                   html =
                   '<tr>'+
                       '<td colspan=4>'+
                           '<input type="text" class="form-control m-input" value="Tiada Data" disabled style="text-align:center;">'+
                       '</td>'
                   '</tr>';
   
                   $('#m_sejarah_kemaskini').append(html);
               }
           },
           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',
               });
           }
       });
   
       $('#sejarah_kemaskini').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