@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', 'tawas')->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', 'tawas')->pluck('display_name')[0] }}
                        <span>
                        </span>
                    </div>
                    </div>
                    <div class="datatable">
                    <div class="col-md-12">
                        <form class="pull-right" id="search_form" style="margin-top: 15px;">
                            <div class="input-group">
                                <!-- @if(Auth::user()->hasRole('super_admin') || $is_permission_own || $is_permission_all)
                                <div class="" style="margin-right:5px">
                                <a href="{{ url('admin/permohonan/sade/add') }}" class="btn btn-info m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill" style="padding:.75rem 1rem">
                                <span>
                                <i class="la la-plus"></i>
                                <span>
                                Permohonan Baru
                                </span>
                                </span>
                                </a>
                                </div>
                                @endif -->
                                @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="mohonID">ID Permohonan</option>
                                <option value="namaAnak">Nama Anak</option>
                                <option value="noMyKid">No. MyKid</option>
                                <option value="b_nama">Nama Bapa</option>
                                <option value="i_nama">Nama Ibu</option>
                                <option value="status_mohon">Status Permohonan</option>
                                {{-- <option value="status_myidentity">Status Rekod</option> --}}
                                <option value="semua" selected="selected">Semua</option>
                                </select>
                                <input type="text" class="form-control" id="q" placeholder="Carian..." style="height:unset;padding:5px 5px;">
                                <button type="button" class="btn btn-default" id="filter"><span class="fa fa-search"></span></button>
                            </div>
                        </form>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped" id="permohonan_table" style="overflow-x: auto !important;width: 100% !important;">
                            <thead>
                                <tr>
                                <th>Id Permohonan</th>
                                <th>Tarikh Mohon</th>
                                <th>Nama Anak</th>
                                <th>No. MyKid</th>
                                <th>Nama Bapa</th>
                                <th>Nama Ibu</th>
                                <th>Status Permohonan</th>
                                {{-- <th>Status Rekod</th>
                                <th>Tarikh Kematian</th> --}}
                                <th width="10%"></th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal --}}
    <div class="modal fade"  id="maklumat_permohonan" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="background-color: rgba(0, 0, 0,.6)">
        <div class="modal-dialog modal-lg" role="document" style="max-width: 1000px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">
                    {{ $ipr->display_name }}
                    </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">
                    &times;
                    </span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="watermark">
                        <img src="{{ asset('img/logo.png') }}" class="watermark-logo">
                        <div class="watermark-text">{{ Auth::user()->username }}</div>
                    </div>
                    <div class="tab-pane " id="" role="tabpanel">
                        <div class="m-form__section m-form__section--middle">
                            <div class="col-md-12" style="background-color: #f4516c; color:white; padding:5px; text-align: center">
                                <h5>Maklumat Ahli</h5>
                            </div>
                            <br>
                            <span style="color: #f4516c; font-size: 16px; font-weight: 500;">
                            Maklumat Ahli
                            </span>
                            <div class="form-group row">
                                <div class="col-md-12">
                                    <label class="form-control-label">
                                    Nama:
                                    </label>
                                    <input type="text" class="form-control" id="namaAnak"  readonly>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label class="form-control-label">
                                    No KP:
                                    </label>
                                    <input type="text" class="form-control" id="noMyKid" readonly>
                                </div>
                                <!-- <div class="col-md-6">
                                    <label class="form-control-label">
                                    Tarikh Lahir:
                                    </label>
                                    <input type="text" class="form-control" id="tarikhLahir" readonly>
                                </div> -->
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label class="form-control-label">
                                    Nama Bapa:
                                    </label>
                                    <input type="text" class="form-control" id="b_nama" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-control-label">
                                    No KP Bapa:
                                    </label>
                                    <input type="text" class="form-control" id="b_kpBaru" readonly>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label class="form-control-label">
                                    Nama Ibu:
                                    </label>
                                    <input type="text" class="form-control" id="i_nama" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-control-label">
                                    No KP Ibu:
                                    </label>
                                    <input type="text" class="form-control" id="i_kpBaru" readonly>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label class="form-control-label">
                                    Status Permohonan:
                                    </label>
                                    <input type="text" class="form-control" id="status_mohon" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-control-label">
                                    Dun:
                                    </label>
                                    <input type="text" class="form-control" id="NAMA_DUN" readonly>
                                </div>
                            </div>
                            <div class="form-group row">
                                <!-- If Status = Layak -->
                                <div class="col-md-6 sebab">
                                    <div>
                                    <label class="form-control-label">
                                    Sebab:
                                    </label>
                                    <textarea type="text" class="form-control" rows="3" id="sebab" readonly></textarea>
                                    </div>
                                </div>
                                <div class="col-md-6 status_kad">
                                    <div>
                                    <label class="form-control-label">
                                    Status Kad:
                                    </label>
                                    <input type="text" class="form-control" id="status_kad" readonly>
                                    </div>
                                </div>
                                <!-- If Status = Tidak Layak -->
                                <!-- endif -->
                            </div>
                            <br>
                            <span style="color: #f4516c; font-size: 16px; font-weight: 500;">
                            Maklumat Untuk Dihubungi
                            </span>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label class="form-control-label">
                                    Alamat:
                                    </label>
                                    <textarea type="text" class="form-control" rows="3" id="alamat" readonly></textarea>
                                </div>
                                <div class="col-md-6 no_akaun_air">
                                    <label class="form-control-label">
                                    No Telefon:
                                    </label>
                                    <input type="text" class="form-control" id="t_telMobile" readonly>
                                </div>
                            </div>
                            <!-- if status_mohon == 'Layak' -->
                            <br>
                            <div class="kws_prog_lathihan">
                                <span style="color: #f4516c; font-size: 16px; font-weight: 500;">
                                Kawasan Program Pilihan
                                </span>
                                <div class="form-group row">
                                    <div class="col-md-6">
                                    <label class="form-control-label">
                                    Dun:
                                    </label>
                                    <input type="text" class="form-control" id="NAMA_DUN_2" readonly>
                                    </div>
                                    <div class="col-md-6 no_akaun_air">
                                    <label class="form-control-label">
                                    Alamat Dun:
                                    </label>
                                    <textarea type="text" class="form-control" rows="3" id="ALAMATPKD" readonly></textarea>
                                    </div>
                                </div>
                            </div>
                            <!-- endif -->
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="d-flex mr-auto">
                            <div id="myidentity-area"></div>
                        </div>
                <a class="btn btn-primary btn-cetak" target="_blank">
                    Cetak
                    </a>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    Kembali
                    </button>
                </div>
            </div>
        </div>
    </div>
    {{-- End Modal --}}

    {{-- Myidentity Modal --}}
    <div class="modal fade" id="status_myidentity" tabindex="-1" role="dialog" aria-labelledby="statusMyidentity" aria-hidden="true" style="background-color: rgba(0, 0, 0,.6)">
        <div class="modal-dialog modal-lg" role="document" style="max-width: 1000px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">
                        Status Rekod <br>
                        <small>
                            <i>Tarikh Kemaskini: <span id="my_updated_at"></span></i>
                        </small>
                    </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">
                            &times;
                        </span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="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 Myidentity 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("2008-01-01");
    var end = moment();

    $(document).ready(function() {
        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/tawas/list?status=') }}{{ $status }}',
                    data:{from_date:from_date, to_date:to_date}
                },
                searching: false,
                language: {
                emptyTable: "Tiada Data"
            },
            columns: [
                { data: 'mohonID', name: 'mohon.mohonID' },
                { data: 'tarikhmohon', name: 'mohon.tarikhmohon' },
                { data: 'namaAnak', name: 'mohon.namaAnak' },
                { data: 'noMyKid', name: 'mohon.noMyKid' },
                { data: 'b_nama', name: 'mohon.b_nama' },
                { data: 'i_nama', name: 'mohon.i_nama' },
                { data: 'status_mohon', name: 'mohon.status_mohon' },
                // { 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/tawas/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: 'mohonID', name: 'mohon.mohonID' },
                { data: 'tarikhmohon', name: 'mohon.tarikhmohon' },
                { data: 'namaAnak', name: 'mohon.namaAnak' },
                { data: 'noMyKid', name: 'mohon.noMyKid' },
                { data: 'b_nama', name: 'mohon.b_nama' },
                { data: 'i_nama', name: 'mohon.i_nama' },
                { data: 'status_mohon', name: 'mohon.status_mohon' },
                // { 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/tawas/export?_token=') }}{{csrf_token()}}&status='+status+'&from_date='+from_date+'&to_date='+to_date+'&q='+q+'&filter_type='+filter_type, '_blank');
    }

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

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

               // Tarikh Permohonan
                $('#m_tarikh_permohonan').html(moment(response.permohonan.namaAnak, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY'));

               // Maklumat Ahli
                $('#namaAnak').val(response.permohonan.namaAnak);
                $('#noMyKid').val(response.permohonan.noMyKid);
                $('#b_nama').val(response.permohonan.b_nama);
                $('#b_kpBaru').val(response.permohonan.b_kpBaru);
                $('#i_nama').val(response.permohonan.i_nama);
                $('#i_kpBaru').val(response.permohonan.i_kpBaru);
                $('#status_mohon').val(response.permohonan.status_permohonan);
                $('#NAMA_DUN').val(response.permohonan.NAMA_DUN);
                $('#NAMA_DUN_2').val(response.permohonan.NAMA_DUN);
                $('#sebab').val(response.permohonan.sbb_gagal);
                $('#alamat').html([
                    response.permohonan.t_alamat1+', ',
                    response.permohonan.t_alamat2 ? response.permohonan.t_alamat2+', ' : '',
                    response.permohonan.t_poskod+', ',
                    response.permohonan.t_bandar+', ',
                    response.permohonan.t_negeri
                ]);
                $('#t_telMobile').val(response.permohonan.t_telMobile);
                $('#ALAMATPKD').html([
                    response.permohonan.PKD + "\n" + ',',
                    response.permohonan.ALAMATPKD
                ]);

                if(response.permohonan.status_permohonan == 'Lulus') {
                    $('.status_kad').show();
                    $('.kws_prog_lathihan').show();
                    $('.sebab').hide();
                } else {
                    $('.status_kad').hide();
                    $('.kws_prog_lathihan').hide();
                    $('.sebab').show();
                }

                $('#status_kad').val(response.permohonan.Kad);

               // Cetak
               $('.btn-cetak').attr('href', url);
               $('#myidentity-area').html(`<button type="button" onClick="showMyidentity('${response.permohonan.noMyKid}', '${mykid}')" class="btn btn-warning" id="myidentity_btn">Status Rekod</button>`);

           },
            error: function(response) {
                $.alert({
                    type: 'red',
                    title: 'Whoops, looks like something went wrong!',
                    content: 'Please check your console.error().',
                    typeAnimated: true,
                    icon: 'fa fa-warning',
                    columnClass: 'col-md-6 col-md-offset-3',
                });
            }
        });

        $('#maklumat_permohonan').modal('show');
    }

   function showMyidentity(x, 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