@extends('layouts.app')

@section('title', 'Permohonan '.strtoupper(App\IPR::where('name', $ipr->name)->pluck('name')[0]))
@section('permohonan', 'm-menu__item--active')
@section(App\Cluster::where('id', $ipr->cluster_id)->pluck('name')[0], 'm-menu__item--active')
@section(App\IPR::where('name', $ipr->name)->pluck('name')[0], 'm-menu__item--active')

@section('css')
<style>
    .modal-hr {
        margin-top: 2rem;
        margin-bottom: 2rem;
        border-top: 1px dashed rgba(0,0,0,.3);
    }
</style>
@endsection

@section('content')
<div class="row">
    <div class="col-lg-10">
        <div class="m-portlet">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon m--hide">
                            <i class="la la-gear"></i>
                        </span>
                        <h3 class="m-portlet__head-text">
                            {{ $ipr->display_name }} {{ !empty($permohonan) ? ($permohonan->status == -1 || $permohonan->status == 3 ? ($permohonan->status==3?'( Permohonan Rayuan: Gagal':'( Permohonan Semula: Dibatalkan'): '').' - '.$permohonan->comments.')' : '' }}
                        </h3>
                    </div>
                </div>
            </div>
            <form id="permohonan_form" class="m-form m-form--label-align-right" action="{{ url('admin/permohonan/'.$ipr->name.'/add') }}" method="POST">
                @csrf
                <input type="hidden" name="akuan_1" value="">
                <input type="hidden" name="akuan_2" value="">

                <div class="m-portlet__body">
                    <div class="m-form__section m-form__section--first">
                        <div class="m-form__heading">
                            <h3 class="m-form__heading-title">
                                Maklumat Peribadi:
                            </h3>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                <span style="color: red">* </span>Jenis Meter Air:
                            </label>
                            <div class="col-lg-4">
                                <div class="m-radio-list">
                                    <label class="m-radio m-radio--solid m-radio--brand">
                                        <input type="radio" name="jenis_meter_air" value="Individu" checked>
                                        Individu
                                        <span></span>
                                    </label>
                                    {{-- <label class="m-radio m-radio--solid m-radio--brand">
                                        <input type="radio" name="jenis_meter_air" value="Pukal">
                                        Pukal
                                        <span></span>
                                    </label> --}}
                                </div>
                            </div>
                            <label class="col-lg-2 col-form-label no_akaun_air">
                                <span style="color: red">* </span>Nombor Akaun Air
                                <i class="fa fa-question-circle-o"
                                    style="cursor: pointer; color: #f4516c"
                                    data-toggle="m-popover"
                                    data-trigger="focus"
                                    data-html="true"
                                    data-placement="top"
                                    data-content="<span class='m-form__help' style='color: #f4516c; font-weight: 500'>* 10 digit no. akaun air seperti yang tertera di dalam bil air</span><ul><li><span style='font-weight: 500'>028211XXXX (Baharu)</span></li><li><span style='font-weight: 500'>000027547XXXX (Lama)</span></li>">
                                </i> :
                            </label>
                            <div class="col-lg-4 no_akaun_air">
                                <input type="text" class="form-control m-input" id="no_akaun_air" name="no_akaun_air" placeholder="Masukkan no. akaun air 10 digit" value="{{ $permohonan->no_akaun_air ?? '' }}" onblur="checkDuplicate($(this).val(),'no_akaun_air')" max="10">
                                <small class="loading_no_akaun_air" style="color:#f4516c;display:none">Memeriksa...</small>
                                <small class="success_no_akaun_air" style="color:green;display:none">Ok</small>
                                <small class="exist_no_akaun_air" style="color:#f4516c;display:none">No. Akaun Air telah didaftar.</small>
                                <small class="length_no_akaun_air" style="color:#f4516c;display:none">No. Akaun Air mestilah 10 digit sahaja.</small>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                <span style="color: red">* </span>Nama:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input nama" name="nama" placeholder="Sila masukan nama" value="{{ $profile->nama ?? '' }}" data-inputmask-regex="([a-zA-Z@/ ])+/g">
                            </div>
                            <label class="col-lg-2 col-form-label">
                                <span style="color: red">* </span>No. Identiti:
                            </label>
                            <div class="input-group m-input-group col-lg-4">
                                <select class="m-input" id="ic_type" name="ic_type" style="font-size: 13px; color: #575962; border-color: #ebedf2; background-color: #f4f5f8" onchange="getIc($(this).val())">
                                    <option value="1">No. K/P</option>
                                    <option value="2">No. Tentera</option>
                                    <option value="3">No. Polis</option>
                                </select>
                                <input type="text" class="form-control m-input" id="ic" name="ic" placeholder="Sila masukan no kad pengenalan" value="{{ $permohonan->ic_pemohon ?? '' }}" onblur="checkDuplicate($(this).val(),'ic')" data-inputmask-regex="([a-zA-Z0-9 ])+/g" maxlength="12" >
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-2"></div>
                            <div class="col-lg-4"></div>
                            <div class="col-lg-2"></div>
                            <div class="col-lg-4">
                                <small class="exist_ic" style="color:#f4516c;display:none">No. K/P / No. Tentera / No. Polis telah didaftar.</small>
                                <small class="loading_ic" style="color:#f4516c;display:none">Memeriksa...</small>
                                <small class="success_ic" style="color:green;display:none">Ok</small>
                                <small class="length_ic" style="color:#f4516c;display:none">No. Identiti mestilah 12 digit sahaja.</small>
                            </div>
                        </div>
                        <div class="form-group m-form__group row" style="padding-top: 0">
                            <label class="col-lg-2 col-form-label">
                                <span style="color: red">* </span>E-mel:
                            </label>
                            <div class="input-group m-input-group col-lg-4">
                                <select class="m-input" name="email_type" onchange="emailFormat();" style="font-size: 13px; color: #575962; border-color: #ebedf2; background-color: #f4f5f8">
                                    <option value="Pemohon">Pemohon</option>
                                    <option value="Wakil">Wakil</option>
                                </select>
                                <input type="text" class="form-control m-input" name="email" placeholder="Sila masukan emel" value="{{ $profile->email ?? '' }}" onblur="emailFormat()">
                            </div>
                            <label class="col-lg-2 col-form-label">
                                <span style="color: red">* </span>No. Telefon Bimbit:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="tel_bimbit" name="tel_bimbit" placeholder="Sila masukan no tel bimbit" value="{{ $profile->tel_bimbit ?? '' }}" onblur="checkDuplicate($(this).val(),'tel_bimbit')">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-2"></div>
                            <div class="col-lg-4">
                                <small class="loading_email" style="color:#f4516c;display:none">Memeriksa...</small>
                                <small class="success_email" style="color:green;display:none">Ok</small>
                                <small class="format_email" style="color:#f4516c;display:none">Sila masukkan format emel yang betul.</small>
                                <small class="exist_email" style="color:#f4516c;display:none">Emel telah didaftar.</small>
                            </div>
                            <div class="col-lg-2"></div>
                            <div class="col-lg-4">
                                <small class="exist_tel_bimbit" style="color:#f4516c;display:none">No. Telefon telah didaftar.</small>
                                <small class="loading_tel_bimbit" style="color:#f4516c;display:none">Memeriksa...</small>
                                <small class="success_tel_bimbit" style="color:green;display:none">Ok</small>
                            </div>
                        </div>
                        <div class="form-group m-form__group row" style="padding-top: 0">
                            <label class="col-lg-2 col-form-label">
                                <span style="color: red">* </span>Status Perkahwinan:
                            </label>
                            <div class="col-lg-4">
                                <select class="form-control m-input" id="status_perkahwinan" name="status_perkahwinan" onchange="getStatus($(this).val())">
                                    <option value="" hidden {{ !empty($profile) ? ($profile->status_perkahwinan ? '' : 'selected') : '' }}>Sila pilih status perkahwinan</option>
                                    <option value="Bujang" {{ !empty($profile) ? ($profile->status_perkahwinan == 'Bujang' ? 'selected' : '') : '' }}>Bujang</option>
                                    <option value="Berkahwin" {{ !empty($profile) ? ($profile->status_perkahwinan == 'Berkahwin' ? 'selected' : '') : '' }}>Berkahwin</option>
                                    <option value="Duda/Janda" {{ !empty($profile) ? ($profile->status_perkahwinan  == 'Duda/Janda' ? 'selected' : '') : '' }}>Duda/Janda</option>
                                </select>
                            </div>
                            <label class="col-lg-2 col-form-label">
                                <span style="color: red">* </span>Pendapatan Bulanan:
                            </label>
                            <div class="input-group m-input-group col-lg-4">
                                <span class="input-group-addon">
                                    RM
                                </span>
                                <input type="number" class="form-control m-input" name="pendapatan" value="{{ $profile->pendapatan ?? '' }}" placeholder="Sila masukan pendapatan bulanan" oninput="total()">
                            </div>
                        </div>
                    </div>
                    <div class="m-form__seperator m-form__seperator--dashed maklumat_pasangan"></div>
                    <div class="m-form__section m-form__section--middle maklumat_pasangan">
                        <div class="m-form__heading">
                            <h3 class="m-form__heading-title">
                                Maklumat Pasangan
                            </h3>
                        </div>
                        <div class="form-group m-form__group row">
                            <div class="col-lg-12">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th><span style="color: red">* </span>No. Identiti</th>
                                            <th><span style="color: red">* </span>Nama</th>
                                            <th>E-mel</th>
                                            <th>No Telefon Bimbit</th>
                                            <th><span style="color: red">* </span>Pendapatan Bulanan</th>
                                            <th width="10%"></th>
                                        </tr>
                                    </thead>
                                    <tbody id="pasangan_input">                         
                                        @foreach ($pasangans as $pasangan)
                                        <tr>
                                            <td>
                                                <input type="text" class="form-control m-input pasangan_ic" id="pasangan_ic" name="pasangan_ic[]" value="{{ $pasangan->ic_pasangan }}" readonly>
                                            </td>
                                            <td>
                                                <input type="text" class="form-control m-input nama" id="pasangan_nama" name="pasangan_nama[]" value="{{ $pasangan->nama }}" data-inputmask-regex="([a-zA-Z@/ ])+/g">
                                            </td>
                                            <td>
                                                <input type="text" class="form-control m-input" id="pasangan_emel" name="pasangan_emel[]" value="{{ $pasangan->emel }}" onblur="checkEmail($(this))">
                                            </td>
                                            <td>
                                                <input type="text" class="form-control m-input pasangan_no_tel" id="pasangan_no_tel" name="pasangan_no_tel_bimbit[]" value="{{ $pasangan->no_tel_bimbit }}">
                                            </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 pasangan_pendapatan" id="pasangan_pendapatan" name="pasangan_pendapatan[]" placeholder="Jika ada" value="{{ $pasangan->pendapatan }}">
                                                </div>
                                            </td>
                                            <td>
                                                <div class="btn-sm btn btn-danger m-btn m-btn--icon m-btn--pill" onclick="pasangan_delete({{ $pasangan->id }},1)">
                                                    <span>
                                                        <i class="la la-trash-o"></i>
                                                        <span>Padam</span>
                                                    </span>
                                                </div>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td>
                                                <small class="ic_pasangan_wajib" style="color:#f4516c;display:none;">No. Identiti Pasangan adalah wajib.</small>
                                            </td>
                                            <td>
                                                <small class="nama_pasangan_wajib" style="color:#f4516c;display:none;">Nama Pasangan adalah wajib.</small>
                                            </td>
                                            <td></td>
                                            <td></td>
                                            <td>
                                                <small class="pendapatan_pasangan_wajib" style="color:#f4516c;display:none;">Pendapatan Pasangan adalah wajib.</small>
                                            </td>
                                            <td></td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                            <div class="col-lg-12">
                                <div class="btn btn btn-sm btn-success m-btn m-btn--icon m-btn--pill m-btn--wide" onclick="pasangan_add()">
                                    <span>
                                        <i class="la la-plus"></i>
                                        <span>
                                            Tambah
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="m-form__seperator m-form__seperator--dashed"></div>
                    <div class="m-form__section m-form__section--middle">
                        <div class="m-form__heading">
                            <h3 class="m-form__heading-title">
                                Maklumat Pendapatan:
                            </h3>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                Jumlah Pendapatan Pemohon:
                            </label>
                            <div class="input-group m-input-group col-lg-4">
                                <span class="input-group-addon">
                                    RM
                                </span>
                                <input type="text" class="form-control m-input" name="pendapatan_pemohon" placeholder="Sila masukan jumlah pendapatan pemohon" readonly>
                            </div>
                            <label class="col-lg-2 col-form-label">
                                Jumlah Pendapatan Pasangan:
                            </label>
                            <div class="input-group m-input-group col-lg-4">
                                <span class="input-group-addon">
                                    RM
                                </span>
                                <input type="number" class="form-control m-input" name="pendapatan_pasangan" placeholder="Sila masukan jumlah pendapatan pasangan" readonly>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                Jumlah Pendapatan Isi Rumah:
                            </label>
                            <div class="input-group m-input-group col-lg-4">
                                <span class="input-group-addon">
                                    RM
                                </span>
                                <input type="text" class="form-control m-input" name="pendapatan_isi_rumah" placeholder="Sila masukan jumlah pendapatan isi rumah" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="m-form__seperator m-form__seperator--dashed"></div>
                    <div class="m-form__section m-form__section--middle">
                        <div class="m-form__heading">
                            <h3 class="m-form__heading-title">
                                Maklumat Tempat Tinggal:
                            </h3>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                <span style="color: red">* </span>Status Pemilikan Premis:
                            </label>
                            <div class="col-lg-4">
                                <div class="m-radio-list">
                                    <label class="m-radio m-radio--solid m-radio--brand">
                                        <input type="radio" name="status_pemilikan" value="Pemilik" checked>
                                        Pemilik
                                        <span></span>
                                    </label>
                                    <label class="m-radio m-radio--solid m-radio--brand">
                                        <input type="radio" name="status_pemilikan" value="Penyewa">
                                        Penyewa
                                        <span></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <div class="col-lg-6">
                                <div class="row">
                                    <label class="col-lg-4 col-form-label" style="text-align:right"><span style="color: red">* </span>Alamat:</label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control m-input" name="alamat_1" placeholder="Sila masukan alamat"  value="{{ $profile->alamat_1 ?? '' }}">
                                        <span class="m-form__help" style="color: #f4516c; font-weight: 500">
                                            * Alamat adalah seperti yang tertera di dalam bil air
                                        </span>
                                    </div>
                                </div>
                                <div class="row">
                                    <label class="col-lg-4 col-form-label"></label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control m-input" name="alamat_2" placeholder="Sila masukan alamat"  value="{{ $profile->alamat_2 ?? '' }}">
                                    </div>
                                </div>
                                <div class="row">
                                    <label class="col-lg-4 col-form-label"></label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control m-input" name="alamat_3" placeholder="Sila masukan alamat"  value="{{ $profile->alamat_3 ?? '' }}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="row">
                                    <label class="col-lg-4 col-form-label" style="text-align:right">
                                        <span style="color: red">* </span>Poskod:
                                    </label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control m-input" id="poskod" name="poskod" placeholder="Sila masukan poskod"  value="{{ $profile->poskod ?? '' }}">
                                    </div>
                                </div>
                                <div class="row">
                                    <label class="col-lg-4 col-form-label" style="text-align:right">
                                        <span style="color: red">* </span>Negeri:
                                    </label>
                                    <div class="col-lg-8">
                                        <select class="form-control m-input" id="negeri" name="negeri">
											<option value="" hidden {{ !empty($profile) ? ($profile->negeri ? '' : 'selected') : '' }}>Sila pilih negeri</option>
											<option value="Johor" {{ !empty($profile) ? ($profile->negeri == 'Johor' ? 'selected' : '') : '' }}>Johor</option>
											<option value="Kedah" {{ !empty($profile) ? ($profile->negeri == 'Kedah' ? 'selected' : '') : '' }}>Kedah</option>
											<option value="Kelantan" {{ !empty($profile) ? ($profile->negeri == 'Kelantan' ? 'selected' : '') : '' }}>Kelantan</option>
											<option value="Melaka" {{ !empty($profile) ? ($profile->negeri == 'Melaka' ? 'selected' : '') : '' }}>Melaka</option>
											<option value="Negeri Sembilan" {{ !empty($profile) ? ($profile->negeri == 'Negeri Sembilan' ? 'selected' : '') : '' }}>Negeri Sembilan</option>
											<option value="Pahang" {{ !empty($profile) ? ($profile->negeri == 'Pahang' ? 'selected' : '') : '' }}>Pahang</option>
											<option value="Penang" {{ !empty($profile) ? ($profile->negeri == 'Penang' ? 'selected' : '') : '' }}>Penang</option>
											<option value="Perak" {{ !empty($profile) ? ($profile->negeri == 'Perak' ? 'selected' : '') : '' }}>Perak</option>
											<option value="Perlis" {{ !empty($profile) ? ($profile->negeri == 'Perlis' ? 'selected' : '') : '' }}>Perlis</option>
											<option value="Selangor" {{ !empty($profile) ? ($profile->negeri == 'Selangor' ? 'selected' : '') : '' }}>Selangor</option>
											<option value="Terengganu" {{ !empty($profile) ? ($profile->negeri == 'Terengganu' ? 'selected' : '') : '' }}>Terengganu</option>
											<option value="Sabah" {{ !empty($profile) ? ($profile->negeri == 'Sabah' ? 'selected' : '') : '' }}>Sabah</option>
											<option value="Sarawak" {{ !empty($profile) ? ($profile->negeri == 'Sarawak' ? 'selected' : '') : '' }}>Sarawak</option>
											<option value="W.P. Kuala Lumpur" {{ !empty($profile) ? ($profile->negeri == 'W.P. Kuala Lumpur' ? 'selected' : '') : '' }}>W.P. Kuala Lumpur</option>
											<option value="W.P. Labuan" {{ !empty($profile) ? ($profile->negeri == 'W.P. Labuan' ? 'selected' : '') : '' }}>W.P. Labuan</option>
											<option value="W.P. Putrajaya" {{ !empty($profile) ? ($profile->negeri == 'W.P. Putrajaya' ? 'selected' : '') : '' }}>W.P. Putrajaya</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="m-form__seperator m-form__seperator--dashed maklumat_jmb"></div>
                    <div class="m-form__section m-form__section--last maklumat_jmb">
                        <div class="m-form__heading">
                            <h3 class="m-form__heading-title">
                                Maklumat Badan Pengurusan Bersama (JMB) / <br> Perbadanan Pengurusan (MC):
                            </h3>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                <span style="color: red">* </span>Nama JMB/MC:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="jmb_nama" name="jmb_nama" placeholder="Sila masukan nama JMB/MC" value="{{ old('jmb_nama') }}" disabled>
                            </div>
                            <label class="col-lg-2 col-form-label">
                                <span style="color: red">* </span>E-mel JMB/MC:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="jmb_emel" name="jmb_emel" placeholder="Sila masukan e-mel JMB/MC" value="{{ old('jmb_emel') }}" disabled>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                <span style="color: red">* </span>No. Pendaftaran JMB/MC:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="jmb_no_pendaftaran" name="jmb_no_pendaftaran" placeholder="Sila masukan no. pendaftaran JMB/MC" value="{{ old('jmb_no_pendaftaran') }}" disabled>
                            </div>
                            <label class="col-lg-2 col-form-label">
                                <span style="color: red">* </span>No. Telefon JMB/MC:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="jmb_no_tel" name="jmb_no_tel" placeholder="Sila masukan no. tel JMB/MC" value="{{ old('jmb_no_tel') }}" disabled>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                <span style="color: red">* </span>Nama Wakil JMB/MC:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="jmb_nama_wakil" name="jmb_nama_wakil" placeholder="Sila masukan nama wakil JMB/MC" value="{{ old('jmb_nama_wakil') }}" disabled>
                            </div>
                            <label class="col-lg-2 col-form-label">
                                <span style="color: red">* </span>Jawatan Wakil JMB/MC:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="jmb_jawatan_wakil" name="jmb_jawatan_wakil" placeholder="Sila masukan jawatan wakil JMB/MC" value="{{ old('jmb_jawatan_wakil') }}" disabled>
                            </div>

                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                <span style="color: red">* </span>No. Akaun Pukal:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="jmb_no_akaun_pukal" name="jmb_no_akaun_pukal" placeholder="Sila masukan no. akaun pukal" value="{{ old('jmb_no_akaun_pukal') }}" disabled>
                            </div>
                            <label class="col-lg-2 col-form-label">
                                <span style="color: red">* </span>No. Meter Pukal:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="jmb_no_meter_pukal" name="jmb_no_meter_pukal" placeholder="Sila masukan no. meter pukal" value="{{ old('jmb_no_meter_pukal') }}" disabled>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                <span style="color: red">* </span>Tarikh Pengesahan:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="jmb_tarikh_pengesahan" name="jmb_tarikh_pengesahan" placeholder="Sila pilih tarikh pengesahan" value="{{ old('jmb_tarikh_pengesahan') }}" readonly disabled>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="m-portlet__foot m-portlet__foot--fit">
                    <div class="m-form__actions m-form__actions">
                        <div class="row">
                            <div class="col-lg-5"></div>
                            <div class="col-lg-6">
                                <button type="button" class="btn btn-primary" onclick="validate()">
                                    Hantar
                                </button>
                                <button type="reset" class="btn btn-secondary"  onclick="window.location='{{ url('admin/permohonan/sade') }}'">
                                    Kembali
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="rumusan_permohonan" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="background-color: rgba(0, 0, 0,.6)">
    <div class="modal-dialog modal-lg" role="document" style="max-width: 1000px;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLabel">
                    Rumusan Permohonan <br>
                    <small>
                        <i>Tarikh Permohonan: {{ date('d/m/Y') }}</i>
                    </small>
                </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">
                        &times;
                    </span>
                </button>
            </div>
            <div class="modal-body">
                <div class="m-form__section m-form__section--first">
                    <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_email" 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">
                            <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--middle 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">
                            <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">
                            <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">
                            <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">
                            <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">
                            <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">
                            <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>
                <hr class="modal-hr">
                <div class="m-form__section m-form__section--end">
                    <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">
                                Sila ambil perhatian bahawa Akta Perlindungan Data Peribadi 2010 memberi anda hak tertentu ke atas penggunaan
                                data peribadi anda oleh pihak kami. Kerajaan Negeri Selangor dan Pengurusan Air Selangor Sdn. Bhd. memberi
                                keutamaan dalam hal melindungi data peribadi anda dan memastikan ianya terpelihara dengan mengambil langkah
                                tertentu seperti yang termaktub di dalam akta tersebut. Dengan mengemukakan dan menyediakan maklumat anda kepada
                                kami di dalam borang pendaftaran ini, anda membenarkan penggunaan maklumat peribadi yang dikumpulkan untuk memberikan
                                perkhidmatan kami, mengikut cara dan tujuan yang dinyatakan dalam nota privasi kami. Sila rujuk nota privasi
                                di laman sesawang <a href="http://www.airselangor.com" target="_blank">www.airselangor.com</a>.
                            </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>
                    <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_2" name="m_akuan_2" value="true">
                                Setuju
                                <span></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="submitForm()">
                    Hantar
                </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    Kemaskini
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
    $(document).ready(() => {

        assign_js('pasangan');

        $('.maklumat_pasangan, .maklumat_jmb, .loading_no_akaun_air, .exist_no_akaun_air, .length_no_akaun_air, .success_no_akaun_air, .loading_ic, .exist_ic, .success_ic, .length_ic, .loading_email, .format_email, .exist_email, .success_email, .loading_tel_bimbit, .exist_tel_bimbit, .success_tel_bimbit').hide();

        $(".nama").inputmask("Regex");

        getIc($('#ic_type option:selected').val());

        if($('.email_type option:selected').val() == "Pemohon"){
            $(".email_type option[value='Wakil']").prop('disabled',true);
        }
        else {
            $(".email_type option[value='Pemohon']").prop('disabled',false);
        }

        if($('#status_perkahwinan option:selected').val() == "Bujang"){
            $("#status_perkahwinan option[value='Berkahwin']").prop('disabled',true);
            $("#status_perkahwinan option[value='Duda/Janda']").prop('disabled',true);
        }
        else if($('#status_perkahwinan option:selected').val() == "Berkahwin") {
            $("#status_perkahwinan option[value='Bujang']").prop('disabled',true);
            $("#status_perkahwinan option[value='Duda/Janda']").prop('disabled',true);
        } 
        else if($('#status_perkahwinan option:selected').val() == "Duda/Janda") {
            $("#status_perkahwinan option[value='Bujang']").prop('disabled',true);
            $("#status_perkahwinan option[value='Berkahwin']").prop('disabled',true);
        }
        getStatus($('#status_perkahwinan option:selected').val());

        if ($('input[name="no_akaun_air"]').val() != '') {
            $no_akaun_air = '{{(empty($permohonan->no_akaun_air)?"a":$permohonan->no_akaun_air)}}';
            checkDuplicate($no_akaun_air, 'no_akaun_air', $no_akaun_air);
        }
        if ($('input[name="email"]').val() != '') {
            emailFormat('{{ $profile->email ?? '' }}');
        }
        if ($('input[name="tel_bimbit"]').val() != '') {
            $tel_bimbit = '{{ $profile->tel_bimbit ?? ''}}';
            checkDuplicate($tel_bimbit, 'tel_bimbit', $tel_bimbit);
        }

        total()

        $("#poskod").inputmask({
            mask: "99999",
            placeholder: ""
        });

        $("#no_akaun_air").inputmask({
            mask: "9999999999",
            placeholder: ""
        });

        $("#jmb_no_akaun_pukal").inputmask({
            mask: "999999999999999",
            placeholder: ""
        });

        $("#tel_bimbit, #jmb_no_tel").inputmask({
            mask: "9999999999999",
            placeholder: ""
        });

        $("#jmb_tarikh_pengesahan").datepicker({
            todayHighlight: !0,
            orientation: "bottom left",
            format: 'yyyy-mm-dd',
            templates: {
                leftArrow: '<i class="la la-angle-left"></i>',
                rightArrow: '<i class="la la-angle-right"></i>'
            },
        });
    });

    $(() => {
        $('input[name="jenis_meter_air"]').on('click', () => {
            if($('input[name="jenis_meter_air"]:checked').val() == 'Individu') {
                $('.no_akaun_air').show('slow');
                $('#no_akaun_air').attr('disabled', false);

                $('.maklumat_jmb').hide('slow');
                $('#jmb_nama, #jmb_emel, #jmb_no_pendaftaran, #jmb_no_tel, #jmb_nama_wakil, #jmb_jawatan_wakil, #jmb_no_akaun_pukal, #jmb_no_meter_pukal, #jmb_tarikh_pengesahan').val('');
                $('#jmb_nama, #jmb_emel, #jmb_no_pendaftaran, #jmb_no_tel, #jmb_nama_wakil, #jmb_jawatan_wakil, #jmb_no_akaun_pukal, #jmb_no_meter_pukal, #jmb_tarikh_pengesahan').attr('disabled', true);
            } else {
                $('.no_akaun_air').hide('slow');
                $('#no_akaun_air').val('');
                $('#no_akaun_air').attr('disabled', true);

                $('.maklumat_jmb').show('slow');
                $('#jmb_nama, #jmb_emel, #jmb_no_pendaftaran, #jmb_no_tel, #jmb_nama_wakil, #jmb_jawatan_wakil, #jmb_no_akaun_pukal, #jmb_no_meter_pukal, #jmb_tarikh_pengesahan').attr('disabled', false);
            }
        });
    });

    function getIc(x) {
        if(x == 1) {
            $("#ic").inputmask({ mask: "999999999999", placeholder: "" });
        } else {
            $("#ic").inputmask("Regex");
        }
        checkDuplicate($("#ic").val(),'ic');
    }

    function emailFormat() {
        $('.loading_email').hide();
        $('.success_email').hide();
        $('.format_email').hide();
        $('.exist_email').hide();

        if ($('input[name="email"]').val() != '') {
            var format_email = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

            if($('input[name="email"]').val().match(format_email)) {
                $('.format_email').hide();
                checkDuplicate($('input[name="email"]').val(), 'email');
            } else if($('input[name="email"]').val() == '') {
                $('.format_email').hide();
            } else {
                $('.format_email').show();
                $('input[name="email"]').focus();
            }
        }
    }

    function checkEmail(x) {
        var format_email = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

        x.next().remove();

        if(x.val().match(format_email)) {
            x.next().remove();
        } else if(x.val() == '') {
            x.next().remove();
        } else {
            x.after("<small style='color: #f4516c'>Sila masukkan format emel yang betul.</small>");
            x.focus();
        }
    }

    function checkDuplicate(x,y) {
        if(x) {
            // if email type wakil then no duplicate check
            if (y == 'email' && $('select[name="email_type"] option:selected').val() == 'Wakil') {
                $('.loading_'+y).hide();
                $('.exist_'+y).hide();
                $('.length_'+y).hide();
                $('.success_'+y).show();
                return;
            } else {
                var ic_type = $('#ic_type option:selected').val();
                var data = {
                    ic_type: ic_type,
                    _token: '{{ csrf_token() }}',
                    field: y,
                    value: x
                }
                $('.loading_'+y).show();
                $('.exist_'+y).hide();
                $('.length_'+y).hide();
                $('.success_'+y).hide();

                $.ajax({
                    url: '{{ url('admin/permohonan/sade/check') }}',
                    type: 'POST',
                    data: data,
                    success: function(response) {
                        if(response.status == 'error') {
                            $('.exist_'+y).show();
                            // $('input[name="'+y+'"]').focus();
                        } else if(response.status == 'length') {
                            $('.length_'+y).show();
                            // $('input[name="'+y+'"]').focus();
                        } else {
                            $('.success_'+y).show();
                        }
                        $('.loading_'+y).hide();
                    },
                    error: function(response) {
                        $.alert({
                            type: 'red',
                            title: 'Whoops, server error!',
                            content: 'Please try again or contact system admin.',
                            typeAnimated: true,
                            icon: 'fa fa-warning',
                            columnClass: 'col-md-6 col-md-offset-3',
                        });
                    }
                });
            }
        } else {
            $('.loading_'+y).hide();
            $('.exist_'+y).hide();
            $('.digit_'+y).hide();
            $('.success_'+y).hide();
            $('.length_'+y).hide();
        }
    }

    function validate() {
        if($('input[name="jenis_meter_air"]:checked').val() == 'Individu') {
            if($('#no_akaun_air').val() == ''
                || $('input[name="nama"]').val() == ''
                || $('input[name="ic"]').val() == ''
                || ($('input[name="email"]').val() == '' && $('input[name="tel_bimbit"]').val() == '' )
                || $('select[name="status_perkahwinan"] option:selected').val() == ''
                || $('input[name="pendapatan"]').val() == ''
                || $('input[name="alamat_1"]').val() == ''
                || $('input[name="poskod"]').val() == ''
                || $('select[name="negeri"] option:selected').val() == '') {

                error();
                return;
            }
        } else {
            if($('input[name="nama"]').val() == ''
                || $('input[name="ic"]').val() == ''
                || ($('input[name="email"]').val() == '' && $('input[name="tel_bimbit"]').val() == '' )
                || $('select[name="status_perkahwinan"] option:selected').val() == ''
                || $('input[name="pendapatan"]').val() == ''
                || $('input[name="alamat_1"]').val() == ''
                || $('input[name="poskod"]').val() == ''
                || $('select[name="negeri"] option:selected').val() == ''
                || $('#jmb_nama').val() == ''
                || $('#jmb_emel').val() == ''
                || $('#jmb_no_pendaftaran').val() == ''
                || $('#jmb_no_tel').val() == ''
                || $('#jmb_nama_wakil').val() == ''
                || $('#jmb_jawatan_wakil').val() == ''
                || $('#jmb_no_akaun_pukal').val() == ''
                || $('#jmb_no_meter_pukal').val() == ''
                || $('#jmb_tarikh_pengesahan').val() == '') {

                error();
                return;
            }
        }

        // Semak Maklumat Pasangan
        if ($('.maklumat_pasangan').is(":visible") || $('select[name="status_perkahwinan"] option:selected').val() == 'Berkahwin') {
            var isError = false;

            if($('input[name="pasangan_ic[]"]').length == 0) {
                isError = true;
                $('.ic_pasangan_wajib').show();
            }

            $('input[name="pasangan_ic[]"]').each(function(i,v){
                if ($(this).val() == '') {
                    isError = true;
                    $('.ic_pasangan_wajib').show();
                } else {
                    $('.ic_pasangan_wajib').hide();
                }
            });
            $('input[name="pasangan_nama[]"]').each(function(i,v){
                if ($(this).val() == '') {
                    isError = true;
                    $('.nama_pasangan_wajib').show();
                } else {
                    $('.nama_pasangan_wajib').hide();
                }
            });
            $('input[name="pasangan_pendapatan[]"]').each(function(i,v){
                if ($(this).val() == '') {
                    isError = true;
                    $('.pendapatan_pasangan_wajib').show();
                } else {
                    $('.pendapatan_pasangan_wajib').hide();
                }
            });
            if (isError) {
                error();
                return;
            }
        }

        // check duplicate
        if ($(".success_no_akaun_air").is(":hidden") || $(".success_ic").is(":hidden")) {
            $.confirm({
                title: 'Maklumat semakan belum selesai',
                content: 'Sila pastikan semakan telah OK dan cuba lagi.',
                icon: 'fa fa-warning',
                type: 'red',
            buttons: { ok: { btnClass: 'btn-red' } }
            });
            return;
        } else if ($('input[name="email"]').val() != '' && $(".success_email").is(":hidden")) {
            $.confirm({
                title: 'Maklumat semakan belum selesai',
                content: 'Sila pastikan semakan Email telah OK dan cuba lagi.',
                icon: 'fa fa-warning',
                type: 'red',
            buttons: { ok: { btnClass: 'btn-red' } }
            });
            return;
        }  else if ($('input[name="tel_bimbit"]').val() != '' && $(".success_tel_bimbit").is(":hidden")) {
            $.confirm({
                title: 'Maklumat semakan belum selesai',
                content: 'Sila pastikan semakan No Telefon Bimbit telah OK dan cuba lagi.',
                icon: 'fa fa-warning',
                type: 'red',
            buttons: { ok: { btnClass: 'btn-red' } }
            });
            return;
        } else {
            showRumusan();
        }

        function error() {
            $.confirm({
                title: 'Maklumat tidak lengkap?',
                content: 'Sila semak permohonan anda dahulu.',
                icon: 'fa fa-warning',
                type: 'red',
                buttons: { ok: { btnClass: 'btn-red' } }
            });
        }
    }

    function showRumusan() {
        // Maklumat Peribadi
        $('#m_nama').val($('input[name="nama"]').val());
        $('#m_ic').val($('input[name="ic"]').val());
        $('#m_email').val($('input[name="email"]').val());
        $('#m_tel_bimbit').val($('input[name="tel_bimbit"]').val());
        $('#m_status_perkahwinan').val($('select[name="status_perkahwinan"] option:selected').val());
        $('#m_pendapatan').val($('input[name="pendapatan"]').val());
        $('#m_jenis_meter_air').val($('input[name="jenis_meter_air"]:checked').val());
        $('#m_no_akaun_air').val($('input[name="no_akaun_air"]').val());

        // Maklumat Pasangan
        var pasangan_ic = [],
            pasangan_nama = [],
            pasangan_emel = [],
            pasangan_no_tel_bimbit = [],
            pasangan_pendapatan = [],
            data = [],
            html = '';

        $('input[name="pasangan_ic[]"]').each(function(i,v){
            pasangan_ic.push($(this).val());
        });
        $('input[name="pasangan_nama[]"]').each(function(i,v){
            pasangan_nama.push($(this).val());
        });
        $('input[name="pasangan_emel[]"]').each(function(i,v){
            pasangan_emel.push($(this).val());
        });
        $('input[name="pasangan_no_tel_bimbit[]"]').each(function(i,v){
            pasangan_no_tel_bimbit.push($(this).val());
        });
        $('input[name="pasangan_pendapatan[]"]').each(function(i,v){
            pasangan_pendapatan.push($(this).val());
        });

        for(x=0;x<pasangan_ic.length;x++) {
            data.push({
                pasangan_ic: pasangan_ic[x],
                pasangan_nama: pasangan_nama[x],
                pasangan_emel: pasangan_emel[x],
                pasangan_no_tel_bimbit: pasangan_no_tel_bimbit[x],
                pasangan_pendapatan: pasangan_pendapatan[x],
            })
        }

        $('#m_pasangan_input').html('');
        data.forEach(function(d) {
            html =
            '<tr>'+
                '<td>'+
                    '<input type="text" class="form-control m-input" value="'+d.pasangan_ic+'" disabled>'+
                '</td>'+
                '<td>'+
                    '<input type="text" class="form-control m-input" value="'+d.pasangan_nama+'" disabled>'+
                '</td>'+
                '<td>'+
                    '<input type="text" class="form-control m-input" value="'+d.pasangan_emel+'" disabled>'+
                '</td>'+
                '<td>'+
                    '<input type="text" class="form-control m-input" value="'+d.pasangan_no_tel_bimbit+'" disabled>'+
                '</td>'+
                '<td>'+
                    '<input type="number" class="form-control m-input" value="'+d.pasangan_pendapatan+'" disabled>'+
                '</td>'+
            '</tr>';

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

        // Maklumat Pendapatan
        $('#m_pendapatan_pemohon').val($('input[name="pendapatan_pemohon"]').val());
        $('#m_pendapatan_pasangan').val($('input[name="pendapatan_pasangan"]').val());
        $('#m_pendapatan_isi_rumah').val($('input[name="pendapatan_isi_rumah"]').val());

        // Maklumat Tempat Tinggal
        $('#m_status_pemilikan').val($('input[name="status_pemilikan"]:checked').val());
        $('#m_alamat').html([
            $('input[name="alamat_1"]').val()+', ',
            $('input[name="alamat_2"]').val() ? $('input[name="alamat_2"]').val()+', ' : '',
            $('input[name="alamat_3"]').val() ? $('input[name="alamat_3"]').val()+', ' : '',
            $('input[name="poskod"]').val()+', ',
            $('#negeri option:selected').val()
        ]);

        // Maklumat JMB
        $('#m_jmb_nama').val($('input[name="jmb_nama"]').val());
        $('#m_jmb_emel').val($('input[name="jmb_emel"]').val());
        $('#m_jmb_no_pendaftaran').val($('input[name="jmb_no_pendaftaran"]').val());
        $('#m_jmb_no_tel').val($('input[name="jmb_no_tel"]').val());
        $('#m_jmb_nama_wakil').val($('input[name="jmb_nama_wakil"]').val());
        $('#m_jmb_jawatan_wakil').val($('input[name="jmb_jawatan_wakil"]').val());
        $('#m_jmb_no_akaun_pukal').val($('input[name="jmb_no_akaun_pukal"]').val());
        $('#m_jmb_no_meter_pukal').val($('input[name="jmb_no_meter_pukal"]').val());
        $('#m_jmb_tarikh_pengesahan').val($('input[name="jmb_tarikh_pengesahan"]').val());

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

    function total() {
        var pemohon = $('input[name="pendapatan"]').val() == '' ? 0 : $('input[name="pendapatan"]').val();
        var pasangan = 0;
        var total = 0;

        $('.pasangan_pendapatan').each(function(){
            pasangan += +$(this).val();
        });

        total = parseFloat(pemohon) + parseFloat(pasangan);

        $('input[name="pendapatan_pemohon"]').val(parseFloat(pemohon).toFixed(2));
        $('input[name="pendapatan_pasangan"]').val(parseFloat(pasangan).toFixed(2));
        $('input[name="pendapatan_isi_rumah"]').val(total.toFixed(2));
    }

    function getStatus(x) {
        if(x == 'Berkahwin') {
            $('.maklumat_pasangan').show('slow');
            $('#pasangan_ic, #pasangan_nama, #pasangan_emel, #pasangan_no_tel, #pasangan_pendapatan').attr('disabled', false);
        } else {
            $('.maklumat_pasangan').hide('slow');
            $('#pasangan_input tr:gt(0)').remove();
            $('#pasangan_ic, #pasangan_nama, #pasangan_emel, #pasangan_no_tel, #pasangan_pendapatan').val('');
            $('#pasangan_ic, #pasangan_nama, #pasangan_emel, #pasangan_no_tel, #pasangan_pendapatan').attr('disabled', true);
        }
    }

    function pasangan_add() {
        var html =
            '<tr>'+
                '<td>'+
                    '<input type="text" class="form-control m-input pasangan_ic" name="pasangan_ic[]">'+
                '</td>'+
                '<td>'+
                    '<input type="text" class="form-control m-input nama" name="pasangan_nama[]" data-inputmask-regex="([a-zA-Z@/ ])+/g">'+
                '</td>'+
                '<td>'+
                    '<input type="text" class="form-control m-input" name="pasangan_emel[]" onblur="checkEmail($(this))">'+
                '</td>'+
                '<td>'+
                    '<input type="text" class="form-control m-input pasangan_no_tel" name="pasangan_no_tel_bimbit[]">'+
                '</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 pasangan_pendapatan" name="pasangan_pendapatan[]" placeholder="Jika ada" oninput="total()">'+
                    '</div>'+
                '</td>'+
                '<td>'+
                    '<div class="btn-sm btn btn-warning m-btn m-btn--icon m-btn--pill" onclick="pasangan_delete($(this))">'+
                        '<span>'+
                            '<i class="la la-trash-o"></i>'+
                            '<span>Padam</span>'+
                        '</span>'+
                    '</div>'+
                '</td>'+
            '</tr>';

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

        assign_js('pasangan');
    }

    function pasangan_delete(x) {
        x.closest('tr').remove();
        total();
    }

    function assign_js(x) {
        if(x == 'pasangan') {
            $(".nama").inputmask("Regex");

            $(".pasangan_ic").inputmask({
                mask: "999999999999",
                placeholder: ""
            });

            $(".pasangan_no_tel").inputmask({
                mask: "9999999999999",
                placeholder: ""
            });
        }
    }

    function submitForm() {

        if($('#m_akuan_1:checked').val() != 'true' || $('#m_akuan_2:checked').val() != 'true') {
            error();
        } else {

            $('input[name="akuan_1"]').val($('#m_akuan_1:checked').val());
            $('input[name="akuan_2"]').val($('#m_akuan_2:checked').val());

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

        function error() {
            $.confirm({
                title: 'Maklumat tidak lengkap?',
                content: 'Sila tanda perakuan pemohon sebelum hantar pemohonan.',
                icon: 'fa fa-warning',
                type: 'red',
                buttons: {
                    ok: {
                        btnClass: 'btn-red',
                        action: function() {

                        }
                    }
                }
            });
        }
    }

</script>
@endsection