@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('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 }}</h3>
                    </div>
                </div>
            </div>
            <form id="permohonan_form" class="m-form m-form--label-align-right" action="{{ url('rakyat/daftar') }}" method="POST">
                @csrf
                <input type="hidden" name="ipr" value="{{ $ipr->name }}">
                <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 ?? '' }}" max="10" onchange="checkDuplicate($(this).val(), 'no_akaun_air')">
                                <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">Nama:</label>
                            <div class="col-lg-4"><input type="text" class="form-control m-input" name="nama" placeholder="Sila masukan nama" value="{{ Auth::user()->name }}" readonly></div>
                            <label class="col-lg-2 col-form-label">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" value="{{ Auth::user()->ic_type }}">
                                    <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" name="ic" placeholder="Sila masukan No. Identiti" value="{{ Auth::user()->username }}" readonly>
                            </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>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label"><span style="color: red">* </span>E-mel:</label>
                            <div class="col-lg-4"><input type="text" class="form-control m-input" name="email" value="{{ Auth::user()->email }}" placeholder="Sila masukan emel" readonly></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" name="tel_bimbit" value="{{ $profile->tel_bimbit }}" placeholder="Sila masukan no tel bimbit" readonly></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="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">
                            <label class="col-lg-2 col-form-label">Status Perkahwinan:</label>
                            <div class="col-lg-4"><input type="text" class="form-control m-input" name="status_perkahwinan" value="{{ $profile->status_perkahwinan }}" placeholder="Sila masukan status perkahwinan" readonly></div>
                            <label class="col-lg-2 col-form-label">Pendapatan Bulanan:</label>
                            <div class="input-group m-input-group col-lg-4">
                                <span class="input-group-addon">RM</span>
                                <input type="text" class="form-control m-input" name="pendapatan" value="{{ $profile->pendapatan }}" placeholder="Sila masukan pendapatan bulanan" readonly>
                            </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="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" value="{{ $profile->pendapatan }}" 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>
                                @php $total_pasangan = 0; foreach($pasangans as $pasangan) { $total_pasangan += $pasangan->pendapatan; } @endphp
                                <input type="number" class="form-control m-input" name="pendapatan_pasangan" value="{{ $total_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" value="{{ $profile->pendapatan + $total_pasangan }}" 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">
                            <label class="col-lg-2 col-form-label"><span style="color: red">* </span>Alamat
                                <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 text-info' style='font-weight: 500'>Alamat adalah seperti yang tertera di dalam bil air</span>">
                                </i>
                            :</label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" name="alamat_1" value="{{ $profile->alamat_1 }}" placeholder="Sila masukan alamat">
                            </div>
                            <label class="col-lg-2 col-form-label"><span style="color: red">* </span>Poskod:</label>
                            <div class="col-lg-4"><input type="text" class="form-control m-input" id="poskod" value="{{ $profile->poskod }}" name="poskod" placeholder="Sila masukan poskod"></div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label"></label>
                            <div class="col-lg-4"><input type="text" class="form-control m-input" name="alamat_2" value="{{ $profile->alamat_2 }}" placeholder="Sila masukan alamat"></div>
                            <label class="col-lg-2 col-form-label"><span style="color: red">* </span>Negeri:</label>
                            <div class="col-lg-4">
                                <select class="form-control m-input" id="negeri" name="negeri">
                                    <option value="" hidden selected>Sila pilih negeri</option>
                                    <option value="Johor" @if($profile->negeri == "Johor") selected @endif>Johor</option>
                                    <option value="Kedah" @if($profile->negeri == "Kedah") selected @endif>Kedah</option>
                                    <option value="Kelantan" @if($profile->negeri == "Kelantan") selected @endif>Kelantan</option>
                                    <option value="Melaka" @if($profile->negeri == "Melaka") selected @endif>Melaka</option>
                                    <option value="Negeri Sembilan" @if($profile->negeri == "Negeri Sembilan") selected @endif>Negeri Sembilan</option>
                                    <option value="Pahang" @if($profile->negeri == "Pahang") selected @endif>Pahang</option>
                                    <option value="Penang" @if($profile->negeri == "Penang") selected @endif>Penang</option>
                                    <option value="Perak" @if($profile->negeri == "Perak") selected @endif>Perak</option>
                                    <option value="Perlis" @if($profile->negeri == "Perlis") selected @endif>Perlis</option>
                                    <option value="Selangor" @if($profile->negeri == "Selangor") selected @endif>Selangor</option>
                                    <option value="Terengganu" @if($profile->negeri == "Terengganu") selected @endif>Terengganu</option>
                                    <option value="Sabah" @if($profile->negeri == "Sabah") selected @endif>Sabah</option>
                                    <option value="Sarawak" @if($profile->negeri == "Sarawak") selected @endif>Sarawak</option>
                                    <option value="W.P. Kuala Lumpur" @if($profile->negeri == "W.P. Kuala Lumpur") selected @endif>W.P. Kuala Lumpur</option>
                                    <option value="W.P. Labuan" @if($profile->negeri == "W.P. Labuan") selected @endif>W.P. Labuan</option>
                                    <option value="W.P. Putrajaya" @if($profile->negeri == "W.P. Putrajaya") selected @endif>W.P. Putrajaya</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label"></label>
                            <div class="col-lg-4"><input type="text" class="form-control m-input" name="alamat_3" value="{{ $profile->alamat_3 }}" placeholder="Sila masukan alamat"></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>
                        </div>
                        <div class="form-group m-form__group row">
                            <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. 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>
                </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>
                                <a href="{{ url('cluster/kebajikan') }}" type="reset" class="btn btn-secondary">Kembali</a>
                            </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_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">
                            <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. Telefon JMB / MC</label>
                            <input type="text" class="form-control" id="m_jmb_no_tel" 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(() => {
        $('.maklumat_jmb').hide();

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

        checkDuplicate($('input[name="no_akaun_air"]').val(), 'no_akaun_air');
        checkDuplicate($('input[name="email"]').val(), 'email');
        checkDuplicate($('input[name="ic"]').val(), 'ic');
        checkDuplicate($('input[name="tel_bimbit"]').val(), 'tel_bimbit');

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

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

        $("#jmb_no_tel").inputmask({
            mask: "9999999999999",
            placeholder: ""
        });
        
        getStatus("{{ $profile->status_perkahwinan }}");
    });

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

                $('.maklumat_jmb').hide('slow');
                $('#jmb_emel, #jmb_nama, #jmb_no_tel').attr('disabled', true);
            } else {
                $('.no_akaun_air').hide('slow');
                $('#no_akaun_air').val('');
                $('#no_akaun_air').attr('disabled', true);

                $('.maklumat_jmb').show('slow');
                $('#jmb_emel, #jmb_nama, #jmb_no_tel').attr('disabled', false);
            }
        });
    });

    function checkDuplicate(x,y) {
        if (x) {
            var data = { _token: '{{ csrf_token() }}', field: y, value: x }

            if ('{{ $permohonan->status ?? '' }}' == '3' || '{{ $permohonan->status ?? '' }}' == '-1') {
                data = { _token: '{{ csrf_token() }}', field: y, value: x, id: '{{ $permohonan->id_permohonan ?? '' }}' }   
            }

            $('.loading_'+y).show();
            $('.exist_'+y).hide();
            $('.length_'+y).hide();
            $('.success_'+y).hide();

            $.ajax({
                url: '{{ url('cluster/kebajikan/sade/check') }}',
                type: 'POST',
                data: data,
                success: function(response) {
                    if (response.status == 'error') {
                        $('.exist_'+y).show();
                    } else if (response.status == 'length') {
                        $('.length_'+y).show();
                    } 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();
        }
    }

    function validate() {
        if ($('input[name="status_perkahwinan"]').val() == 'Berkahwin' && $('input[name="pasangan_ic[]"]').length == 0) {
            error();
            return;
        } else if ($('input[name="jenis_meter_air"]:checked').val() == 'Individu') {
            if ($('#no_akaun_air').val() == '') {
                error();
                return;
            }
        } else {
            if ($('#jmb_emel').val() == '' || $('#jmb_nama').val() == '' || $('#jmb_no_tel').val() == '') {
                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="emel"]').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', action: function() {} } }
            });
        }
    }

    function showRumusan() {
        // Maklumat Peribadi
        $('#m_nama').val($('input[name="nama"]').val());
        $('#m_ic').val($('input[name="ic"]').val());
        $('#m_emel').val($('input[name="email"]').val());
        $('#m_tel_bimbit').val($('input[name="tel_bimbit"]').val());
        $('#m_status_perkahwinan').val($('input[name="status_perkahwinan"]').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_emel').val($('input[name="jmb_emel"]').val());
        $('#m_jmb_nama').val($('input[name="jmb_nama"]').val());
        $('#m_jmb_no_tel').val($('input[name="jmb_no_tel"]').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 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() {} } }
            });
        }
    }

    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();
    }
</script>
@endsection