@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(['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', 'siswa')->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', 'siswa')->pluck('display_name')[0] }}
                            {{ ($status == 2) ? '(Lulus)' : ($status == 3 ? '(Gagal)' : '') }}
                    </div>
                </div>
                <div class="datatable">
                    <div class="col-md-12">
                        <form class="pull-right" id="search_form" style="margin-top: 15px;">
                            <div class="input-group">
                                @if(Auth::user()->hasRole('super_admin') || Auth::user()->hasRole('principal_admin') ||
                                $is_permission_export)
                                <div class="" style="margin-right:5px">
                                    <a href="#" id="export_file" onclick="exportFile();return false;"
                                        class="btn btn-info m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill"
                                        style="padding:.75rem 1rem">
                                        <span>
                                            <i class="la la-file-excel-o"></i>
                                            <span>
                                                Export
                                            </span>
                                        </span>
                                    </a>
                                </div>
                                @endif
                                <div id="permohonan_range"
                                    style="background: #fff; cursor: pointer; padding: 10px 10px; border: 1px solid #ebedf2;">
                                    <i class="fa fa-calendar"></i>&nbsp;<span></span> <i class="fa fa-caret-down"></i>
                                </div>
                                <input type="hidden" id="status" value="{{$status}}" />
                                <input type="hidden" id="from_date" value="" />
                                <input type="hidden" id="to_date" value="" />
                                <select class="form-control" id="filter_type" style="height:unset;padding:5px 5px;">
                                    <option value="id">No. Identiti</option>
                                    <option value="nama">Nama</option>
                                    <option value="dun">Dun</option>
                                    <option value="program">Program</option>
                                    <option value="subprogram">Sub Program</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>Nama</th>
                                <th>No. Identiti</th>
                                <th>Program</th>
                                <th>Sub Program</th>
                                <th>Dun</th>
                                <th>Tarikh Permohonan</th>
                                <th>Status</th>
                                {{-- <th>Status Rekod</th>
                                <th>Tarikh Kematian</th> --}}
                                <th width="10%"></th>
                            </tr>
                        </thead>
                    </table>
                    {{-- <table class="table table-striped" id="permohonan_table" style="overflow-x: auto !important;width: 100% !important;">
                        <thead>
                            <tr>
                                <th>Id Permohonan</th>
                                <th>Nama</th>
                                <th>No. Identiti</th>
                                <th>Program</th>
                                <th>Sub Program</th>
                                <th>Dun</th>
                                <th>Tarikh Permohonan</th>
                                <th>Status</th>
                                <th>Status Rekod</th>
                                <th>Tarikh Kematian</th>
                                <th width="10%"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($applications as $application)
                                @php 
                                    $myid = \App\MyIdentity::where('ic_pemohon', $application['kad_pengenalan'])->first(['status_rekod', 'tarikh_mati']);
                                @endphp
                                <tr>
                                    <td>{{ $application['id'] }}</td>
                                    <td>{{ $application['nama'] }}</td>
                                    <td>{{ $application['kad_pengenalan'] }}</td>
                                    <td>{{ $application['program'] }}</td>
                                    <td>{{ $application['subprogram'] }}</td>
                                    <td>{{ $application['dun'] }}</td>
                                    <td>{{ $application['tarikh_hantar'] }}</td>
                                    <td>{{ $application['status'] }}</td>
                                    <td>
                                        @php
                                            if(!empty($myid['status_rekod'])){
                                                echo $myid_status->where('code', $myid['status_rekod'])->pluck('name')[0];
                                            }
                                            else{
                                                echo 'Tiada Rekod';
                                            }
                                        @endphp
                                    </td>
                                    <td>
                                        @php
                                            if(!empty($myid['tarikh_mati'])){
                                                echo \Carbon\Carbon::parse($myid['tarikh_mati'])->format('d/m/Y');
                                            }else{
                                                echo '-';
                                            }
                                        @endphp 
                                    </td>
                                    <td>
                                        <div style="white-space:nowrap">
                                            <a href="javascript:;" class="btn btn-success m-btn btn-sm m-btn m-btn--icon m-btn--pill" onclick="showDetail('{{ $application['id'] }}')"><span><i class="fa fa-info-circle"></i><span>Status MyIdentity</span></span></a>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="clearfix">
                        <div class="float-right">
                            {{ $applications->links() }}
                        </div>
                    </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" 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">
                <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--first">
                    <h5 style="color: #f4516c">
                        Status Permohonan:
                    </h5>
                    <br>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label class="form-control-label" id="m_status_mohon"></label>
                        </div>
                    </div>
                </div>
                <hr class="modal-hr">
                <div class="m-form__section m-form__section--middle">
                    <h5 style="color: #f4516c">
                        Maklumat Pemohon:
                    </h5>
                    <br>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label for="m_nama" class="form-control-label">
                                Nama:
                            </label>
                            <input type="text" class="form-control" id="m_nama" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_ic" class="form-control-label">
                                No. Identiti:
                            </label>
                            <input type="text" class="form-control" id="m_ic" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_emel" class="form-control-label">
                                E-mel:
                            </label>
                            <input type="text" class="form-control" id="m_emel" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_jantina" class="form-control-label">
                                Jantina:
                            </label>
                            <input type="text" class="form-control" id="m_jantina" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_emel" class="form-control-label">
                                No. Telefon Bimbit:
                            </label>
                            <input type="text" class="form-control" id="m_tel_bimbit" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_tel_rumah" class="form-control-label">
                                No. Telefon Rumah:
                            </label>
                            <input type="text" class="form-control" id="m_tel_rumah" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_umur" class="form-control-label">
                                Umur:
                            </label>
                            <input type="text" class="form-control" id="m_umur" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_agama" class="form-control-label">
                                Agama:
                            </label>
                            <input type="text" class="form-control" id="m_agama" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_program" class="form-control-label">
                                Program:
                            </label>
                            <input type="text" class="form-control" id="m_program" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_sub_program" class="form-control-label">
                                Sub Program:
                            </label>
                            <input type="text" class="form-control" id="m_sub_program" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_dun" class="form-control-label">
                                Dun:
                            </label>
                            <input type="text" class="form-control" id="m_dun" readonly>
                        </div>
                    </div>
                </div>
                <hr class="modal-hr">
                <div class="m-form__section m-form__section--middle">
                    <h5 style="color: #f4516c">
                        Maklumat Tempat Tinggal:
                    </h5>
                    <br>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label for="m_alamat_1" class="form-control-label">
                                Alamat Baris 1
                            </label>
                            <input type="text" class="form-control" id="m_alamat_1" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_alamat_2" class="form-control-label">
                                Alamat Baris 2
                            </label>
                            <input type="text" class="form-control" id="m_alamat_2" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_alamat_3" class="form-control-label">
                                Alamat Baris 3
                            </label>
                            <input type="text" class="form-control" id="m_alamat_3" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_bandar" class="form-control-label">
                                Bandar
                            </label>
                            <input type="text" class="form-control" id="m_bandar" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_daerah" class="form-control-label">
                                Daerah
                            </label>
                            <input type="text" class="form-control" id="m_daerah" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_poskod" class="form-control-label">
                                Poskod
                            </label>
                            <input type="text" class="form-control" id="m_poskod" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_negeri" class="form-control-label">
                                Negeri
                            </label>
                            <input type="text" class="form-control" id="m_negeri" readonly>
                        </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
                </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(['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("2019-01-01");
    var end = moment();

    $(document).ready(function() {
        $('.oleh_admin, maklumat_pasangan, .maklumat_jmb').hide();

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

        $('#permohonan_table').dataTable({
            scrollX: true,
            processing: true,
            paging: true,
            pageLength: 15,
            lengthMenu: [[15, 30, 50, 100], [15, 30, 50, 100]],
            serverSide: true,
            ajax: {
                url:'{{ url('admin/permohonan/siswa/list?status=') }}{{ $status }}',
                data:{from_date:from_date, to_date:to_date}
            },
            searching: false,
            language: {
                emptyTable: "Tiada Data"
            },
            columns: [
                { data: 'id', name: 'id' },
                { data: 'nama', name: 'permohonan_siswa.nama' },
                { data: 'ic_pemohon', name: 'permohonan_siswa.ic_pemohon' },
                { data: 'program', name: 'permohonan_siswa.program' },
                { data: 'subprogram', name: 'permohonan_siswa.subprogram' },
                { data: 'dun', name: 'permohonan_siswa.dun' },
                { data: 'tarikh_hantar', name: 'permohonan_siswa.tarikh_hantar' },
                { data: 'status', name: 'permohonan_siswa.status' },
                // { 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({
            scrollX: true,
            processing: true,
            paging: true,
            pageLength: 15,
            lengthMenu: [[15, 30, 50, 100], [15, 30, 50, 100]],
            serverSide: true,
            ajax: {
                url:'{{ url('admin/permohonan/siswa/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: 'id', name: 'id' },
                { data: 'nama', name: 'permohonan_siswa.nama' },
                { data: 'ic_pemohon', name: 'permohonan_siswa.ic_pemohon' },
                { data: 'program', name: 'permohonan_siswa.program' },
                { data: 'subprogram', name: 'permohonan_siswa.subprogram' },
                { data: 'dun', name: 'permohonan_siswa.dun' },
                { data: 'tarikh_hantar', name: 'permohonan_siswa.tarikh_hantar' },
                { data: 'status', name: 'permohonan_siswa.status' },
                // { 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/siswa/export?_token=') }}{{csrf_token()}}&status='+status+'&from_date='+from_date+'&to_date='+to_date+'&q='+q+'&filter_type='+filter_type, '_blank');
    }

    function showDetail(x) {
        $('#sejarah_kemaskini').modal('hide');
        var data = {
            _token: '{{ csrf_token() }}',
            id: x
        };

        $.ajax({
            url: '{{ url('admin/permohonan/siswa/show') }}',
            type: 'POST',
            data: data,
            success: function(response) {
                let permohonan_siswa = response.permohonan;
                let url = '{{ url('admin/rumusan') }}/siswa/'+x

                // Tarikh Permohonan
                $('#m_tarikh_permohonan').html(moment(permohonan_siswa.tarikh_hantar, 'DD-MM-YYYY').format('DD/MM/YYYY'));

                // Status Permohonan
                $('#m_status_mohon').html(permohonan_siswa.status == 2 ? 'Lulus' : (permohonan_siswa.status == 3 ? 'Gagal' : 'Dalam Proses'));
            
                // Maklumat Pemohon
                $('#m_nama').val(permohonan_siswa.nama);
                $('#m_ic').val(permohonan_siswa.ic_pemohon);
                $('#m_emel').val(permohonan_siswa.email);
                $('#m_jantina').val(permohonan_siswa.jantina);
                $('#m_tel_bimbit').val(permohonan_siswa.tel_bimbit);
                $('#m_tel_rumah').val(permohonan_siswa.tel_rumah);
                $('#m_umur').val(permohonan_siswa.umur);
                $('#m_agama').val(permohonan_siswa.agama);
                $('#m_program').val(permohonan_siswa.program);
                $('#m_sub_program').val(permohonan_siswa.subprogram);
                $('#m_dun').val(permohonan_siswa.dun);

                // Maklumat Pemohon
                $('#m_alamat_1').val(permohonan_siswa.alamat1);
                $('#m_alamat_2').val(permohonan_siswa.alamat2);
                $('#m_alamat_3').val(permohonan_siswa.alamat3);
                $('#m_bandar').val(permohonan_siswa.bandar);
                $('#m_daerah').val(permohonan_siswa.daerah);
                $('#m_poskod').val(permohonan_siswa.poskod);
                $('#m_negeri').val(permohonan_siswa.negeri);

                // Cetak
                $('.btn-cetak').attr('href', url);
                $('#myidentity-area').html(`<button type="button" onClick="showMyidentity('${permohonan_siswa.ic_pemohon}', '${x}')" 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 showAudit(x) {
        $('#maklumat_permohonan').modal('hide');
        $('#m_sejarah_kemaskini').html('');
        $('#m_id_permohonan').html(x);
        $('#b_sejarah_kemaskini').html('<button type="button" onClick="showDetail('+x+');" class="btn btn-secondary">Kembali</button>');

        var data = {
            _token: '{{ csrf_token() }}',
            id: x
        };

        $('#maklumat_permohonan').modal('hide');
        $.ajax({
            url: '{{ url('admin/permohonan/siswa/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.sewa) {
                            var item = key.replace(/_/g, " ").capitalize();
                            changes_maklumat = changes_maklumat + (changes_maklumat == '' ? '' : "<br/>");
                            if (key == 'harga_rumah') {
                                changes_maklumat = changes_maklumat + item + ': RM' + (ori_data.sewa[key] ?? '') + ' → ' + (new_data.sewa[key] ?? '');
                            } else if (key == 'tempoh_penyewaan'){
                                changes_maklumat = changes_maklumat + item + ': ' + (ori_data.sewa[key] ?? '') + ' → ' + (new_data.sewa[key] ?? '');
                            }else {
                                changes_maklumat = changes_maklumat + item + ': ' + (ori_data.sewa[key] ?? '') + ' → ' + (new_data.sewa[key] ?? '');
                            }
                        }

                        var changes_profil = "";
                        for (var key in ori_data.maklumat) {
                            var item = key.replace(/_/g, " ").capitalize();
                            changes_profil = changes_profil + (changes_profil == '' ? '' : "<br/>");
                            changes_profil = changes_profil + item + ': ' + (ori_data.maklumat[key] ?? '') + ' → ' + (new_data.maklumat[key] ?? '');
                        }


                        var changes = changes_maklumat+(changes_maklumat?'<br/>':'')+changes_profil+(changes_profil?'<br/>':'');

                        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);
        }
    });

    function showMyidentity(x, id){ 
        $('#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('${id}');">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