@extends('layouts.app')

@section('title', 'Profile')
@section('profile', 'm-menu__item--active')

@section('content')
<div class="row" style="overflow-x:auto">
    <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">
                            SSIPR Profil
                        </h3>
                    </div>
                </div>
            </div>
            <form id="profile_form" class="m-form m-form--label-align-right" action=" {{ url('profile/update') }}" method="POST">
                @csrf
                <input type="hidden" name="ic_type" value="{{ Auth::user()->ic_type }}">
                <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; display:block; float:right; padding-left:5px;">*</span> Nama:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input nama" name="nama" placeholder="Sila masukan nama" value="{{ Auth::user()->name }}" data-inputmask-regex="([a-zA-Z@/ ])+/g">
                            </div>
                            <label class="col-lg-2 col-form-label">
                            <span style="color: red; display:block; float:right; padding-left:5px;">*</span> No. Kad Pengenalan:
                            </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 }}" readonly>
                                    <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="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                            <span style="color: red; display:block; float:right; padding-left:5px;">*</span> Jantina:
                            </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="jantina" value="lelaki" @if($profile && $profile->jantina == "lelaki") checked @endif onclick="getJantina($(this).val())">
                                        Lelaki
                                        <span></span>
                                    </label>
                                    <label class="m-radio m-radio--solid m-radio--brand">
                                        <input type="radio" name="jantina" value="perempuan" @if($profile && $profile->jantina == "perempuan") checked @endif onclick="getJantina($(this).val())">
                                        Perempuan
                                        <span></span>
                                    </label>
                                </div>
                            </div>
                            <label class="col-lg-2 col-form-label">
                            <span style="color: red; display:block; float:right; padding-left:5px;">*</span> 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 pendapatan" name="pendapatan" value="{{ $profile ? number_format($profile->pendapatan, 2) : '' }}" placeholder="Sila masukan pendapatan bulanan">
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                            <span style="color: red; display:block; float:right; padding-left:5px;">*</span> No. Telefon Bimbit:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="tel_bimbit" name="tel_bimbit" value="{{ $profile->tel_bimbit ?? '' }}" placeholder="Sila masukan no tel bimbit">
                            </div>
                            <label class="col-lg-2 col-form-label">
                                No. Telefon Rumah:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id="tel_rumah" name="tel_rumah" value="{{ $profile->tel_rumah ?? '' }}" placeholder="Sila masukan no tel rumah">
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                            <span style="color: red; display:block; float:right; padding-left:5px;">*</span> Tarikh Lahir: 
                            </label>
                            <div class="col-lg-4">
                                <input type="date" class="form-control m-input" id="tarikh_lahir" name="tarikh_lahir" value="{{ $profile->tarikh_lahir ?? '' }}" placeholder="dd/mm/yyyy">
                            </div>
                            <label class="col-lg-2 col-form-label">
                            <span style="color: red; display:block; float:right; padding-left:5px;">*</span> Tempat Lahir:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" name="tempat_lahir" value="{{ $profile->tempat_lahir ?? '' }}" placeholder="Sila masukan tempat lahir">
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                            <span style="color: red; display:block; float:right; padding-left:5px;">*</span> Agama:
                            </label>
                            <div class="col-lg-4">
                                <select class="form-control m-input" id="agama" name="agama" onchange="getAgama($(this).val())">
                                    <option value="" hidden selected>Sila pilih agama</option>
                                    <option value="Islam" @if($profile && $profile->agama == "Islam") selected @endif>Islam</option>
                                    <option value="Kristian" @if($profile && $profile->agama == "Kristian") selected @endif>Kristian</option>
                                    <option value="Hindu" @if($profile && $profile->agama == "Hindu") selected @endif>Hindu</option>
                                    <option value="Buddha" @if($profile && $profile->agama == "Buddha") selected @endif>Buddha</option>
                                    <option value="Lain-lain" @if($profile && $profile->agama == "Lain-lain") selected @endif>Lain-lain</option>
                                </select>
                                <div class="mt-3 agama_lain">
                                    <input type="text" class="form-control m-input" name="agama_lain" value="{{ $profile->agama_lain ?? '' }}" placeholder="Sila nyatakan">
                                </div>
                            </div>
                            <label class="col-lg-2 col-form-label">
                            <span style="color: red; display:block; float:right; padding-left:5px;">*</span> Taraf Pendidikan:
                            </label>
                            <div class="col-lg-4">
                                <select class="form-control m-input" id="taraf_pendidikan" name="taraf_pendidikan" onchange="getPendidikan($(this).val())">
                                    <option value="" hidden selected>Sila pilih taraf pendidikan</option>
                                    <option value="Rendah" @if($profile && $profile->taraf_pendidikan == "Rendah") selected @endif>Rendah</option>
                                    <option value="Menengah" @if($profile && $profile->taraf_pendidikan == "Menengah") selected @endif>Menengah</option>
                                    <option value="Universiti" @if($profile && $profile->taraf_pendidikan == "Universiti") selected @endif>Universiti</option>
                                    <option value="Lain-lain" @if($profile && $profile->taraf_pendidikan == "Lain-lain") selected @endif>Lain-lain</option>
                                </select>
                                <div class="mt-3 taraf_pendidikan_lain">
                                    <input type="text" class="form-control m-input" name="taraf_pendidikan_lain" value="{{ $profile->taraf_pendidikan_lain ?? '' }}" placeholder="Sila nyatakan">
                                </div>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                            <span style="color: red; display:block; float:right; padding-left:5px;">*</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 selected>Sila pilih status perkahwinan</option>
                                    <option value="Bujang" @if($profile && $profile->status_perkahwinan == "Bujang") selected @endif>Bujang</option>
                                    <option value="Berkahwin" @if($profile && $profile->status_perkahwinan == "Berkahwin") selected @endif>Berkahwin</option>
                                    <option value="Duda/Janda" @if($profile && $profile->status_perkahwinan == "Duda/Janda") selected @endif>Duda/Janda</option>
                                </select>
                            </div>
                            <label class="col-lg-2 col-form-label">
                            <span style="color: red; display:block; float:right; padding-left:5px;">*</span> Bangsa:
                            </label>
                            <div class="col-lg-4">
                                <select class="form-control m-input" id="bangsa" name="bangsa">
                                    <option value="" hidden selected>Sila pilih bangsa</option>
                                    @foreach (App\UmumKaum::all() as $kaum)
                                        <option value="{{ $kaum->nama }}" @if($profile && $profile->bangsa == $kaum->nama) selected @endif>{{ $kaum->nama }}</option>
                                    @endforeach
                                </select>
                            </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; display:block; float:right; padding-left:5px;">*</span> Alamat:
                            </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; display:block; float:right; padding-left:5px;">*</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; display:block; float:right; padding-left:5px;">*</span> Bandar
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" name="bandar" value="{{ $profile->bandar ?? '' }}" placeholder="Sila masukan bandar">
                            </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>
                            <label class="col-lg-2 col-form-label">
                            <span style="color: red; display:block; float:right; padding-left:5px;">*</span> Daerah:
                            </label>
                            <div class="col-lg-4">
                                <select class="form-control m-input" id="daerah" name="daerah">
                                    <option value="" hidden selected>Sila pilih daerah</option>
                                    @foreach (App\UmumDaerah::all() as $daerah)
                                        <option value="{{ $daerah->nama }}" @if($profile && $profile->daerah == $daerah->nama) selected @endif>{{ $daerah->nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                            <span style="color: red; display:block; float:right; padding-left:5px;">*</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 && $profile->negeri == "Johor") selected @endif>Johor</option> --}}
                                    {{-- <option value="Kedah" @if($profile && $profile->negeri == "Kedah") selected @endif>Kedah</option> --}}
                                    {{-- <option value="Kelantan" @if($profile && $profile->negeri == "Kelantan") selected @endif>Kelantan</option> --}}
                                    {{-- <option value="Melaka" @if($profile && $profile->negeri == "Melaka") selected @endif>Melaka</option> --}}
                                    {{-- <option value="Negeri Sembilan" @if($profile && $profile->negeri == "Negeri Sembilan") selected @endif>Negeri Sembilan</option> --}}
                                    {{-- <option value="Pahang" @if($profile && $profile->negeri == "Pahang") selected @endif>Pahang</option> --}}
                                    {{-- <option value="Penang" @if($profile && $profile->negeri == "Penang") selected @endif>Penang</option> --}}
                                    {{-- <option value="Perak" @if($profile && $profile->negeri == "Perak") selected @endif>Perak</option> --}}
                                    {{-- <option value="Perlis" @if($profile && $profile->negeri == "Perlis") selected @endif>Perlis</option> --}}
                                    <option value="Selangor" @if($profile && $profile->negeri == "Selangor") selected @endif>Selangor</option>
                                    {{-- <option value="Terengganu" @if($profile && $profile->negeri == "Terengganu") selected @endif>Terengganu</option> --}}
                                    {{-- <option value="Sabah" @if($profile && $profile->negeri == "Sabah") selected @endif>Sabah</option> --}}
                                    {{-- <option value="Sarawak" @if($profile && $profile->negeri == "Sarawak") selected @endif>Sarawak</option> --}}
                                    {{-- <option value="W.P. Kuala Lumpur" @if($profile && $profile->negeri == "W.P. Kuala Lumpur") selected @endif>W.P. Kuala Lumpur</option> --}}
                                    {{-- <option value="W.P. Labuan" @if($profile && $profile->negeri == "W.P. Labuan") selected @endif>W.P. Labuan</option> --}}
                                    {{-- <option value="W.P. Putrajaya" @if($profile && $profile->negeri == "W.P. Putrajaya") selected @endif>W.P. Putrajaya</option> --}}
                                </select>
                            </div>
                            <label class="col-lg-2 col-form-label">
                            <span style="color: red; display:block; float:right; padding-left:5px;">*</span> Tempoh Mastautin:
                            </label>
                            <div class="input-group m-input-group col-lg-4">
                                <input type="text" class="form-control m-input" id="tempoh_mastautin" name="tempoh_mastautin" value="{{ $profile->tempoh_mastautin ?? '' }}" placeholder="Sila masukan tempoh mastautin">
                                <span class="input-group-addon">
                                    Tahun
                                </span>
                            </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. Kad Pengenalan</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>
                                                <small class="pasangan_no_tel_wajib" style="color:#f4516c;display:none;">No Telefon Bimbit Pasangan adalah wajib.</small>
                                            </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 maklumat_anak"></div>
                    <div class="m-form__section m-form__section--last maklumat_anak">
                        <div class="m-form__heading">
                            <h3 class="m-form__heading-title">
                                Maklumat Anak / Jagaan
                            </h3>
                        </div>
                        <div class="form-group m-form__group row">
                            <div class="col-lg-12">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>No. Kad Pengenalan</th>
                                            <th>Nama</th>
                                            <th>Tarikh Lahir</th>
                                            <th>Tempat Lahir</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody id="anak_input">
                                        @foreach($anaks as $anak)
                                            <tr>
                                                <td>
                                                    <input type="text" class="form-control m-input anak_ic" name="anak_ic[]" value="{{ $anak->ic_anak }}" readonly>
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control m-input nama" name="anak_nama[]" value="{{ $anak->nama }}" data-inputmask-regex="([a-zA-Z@/ ])+/g">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control m-input anak_tarikh_lahir" name="anak_tarikh_lahir[]" value="{{ $anak->tarikh_lahir }}" readonly>
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control m-input nama" name="anak_tempat_lahir[]" value="{{ $anak->tempat_lahir }}" data-inputmask-regex="([a-zA-Z@/ ])+/g">
                                                </td>
                                                <td>
                                                    <div class="btn-sm btn btn-danger m-btn m-btn--icon m-btn--pill" onclick="anak_delete({{ $anak->id }},1)">
                                                        <span>
                                                            <i class="la la-trash-o"></i>
                                                            <span>Padam</span>
                                                        </span>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </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="anak_add()">
                                    <span>
                                        <i class="la la-plus"></i>
                                        <span>
                                            Tambah
                                        </span>
                                    </span>
                                </div>
                            </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="submitForm()">
                                    Simpan
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
    var pasangan = {!! json_encode($pasangans->toArray()) !!}
    var anak = {!! json_encode($anaks->toArray()) !!}

    var count_pasangan_max,
        count_pasangan = pasangan.length;

    $(document).ready(() => {

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

        $('.maklumat_pasangan, .maklumat_anak, .agama_lain, .taraf_pendidikan_lain').hide();
        getStatus($('#status_perkahwinan option:selected').val());
        getAgama($('#agama option:selected').val());
        getPendidikan($('#taraf_pendidikan option:selected').val());
        getJantina($('input[name="jantina"]:checked').val());

        assign_js('pasangan');
        assign_js('anak');

        $(".pendapatan").inputmask('Regex', {regex: "^[0-9]{1,9}(\\.\\d{1,2})?$"});

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

        $("#tempoh_mastautin").inputmask({
            mask: "999",
            placeholder: ""
        });

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

        // $("#tarikh_lahir").daterangepicker({
        //     todayHighlight: !0,
        //     //orientation: "bottom left",
        //     // autoUpdateInput: false,
        //     showDropdowns: true,
        //     singleDatePicker: !0,
        //     locale: {
        //         format: 'YYYY-MM-DD'
        //     },
        //     minDate: new Date('1900/12/01'),
        //     maxDate: new Date('2025/12/31'),
        // });

    });

    function getJantina(x) {
        if(x == 'lelaki') {
            count_pasangan_max = 4;
        } else {
            count_pasangan_max = 1;

            if($('#pasangan_input tr').length != count_pasangan_max) {
                for(x=$('#pasangan_input tr').length; x > count_pasangan_max; x--) {
                    pasangan_delete($('#pasangan_input tr').eq(x-1),0);
                }
            }
        }
    }

    function checkEmail(x) {
        var email_format = /^(([^<>()\[\]\\.,;:\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(email_format)) {
            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 getStatus(x) {
        if(x == 'Berkahwin') {
            $('.maklumat_pasangan, .maklumat_anak').show('slow');
            $('#pasangan_ic, #pasangan_nama, #pasangan_emel, #pasangan_no_tel, #pasangan_pendapatan').attr('disabled', false);
        } else if(x == 'Duda/Janda') {
            if(pasangan.length > 0) {
                $.alert({
                    type: 'red',
                    title: 'Gagal!',
                    content: 'Maklumat pasangan telah wujud dalam rekod. Sila padam maklumat pasangan terlebih dahulu.',
                    typeAnimated: true,
                    icon: 'fa fa-warning',
                });
                $('#status_perkahwinan').val('Berkahwin');
            } else {
                $('.maklumat_anak').show('slow');
                $('.maklumat_pasangan').hide('slow');
                $('#pasangan_ic, #pasangan_nama, #pasangan_emel, #pasangan_no_tel, #pasangan_pendapatan').attr('disabled', true);
            }
        } else {
            if(pasangan.length > 0 || anak.length > 0) {
                $.alert({
                    type: 'red',
                    title: 'Gagal!',
                    content: 'Maklumat pasangan/anak telah wujud dalam rekod. Sila padam maklumat pasangan/anak terlebih dahulu.',
                    typeAnimated: true,
                    icon: 'fa fa-warning',
                });
                $('.maklumat_pasangan, .maklumat_anak').show('slow');
                $('#pasangan_ic, #pasangan_nama, #pasangan_emel, #pasangan_no_tel, #pasangan_pendapatan').attr('disabled', false);
                $('#status_perkahwinan').val('Berkahwin');
            } else {
                $('.maklumat_pasangan, .maklumat_anak').hide('slow');
                $('#pasangan_ic, #pasangan_nama, #pasangan_emel, #pasangan_no_tel, #pasangan_pendapatan').attr('disabled', true);
            }
        }
    }

    function getAgama(x) {
        if(x == 'Lain-lain') {
            $('.agama_lain').show('slow');
            // $('.agama_lain input').focus();
        } else {
            $('.agama_lain').hide('slow');
            $('.agama_lain input').val('');
        }
    }

    function getPendidikan(x) {
        if(x == 'Lain-lain') {
            $('.taraf_pendidikan_lain').show('slow');
            // $('.taraf_pendidikan_lain input').focus();
        } else {
            $('.taraf_pendidikan_lain').hide('slow');
            $('.taraf_pendidikan_lain input').val('');
        }
    }

    function pasangan_add() {
        if(count_pasangan < count_pasangan_max) {
            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">'+
                        '</div>'+
                    '</td>'+
                    '<td>'+
                        '<div class="btn-sm btn btn-warning m-btn m-btn--icon m-btn--pill" onclick="pasangan_delete($(this),0)">'+
                            '<span>'+
                                '<i class="la la-trash-o"></i>'+
                                '<span>Padam</span>'+
                            '</span>'+
                        '</div>'+
                    '</td>'+
                '</tr>';

            $('#pasangan_input').append(html);
            count_pasangan = count_pasangan + 1;

            assign_js('pasangan');
        } else {
            $.alert({
                type: 'red',
                title: 'Maaf!',
                content: 'Hanya '+count_pasangan_max+' sahaja maklumat pasangan yang diperlukan.',
                typeAnimated: true,
                icon: 'fa fa-warning',
                columnClass: 'col-md-6 col-md-offset-3',
            });
        }

    }

    function pasangan_delete(x,y) {
        if(y == 0) {
            x.closest('tr').remove();
            count_pasangan = count_pasangan - 1;
        } else if(y == 1) {

            $.confirm({
                title: 'Padam maklumat pasangan?',
                content: 'Anda pasti untuk teruskan?',
                icon: 'fa fa-warning',
                columnClass: 'col-md-6 col-md-offset-3',
                type: 'red',
                buttons: {
                    padam: {
                        btnClass: 'btn-red',
                        action: function() {
                            var data = {
                                _token: '{{ csrf_token() }}',
                                pasangan_id: x
                            };

                            $.ajax({
                                url: '{{ url('profile/delete') }}',
                                type: 'POST',
                                data: data,
                                success: function(response) {
                                    if(response.status == 'success') {
                                        $.notify({
                                            title: 'Berjaya',
                                            message: '<b>'+response.message+'</b>',
                                            icon: 'icon la la-check',
                                        },{
                                            type: 'success',
                                            allow_dismiss: true,
                                            newest_on_top: true,
                                            spacing: 10,
                                            timer: 5000,
                                            placement: {
                                                from: 'top',
                                                align: 'right',
                                            },
                                            offset: {
                                                x: 30,
                                                y: 30,
                                            },
                                            delay: 1000,
                                            z_index: 10000,
                                            animate: {
                                                enter: 'animated bounce',
                                                exit: 'animated bounce',
                                            }
                                        });

                                        setTimeout(function(){ location.reload(); }, 2000);

                                    } else {
                                        $.alert(response.message);
                                    }
                                },
                                error: function(response) {
                                    $.alert(response.message);
                                }
                            });
                        }
                    },
                    kembali: {
                        btnClass: 'btn-grey',
                        action: function() {

                        }
                    }
                }
            });

        }
    }

    function anak_add() {
        var html =
            '<tr>'+
                '<td>'+
                    '<input type="text" class="form-control m-input anak_ic" name="anak_ic[]">'+
                '</td>'+
                '<td>'+
                    '<input type="text" class="form-control m-input nama" name="anak_nama[]" data-inputmask-regex="([a-zA-Z@/ ])+/g">'+
                '</td>'+
                '<td>'+
                    '<input type="text" class="form-control m-input anak_tarikh_lahir" name="anak_tarikh_lahir[]" readonly>'+
                '</td>'+
                '<td>'+
                    '<input type="text" class="form-control m-input nama" name="anak_tempat_lahir[]" data-inputmask-regex="([a-zA-Z@/ ])+/g">'+
                '</td>'+
                '<td>'+
                    '<div class="btn-sm btn btn-warning m-btn m-btn--icon m-btn--pill" onclick="anak_delete($(this),0)">'+
                        '<span>'+
                            '<i class="la la-trash-o"></i>'+
                            '<span>Padam</span>'+
                        '</span>'+
                    '</div>'+
                '</td>'+
            '</tr>';

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

        assign_js('anak');
    }

    function anak_delete(x,y) {
        if(y == 0) {
            x.closest('tr').remove();
        } else if(y == 1) {

            $.confirm({
                title: 'Padam maklumat anak?',
                content: 'Anda pasti untuk teruskan?',
                icon: 'fa fa-warning',
                columnClass: 'col-md-6 col-md-offset-3',
                type: 'red',
                buttons: {
                    padam: {
                        btnClass: 'btn-red',
                        action: function() {
                            var data = {
                                _token: '{{ csrf_token() }}',
                                anak_id: x
                            };

                            $.ajax({
                                url: '{{ url('profile/delete') }}',
                                type: 'POST',
                                data: data,
                                success: function(response) {
                                    if(response.status == 'success') {
                                        $.notify({
                                            title: 'Berjaya',
                                            message: '<b>'+response.message+'</b>',
                                            icon: 'icon la la-check',
                                        },{
                                            type: 'success',
                                            allow_dismiss: true,
                                            newest_on_top: true,
                                            spacing: 10,
                                            timer: 5000,
                                            placement: {
                                                from: 'top',
                                                align: 'right',
                                            },
                                            offset: {
                                                x: 30,
                                                y: 30,
                                            },
                                            delay: 1000,
                                            z_index: 10000,
                                            animate: {
                                                enter: 'animated bounce',
                                                exit: 'animated bounce',
                                            }
                                        });

                                        setTimeout(function(){ location.reload(); }, 2000);

                                    } else {
                                        $.alert(response.message);
                                    }
                                },
                                error: function(response) {
                                    $.alert(response.message);
                                }
                            });
                        }
                    },
                    kembali: {
                        btnClass: 'btn-grey',
                        action: function() {

                        }
                    }
                }
            });

        }
    }

    function assign_js(x) {

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

        if(x == 'pasangan') {
            $(".pasangan_ic").inputmask({
                mask: "999999999999",
                placeholder: ""
            });

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

        if(x == 'anak') {
            $(".anak_ic").inputmask({
                mask: "999999999999",
                placeholder: ""
            });

            $(".anak_tarikh_lahir").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>'
                },
            });
        }
    }

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

        // Semak Maklumat Pasangan
        if ($('.maklumat_pasangan').is(":visible")) {
            var isError = false;
            $('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();
                }
            });
            $('input[name="pasangan_no_tel[]"]').each(function(i,v){
                if ($(this).val() == '') {
                    isError = true;
                    $('.pasangan_no_tel_wajib').show();
                } else {
                    $('.pasangan_no_tel_wajib').hide();
                }
            });
            if (isError) {
                error();
                return;
            }
        }

        $.confirm({
            title: 'Kemas kini profil?',
            content: 'Anda pasti untuk teruskan?',
            icon: 'fa fa-spinner fa-spin',
            type: 'green',
            buttons: {
                simpan: {
                    btnClass: 'btn-green',
                    action: function() {
                        $('#profile_form').submit();
                    }
                },
                kembali: {
                    btnClass: 'btn-red',
                    action: function() {

                    }
                }
            }
        });
    }
</script>
@endsection