@extends('layouts.app')

@section('title', 'Permohonan '.strtoupper($ipr->name))
@section('permohonan', 'm-menu__item--active')
@section($cluster->name, 'm-menu__item--active')
@section($ipr->name, '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;
    }

    .form-control-span {
        font-size: 14px;
    }
</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 == $ipr->id))
        <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 {{ $ipr->display_name }}</h3>
                            </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($is_permission_own || $is_permission_all)
                                        <div class="" style="margin-right:1px">
                                            <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:1px">
                                            <a href="{{ url('admin/permohonan/sade/import') }}" 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-edit"></i> --}}
                                                    {{-- <span> --}}
                                                        Kemaskini Status
                                                    {{-- </span> --}}
                                                </span>
                                            </a>
                                        </div>
                                        {{-- <div class="" style="margin-right:5px">
                                            <a href="{{ url('admin/permohonan/sade/semaksilang') }}" 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-crosshairs"></i>
                                                    <span>
                                                        Semak Silang
                                                    </span>
                                                </span>
                                            </a>
                                        </div> --}}
                                        <div class="" style="margin-right:1px">
                                            <a href="#" id="export_file" onclick="janaXls()" class="btn btn-info m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill" style="padding:.75rem 1rem">
                                            {{-- <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> --}}
                                                        Jana XLS/PDF
                                                    {{-- </span> --}}
                                                </span>
                                            </a>
                                        </div>
                                        <div class="" style="margin-right:1px">
                                            <a  href="javascript:;" class="btn btn-info m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill" style="padding:.75rem 1rem" onclick="openTagModal()">
                                                <span>
                                                    {{-- <i class="la la-circle-o-notch"></i> --}}
                                                    {{-- <span> --}}
                                                        Jana Tag CSV
                                                    {{-- </span> --}}
                                                </span>
                                            </a>
                                        </div>
                                        <div class="" style="margin-right:1px">
                                            <a  href="javascript:;" class="btn btn-info m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill" style="padding:.75rem 1rem" onclick="openUntagModal()">
                                                <span>
                                                    {{-- <i class="la la-circle-o-notch"></i> --}}
                                                    {{-- <span> --}}
                                                        Jana Untag CSV
                                                    {{-- </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;min-width:80px;">
                                            <option value="id_permohonan">Id Permohonan</option>
                                            <option value="nama">Nama</option>
                                            <option value="ic">No. Identiti</option>
                                            <option value="jenis_meter">Jenis Meter</option>
                                            <option value="no_akaun_air">No. Akaun Air</option>
                                            <option value="status">Status</option>
                                            <option value="alamat">Alamat</option>
                                            <option value="alasan">Alasan</option>
                                            <option value="status_bsh">Tahun BSH</option>
                                            <option value="status_ekasih">Tahun EKASIH</option>
                                            <option value="status_myidentity">Status Rekod</option>
                                            <option value="jantina">Jantina</option>
                                            <option value="status_perkahwinan">Status Perkahwinan</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;min-width:90px;">
                                        <button type="button" class="btn btn-default" id="filter"><span class="fa fa-search"></span></button>
                                    </div>
                                </form>
                            </div> 
                            <br>
                            <br>
                            <br>
                            <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>Pemohon</th>
                                            <th>No. Identiti</th>
                                            <th>Jenis Meter</th>
                                            <th>No. Akaun Air</th>
                                            <th>Tarikh Permohonan</th>
                                            <th>Status</th>
                                            <th>Alasan</th>
                                            <th>Tarikh Pembatalan</th>
                                            <th>Tahun BSH</th>
                                            <th>Tahun EKASIH</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="maklumatPermohonan"
            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">
                            Rumusan Permohonan <br>
                            <small>
                                <i>Tarikh Permohonan: <span id="m_tarikh_permohonan"></span></i>
                            </small>
                        </h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">
                                &times;
                            </span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="watermark">
                            <img src="{{ asset('img/logo.png') }}" class="watermark-logo">
                            <div class="watermark-text">{{ Auth::user()->username }}</div>
                        </div>
                        <div class="m-form__section m-form__section--first">
                            <h5 style="color: #f4516c">Status Permohonan:</h5><br />
                            <div class="form-group row">
                                <div class="col-md-12">
                                    <label class="form-control-label" id="m_status_mohon"></label>
                                </div>
                            </div>
                        </div>
                        <hr class="modal-hr">
                        <div class="m-form__section m-form__section--middle">
                            <h5 style="color: #f4516c">Maklumat Peribadi:</h5><br />
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                        Nama:
                                    </label>
                                    <input type="text" class="form-control" id="m_nama" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                        No. Identiti:
                                    </label>
                                    <input type="text" class="form-control" id="m_ic" readonly>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                        E-mel:
                                    </label>
                                    <input type="text" class="form-control" id="m_emel" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                        No. Telefon Bimbit:
                                    </label>
                                    <input type="text" class="form-control" id="m_tel_bimbit" readonly>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                        Status Perkahwinan:
                                    </label>
                                    <input type="text" class="form-control" id="m_status_perkahwinan" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                        Pendapatan Bulanan:
                                    </label>
                                    <div class="input-group m-input-group">
                                        <span class="input-group-addon">
                                            RM
                                        </span>
                                        <input type="text" class="form-control" id="m_pendapatan" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                        Jenis Meter Air:
                                    </label>
                                    <input type="text" class="form-control" id="m_jenis_meter_air" readonly>
                                </div>
                                <div class="col-md-6 no_akaun_air">
                                    <label for="recipient-name" class="form-control-label">
                                        Nombor Akaun Air:
                                    </label>
                                    <input type="text" class="form-control" id="m_no_akaun_air" readonly>
                                </div>
                            </div>
                        </div>
                        <hr class="modal-hr maklumat_pasangan">
                        <div class="m-form__section m-form__section--middle maklumat_pasangan">
                            <h5 style="color: #f4516c">
                                Maklumat Pasangan:
                            </h5>
                            <br>
                            <div class="form-group row">
                                <div class="col-md-12">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>No. Identiti</th>
                                                <th>Nama</th>
                                                <th>E-mel</th>
                                                <th>No Telefon Bimbit</th>
                                                <th>Pendapatan Bulanan</th>
                                            </tr>
                                        </thead>
                                        <tbody id="m_pasangan_input"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <hr class="modal-hr">
                        <div class="m-form__section m-form__section--middle">
                            <h5 style="color: #f4516c">
                                Maklumat Pendapatan:
                            </h5>
                            <br>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                        Jumlah Pendapatan Pemohon:
                                    </label>
                                    <div class="input-group m-input-group">
                                        <span class="input-group-addon">
                                            RM
                                        </span>
                                        <input type="text" class="form-control" id="m_pendapatan_pemohon" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6 maklumat_pasangan">
                                    <label for="recipient-name" class="form-control-label">
                                        Jumlah Pendapatan Pasangan:
                                    </label>
                                    <div class="input-group m-input-group">
                                        <span class="input-group-addon">
                                            RM
                                        </span>
                                        <input type="text" class="form-control" id="m_pendapatan_pasangan" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                        Jumlah Pendapatan Isi Rumah:
                                    </label>
                                    <div class="input-group m-input-group">
                                        <span class="input-group-addon">
                                            RM
                                        </span>
                                        <input type="text" class="form-control" id="m_pendapatan_isi_rumah" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr class="modal-hr">
                        <div class="m-form__section m-form__section--middle">
                            <h5 style="color: #f4516c">
                                Maklumat Tempat Tinggal:
                            </h5>
                            <br>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                        Status Pemilikan Premis
                                    </label>
                                    <input type="text" class="form-control" id="m_status_pemilikan" readonly>
                                </div>
                                <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>
                        </div>
                        <hr class="modal-hr maklumat_jmb">
                        <div class="m-form__section m-form__section--last maklumat_jmb">
                            <h5 style="color: #f4516c">
                                Maklumat Badan Pengurusan Bersama (JMB) / <br> Perbadanan Pengurusan (MC):
                            </h5>
                            <br>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                        Nama JMB/MC
                                    </label>
                                    <input type="text" class="form-control" id="m_jmb_nama" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                        E-mel JMB/MC
                                    </label>
                                    <input type="text" class="form-control" id="m_jmb_emel" readonly>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6 oleh_admin">
                                    <label for="recipient-name" class="form-control-label">
                                        No. Pendaftaran JMB/MC
                                    </label>
                                    <input type="text" class="form-control" id="m_jmb_no_pendaftaran" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                        No. Telefon JMB/MC
                                    </label>
                                    <input type="text" class="form-control" id="m_jmb_no_tel" readonly>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6 oleh_admin">
                                    <label for="recipient-name" class="form-control-label">
                                        Nama Wakil JMB/MC
                                    </label>
                                    <input type="text" class="form-control" id="m_jmb_nama_wakil" readonly>
                                </div>
                                <div class="col-md-6 oleh_admin">
                                    <label for="recipient-name" class="form-control-label">
                                        Jawatan Wakil JMB/MC
                                    </label>
                                    <input type="text" class="form-control" id="m_jmb_jawatan_wakil" readonly>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6 oleh_admin">
                                    <label for="recipient-name" class="form-control-label">
                                        No. Akaun Pukal
                                    </label>
                                    <input type="text" class="form-control" id="m_jmb_no_akaun_pukal" readonly>
                                </div>
                                <div class="col-md-6 oleh_admin">
                                    <label for="recipient-name" class="form-control-label">
                                        No. Meter Pukal
                                    </label>
                                    <input type="text" class="form-control" id="m_jmb_no_meter_pukal" readonly>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6 oleh_admin">
                                    <label for="recipient-name" class="form-control-label">
                                        Tarikh Pengesahan
                                    </label>
                                    <input type="text" class="form-control" id="m_jmb_tarikh_pengesahan" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="d-flex mr-auto">
                            <div id="kemaskini_area" class="mr-2"></div>
                            <div id="myidentity-area"></div>
                        </div>
                        @if($is_permission_all || $is_permission_own)
                        <div id="permohonan"></div>
                        <div id="pembatalan"></div>
                        @endif
                        <a class="btn btn-primary btn-cetak" target="_blank">
                            Cetak
                        </a>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            Kembali
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="sejarah_kemaskini" tabindex="-1" role="dialog" aria-labelledby="sejarahKemaskini"
            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">
                            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="pembatalan_permohonan" tabindex="-1" role="dialog" aria-labelledby="pembatalanPermohonan"
            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">
                            Pembatalan Permohonan <br>
                            <small>
                                <i>Tarikh Permohonan: <span id="tarikh_mohon_cancel"></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">
                        <form id="pembatalan_form" class="m-form m-form--label-align-right"
                            action="{{ url('admin/permohonan/'.$ipr->name.'/cancel') }}" method="POST">
                            @csrf
                            <input type="hidden" class="form-control m-input" name="id_cancel">
                            <input type="hidden" class="form-control m-input" name="status_cancel">
                            <div class="form-group col">
                                <h5 style="color: #f4516c">Status Permohonan:</h5><br />
                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label class="form-control-label" id="m_status_mohon_cancel"></label>
                                    </div>
                                </div>
                            </div>
                            <hr class="modal-hr">
                            <div class="form-group col">
                                <h5 style="color: #f4516c">Maklumat Pemohon:</h5><br />
                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label class="form-control-label">Jenis Meter Air:</label><br />
                                        <span type="text" class="form-control-span" id="m_jenis_meter_air_cancel"></span>
                                    </div>
                                    <div class="col-md-6 no_akaun_air">
                                        <label class="form-control-label">Nombor Akaun Air:</label><br />
                                        <span type="text" class="form-control-span" id="m_no_akaun_air_cancel"></span>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label class="form-control-label">Nama:</label><br />
                                        <span type="text" class="form-control-span" id="m_nama_cancel"></span>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-control-label">No. Identiti:</label><br />
                                        <span type="text" class="form-control-span" id="m_ic_cancel"></span>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label class="form-control-label">E-mel:</label><br />
                                        <span type="text" class="form-control-span" id="m_emel_cancel"></span>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-control-label">No. Telefon Bimbit:</label><br />
                                        <span type="text" class="form-control-span" id="m_tel_bimbit_cancel"></span>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <label class="form-control-label">Alamat:</label><br />
                                        <span type="text" class="form-control-span" id="m_alamat_cancel"></span>
                                    </div>
                                </div>
                            </div>
                            <hr class="modal-hr">
                            <div class="form-group col">
                                <h5 style="color: #f4516c">Sebab Pembatalan:</h5><br />
                                <div class="form-group row">
                                    <div class="col-md-10 sebab_cancel_individu">
                                        <select name="m_sebab_cancel" id="m_sebab_cancel" class="form-control"
                                            onchange="getSebabCancel($(this).val())" required>
                                            <option value="" selected>-- Pilih Sebab Penamatan Individu--</option>
                                            <option value="Penerima Skim Air Darul Ehsan berpindah ke premis lain">Penerima Skim
                                                Air Darul Ehsan berpindah ke premis lain</option>
                                            <option value="Pertukaran Pemilikan Akaun Bekalan Air premis pemohon">Pertukaran
                                                Pemilikan Akaun Bekalan Air premis pemohon</option>
                                            <option value="Penamatan Akaun Bekalan Air premis pemohon">Penamatan Akaun Bekalan
                                                Air premis pemohon</option>
                                            <option
                                                value="Perintah Mahkamah ke atas penerima Skim Air Darul Ehsan mengosongkan premis atau yang berkaitan.">
                                                Perintah Mahkamah ke atas penerima Skim Air Darul Ehsan mengosongkan premis atau
                                                yang berkaitan.</option>
                                            <option value="Penerima Skim Air Darul Ehsan telah meninggal dunia.">Penerima Skim
                                                Air Darul Ehsan telah meninggal dunia.</option>
                                            <option value="99">Lain-Lain</option>
                                        </select>
                                        <input type="text" class="form-control m-input" style="display:none;"
                                            id="m_sebab_cancel_lain" name="m_sebab_cancel_lain"
                                            placeholder="Sila nyatakan sebab pembatalan">
                                        <input type="hidden" class="form-control m-input" name="sebab_cancel">
                                    </div>
                                    <div class="col-md-10 sebab_cancel_pukal">
                                        <!-- PUKAL SEBAB -->
                                        <select name="m_sebab_cancel_pukal" id="m_sebab_cancel_pukal" class="form-control"
                                            required>
                                            <option value="" selected>-- Pilih Sebab Penamatan Pukal--</option>
                                            <option
                                                value="Penerima Skim Air Darul Ehsan memohon pertukaran premis jenis meter pukal kepada meter jenis individu">
                                                Penerima Skim Air Darul Ehsan memohon pertukaran premis jenis meter pukal kepada
                                                meter jenis individu</option>
                                        </select>
                                        <input type="text" class="form-control m-input" style="display:none;"
                                            id="m_sebab_cancel_lain_pukal" name="m_sebab_cancel_lain_pukal"
                                            placeholder="Sila nyatakan sebab pembatalan">
                                        <input type="hidden" class="form-control m-input" name="sebab_cancel_pukal">
                                    </div>
                                </div>
                            </div>
                            <hr class="modal-hr">
                            <div class="form-group col">
                                <h5 style="color: #f4516c">Perakuan Pemohon:</h5><br />
                                <div class="form-group m-form__group">
                                    <div class="col-md-12">
                                        <div class="alert m-alert m-alert--default" role="alert">
                                            Saya dengan ini mengakui bahawa segala maklumat yang dinyatakan di dalam Borang
                                            Permohonan ini adalah BENAR
                                            dan memberikan kebenaran kepada Kerajaan Negeri Selangor dan pihak Air Selangor
                                            untuk membuat semakan
                                            data butir-butir peribadi saya bagi memproses permohonan ini.
                                        </div>
                                        <label class="m-checkbox m-checkbox--success">
                                            <input type="checkbox" id="m_akuan_1" name="m_akuan_1" value="true">
                                            Setuju
                                            <span></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer submit_individu">
                        <button type="button" class="btn btn-secondary" onclick="submitCancel()"
                            style="background:#f4516c;color:white;">
                            Hantar Pembatalan
                        </button>
                        <div id="b_pembatalan"></div>
                    </div>
                    <div class="modal-footer submit_pukal">
                        <button type="button" class="btn btn-secondary" onclick="submitCancelPukal()"
                            style="background:#f4516c;color:white;">
                            Hantar Pembatalan
                        </button>
                        <div id="b_pembatalan_pukal"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="status_myidentity" tabindex="-1" role="dialog" aria-labelledby="statusMyidentity"
            aria-hidden="true" style="background-color: rgba(0, 0, 0,.6)">
            <div class="modal-dialog modal-lg" role="document" style="max-width: 1000px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">
                            Status Rekod<br>
                            <small>
                                <i>Tarikh Kemaskini: <span id="my_updated_at"></span></i>
                            </small>
                        </h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">
                                &times;
                            </span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="watermark">
                            <img src="{{ asset('img/logo.png') }}" class="watermark-logo">
                            <div class="watermark-text">{{ Auth::user()->username }}</div>
                        </div>
                        <div class="m-form__section m-form__section--middle">
                            <h5 style="color: #f4516c">Status:</h5><br />
                            <div class="form-group row">
                                <div class="col-md-12">
                                    <label class="form-control-label" id="my_status"></label>
                                </div>
                            </div>
                            <div id="maklumat_diri">
                            <hr>
                            <h5 style="color: #f4516c">Maklumat Diri:</h5><br />
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label class="form-control-label">
                                        Nama:
                                    </label>
                                    <input type="text" class="form-control" id="my_nama" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-control-label">
                                        No. Kad Pengenalan:
                                    </label>
                                    <input type="text" class="form-control" id="my_ic" readonly>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label class="form-control-label">
                                        Alamat Tetap:
                                    </label>
                                    <textarea class="form-control" id="my_alamat" readonly></textarea>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-control-label">
                                        Alamat Surat-Menyurat:
                                    </label>
                                    <textarea class="form-control" id="my_alamat_surat" readonly></textarea>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label class="form-control-label">
                                        Tarikh Mati:
                                    </label>
                                    <input type="text" class="form-control" id="my_tarikh_mati" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-control-label">
                                        Tarikh Lahir:
                                    </label>
                                    <input type="text" class="form-control" id="my_tarikh_lahir" readonly>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label class="form-control-label">
                                        Jantina:
                                    </label>
                                    <input type="text" class="form-control" id="my_jantina" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-control-label">
                                        No Telefon:
                                    </label>
                                    <input type="text" class="form-control" id="my_tel" readonly>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label class="form-control-label">
                                        Emel:
                                    </label>
                                    <input type="text" class="form-control" id="my_emel" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label for="" class="form-control-label">
                                        Taraf Penduduk:
                                    </label>
                                    <input type="text" class="form-control" id="taraf_penduduk" readonly>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer" id="b_myidentity"></div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="csv_tag" tabindex="-1" role="dialog" aria-labelledby="csv_tag"
            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">
                            Jana Fail Tag CSV
                        </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">
                            <form class="pull-left" id="form_tag_csv">
                                <h5 style="color: #f4516c">Sila Isi Ruangan Berikut:</h5><br/>
                                <div class="row mb-3">
                                    <label for="" class="col-md-6">Tarikh Mula - Tarikh Akhir (Permohonan)</label>
                                    <div id="permohonan_range_csv" class="col-md-6" 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>

                                </div>
                                <div class="row mb-3">
                                    <label for="" class="col-md-6">Status</label>
                                    <div class="col-md-6 p-0">
                                        <select name="status_csv" id="" class="form-control m-input">
                                            <option value="diproses" selected>Diproses</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="" class="col-md-6">Tarikh Mula Rebat</label>
                                    <div class="col-md-6 p-0">
                                        <input type="date" class="form-control m-input" id="tarikh_mula_rebat_csv" name="tarikh_mula_rebat_csv" placeholder="Sila pilih tarikh mula rebat">
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="" class="col-md-6">Tarikh Akhir Rebat</label>
                                    <div class="col-md-6 p-0">
                                        <input type="date" class="form-control m-input" id="tarikh_akhir_rebat_csv" name="tarikh_akhir_rebat_csv" placeholder="Sila pilih tarikh mula rebat">
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="" class="col-md-6"></label>
                                    <input type="hidden" id="from_date_csv" value="" />
                                    <input type="hidden" id="to_date_csv" value="" />
                                    <input type="hidden" id="jenis_csv" value="tag" />
                                    <button type="button" class="btn btn-primary" id="jana_tag_csv">Jana CSV</button>
                                </div>
                                {{-- <div class="input-group">
                                    <div id="permohonan_range_csv" 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>
                                    
                                    <button type="button" class="btn btn-primary ml-3" id="jana_csv">Jana CSV</button>
                                </div> --}}

                            </form>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            Kembali
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="csv_untag" tabindex="-1" role="dialog" aria-labelledby="csv_untag"
            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">
                            Jana Fail Untag CSV
                        </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">
                            <form class="pull-left" id="form_untag_csv">
                                <h5 style="color: #f4516c">Sila Isi Ruangan Berikut:</h5><br/>
                                <div class="row mb-3">
                                    <label for="" class="col-md-6">Tarikh Mula - Tarikh Akhir (Pembatalan)</label>
                                    <div id="permohonan_range_csv" class="col-md-6" 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>

                                </div>
                                {{-- <div class="row mb-3">
                                    <label for="" class="col-md-6">Tarikh Mula Rebat</label>
                                    <div class="col-md-6 p-0">
                                        <input type="date" class="form-control m-input" id="tarikh_mula_rebat_untag_csv" name="tarikh_mula_rebat_csv" placeholder="Sila pilih tarikh mula rebat">
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="" class="col-md-6">Tarikh Akhir Rebat</label>
                                    <div class="col-md-6 p-0">
                                        <input type="date" class="form-control m-input" id="tarikh_akhir_rebat_untag_csv" name="tarikh_akhir_rebat_csv" placeholder="Sila pilih tarikh mula rebat">
                                    </div>
                                </div> --}}
                                <div class="row mb-3">
                                    <label for="" class="col-md-6"></label>
                                    <input type="hidden" id="from_date_csv" value="" />
                                    <input type="hidden" id="to_date_csv" value="" />
                                    <input type="hidden" id="jenis_untag_csv" value="untag" />
                                    <button type="button" class="btn btn-primary" id="jana_untag_csv">Jana CSV</button>
                                </div>
                                {{-- <div class="input-group">
                                    <div id="permohonan_range_csv" 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>
                                    
                                    <button type="button" class="btn btn-primary ml-3" id="jana_csv">Jana CSV</button>
                                </div> --}}
                            </form>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            Kembali
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="jana_xls_modal" tabindex="-1" role="dialog" aria-labelledby="maklumatPermohonan"
            aria-hidden="true" style="background-color: rgba(0, 0, 0,.6)">
            <div class="modal-dialog modal-md" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">
                            Jana XLS/PDF
                        </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">
                            <div class="form-check mb-4">
                                <input class="form-check-input" type="checkbox" value="1" id="check_all" name="check_all" checked>
                                <label class="form-check-label" for="check_all">
                                    <b>Pilih semua</b>
                                </label>
                            </div>
                            {{-- <form id="jana_xls_form" method="POST" action="">
                                @csrf --}}
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="User ID" id="user_id_column" name="columns[]" checked>
                                            <label class="form-check-label" for="user_id_column">
                                                User ID
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="Id Permohonan" id="id_column" name="columns[]" checked>
                                            <label class="form-check-label" for="id_column">
                                                ID permohonan
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="Jenis Meter" id="jenis_meter_column" name="columns[]" checked>
                                            <label class="form-check-label" for="jenis_meter_column">
                                                Jenis meter
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="Tarikh Permohonan" id="tarikh_permohonan_column" name="columns[]" checked>
                                            <label class="form-check-label" for="tarikh_permohonan_column">
                                                Tarikh permohonan
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="No. Identiti" id="ic_pemohon_column" name="columns[]" checked>
                                            <label class="form-check-label" for="ic_pemohon_column">
                                                No. identiti
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="No. Akaun Air" id="no_akaun_air_column" name="columns[]" checked>
                                            <label class="form-check-label" for="no_akaun_air_column">
                                                No. akaun air
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="Status Pemilikan" id="status_pemilikan_column" name="columns[]" checked>
                                            <label class="form-check-label" for="status_pemilikan_column">
                                                Status pemilikan
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="Nama Pemohon" id="nama_column" name="columns[]" checked>
                                            <label class="form-check-label" for="nama_column">
                                                Nama pemohon
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="Alamat" id="alamat_column" name="columns[]" checked>
                                            <label class="form-check-label" for="alamat_column">
                                                Alamat
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="Poskod" id="poskod_column" name="columns[]" checked>
                                            <label class="form-check-label" for="poskod_column">
                                                Poskod
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="Negeri" id="negeri_column" name="columns[]" checked>
                                            <label class="form-check-label" for="negeri_column">
                                                Negeri
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="Emel Pemohon" id="emel_column" name="columns[]" checked>
                                            <label class="form-check-label" for="emel_column">
                                                Emel pemohon
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="No. HP Pemohon" id="tel_bimbit_column" name="columns[]" checked>
                                            <label class="form-check-label" for="tel_bimbit_column">
                                                No. telefon pemohon
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="Status" id="status_column" name="columns[]" checked>
                                            <label class="form-check-label" for="status_column">
                                                Status
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="Alasan" id="comments_column" name="columns[]" checked>
                                            <label class="form-check-label" for="comments_column">
                                                Alasan
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="Tarikh Pembatalan" id="tarikh_pembatalan_column" name="columns[]" checked>
                                            <label class="form-check-label" for="tarikh_pembatalan_column">
                                                Tarikh pembatalan
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="Tarikh Gagal/Lulus" id="tarikh_gagal_lulus_column" name="columns[]" checked>
                                            <label class="form-check-label" for="tarikh_gagal_lulus_column">
                                                Tarikh gagal/lulus
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="Pendapatan Pemohon" id="pendapatan_pemohon_column" name="columns[]" checked>
                                            <label class="form-check-label" for="pendapatan_pemohon_column">
                                                Pendapatan pemohon
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="Status BSH" id="status_bsh_column" name="columns[]" checked>
                                            <label class="form-check-label" for="status_bsh_column">
                                                Status BSH
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="Status EKASIH" id="status_ekasih_column" name="columns[]" checked>
                                            <label class="form-check-label" for="status_ekasih_column">
                                                Status eKasih
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="Status Rekod" id="myid_status_rekod_column" name="columns[]" checked>
                                            <label class="form-check-label" for="myid_status_rekod_column">
                                                Status rekod
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="Tarikh Kematian" id="myid_tarikh_mati_column" name="columns[]" checked>
                                            <label class="form-check-label" for="myid_tarikh_mati_column">
                                                Tarikh kematian
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="Tarikh Kemaskini Rekod" id="myid_updated_at_column" name="columns[]" checked>
                                            <label class="form-check-label" for="myid_updated_at_column">
                                                Tarikh kemaskini rekod
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="IC Pasangan" id="ic_pasangan_column" name="columns[]" checked>
                                            <label class="form-check-label" for="ic_pasangan_column">
                                                IC pasangan
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="Nama Pasangan" id="nama_pasangan_column" name="columns[]" checked>
                                            <label class="form-check-label" for="nama_pasangan_column">
                                                Nama pasangan
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input jana_xls_checkbox" type="checkbox" value="Pendapatan Pasangan" id="pendapatan_pasangan_column" name="columns[]" checked>
                                            <label class="form-check-label" for="pendapatan_pasangan_column">
                                                Pendapatan pasangan
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            {{-- </form> --}}
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a id="jana_csv" class="btn btn-primary text-white" onclick="exportFile('XLS')">
                            Jana XLS
                        </a>
                        <a id="jana_pdf" class="btn btn-info text-white" onclick="">
                            Jana PDF
                        </a>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            Kembali
                        </button>
                    </div>
                </div>
            </div>
        </div>
        {{-- End Modal --}}
@endif
@endrole
@endsection

@section('js')
@role(['super_admin', 'principal_admin','admin'])
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

<script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>

<script>
    var start = moment("2019-01-01");
    var end = moment();

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

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

            $('#permohonan_table').dataTable({
                scrollX: true,
                processing: true,
                paging: true,
                pageLength: 15,
                lengthMenu: [[15, 30, 50, 100], [15, 30, 50, 100]],
                serverSide: true,
                ajax: {
                    url:'{{ url('admin/permohonan/sade/list?status=') }}{{ $status }}',
                    data:{from_date:from_date, to_date:to_date}
                },
                searching: false,
                language: {
                    emptyTable: "Tiada Data"
                },
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'nama', name: 'permohonan_sade.nama' },
                    { data: 'ic_pemohon', name: 'permohonan_sade.ic_pemohon' },
                    { data: 'jenis_meter_air', name: 'permohonan_sade.jenis_meter_air' },
                    { data: 'no_akaun_air', name: 'permohonan_sade.no_akaun_air' },
                    { data: 'tarikh_permohonan', name: 'permohonan_sade.tarikh_permohonan' },
                    { data: 'status', name: 'status' },
                    { data: 'comments', name: 'comments' },
                    { data: 'tarikh_pembatalan', name: 'tarikh_pembatalan' },
                    { data: 'tahun_bsh', name: 'status_bsh' },
                    { data: 'tahun_ekasih', name: 'status_ekasih' },
                    { 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");
        });

        $('#form_tag_csv').submit(function (event) {
            event.preventDefault();
            $("#jana_tag_csv").trigger("click");
        });

        $('#form_untag_csv').submit(function (event) {
            event.preventDefault();
            $("#jana_untag_csv").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/sade/list') }}',
                    data:{status:status, from_date:from_date, to_date:to_date, q:q, filter_type:filter_type}
                },
                searching: false,
                language: {
                    emptyTable: "Tiada Data"
                },
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'nama', name: 'permohonan_sade.nama' },
                    { data: 'ic_pemohon', name: 'permohonan_sade.ic_pemohon' },
                    { data: 'jenis_meter_air', name: 'permohonan_sade.jenis_meter_air' },
                    { data: 'no_akaun_air', name: 'permohonan_sade.no_akaun_air' },
                    { data: 'tarikh_permohonan', name: 'permohonan_sade.tarikh_permohonan' },
                    { data: 'status', name: 'status' },
                    { data: 'comments', name: 'comments' },
                    { data: 'tarikh_pembatalan', name: 'tarikh_pembatalan' },
                    { data: 'tahun_bsh', name: 'status_bsh' },
                    { data: 'tahun_ekasih', name: 'status_ekasih' },
                    { data: 'status_myidentity', name: 'status_myidentity' },
                    { data: 'tarikh_kematian', name: 'tarikh_kematian' },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ],
            });
        });

        $('#jana_tag_csv').click(function(){
            var jenis_csv = $('#jenis_csv').val();
            var from_date_csv = $('#from_date_csv').val();
            var to_date_csv = $('#to_date_csv').val();
            var mula_rebat_csv = $('#tarikh_mula_rebat_csv').val();
            var akhir_rebat_csv = $('#tarikh_akhir_rebat_csv').val();

            if(from_date_csv == '' || to_date_csv == '' || mula_rebat_csv == '' || akhir_rebat_csv == ''){
                $.alert({
                        type: 'red',
                        title: 'Ralat',
                        content: 'Sila lengkapkan ruangan',
                        typeAnimated: true,
                        icon: 'fa fa-warning',
                        columnClass: 'col-md-6 col-md-offset-3',
                    });
            } else {
                $.ajax({
                url: "{{ url('admin/permohonan/sade/csv-itd') }}",
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    jenis_csv : jenis_csv,
                    from_date_csv : from_date_csv,
                    to_date_csv : to_date_csv,
                    mula_rebat_csv : mula_rebat_csv,
                    akhir_rebat_csv : akhir_rebat_csv
                },
                beforeSend: function(){
                    $('#jana_tag_csv').prop('disabled', true);
                },
                success: function(response) {
                    $.alert({
                        type: 'green',
                        title: 'Fail CSV sedang dijana',
                        content: response.message,
                        typeAnimated: true,
                        icon: 'fa fa-success',
                        columnClass: 'col-md-6 col-md-offset-3',
                    });
                    $('#jana_tag_csv').prop('disabled', false);
                },
                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',
                    });
                    $('#jana_tag_csv').prop('disabled', false);
                }
            });
            }

            
        })

        $('#jana_untag_csv').click(function(){
            let jenis_csv = $('#jenis_untag_csv').val();
            let from_date_csv = $('#from_date_csv').val();
            let to_date_csv = $('#to_date_csv').val();
            let mula_rebat_csv = $('#tarikh_mula_rebat_untag_csv').val();
            let akhir_rebat_csv = $('#tarikh_akhir_rebat_untag_csv').val();

            if(from_date_csv == '' || to_date_csv == '' || mula_rebat_csv == '' || akhir_rebat_csv == ''){
                $.alert({
                        type: 'red',
                        title: 'Ralat',
                        content: 'Sila lengkapkan ruangan',
                        typeAnimated: true,
                        icon: 'fa fa-warning',
                        columnClass: 'col-md-6 col-md-offset-3',
                    });
            } else {
                $.ajax({
                url: "{{ url('admin/permohonan/sade/csv-itd') }}",
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    jenis_csv : jenis_csv,
                    from_date_csv : from_date_csv,
                    to_date_csv : to_date_csv,
                    mula_rebat_csv : mula_rebat_csv,
                    akhir_rebat_csv : akhir_rebat_csv
                },
                beforeSend: function(){
                    $('#jana_untag_csv').prop('disabled', true);
                },
                success: function(response) {
                    $.alert({
                        type: 'green',
                        title: 'Fail CSV sedang dijana',
                        content: response.message,
                        typeAnimated: true,
                        icon: 'fa fa-success',
                        columnClass: 'col-md-6 col-md-offset-3',
                    });
                    $('#jana_untag_csv').prop('disabled', false);
                },
                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',
                    });
                    $('#jana_untag_csv').prop('disabled', false);
                }
            });
            }

            
        })

        $(function() {
            $(window).resize(function() {});
        });

        $(function() {
            function cb(start, end) {
                $('#permohonan_range span, #permohonan_range_csv').html(start.format('D MMMM YYYY') + ' - ' + end.format('D MMMM YYYY'));
                $('#from_date, #from_date_csv').val(start.format('YYYY-MM-DD'));
                $('#to_date, #to_date_csv').val(end.format('YYYY-MM-DD'));
            }

            $('#permohonan_range, #permohonan_range_csv').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(output = 'XLS') {
            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 columns = $('input[type="checkbox"][name="columns[]"]:checked').map(function(){
                return $(this).val();
            }).get();

            window.open('{{ url('admin/permohonan/sade/exportOld?_token=') }}{{csrf_token()}}&status='+status+'&from_date='+from_date+'&to_date='+to_date+'&q='+q+'&filter_type='+filter_type+'&columns='+columns+'&output='+output, '_blank');

            // $.ajax({
            //     url: "{{ url('admin/permohonan/sade/export') }}",
            //     type: 'GET',
            //     data: {
            //         _token: '{{ csrf_token() }}',
            //         status: status,
            //         from_date: from_date,
            //         to_date: to_date,
            //         q: q,
            //         filter_type: filter_type,
            //         output: output,
            //         columns: columns
            //     },
            //     beforeSend: function(){
            //         $('#jana_csv').prop('disabled', true);
            //     },
            //     success: function(response) {
            //         $.alert({
            //             type: 'green',
            //             title: 'Fail CSV sedang dijana',
            //             content: response.message,
            //             typeAnimated: true,
            //             icon: 'fa fa-success',
            //             columnClass: 'col-md-6 col-md-offset-3',
            //         });
            //         $('#jana_csv').prop('disabled', false);
            //     },
            //     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',
            //         });
            //         $('#jana_csv').prop('disabled', false);
            //     }
            // });
        }

        $('#check_all').change(function () {
            if ($(this).is(':checked')) {
                $('.jana_xls_checkbox').prop('checked', true)
            } else {
                $('.jana_xls_checkbox').prop('checked', false)
            }
        })

        function janaXls() {
            $('#jana_xls_modal').modal('show');
        }

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

            $.ajax({
                url: '{{ url('admin/permohonan/sade/show') }}',
                type: 'POST',
                data: data,
                success: function(response) {
                    var permohonan_sade = response.permohonan,
                        pasangan = response.pasangan,
                        audit = response.audit
                        is_permission_own = response.is_permission_own,
                        is_permission_all = response.is_permission_all,
                        url = '{{ url('admin/rumusan') }}?ipr=sade&id='+x;

                    if(permohonan_sade.oleh_admin) {
                        $('.oleh_admin').show();
                    } else {
                        $('.oleh_admin').hide();
                    }
                    if(String(permohonan_sade.jenis_meter_air).toUpperCase() == 'INDIVIDU') {
                        $('.maklumat_jmb').hide();
                        $('.no_akaun_air').show();
                    } else {
                        $('.maklumat_jmb').show();
                        $('.no_akaun_air').hide();
                    }
                    if(permohonan_sade.status_perkahwinan == 'Berkahwin') {
                        $('.maklumat_pasangan').show();
                    } else {
                        $('.maklumat_pasangan').hide();
                    }

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

                    var status = alasan = '';
                    var tarikh = '';
                    switch (permohonan_sade.status) {
                        case -1:
                            status = 'Dibatalkan';
                            alasan = permohonan_sade.comments ?? 'Tiada Sebab';
                            tarikh = permohonan_sade.tarikh_pembatalan != null ? ' - '+moment(permohonan_sade.tarikh_pembatalan, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY') : '';
                            break;

                        case 0:
                        case 1:
                            status = 'Diproses';
                            alasan = permohonan_sade.comments ?? '';
                            break;

                        case 2:
                            status = 'Lulus';
                            tarikh = permohonan_sade.tarikh_gagal_lulus != null ? ' - '+moment(permohonan_sade.tarikh_gagal_lulus, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY') : '';
                            break;

                        case 4:
                            status = 'Pukal';
                            break;

                        case 3:
                            status = 'Gagal';
                            alasan = permohonan_sade.comments ?? 'Tiada Sebab';
                            tarikh = permohonan_sade.tarikh_gagal_lulus != null ? ' - '+moment(permohonan_sade.tarikh_gagal_lulus, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY') : '';
                            break;
                    }
                    
                    $('#m_status_mohon').html(status);
                    if (alasan != '') {
                        $('#m_status_mohon').append(' ('+alasan+')');
                    }
                    if (tarikh != '') {
                        $('#m_status_mohon').append(tarikh);
                    }

                    // Maklumat Peribadi
                    $('#m_nama').val(permohonan_sade.nama);
                    $('#m_ic').val(permohonan_sade.ic_pemohon);
                    $('#m_emel').val(permohonan_sade.email);
                    $('#m_tel_bimbit').val(permohonan_sade.tel_bimbit);
                    $('#m_status_perkahwinan').val(permohonan_sade.status_perkahwinan);
                    $('#m_pendapatan').val(parseFloat(permohonan_sade.pendapatan_pemohon).toFixed(2));
                    $('#m_jenis_meter_air').val(permohonan_sade.jenis_meter_air);
                    $('#m_no_akaun_air').val(permohonan_sade.no_akaun_air);

                    // Maklumat 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.emel != null?d.emel:'-')+'" 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);
                        }
                    });

                    var total = 0;
                    total = parseFloat(permohonan_sade.pendapatan_pemohon) + parseFloat(pendapatan_pasangan);

                    $('#m_pendapatan_pemohon').val(parseFloat(permohonan_sade.pendapatan_pemohon).toFixed(2));
                    $('#m_pendapatan_pasangan').val(parseFloat(pendapatan_pasangan).toFixed(2));
                    $('#m_pendapatan_isi_rumah').val(parseFloat(total).toFixed(2));

                    // Maklumat Tempat Tinggal
                    $('#m_status_pemilikan').val(permohonan_sade.status_pemilikan);
                    $('#m_alamat').html([
                        permohonan_sade.alamat_1+', ',
                        permohonan_sade.alamat_2 ? permohonan_sade.alamat_2+', ' : '',
                        permohonan_sade.alamat_3 ? permohonan_sade.alamat_3+', ' : '',
                        permohonan_sade.poskod+', ',
                        permohonan_sade.negeri
                    ]);

                    // Maklumat JMB
                    $('#m_jmb_nama').val(permohonan_sade.nama_jmb);
                    $('#m_jmb_emel').val(permohonan_sade.emel_jmb);
                    $('#m_jmb_no_pendaftaran').val(permohonan_sade.no_pendaftaran_jmb);
                    $('#m_jmb_no_tel').val(permohonan_sade.no_tel_jmb);
                    $('#m_jmb_nama_wakil').val(permohonan_sade.nama_wakil_jmb);
                    $('#m_jmb_jawatan_wakil').val(permohonan_sade.jawatan_wakil_jmb);
                    $('#m_jmb_no_akaun_pukal').val(permohonan_sade.no_akaun_pukal);
                    $('#m_jmb_no_meter_pukal').val(permohonan_sade.no_meter_pukal);
                    $('#m_jmb_tarikh_pengesahan').val(permohonan_sade.tarikh_pengesahan);

                    $('#kemaskini_area').html('<button type="button" onClick="showAudit('+x+')" class="btn btn-primary" id="audit_btn">Sejarah Kemaskini</button>');
                    $('#myidentity-area').html(`<button type="button" onClick="showMyidentity('${permohonan_sade.ic_pemohon}', '${x}')" class="btn btn-warning" id="myidentity_btn">Status Rekod</button>`);
                    
                    $('#pembatalan').html('');
                    if (permohonan_sade.status != 4 && permohonan_sade.status != -1) {
                        if(is_permission_all || (is_permission_own && permohonan_sade.oleh_admin == response.user_id)) {
                            $('#pembatalan').html('<button type="button" onClick="showCancel('+x+');" class="btn btn-secondary" style="background:#f4516c;color:white;">Pembatalan</button>');
                        }
                    } else if (permohonan_sade.status == 4 && permohonan_sade.status != -1) {
                        if(is_permission_all || (is_permission_own && permohonan_sade.oleh_admin == response.user_id)) {
                            $('#pembatalan').html('<button type="button" onClick="showCancel('+x+');" class="btn btn-secondary" style="background:#f4516c;color:white;">Pembatalan</button>');
                        }
                    }
                    $('#permohonan').html('');
                    if (permohonan_sade.status == -1 || permohonan_sade.status == 3) {
                        if(is_permission_all || (is_permission_own && permohonan_sade.oleh_admin == response.user_id)) {
                            var link = "{{ url('admin/permohonan/sade/add') }}" + "?id=" + permohonan_sade.id;
                            $('#permohonan').html('<a href="'+link+'" type="button" class="btn btn-success">'+(permohonan_sade.status==-1?'Permohonan Semula':'Permohonan Rayuan')+'</a>');
                        }
                    }

                    // Cetak
                    $('.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');
        }

        function showAudit(x) {
            $('#maklumat_permohonan').modal('hide');
            $('#m_sejarah_kemaskini').html('');
            $('#m_id_permohonan').html(x);
            $('#b_sejarah_kemaskini').html('<button type="button" onClick="showDetail('+x+');" class="btn btn-secondary">Kembali</button>');

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

            $('#maklumat_permohonan').modal('hide');
            $.ajax({
                url: '{{ url('admin/permohonan/sade/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 status = '';
                            var changes_maklumat = "";
                            for (var key in ori_data.maklumat) {
                                var item = key.replace(/_/g, " ").capitalize();
                                changes_maklumat = changes_maklumat + (changes_maklumat == '' ? '' : "<br/>");
                                if (key == 'tarikh_permohonan' || key == 'tarikh_pembatalan') {
                                    changes_maklumat = changes_maklumat + item + ': ' + (ori_data.maklumat[key] != null ? (ori_data.maklumat[key]['date']!=null?moment(ori_data.maklumat[key]['date'], 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY hh:mm A'):moment(ori_data.maklumat[key], 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY hh:mm A')) : '') + ' → ' + (new_data.maklumat[key] != null ? (new_data.maklumat[key]['date']!=null?moment(new_data.maklumat[key]['date'], 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY hh:mm A'):moment(new_data.maklumat[key], 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY hh:mm A')) : '');
                                } else if (key == 'tarikh_gagal_lulus') {
                                    if (status == 'Lulus' || status == 'Gagal') {
                                        changes_maklumat = changes_maklumat + 'Tarikh ' + status.toLowerCase() + ': ' + (ori_data.maklumat[key] != null ? moment(ori_data.maklumat[key]['date'], 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY hh:mm A') : '') + ' → ' + (new_data.maklumat[key] != null ? (new_data.maklumat[key]['date']!=null?moment(new_data.maklumat[key]['date'], 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY hh:mm A'):moment(new_data.maklumat[key], 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY hh:mm A')) : '');
                                    }
                                } else if (key == 'pendapatan') {
                                    changes_maklumat = changes_maklumat + item + ': RM' + (parseFloat(ori_data.maklumat[key]).toFixed(2) ?? '') + ' → RM' + (parseFloat(new_data.maklumat[key]).toFixed(2) ?? '');
                                } else {
                                    if (item == 'Status') {
                                        var ori_status = (ori_data.maklumat[key]==-1?'Dibatalkan':(ori_data.maklumat[key]<=1?'Diproses':(ori_data.maklumat[key]==2?'Lulus':(ori_data.maklumat[key]==3?'Gagal':'Pukal'))));
                                        status = ori_status;
                                        var new_status = (new_data.maklumat[key]==-1?'Dibatalkan':(new_data.maklumat[key]<=1?'Diproses':(new_data.maklumat[key]==2?'Lulus':(ori_data.maklumat[key]==3?'Gagal':'Pukal'))));
                                        changes_maklumat = changes_maklumat + item + ': ' + ori_status + ' → ' + new_status;
                                    } else {
                                        changes_maklumat = changes_maklumat + item + ': ' + (ori_data.maklumat[key] ?? '') + ' → ' + (new_data.maklumat[key] ?? '');
                                    }
                                }
                            }
                            var changes_alamat = "";
                            for (var key in ori_data.alamat) {
                                var item = key.replace(/_/g, " ").capitalize();
                                changes_alamat = changes_alamat + (changes_alamat == '' ? '' : "<br/>");
                                changes_alamat = changes_alamat + item + ': ' + (ori_data.alamat[key] ?? '') + ' → ' + (new_data.alamat[key] ?? '');
                            }

                            var changes_kemaskini = "";
                            var changes_tambah = "";
                            for (var key in new_data.pasangan) {
                                if (ori_data.pasangan[key]) {
                                    changes_kemaskini = changes_kemaskini + (changes_kemaskini == '' ? '<b>Kemaskini Data Pasangan</b><br/>' : "<br/>");
                                    if (ori_data.pasangan[key]['ic_pasangan'] != new_data.pasangan[key]['ic_pasangan']) {
                                        changes_kemaskini = changes_kemaskini + 'IC: ' + (ori_data.pasangan[key]['ic_pasangan'] ?? '') + ' → ' + (new_data.pasangan[key]['ic_pasangan']+'<br/>' ?? '');
                                    }
                                    if (ori_data.pasangan[key]['nama'] != new_data.pasangan[key]['nama']) {
                                        changes_kemaskini = changes_kemaskini + 'Nama: ' + (ori_data.pasangan[key]['nama'] ?? '') + ' → ' + (new_data.pasangan[key]['nama']+'<br/>' ?? '');
                                    }
                                    if (ori_data.pasangan[key]['email'] != new_data.pasangan[key]['email']) {
                                        changes_kemaskini = changes_kemaskini + 'Email: ' + (ori_data.pasangan[key]['email'] ?? '') + ' → ' + (new_data.pasangan[key]['email']+'<br/>' ?? '');
                                    }
                                    if (ori_data.pasangan[key]['no_tel_bimbit'] != new_data.pasangan[key]['no_tel_bimbit']) {
                                        changes_kemaskini = changes_kemaskini + 'No. Tel Bimbit: ' + (ori_data.pasangan[key]['no_tel_bimbit'] ?? '') + ' → ' + (new_data.pasangan[key]['no_tel_bimbit']+'<br/>' ?? '');
                                    }
                                    if (ori_data.pasangan[key]['pendapatan'] != new_data.pasangan[key]['pendapatan']) {
                                        changes_kemaskini = changes_kemaskini + 'Pendapatan: RM' + (parseFloat(ori_data.pasangan[key]['pendapatan']).toFixed(2) ?? '') + ' → ' + ('RM'+parseFloat(new_data.pasangan[key]['pendapatan']).toFixed(2)+'<br/>' ?? '');
                                    }
                                } else {
                                    changes_tambah = changes_tambah + (changes_tambah == '' ? '<b>Tambah Data Pasangan</b><br/>' : "<br/>");
                                    changes_tambah = changes_tambah + 'IC: ' + (new_data.pasangan[key]['ic_pasangan']+'<br/>' ?? '');
                                    changes_tambah = changes_tambah + 'Nama: ' + (new_data.pasangan[key]['nama']+'<br/>' ?? '');
                                    changes_tambah = changes_tambah + 'Email: ' + (new_data.pasangan[key]['email']+'<br/>' ?? '');
                                    changes_tambah = changes_tambah + 'No. Tel Bimbit: ' + (new_data.pasangan[key]['no_tel_bimbit']+'<br/>' ?? '');
                                    changes_tambah = changes_tambah + 'Pendapatan: ' + ('RM'+parseFloat(new_data.pasangan[key]['pendapatan']).toFixed(2)+'<br/>' ?? '');
                                }
                            }

                            var changes_padam = "";
                            if (new_data.length > 0) {
                                for (var key in ori_data.pasangan) {
                                    changes_padam = changes_padam + (changes_padam == '' ? '<b>Padam Data Pasangan</b><br/>' : "<br/>");
                                    changes_padam = changes_padam + 'IC: ' + (ori_data.pasangan[key]['ic_pasangan']+'<br/>' ?? '');
                                    changes_padam = changes_padam + 'Nama: ' + (ori_data.pasangan[key]['nama']+'<br/>' ?? '');
                                    changes_padam = changes_padam + 'Email: ' + (ori_data.pasangan[key]['email']+'<br/>' ?? '');
                                    changes_padam = changes_padam + 'No. Tel Bimbit: ' + (ori_data.pasangan[key]['no_tel_bimbit']+'<br/>' ?? '');
                                    changes_padam = changes_padam + 'Pendapatan: ' + ('RM'+ori_data.pasangan[key]['pendapatan']+'<br/>' ?? '');
                                }
                            }

                            var changes = changes_maklumat+(changes_maklumat?'<br/>':'')+changes_alamat+(changes_alamat?'<br/>':'')+changes_kemaskini+(changes_kemaskini?'<br/>':'')+changes_tambah+(changes_tambah?'<br/>':'')+changes_padam;

                            html =
                            '<tr>'+
                                '<td>'+(i+1)+'</td>'+
                                '<td>'+changes+'</td>'+
                                '<td>'+ moment(d.created_at, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY hh:mm A')+'</td>'+
                                '<td>'+d.name+'</td>'+
                            '</tr>';

                            $('#m_sejarah_kemaskini').append(html);
                        });
                    } else {
                        html =
                        '<tr>'+
                            '<td colspan=4>'+
                                '<input type="text" class="form-control m-input" value="Tiada Data" disabled style="text-align:center;">'+
                            '</td>'
                        '</tr>';

                        $('#m_sejarah_kemaskini').append(html);
                    }
                },
                error: function(response) {
                    $.alert({
                        type: 'red',
                        title: 'Whoops, looks like something went wrong!',
                        content: 'Please check with system admin.',
                        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' || response.data.taraf_penduduk == ''){
                                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);
                        $('#taraf_penduduk').val(response.data.taraf_penduduk2);
                        // 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');
        }

        function showCancel(id) {
            $('#b_pembatalan').html('<button type="button" onClick="showDetail('+id+');" class="btn btn-secondary">Kembali</button>');
            $('#b_pembatalan_pukal').html('<button type="button" onClick="showDetail('+id+');" class="btn btn-secondary">Kembali</button>');
            $('#maklumat_permohonan').modal('hide');
            var data = { _token: '{{ csrf_token() }}', id };

            $.ajax({
                url: '{{ url('admin/permohonan/sade/cancel') }}',
                type: 'POST',
                data: data,
                success: function(response) {
                    var permohonan_sade = response.permohonan;
                    $('#tarikh_mohon_cancel').html(moment(permohonan_sade.tarikh_permohonan, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY'));
                    $('input[name="id_cancel"]').val(permohonan_sade.id);
                    $('input[name="status_cancel"]').val(permohonan_sade.status);

                    if(String(permohonan_sade.jenis_meter_air).toUpperCase() == 'PUKAL') {
                        $('.sebab_cancel_individu').hide();
                        $('.submit_individu').hide();
                        $('.sebab_cancel_pukal').show();
                        $('.submit_pukal').show();
                    } else {
                        $('.submit_individu').show();
                        $('.sebab_cancel_individu').show();
                        $('.sebab_cancel_pukal').hide();
                        $('.submit_pukal').hide();
                    }

                    var status = alasan = '';
                    var tarikh = '';
                    switch (permohonan_sade.status) {
                        case -1:
                            status = 'Dibatalkan';
                            alasan = permohonan_sade.comments ?? 'Tiada Sebab';
                            tarikh = permohonan_sade.tarikh_pembatalan != null ? ' - '+moment(permohonan_sade.tarikh_pembatalan, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY') : '';
                            break;

                        case 0:
                        case 1:
                            status = 'Diproses';
                            alasan = permohonan_sade.comments ?? '';
                            break;

                        case 2:
                            status = 'Lulus';
                            tarikh = permohonan_sade.tarikh_gagal_lulus != null ? ' - '+moment(permohonan_sade.tarikh_gagal_lulus, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY') : '';
                            break;

                        case 4:
                            status = 'Pukal';
                            break;

                        case 3:
                            status = 'Gagal';
                            alasan = permohonan_sade.comments ?? 'Tiada Sebab';
                            tarikh = permohonan_sade.tarikh_gagal_lulus != null ? ' - '+moment(permohonan_sade.tarikh_gagal_lulus, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY') : '';
                            break;
                    }
                    
                    $('#m_status_mohon_cancel').html(status);
                    if (alasan != '') {
                        $('#m_status_mohon_cancel').append(' ('+alasan+')');
                    }
                    if (tarikh != '') {
                        $('#m_status_mohon_cancel').append(tarikh);
                    }

                    $('#m_jenis_meter_air_cancel').html(permohonan_sade.jenis_meter_air);
                    $('#m_no_akaun_air_cancel').html(permohonan_sade.no_akaun_air);

                    $('#m_nama_cancel').html(permohonan_sade.nama);
                    $('#m_ic_cancel').html(permohonan_sade.ic_pemohon);
                    $('#m_emel_cancel').html(permohonan_sade.email);
                    $('#m_tel_bimbit_cancel').html(permohonan_sade.tel_bimbit);
                    $('#m_alamat_cancel').html([
                        permohonan_sade.alamat_1+', ',
                        permohonan_sade.alamat_2 ? permohonan_sade.alamat_2+', ' : '',
                        permohonan_sade.alamat_3 ? permohonan_sade.alamat_3+', ' : '',
                        permohonan_sade.poskod+', ',
                        permohonan_sade.bandar ? permohonan_sade.bandar+', ' : '',
                        permohonan_sade.negeri
                    ]);
                },
                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',
                    });
                }
            });

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

        function getSebabCancel(sebab) {
            if (sebab == '99') {
                $('#m_sebab_cancel_lain').show();
            } else {
                $('#m_sebab_cancel_lain').hide();
            }
        }

        function submitCancel() {
            if($('#m_sebab_cancel option:selected').val() == '') {
                $.confirm({
                    title: 'Maklumat tidak lengkap?',
                    content: 'Sila pilih sebab pembatalan.',
                    icon: 'fa fa-warning',
                    type: 'red',
                    buttons: { ok: { btnClass: 'btn-red' } }
                });
                return;
            } else if($('#m_sebab_cancel option:selected').val() == '99' && $('#m_sebab_cancel_lain').val() == '') {
                $.confirm({
                    title: 'Maklumat tidak lengkap?',
                    content: 'Sila nyatakan sebab pembatalan.',
                    icon: 'fa fa-warning',
                    type: 'red',
                    buttons: { ok: { btnClass: 'btn-red' } }
                });
                return;
            } else if($('#m_akuan_1:checked').val() != 'true') {
                $.confirm({
                    title: 'Maklumat tidak lengkap?',
                    content: 'Sila tanda perakuan sebelum hantar pembatalan.',
                    icon: 'fa fa-warning',
                    type: 'red',
                    buttons: { ok: { btnClass: 'btn-red' } }
                });
                return;
            } else {
                $('input[name="akuan_1"]').val($('#m_akuan_1:checked').val());

                if ($('#m_sebab_cancel option:selected').val() != '99' ) {
                    $('input[name="sebab_cancel"]').val($('#m_sebab_cancel option:selected').val());
                } else {
                    $('input[name="sebab_cancel"]').val($('#m_sebab_cancel_lain').val());
                }

                $.confirm({
                    title: 'Hantar Pembatalan?',
                    content: 'Anda pasti untuk teruskan?',
                    icon: 'fa fa-spinner fa-spin',
                    type: 'green',
                    buttons: {
                        hantar: {
                            btnClass: 'btn-green',
                            action: function() {
                                $('#pembatalan_form').submit();
                            }
                        },
                        kembali: {
                            btnClass: 'btn-red',
                            action: function() {
                            }
                        }
                    }
                });
            }
        }

        function submitCancelPukal() {
            if($('#m_sebab_cancel_pukal option:selected').val() == '') {
                $.confirm({
                    title: 'Maklumat tidak lengkap?',
                    content: 'Sila pilih sebab pembatalan.',
                    icon: 'fa fa-warning',
                    type: 'red',
                    buttons: { ok: { btnClass: 'btn-red' } }
                });
                return;
            } else if($('#m_sebab_cancel_pukal option:selected').val() == '99' && $('#m_sebab_cancel_lain_pukal').val() == '') {
                $.confirm({
                    title: 'Maklumat tidak lengkap?',
                    content: 'Sila nyatakan sebab pembatalan.',
                    icon: 'fa fa-warning',
                    type: 'red',
                    buttons: { ok: { btnClass: 'btn-red' } }
                });
                return;
            } else if($('#m_akuan_1:checked').val() != 'true') {
                $.confirm({
                    title: 'Maklumat tidak lengkap?',
                    content: 'Sila tanda perakuan sebelum hantar pembatalan.',
                    icon: 'fa fa-warning',
                    type: 'red',
                    buttons: { ok: { btnClass: 'btn-red' } }
                });
                return;
            } else {
                $('input[name="akuan_1"]').val($('#m_akuan_1:checked').val());

                if ($('#m_sebab_cancel_pukal option:selected').val() != '99' ) {
                    $('input[name="sebab_cancel_pukal"]').val($('#m_sebab_cancel_pukal option:selected').val());
                } else {
                    $('input[name="sebab_cancel_pukal"]').val($('#m_sebab_cancel_lain_pukal').val());
                }

                $.confirm({
                    title: 'Hantar Pembatalan?',
                    content: 'Anda pasti untuk teruskan?',
                    icon: 'fa fa-spinner fa-spin',
                    type: 'green',
                    buttons: {
                        hantar: {
                            btnClass: 'btn-green',
                            action: function() {
                                $('#pembatalan_form').submit();
                            }
                        },
                        kembali: {
                            btnClass: 'btn-red',
                            action: function() {
                            }
                        }
                    }
                });
            }
        }

        function openTagModal(){
            $('#csv_tag').modal('show');
        }

        function openUntagModal(){
            $('#csv_untag').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