@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', 'blueprint')->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', 'blueprint')->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') || Auth::user()->hasRole('principal_admin') || $is_permission_export)
                                            @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="from_date" value="" />
                                            <input type="hidden" id="to_date" value="" />

                                            <!-- <select class="form-control" id="filter_dun" style="height:unset;padding:5px 5px;width:50px;">
                                                <option value='' selected='selected'>Semua Dun</option>
                                                @php 
                                                foreach($dun 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">Nama Pemohon</option>
                                                <option value="ic">No. Identiti</option>
                                                <option value="status">Status</option>
                                                <option value="dun">Dun</option>
                                                <option value="daerah">Daerah</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>
                                <table class="table table-striped" id="permohonan_table"
                                    style="overflow-x: auto !important;width: 100% !important;">
                                    <thead>
                                        <tr>
                                            <th>Id Permohonan</th>
                                            <th>Tarikh Permohonan</th>
                                            <th>Nama Pemohon</th>
                                            <th>No. Identiti</th>
                                            <th>DUN</th>
                                            <th>Daerah</th>
                                            <th>Status DUN</th>
                                            <th>Status Daerah</th>
                                            <th>Status</th>
                                            <th>Status Rekod</th>
                                            <th>Tarikh Kematian</th>
                                            <th width="10%"></th>
                                        </tr>
                                    </thead>
                                </table>
                            </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: {{ date('d/m/Y') }}</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">
                                <div class="form-group m-form__group row">
                                    <label class="col-lg col-form-label">
                                        Status DUN:
                                    </label>
                                    <div class="col-lg-3">
                                        <input type="text" class="form-control m-input" id="statusDun" readonly>
                                    </div>
                                    <label class="col-lg col-form-label">
                                        Status Daerah:
                                    </label>
                                    <div class="col-lg-3">
                                        <input type="text" class="form-control m-input" id="statusDaerah" readonly>
                                    </div>
                                    <label class="col-lg col-form-label">
                                        Status Agensi:
                                    </label>
                                    <div class="col-lg-3">
                                        <input type="text" class="form-control m-input" id="statusAgensi" readonly>
                                    </div>
                                </div>
                                <div class="m-form__heading">
                                    <h5 style="color: #f4516c">
                                        Maklumat Pemohon:
                                    </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_name" readonly>
                                    </div>
                                    <label class="col-lg-2 col-form-label">
                                        Jenis Rumah:
                                    </label>
                                    <div class="input-group col-lg-4">
                                        <input type="text" class="form-control m-input" id="m_jenis_rumah" readonly>
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <label class="col-lg-2 col-form-label">
                                        No. Identiti:
                                    </label>
                                    <div class="input-group m-input-group col-lg-4">
                                        <input type="text" class="form-control m-input" id="m_ic" readonly>
                                    </div>
                                    <label class="col-lg-2 col-form-label">
                                        Status Pemilikan Kediaman:
                                    </label>
                                    <div class="input-group m-input-group col-lg-4">
                                        <input type="text" class="form-control m-input" id="m_status_pemilikan" 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="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">
                                        E-mel
                                    </label>
                                    <div class="col-lg-4">
                                        <input type="text" class="form-control m-input" id="m_emel" readonly>
                                    </div>
                                    <label class="col-lg-2 col-form-label">
                                        Pendapatan Bulanan:
                                    </label>
                                    <div class="input-group m-input-group col-lg-4">
                                        <span class="input-group-addon">
                                            RM
                                        </span>
                                        <input type="text" class="form-control m-input" id="m_pendapatan_bulanan"
                                            readonly>
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <label class="col-lg-2 col-form-label">
                                        Tarikh Lahir:
                                    </label>
                                    <div class="col-lg-4">
                                        <input type="text" class="form-control m-input" id="m_tarikh_lahir" readonly>
                                    </div>
                                    <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="m_tel_bimbit" readonly>
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <label class="col-lg-2 col-form-label">
                                        Tempat Lahir:
                                    </label>
                                    <div class="col-lg-4">
                                        <input type="text" class="form-control m-input" id="m_tempat_lahir" readonly>
                                    </div>
                                    <label class="col-lg-2 col-form-label">
                                        No. Telefon Rumah:
                                    </label>
                                    <div class="col-lg-4">
                                        <input type="text" class="form-control m-input" id="m_tel_rumah" readonly>
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <label class="col-lg-2 col-form-label">
                                        Tahap Kesihatan:
                                    </label>
                                    <div class="col-lg-4">
                                        <input type="text" class="form-control m-input" id="m_tahap_kesihatan" readonly>
                                    </div>
                                    <label class="col-lg-2 col-form-label">
                                        Tempoh Mastautin(Tahun):
                                    </label>
                                    <div class="input-group m-input-group col-lg-4">
                                        <input type="text" class="form-control " id="m_tempoh_mastautin" readonly>
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <label class="col-lg-2 col-form-label">
                                        Jenis Pekerjaan:
                                    </label>
                                    <div class="col-lg-4">
                                        <input type="text" class="form-control " id="m_jenis_pekerjaan" readonly>
                                    </div>
                                </div>
                            </div>
                            <hr class="modal-hr">


                            <!--  Maklumat Tempat Tinggal: -->
                            <div class="m-form__section m-form__section--middle" id="m_pasangan">
                                <h5 style="color: #f4516c">
                                    Maklumat Pasangan:
                                </h5>
                                <br>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-12">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>No. Kad Pengenalan</th>
                                                    <th>Nama</th>
                                                    <th>Jenis Pekerjaan</th>
                                                    <th>Tahap Kesihatan</th>
                                                    <th>No Telefon</th>
                                                    <th>Pendapatan</th>
                                                </tr>
                                            </thead>
                                            <tbody id="m_pasangan_input"></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <hr class="modal-hr ">


                            <!--  Maklumat Tempat Tinggal: -->
                            <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="recipient-name" class="form-control-label">
                                            Alamat:
                                        </label>
                                        <textarea type="text" class="form-control" id="m_alamat" readonly></textarea>
                                    </div>

                                    <div class="col-md-6">
                                        <label for="recipient-name" class="form-control-label">
                                            Dun:
                                        </label>
                                        <input type="text" class="form-control" id="m_dun" readonly>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="recipient-name" class="form-control-label">
                                            Daerah:
                                        </label>
                                        <input type="text" class="form-control" id="m_daerah" readonly>
                                    </div>
                                </div>
                            </div>
                            <hr class="modal-hr ">


                            <!--  Jumlah Pendapatan Isi Rumah: -->
                            <div class="m-form__section m-form__section--middle">
                                <h5 style="color: #f4516c">
                                    Jumlah Pendapatan Isi Rumah:
                                </h5>
                                <br>
                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label for="recipient-name" class="form-control-label">
                                            Jumlah Pendapatan Isi Rumah:
                                        </label>
                                        <input type="text" class="form-control" id="m_jumlah_pendapatan_isi_rumah"
                                            readonly>
                                    </div>
                                </div>
                            </div>
                            <hr class="modal-hr ">

                            <!--  Maklumat Bantuan Peralatan/Mesin (jika berkaitan sahaja): -->
                            <div class="m-form__section m-form__section--middle">
                                <h5 style="color: #f4516c">
                                    Maklumat Bantuan Peralatan/Mesin (jika berkaitan sahaja):
                                </h5>
                                <br>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-12">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>Nama bantuan peralatan/mesin sedia ada yang pernah diterima</th>
                                                    <th>Nama Jabatan/Agensi pemberi bantuan</th>
                                                    <th>Tarikh terima bantuan</th>
                                                    <th>Keadaan peralatan/mesin</th>
                                                    <th>Tahap penggunaan peralatan/mesin</th>
                                                </tr>
                                            </thead>
                                            <tbody id="m_maklumat_bantuan_input"></tbody>
                                        </table>
                                    </div>

                                </div>
                            </div>
                            <hr class="modal-hr ">


                            <!--  Maklumat Bantuan Peralatan / Mesin Dipohon: -->
                            <div class="m-form__section m-form__section--middle">
                                <h5 style="color: #f4516c">
                                    Maklumat Bantuan Peralatan / Mesin Dipohon
                                </h5>
                                <br>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-12">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>Nama peralatan/mesin sedia ada yang pernah dipohon</th>
                                                    <th>Jenama/Jenis Peralatan/mesin</th>
                                                    <th>Saiz/Kapasiti peralatan/mesin</th>
                                                    <th>Anggaran kos peralatan/mesin(termasuk 6%GST)</th>
                                                    <th>Gambar peralatan/mesin yang dipohon</th>
                                                </tr>
                                            </thead>
                                            <tbody id="m_maklumat_dipohon_input"></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <hr class="modal-hr ">


                            <!--  Maklumat Perniagaan / Perusahaan -->
                            <div class="m-form__section m-form__section--middle">
                                <h5 style="color: #f4516c">
                                    Maklumat Perniagaan / Perusahaan
                                </h5>
                                <br>
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                        Alamat:
                                    </label>
                                    <textarea type="text" class="form-control" id="m_alamat_perniagaan" readonly></textarea>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-12">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>Jenis Perniagaan</th>
                                                    <th>Tempoh perniagaan/perusahaan(tahun)</th>
                                                    <th>Tahap Keaktifan perniagaan perusahaan</th>
                                                    <th>Sijil Suruhanjaya Syarikat Malaysia</th>
                                                    <th>Lesen perniagaan daripada pihak berkuasa tempatan</th>
                                                    <th>Surat Kelulusan daripada Jabatan Kesihatan Negeri Selangor</th>
                                                </tr>
                                            </thead>
                                            <tbody id="m_maklumat_perniagaan_input"></tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-12">
                                        <label for="recipient-name" class="form-control-label">
                                            Gambar Perniagaan/Perusahaan:
                                        </label>
                                        <table class="table">
                                            <tbody id="m_maklumat_perniagaan_input_gambar"></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 Penyelia:
                                        </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_daerah" class="form-control" id="m_ulasan_admin" cols="30" rows="10" readonly></textarea>
                                    </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" style="color:grey;">
                                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>

            <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>
                            </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 class="modal-footer" id="b_myidentity"></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) {

                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/blueprint/list?status=') }}{{ $status }}',
                        data: {
                            from_date: from_date,
                            to_date: to_date
                        }
                    },
                    searching: false,
                    language: {
                        emptyTable: "Tiada Data"
                    },
                    columns: [{
                            data: 'id',
                            name: 'id'
                        },
                        {
                            data: 'tarikh_permohonan',
                            name: 'tarikh_permohonan'
                        },
                        {
                            data: 'nama_pemohon',
                            name: 'nama_pemohon'
                        },
                        {
                            data: 'ic_pemohon',
                            name: 'ic_pemohon'
                        },
                        {
                            data: 'nama_adun',
                            name: 'nama_adun'
                        },
                        {
                            data: 'daerah',
                            name: 'daerah'
                        },
                        {
                            data: 'status_dun',
                            name: 'status_dun',
                            orderable: false
                        },
                        {
                            data: 'status_daerah',
                            name: 'status_daerah',
                            orderable: false
                        },
                        {
                            data: 'status',
                            name: 'status',
                            orderable: false
                        },
                        {
                            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();
                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/blueprint/list') }}',
                        data: {
                            status,
                            from_date,
                            to_date,
                            q,
                            filter_type,
                            filter_dun
                        }
                    },
                    searching: false,
                    language: {
                        emptyTable: "Tiada Data"
                    },
                    columns: [{
                            data: 'id',
                            name: 'id'
                        },
                        {
                            data: 'tarikh_permohonan',
                            name: 'tarikh_permohonan'
                        },
                        {
                            data: 'nama_pemohon',
                            name: 'nama_pemohon'
                        },
                        {
                            data: 'ic_pemohon',
                            name: 'ic_pemohon'
                        },
                        {
                            data: 'nama_adun',
                            name: 'nama_adun'
                        },
                        {
                            data: 'daerah',
                            name: 'daerah'
                        },
                        {
                            data: 'status_dun',
                            name: 'status_dun',
                            orderable: false
                        },
                        {
                            data: 'status_daerah',
                            name: 'status_daerah',
                            orderable: false
                        },
                        {
                            data: 'status',
                            name: 'status',
                            orderable: false
                        },
                        {
                            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: 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 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/blueprint/export?_token=') }}{{ csrf_token() }}&from_date=' +
                    from_date + '&to_date=' + to_date + '&q=' + q + '&filter_type=' + filter_type, '_blank');
            }

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

                $.ajax({
                    url: '{{ url('admin/permohonan/blueprint/show') }}',
                    type: 'POST',
                    data: data,
                    success: function(response) {
                        try {
                            var permohonan_blueprint = response.permohonan_blueprint,
                                pasangan = response.pasangan,
                                maklumat_bantuan = response.maklumat_bantuan
                                maklumat_dipohon = response.maklumat_dipohon
                                maklumat_perniagaan = response.maklumat_perniagaan
                                audit = response.audit
                                profile = response.profile
                                url = '{{ url('admin/rumusan') }}?ipr=blueprint&id=' + id;
                                
                            if (permohonan_blueprint.oleh_admin) {
                                $('.oleh_admin').show();
                            } else {
                                $('.oleh_admin').hide();
                            }
                            if (profile.status_perkahwinan == 'Berkahwin') {
                                $('#m_pasangan').show();
                            } else {
                                $('#m_pasangan').hide();
                            }

                            //status permohonan
                            var statusDun = '-'
                            var statusDaerah = '-'
                            var statusAgensi = '-'

                            if (permohonan_blueprint.status_dun == 1 || permohonan_blueprint.status_dun == 0) { //diproses dun
                                statusDun = 'Diproses'
                            } else if (permohonan_blueprint.status_dun == 2) { //berjaya dun
                                statusDun = 'Sokong'
                                statusDaerah = 'Diproses'
                            } else if (permohonan_blueprint.status_dun == 3) { //gagal dun
                                statusDun = 'Tidak Sokong'
                            }

                            if (permohonan_blueprint.status_daerah == 2) { //berjaya Daerah
                                statusDaerah = 'Syor Lulus'
                                statusAgensi = 'Diproses'
                            } else if (permohonan_blueprint.status_daerah == 3) { //gagal Daerah
                                statusDaerah = 'Syor Tolak'
                            }

                            if (permohonan_blueprint.status_admin == 2) { //berjaya agensi
                                statusAgensi = 'Lulus'
                            } else if (permohonan_blueprint.status_admin == 3) { //gagal agensi
                                statusAgensi = 'Tidak Lulus'
                            }

                            $('#statusDun').val(statusDun)
                            $('#statusDaerah').val(statusDaerah)
                            $('#statusAgensi').val(statusAgensi)

                            $status_permohonan = "";
                            $('#m_alasan2').hide();
                            $('#m_alasan').val(permohonan_blueprint.alasan).hide();

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

                            if (permohonan_blueprint.negerikelahiran == '1') {
                                $('#m_negerikelahiran').val("Selangor");
                            } else if (permohonan_blueprint.negerikelahiran == '2') {
                                $('#m_negerikelahiran').val("Perak");
                            } else if (permohonan_blueprint.negerikelahiran == '3') {
                                $('#m_negerikelahiran').val("Melaka");
                            } else if (permohonan_blueprint.negerikelahiran == '4') {
                                $('#m_negerikelahiran').val("Kedah");
                            } else if (permohonan_blueprint.negerikelahiran == '5') {
                                $('#m_negerikelahiran').val("Perlis");
                            } else if (permohonan_blueprint.negerikelahiran == '6') {
                                $('#m_negerikelahiran').val("Negeri Sembilan");
                            } else if (permohonan_blueprint.negerikelahiran == '7') {
                                $('#m_negerikelahiran').val("Sabah");
                            } else if (permohonan_blueprint.negerikelahiran == '8') {
                                $('#m_negerikelahiran').val("Kelantan");
                            } else if (permohonan_blueprint.negerikelahiran == '9') {
                                $('#m_negerikelahiran').val("Pahang");
                            } else if (permohonan_blueprint.negerikelahiran == '10') {
                                $('#m_negerikelahiran').val("Terengganu");
                            } else if (permohonan_blueprint.negerikelahiran == '11') {
                                $('#m_negerikelahiran').val("W.P. Kuala Lumpur");
                            } else if (permohonan_blueprint.negerikelahiran == '12') {
                                $('#m_negerikelahiran').val("Pulau Pinang");
                            } else if (permohonan_blueprint.negerikelahiran == '13') {
                                $('#m_negerikelahiran').val("Sarawak");
                            } else if (permohonan_blueprint.negerikelahiran == '14') {
                                $('#m_negerikelahiran').val("Johor");
                            } else if (permohonan_blueprint.negerikelahiran == '15') {
                                $('#m_negerikelahiran').val("W.P. Labuan");
                            } else if (permohonan_blueprint.negerikelahiran == '16') {
                                $('#m_negerikelahiran').val("W.P. Putrajaya");
                            }

                            // Profile
                            $('#m_tarikh_permohonan').html(moment(permohonan_blueprint.tarikh_permohonan,
                                'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY'));
                            $('#m_name').val(permohonan_blueprint.name);
                            $('#m_ic').val(permohonan_blueprint.ic_pemohon);
                            $('#m_jantina').val(permohonan_blueprint.jantina);
                            $('#m_status_kahwin').val(permohonan_blueprint.status_perkahwinan);
                            $('#m_emel').val(permohonan_blueprint.email);
                            $('#m_pendapatan_bulanan').val(permohonan_blueprint.pendapatan);
                            $('#m_tarikh_lahir').val(permohonan_blueprint.tarikh_lahir);
                            $('#m_tel_bimbit').val(permohonan_blueprint.no_tel);
                            $('#m_tempat_lahir').val(permohonan_blueprint.tempat_lahir);
                            $('#m_tel_rumah').val(permohonan_blueprint.tel_rumah);
                            $('#m_tempoh_mastautin').val(permohonan_blueprint.tempoh_mastautin);
                            $('#m_bangsa').val(permohonan_blueprint.bangsa);

                            $('#m_alamat').html([
                                permohonan_blueprint.alamat_1 + ', ',
                                permohonan_blueprint.alamat_2 ? permohonan_blueprint.alamat_2 + ', ' : '',
                                permohonan_blueprint.alamat_3 ? permohonan_blueprint.alamat_3 + ', ' : '',
                                permohonan_blueprint.poskod + ', ',
                                permohonan_blueprint.negeri
                            ]);



                            // Permohonan
                            $('#m_jenis_rumah').val(permohonan_blueprint.jenis_rumah);
                            $('#m_status_pemilikan').val(permohonan_blueprint.status_pemilikan);
                            $('#m_tahap_kesihatan').val(permohonan_blueprint.tahap_kesihatan);
                            $('#m_jenis_pekerjaan').val(permohonan_blueprint.kerja);
                            $('#m_dun').val(permohonan_blueprint.nama_dun);
                            $('#m_daerah').val(permohonan_blueprint.daerah);
                            $('#m_jumlah_pendapatan_isi_rumah').val(permohonan_blueprint
                                .jumlah_pendapatan_isi_rumah);
                            $('#m_status').val($status_permohonan);
                            $('#m_alasan').val(permohonan_blueprint.alasan);

                            // Pasangan
                            var pendapatan_pasangan = 0;
                            $('#m_pasangan_input').html('');
                            pasangan.forEach(function(d) {
                                html =
                                    '<tr>' +
                                    '<td>' +
                                    '<input type="text" class="form-control m-input" value="' + (d
                                        .ic_pasangan != null ? d.ic_pasangan : '-') + '" disabled>' +
                                    '</td>' +
                                    '<td>' +
                                    '<input type="text" class="form-control m-input" value="' + (d.nama !=
                                        null ? d.nama : '-') + '" disabled>' +
                                    '</td>' +
                                    '<td>' +
                                    '<input type="text" class="form-control m-input" value="' + (d
                                        .jenis_pekerjaan != null ? d.jenis_pekerjaan : '-') +
                                    '" disabled>' +
                                    '</td>' +
                                    '<td>' +
                                    '<input type="text" class="form-control m-input" value="' + (d
                                        .tahap_kesihatan != null ? d.tahap_kesihatan : '-') +
                                    '" disabled>' +
                                    '</td>' +
                                    '<td>' +
                                    '<input type="text" class="form-control m-input" value="' + (d
                                        .no_tel_bimbit != null ? d.no_tel_bimbit : '-') + '" disabled>' +
                                    '</td>' +
                                    '<td>' +
                                    '<div class="input-group m-input-group col-lg-12">' +
                                    '<span class="input-group-addon">' +
                                    'RM' +
                                    '</span>' +
                                    '<input type="number" class="form-control m-input" value="' + (d
                                        .pendapatan != null ? (parseFloat(d.pendapatan).toFixed(2)) : '') +
                                    '" disabled>' +
                                    '</div>' +
                                    '</td>' +
                                    '</tr>';

                                $('#m_pasangan_input').append(html);
                                if (d.pendapatan != null) {
                                    pendapatan_pasangan = parseFloat(pendapatan_pasangan) + parseFloat(d
                                        .pendapatan);
                                }
                            });

                            // Makluman Bantuan
                            $('#m_maklumat_bantuan_input').html('');
                            maklumat_bantuan.forEach(function(d) {
                                html =
                                    '<tr>' +
                                    '<td>' +
                                    '<input type="text" class="form-control m-input" value="' + (d
                                        .nama_bantuan_peralatan) + '" disabled>' +
                                    '</td>' +
                                    '<td>' +
                                    '<input type="text" class="form-control m-input" value="' + (d
                                        .nama_jabatan) + '" disabled>' +
                                    '</td>' +
                                    '<td>' +
                                    '<input type="text" class="form-control m-input" value="' + (d
                                        .tarikh_bantuan) + '" disabled>' +
                                    '</td>' +
                                    '<td>' +
                                    '<input type="text" class="form-control m-input" value="' + (d
                                        .keadaan_peralatan) + '" disabled>' +
                                    '</td>' +
                                    '<td>' +
                                    '<input type="text" class="form-control m-input" value="' + (d
                                        .tahap_pengunaan) + '" disabled>' +
                                    '</td>' +
                                    '</tr>';

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

                            // Maklumat Dipohon
                            $('#m_maklumat_dipohon_input').html('');

                            maklumat_dipohon.forEach(function(d) {

                                if (d.gambar_peralatan == null) {
                                    var text = 'Gambar Peralatan 1: Tiada Data'
                                } else {
                                    var gambar_peralatan = d.gambar_peralatan
                                    var text = 'Gambar Peralatan 1:<a class="ml-3 mt-2" href="' + (
                                        gambar_peralatan) + '" download> Muat Turun </a>'
                                }

                                if (d.gambar_peralatan1 == null) {
                                    var text1 = 'Gambar Peralatan 2: Tiada Data'
                                } else {
                                    var gambar_peralatan1 = d.gambar_peralatan1
                                    var text1 = 'Gambar Peralatan 2:<a class="ml-3 mt-2" href="' + (
                                        gambar_peralatan1) + '" download> Muat Turun </a>'
                                }

                                if (d.gambar_peralatan2 == null) {
                                    var text2 = 'Gambar Peralatan 3: Tiada Data'
                                } else {
                                    var gambar_peralatan2 = d.gambar_peralatan2
                                    var text2 = 'Gambar Peralatan 3:<a class="ml-3 mt-2" href="' + (
                                        gambar_peralatan2) + '" download> Muat Turun </a>'
                                }

                                if (d.gambar_peralatan3 == null) {
                                    var text3 = 'Gambar Peralatan 4: Tiada Data'
                                } else {
                                    var gambar_peralatan3 = d.gambar_peralatan3
                                    var text3 = 'Gambar Peralatan 4:<a class="ml-3 mt-2" href="' + (
                                        gambar_peralatan3) + '" download> Muat Turun </a>'
                                }
                                html =
                                    '<tr>' +
                                    '<td>' +
                                    '<input type="text" class="form-control m-input" value="' + (d
                                        .nama_peralatan) + '" disabled>' +
                                    '</td>' +
                                    '<td>' +
                                    '<input type="text" class="form-control m-input" value="' + (d
                                        .jenis_peralatan) + '" disabled>' +
                                    '</td>' +
                                    '<td>' +
                                    '<input type="text" class="form-control m-input" value="' + (d
                                        .saiz_peralatan) + '" disabled>' +
                                    '</td>' +
                                    '<td>' +
                                    '<div class="input-group m-input-group col-lg-12">' +
                                    '<span class="input-group-addon">' +
                                    'RM' +
                                    '</span>' +
                                    '<input type="text" class="form-control m-input" value="' + (d
                                        .kos_peralatan) + '" disabled>' +
                                    '</div>' +
                                    '</td>' +
                                    '<td>' +
                                    text +
                                    // 'Gambar Peralatan 1:<a class="ml-3 mt-2" href="'+(gambar_peralatan)+'" download> Muat Turun </a>'+
                                    '</td>' +
                                    '</tr>' +
                                    '<tr>' +
                                    '<td>' +
                                    '</td>' +
                                    '<td>' +
                                    '</td>' +
                                    '<td>' +
                                    '</td>' +
                                    '<td>' +
                                    '</td>' +
                                    '<td>' +
                                    text1 +
                                    // 'Gambar Peralatan 2:<a class="ml-3 mt-2" href="'+(gambar_peralatan1)+'" download> Muat Turun </a>'+
                                    '</td>' +
                                    '</tr>' +
                                    '<tr>' +
                                    '<td>' +
                                    '</td>' +
                                    '<td>' +
                                    '</td>' +
                                    '<td>' +
                                    '</td>' +
                                    '<td>' +
                                    '</td>' +
                                    '<td>' +
                                    text2 +
                                    // '<a class="ml-3 mt-2" href="'+(gambar_peralatan2)+'" download> Muat Turun </a>'+
                                    '</td>' +
                                    '</tr>' +
                                    '<tr>' +
                                    '<td>' +
                                    '</td>' +
                                    '<td>' +
                                    '</td>' +
                                    '<td>' +
                                    '</td>' +
                                    '<td>' +
                                    '</td>' +
                                    '<td>' +
                                    text3 +
                                    // '<a class="ml-3 mt-2" href="'+(gambar_peralatan3)+'" download> Muat Turun </a>'+
                                    '</td>' +
                                    '</tr>';
                                $('#m_maklumat_dipohon_input').append(html);
                            });


                            // // Maklumat Perniagaan
                            $('#m_alamat_perniagaan').html([
                                permohonan_blueprint.alamat_perniagaan_1 + ', ',
                                permohonan_blueprint.alamat_perniagaan_2 ? permohonan_blueprint
                                .alamat_perniagaan_2 + ', ' : '',
                                permohonan_blueprint.alamat_perniagaan_3 ? permohonan_blueprint
                                .alamat_perniagaan_3 + ', ' : '',
                                permohonan_blueprint.poskod_perniagaan + ', ',
                                permohonan_blueprint.bandar_perniagaan + ', ',
                                permohonan_blueprint.daerah_perniagaan + ', ',
                                permohonan_blueprint.negeri_perniagaan
                            ]);

                            $('#m_maklumat_perniagaan_input').html('');
                            maklumat_perniagaan.forEach(function(d) {
                                html =
                                    '<tr>' +
                                    '<td>' +
                                    '<input type="text" class="form-control m-input" value="' + (d
                                        .jenis_perniagaan) + '" disabled>' +
                                    '</td>' +
                                    '<td>' +
                                    '<input type="text" class="form-control m-input" value="' + (d
                                        .tempoh_perniagaan) + '" disabled>' +
                                    '</td>' +
                                    '<td>' +
                                    '<input type="text" class="form-control m-input" value="' + (d
                                        .tahap_aktif) + '" disabled>' +
                                    '</td>' +
                                    '<td>' +
                                    '<a class="ml-3 mt-2" href="' + (d.path_ssm) +
                                    '" download> Muat Turun </a>' +
                                    '</td>' +
                                    '<td>' +
                                    '<a class="ml-3 mt-2" href="' + (d.path_lesen) +
                                    '" download> Muat Turun </a>' +
                                    '</td>' +
                                    '<td>' +
                                    '<a class="ml-3 mt-2" href="' + (d.path_surat) +
                                    '" download> Muat Turun </a>' +
                                    '</td>' +
                                    '</tr>';
                                $('#m_maklumat_perniagaan_input').append(html);
                            });

                            $('#m_maklumat_perniagaan_input_gambar').html('');
                            maklumat_perniagaan.forEach(function(d) {
                                html =
                                    '<tr>' +
                                    '<td>' +
                                    '<a> Gambar Perniagaan 1 : </a>' +
                                    '<a class="ml-3 mt-2" href="' + (d.path_gambar_perniagaan_1) +
                                    '" download> Muat Turun </a>' +
                                    '</td>' +
                                    '</tr>' +
                                    '<tr>' +
                                    '<td>' +
                                    '<a> Gambar Perniagaan 2 : </a>' +
                                    '<a class="ml-3 mt-2" href="' + (d.path_gambar_perniagaan_2) +
                                    '" download> Muat Turun </a>' +
                                    '</td>' +
                                    '</tr>' +
                                    '<tr>' +
                                    '<td>' +
                                    '<a> Gambar Perniagaan 3 : </a>' +
                                    '<a class="ml-3 mt-2" href="' + (d.path_gambar_perniagaan_3) +
                                    '" download> Muat Turun </a>' +
                                    '</td>' +
                                    '</tr>' +
                                    '<tr>' +
                                    '<td>' +
                                    '<a> Gambar Perniagaan 4 : </a>' +
                                    '<a class="ml-3 mt-2" href="' + (d.path_gambar_perniagaan_4) +
                                    '" download> Muat Turun </a>' +
                                    '</td>' +
                                    '</tr>';
                                $('#m_maklumat_perniagaan_input_gambar').append(html);
                            });

                            var json = permohonan_blueprint.ulasan_admin;

                            var obj = JSON.parse(json);
                            if (obj != null) {
                                $('#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>');
                            $('#myidentity-area').html(
                                `<button type="button" onClick="showMyidentity('${permohonan_blueprint.ic_pemohon}', '${id}')" class="btn btn-warning" id="myidentity_btn">Status Rekod</button>`
                            );

                            $('.btn-cetak').attr('href', url);
                        } catch (error) {
                            console.log(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 = '';

                                for (var key in ori_data.permohonan) {
                                    var ori_status = '';
                                    var new_status = '';
                                    var item = key.replace(/_/g, " ").capitalize();

                                    if (key == 'status_admin') {
                                        if (ori_data.permohonan[key] == 2) {
                                            ori_status = 'Lulus'
                                        } else if (ori_data.permohonan[key] == 3) {
                                            ori_status = 'Gagal'
                                        } else {
                                            ori_status = 'Tiada'
                                        }

                                        if (new_data.permohonan[key] == 2) {
                                            new_status = 'Lulus'
                                        } else if (new_data.permohonan[key] == 3) {
                                            new_status = 'Gagal'
                                        } else {
                                            new_status = 'Tiada'
                                        }
                                        changes += (item + ' : ' + ori_status + ' → ' + new_status) +
                                            '<br>';
                                    }

                                    if (key == 'ulasan_admin') {
                                        changes += (item + ' : ' + ori_data.permohonan[key] + ' → ' +
                                            new_data.permohonan[key]) + '<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');
            }

            function showMyidentity(x, id) {
                $('#maklumat_permohonan').modal('hide');
                var data = {
                    _token: '{{ csrf_token() }}',
                    id: x.trim()
                };
                $.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