@extends('layouts.app')

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

@section('css')
<style>
   .m-portlet__head-text{
   display: table-cell;
   vertical-align: middle;
   font-size: 1.3rem;
   font-weight: 500;
   font-family: Roboto;
   }
   .m-form .m-form__section.m-form__section--first, .m-form .m-form__section:first-child {
   margin-top: 40px!important;
   }
   .m-form.m-form--group-seperator-dashed .m-form__group {
   border-bottom: 0px!important;
   }
   .m-form.m-form--group-seperator .m-form__group, .m-form.m-form--group-seperator-dashed .m-form__group {
   padding-top: 5px!important;
   padding-bottom: 5px!important;
   }
   .m-body .m-content {
   padding: 15px 15px!important;
   }
   .form-control{
   border: 1px solid #E6E7E8!important;
   overflow: hidden!important;
   border-radius: .40rem!important;
   font-family: sans-serif,Arial!important; 
   color: #575962!important;  
   font-size: 1rem!important;
   line-height: 1.25!important;
   background-color: #fff!important;
   }
   .m-form .m-form__heading .m-form__heading-title {
   color: #716aca;
   font-weight: 500;
   font-size: 1.3rem;
   }
   .form-control:focus,
   .form-control:active{
   border-color: #3273dc!important;;
   box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25)!important;
   }
   .hidethis{
   display:none;
   }
   #alamatsuratmenyurat{
   resize: none;
   }
</style>
@endsection
@section('content')
<form class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed" id="permohonan_form" action="{{ url('admin/permohonan/'.$ipr->name.'/add') }}" method="POST">
@csrf  
   <div class="m-content">
      <div class="row">
         <div class="col-lg-12">
            <div id="cardjomshopping" 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 id="jomshopping" class="m-portlet__head-text"  >
                        {{ $ipr->display_name }}
                        </h3>
                     </div>
                  </div>
               </div>
               <div class="m-portlet__body">
                  <div class="m-form__section m-form__section--first maklumatadun">
                     <div class="m-form__heading">
                        <h3 id="maklumatadun" class="m-form__heading-title">
                           Maklumat Adun:
                        </h3>
                     </div>
                     <div class="form-group m-form__group row">
                        <label class="col-lg-4 col-form-label">
                        <span style="color: red">* </span>
                        Adun Dewan Undangan Negeri(ADUN):
                        </label>
                        <div class="col-lg-4">
                        <select class="form-control m-input" id="pemohon_dun_id" name="adun">
                     <option value="">Sila pilih ...</option>
                       @foreach ($adun as $listbox)
                    <option value="{{$listbox->id}}">{{$listbox->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 Pemohon:
                        </h3>
                     </div>
                     <div class="form-group m-form__group row">
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Nama Penuh:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" id="namapenuhpemohon" name="nama" placeholder="Sila masukkan nama penuh">
                        </div>
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Negeri Kelahiran:
                        </label>
                        <div class="col-lg-4">
                           <select class="form-control m-input" id="negeripemohon" name="negeri_kelahiran" onchange="getNegeri($(this).val())">
                              <option value="" hidden selected>Sila pilih negeri</option>
                              <option value="Johor">Johor</option>
                              <option value="Kedah">Kedah</option>
                              <option value="Kelantan">Kelantan</option>
                              <option value="Melaka">Melaka</option>
                              <option value="Negeri Sembilan">Negeri Sembilan</option>
                              <option value="Pahang">Pahang</option>
                              <option value="Perak">Perak</option>
                              <option value="Perlis">Perlis</option>
                              <option value="Pulau Pinang">Pulau Pinang</option>
                              <option value="Sabah">Sabah</option>
                              <option value="Sarawak">Sarawak</option>
                              <option value="Selangor">Selangor</option>
                              <option value="Terengganu">Terengganu</option>
                              <option value="W.P.Kuala Lumpur">W.P.Kuala Lumpur</option>
                              <option value="W.P.Labuan">W.P.Labuan</option>
                              <option value="W.P.Putrajaya">W.P.Putrajaya</option>
                           </select>
                        </div>
                     </div>
                     <div class="form-group m-form__group row">
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>No Identiti:
                        </label>
                        <div class="input-group m-input-group col-lg-4">
                           <select class="m-input" id="jenisidentiti" name="ic_type" style="font-size: 13px; color: #575962; border-color: #ebedf2; background-color: #f4f5f8">
                              <option value="" hidden selected>Sila pilih jenis</option>
                              <option value="1">No. K/P</option>
                              <option value="2">No. Tentera</option>
                              <option value="3">No. Polis</option>
                           </select>
                           <input type="text" class="form-control m-input" id="noidentiti" name="ic">
                        </div>
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </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>
                              <option value="Melayu">Melayu</option>
                              <option value="Cina">Cina</option>
                              <option value="India">India</option>
                              <option value="Lain-Lain">Lain-Lain</option>
                           </select>
                        </div>
                     </div>
                     <div class="form-group m-form__group row">
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Umur:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" id="umurpemohon" name="umur" placeholder="Sila masukkan umur">
                        </div>
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Tarikh Lahir:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" id="tarikh_lahir" name="tarikh_lahir" value="" placeholder="Sila masukkan tarikh lahir">
                        </div>
                     </div>
                     <div class="form-group m-form__group row">
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </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" id="lelaki" value="lelaki">
                               Lelaki
                              <span></span>
                              </label>
                              <label class="m-radio m-radio--solid m-radio--brand">
                              <input type="radio" name="jantina" id="perempuan" value="perempuan">
                              Perempuan
                              <span></span>
                              </label>
                             </div>
                           </div>
                           <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>No Telefon Bimbit:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" id="telefon" name="tel_bimbit" placeholder="Sila masukkan no telefon bimbit">
                        </div>
                     </div>
                     <div class="form-group m-form__group row">
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Pendapatan Bulanan:
                        </label>
                        <div class="input-group m-input-group col-lg-4">
                           <span class="input-group-addon">
                           RM
                           </span>
                           <input type="text" class="form-control m-input" id="pendapatanpemohon" name="pendapatan" placeholder="Sila masukkan pendapatan">
                        </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="notelefonrumahpemohon" name="notelefonrumahpemohon" placeholder="Sila masukkan no telefon rumah">
                        </div>
                     </div>
                     <div class="form-group m-form__group row">
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Status Perkahwinan:
                        </label>
                        <div class="col-lg-4">
                                <select class="form-control m-input" id="status_perkahwinan" name="status_perkahwinan" onchange="getStatus($(this).val())">
                                    <option value="" hidden selected>Sila pilih status perkahwinan</option>
                                    <option value="Bujang">Bujang</option>
                                    <option value="Berkahwin">Berkahwin</option>
                                    <option value="Duda/Janda">Duda/Janda</option>
                                </select>
                            </div>
                            <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" id="email" name="email" placeholder="Sila masukkan e-mel">
                        </div>
                  </div>
                  <div class="m-form__seperator m-form__seperator--dashed maklumat_pasangan"></div>
                    <div class="m-form__section m-form__section--middle maklumat_pasangan">
                        <div class="m-form__heading">
                            <h3 class="m-form__heading-title">
                                Maklumat Pasangan
                            </h3>
                        </div>
                        <div class="form-group m-form__group row">
                            <div class="col-lg-12">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th><span style="color: red">* </span>No. Identiti</th>
                                            <th><span style="color: red">* </span>Nama</th>
                                            <th>E-mel</th>
                                            <th>No Telefon Bimbit</th>
                                            <th><span style="color: red">* </span>Pendapatan Bulanan</th>
                                            <th width="10%"></th>
                                        </tr>
                                    </thead>
                                    <tbody id="pasangan_input">
                                        <tr>
                                            <td>
                                                <input type="text" class="form-control m-input pasangan_ic" id="pasangan_ic" name="pasangan_ic[]" disabled>
                                            </td>
                                            <td>
                                                <input type="text" class="form-control m-input nama" id="pasangan_nama" name="pasangan_nama[]" disabled data-inputmask-regex="([a-zA-Z@/ ])+/g">
                                            </td>
                                            <td>
                                                <input type="text" class="form-control m-input" id="pasangan_emel" name="pasangan_emel[]" disabled 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[]" disabled>
                                            </td>
                                            <td>
                                                <div class="input-group m-input-group col-lg-12">
                                                    <span class="input-group-addon">
                                                        RM
                                                    </span>
                                                    <input type="number" class="form-control m-input pasangan_pendapatan" id="pasangan_pendapatan" name="pasangan_pendapatan[]" placeholder="Jika ada"  oninput="total()" disabled>
                                                </div>
                                            </td>
                                            <td></td>
                                        </tr>
                                    </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 Pasangan:
                        </h3>
                     </div>
                     <div class="form-group m-form__group row">
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Nama Penuh:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" id="namapenuhpasangan" name="namapenuhpasangan" placeholder="Sila masukkan nama penuh">
                        </div>
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Negeri Kelahiran:
                        </label>
                        <div class="col-lg-4">
                           <select class="form-control m-input" id="negeripasangan" name="negeripasangan" onchange="getNegeri($(this).val())">
                              <option value="" hidden selected>Sila pilih negeri</option>
                              <option value="Johor">Johor</option>
                              <option value="Kedah">Kedah</option>
                              <option value="Kelantan">Kelantan</option>
                              <option value="Melaka">Melaka</option>
                              <option value="Negeri Sembilan">Negeri Sembilan</option>
                              <option value="Pahang">Pahang</option>
                              <option value="Perak">Perak</option>
                              <option value="Perlis">Perlis</option>
                              <option value="Pulau Pinang">Pulau Pinang</option>
                              <option value="Sabah">Sabah</option>
                              <option value="Sarawak">Sarawak</option>
                              <option value="Selangor">Selangor</option>
                              <option value="Terengganu">Terengganu</option>
                              <option value="W.P.Kuala Lumpur">W.P.Kuala Lumpur</option>
                              <option value="W.P.Labuan">W.P.Labuan</option>
                              <option value="W.P.Putrajaya">W.P.Putrajaya</option>
                           </select>
                        </div>
                     </div>
                     <div class="form-group m-form__group row">
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>No Identiti:
                        </label>
                        <div class="input-group m-input-group col-lg-4">
                           <select class="m-input" id="jenisidentitipasangan" name="jenisidentitipasangan" style="font-size: 13px; color: #575962; border-color: #ebedf2; background-color: #f4f5f8" onchange="TarikhLahirdanUmuruntukNoIdentiti()">
                              <option value="" hidden selected>Sila pilih jenis</option>
                              <option value="No. K/P">No. K/P</option>
                              <option value="No. Tentera">No. Tentera</option>
                              <option value="No. Polis">No. Polis</option>
                           </select>
                           <input type="text" class="form-control m-input" id="noidentitipasangan" name="noidentitipasangan"  oninput="TarikhLahirdanUmuruntukNoIdentiti()">
                        </div>
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Bangsa:
                        </label>
                        <div class="col-lg-4">
                           <select class="form-control m-input" id="bangsa" name="bangsa" onchange="getBangsa($(this).val())">
                              <option value="" hidden selected>Sila pilih bangsa</option>
                              <option value="Melayu">Melayu</option>
                              <option value="Cina">Cina</option>
                              <option value="India">India</option>
                              <option value="Lain-Lain">Lain-Lain</option>
                           </select>
                        </div>
                     </div>
                     <div class="form-group m-form__group row">
                        <div class="col-lg-8">
                        </div>
                        <div id="divbangsalainlain" class="col-lg-4 hidethis">
                           <input type="text" class="form-control m-input" id="bangsalainlain" name="bangsalainlain" placeholder="Sila masukkan bangsa" >
                        </div>
                     </div>
                     <div class="form-group m-form__group row">
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Umur:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" id="umurpasangan" name="umurpasangan" placeholder="Sila masukkan umur">
                        </div>
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>No Telefon Bimbit:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" id="notelefonbimbitpasangan" name="notelefonbimbitpasangan" placeholder="Sila masukkan no telefon bimbit">
                        </div>
                     </div>
                     <div class="form-group m-form__group row">
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Pendapatan Bulanan:
                        </label>
                        <div class="input-group m-input-group col-lg-4">
                           <span class="input-group-addon">
                           RM
                           </span>
                           <input type="text" class="form-control m-input" id="pendapatanpasangan" name="pendapatan_pasangan" placeholder="Sila masukkan pendapatan bulanan">
                        </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="notelefonrumahpasangan" name="notelefonrumahpasangan" placeholder="Sila masukkan no telefon rumah">
                        </div>
                     </div>
                  </div> -->
                  <div class="m-form__seperator m-form__seperator--dashed"></div>  
                     <div class="m-form__section m-form__section--last">
                        <div class="m-form__heading">
                           <h3 class="m-form__heading-title">
                           ALAMAT (TEMPAT TINGGAL SEKARANG):
                           </h3>
                        </div>
                        <div class="form-group m-form__group row">
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Alamat:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" id="alamat_1_pemohon" name="alamat_1">
                        </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="poskodpemohon" name="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" id="alamat_2_pemohon" name="alamat_2">
                        </div>
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Daerah:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" id="daerahpemohon" name="daerah">
                        </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" id="alamat_3_pemohon" name="alamat_3">
                        </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" onchange="getNegeri($(this).val())">
                           <option value="" hidden selected>Sila pilih negeri</option>
                           <option value="Johor">Johor</option>
                           <option value="Kedah">Kedah</option>
                           <option value="Kelantan">Kelantan</option>
                           <option value="Melaka">Melaka</option>
                           <option value="Negeri Sembilan">Negeri Sembilan</option>
                           <option value="Pahang">Pahang</option>
                           <option value="Perak">Perak</option>
                           <option value="Perlis">Perlis</option>
                           <option value="Pulau Pinang">Pulau Pinang</option>
                           <option value="Sabah">Sabah</option>
                           <option value="Sarawak">Sarawak</option>
                           <option value="Selangor">Selangor</option>
                           <option value="Terengganu">Terengganu</option>
                           <option value="W.P.Kuala Lumpur">W.P.Kuala Lumpur</option>
                           <option value="W.P.Labuan">W.P.Labuan</option>
                           <option value="W.P.Putrajaya">W.P.Putrajaya</option>
                        </select>
                        </div>
                     </div>
                     <div class="form-group m-form__group row">
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Bandar:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" id="bandarpemohon" name="bandar">
                        </div>
                     </div>
                  </div>
               </div>
               <div class="m-portlet__foot m-portlet__foot--fit">
                  <div class="m-form__actions m-form__actions">
                     <div class="row">
                        <div class="col-lg-5"></div>
                        <div class="col-lg-6">
                           <button type="button" class="btn btn-primary" onclick="validate()">
                           Hantar
                           </button>
                           <button type="reset" class="btn btn-secondary" onclick="window.location='{{ url('admin/permohonan/baucer') }}'">
                           Kembali
                           </button>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   </div>
</form>
{{-- Modal --}}
<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 Adun:
                            </h5>
                            <br>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                    Aduan Dewan Undangan Negeri(ADUN):
                                    </label>
                                    <input type="text" class="form-control" id="m_adun" readonly>
                                </div>
                            </div>
                        </div>
                <div class="m-form__section m-form__section--first">
                    <h5 style="color: #f4516c">
                        Maklumat Peribadi:
                    </h5>
                    <br>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label for="recipient-name" class="form-control-label">
                                Nama:
                            </label>
                            <input type="text" class="form-control" id="m_nama" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="recipient-name" class="form-control-label">
                                No. Identiti:
                            </label>
                            <input type="text" class="form-control" id="m_ic" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label for="recipient-name" class="form-control-label">
                                E-mel:
                            </label>
                            <input type="text" class="form-control" id="m_email" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="recipient-name" class="form-control-label">
                                No. Telefon Bimbit:
                            </label>
                            <input type="text" class="form-control" id="m_tel_bimbit" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label for="recipient-name" class="form-control-label">
                                Status Perkahwinan:
                            </label>
                            <input type="text" class="form-control" id="m_status_perkahwinan" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="recipient-name" class="form-control-label">
                                Pendapatan Bulanan:
                            </label>
                            <div class="input-group m-input-group">
                                <span class="input-group-addon">
                                    RM
                                </span>
                                <input type="text" class="form-control" id="m_pendapatan" readonly>
                            </div>
                        </div>
                    </div>
                </div>
                <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>
                <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 Seksyen Sektoral, Unit Perancang Ekonomi Negeri (UPEN) Selangor 
                                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.selangor.gov.my" target="_blank">www.selangor.gov.my</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 Seksyen Sektoral, Unit Perancang Ekonomi Negeri (UPEN) 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>
{{-- End Modal --}}
@endsection
@section('js')
<script>
   $("#nokadpengenalanpemohon,#nokadpengenalanpasangan").inputmask({mask: "999999999999", placeholder: ""});
   
   $('#notelefonbimbitpemohon,#notelefonbimbitpasangan').inputmask('Regex', { regex: "^(01)[0-9]{8,9}$"});
   
   $("#pendapatanbulananpemohon,#pendapatanbulananpasangan").inputmask({mask: "9999999",placeholder: ""});
   
   $('#notelefonrumahpemohon,#notelefonrumahpasangan').inputmask('Regex', { regex: "^(03)[0-9]{8}$"});

   $("#umurpemohon,#umurpasangan").inputmask({mask: "99",placeholder: ""});

   $(document).ready(() => {
        $(".nama").inputmask("Regex");
        assign_js('pasangan');
        $('.maklumat_pasangan, .email_error, .exist_ic, .exist_email, .exist_tel_bimbit').hide();
        getIc($('#ic_type option:selected').val());
        getStatus($('#status_perkahwinan option:selected').val());

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

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

        total();

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

   function getIc(x) {
        if(x == 1) {
            $("#ic").inputmask({ mask: "999999999999", placeholder: "" });
        } else {
            $("#ic").inputmask("Regex");
        }
        checkDuplicate($("#ic").val(),'ic');
    }
   
   function UmuruntukNoPolisdanNoTentera()
   {
         var inputType = $('#tarikhlahirpasangan').attr('type');
   
         if( inputType == "date")
         {
           var today = new Date();
           var yyyy = parseInt(today.getFullYear());  
   
           var tarikhlahir = new Date($('#tarikhlahirpasangan').val());
           var tahunlahir = tarikhlahir.getFullYear();
           var lahirtahun = parseInt(tahunlahir);
           var usia = yyyy - lahirtahun;
         }
         else
         {
           var today = new Date();
           var yyyy = parseInt(today.getFullYear());  
   
           var tlp = $("#tarikhlahirpasangan").val();
           var first_numberbornyear = tlp.substr(6, 1);
           var second_numberbornyear = tlp.substr(7, 1);
           var third_numberbornyear = tlp.substr(8, 1);
           var fourth_numberbornyear = tlp.substr(9, 1);
           var number_bornyear = first_numberbornyear + second_numberbornyear + third_numberbornyear + fourth_numberbornyear; 
           var born_year = parseInt(number_bornyear); 
           var usia = yyyy - born_year;
         }
         $('#umurpasangan').val(usia);
   }

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

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

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

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

        x.next().remove();

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

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

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

            error();
            return;
        }

        // 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();
                }
            });
            if (isError) {
                error();
                return;
            }
        }

        showRumusan();

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

    function showRumusan() {
        // Maklumat Peribadi
        $('#m_adun').val($('select[name="pemohon_adun"] option:selected').html());
        $('#m_nama').val($('input[name="nama"]').val());
        $('#m_ic').val($('input[name="ic"]').val());
        $('#m_email').val($('input[name="email"]').val());
        $('#m_tel_bimbit').val($('input[name="tel_bimbit"]').val());
        $('#m_status_perkahwinan').val($('select[name="status_perkahwinan"] option:selected').val());
        $('#m_pendapatan').val($('input[name="pendapatan"]').val());
        $('#m_pendapatan_pemohon').val($('input[name="pendapatan"]').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());
        });

        var jumlah_pasangan_pendapatan = 0;

        for(x=0;x<pasangan_ic.length;x++) {
            jumlah_pasangan_pendapatan = jumlah_pasangan_pendapatan + parseInt(pasangan_pendapatan[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_pasangan').val(jumlah_pasangan_pendapatan);

        // Maklumat Tempat Tinggal
        $('#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()
        ]);

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

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

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

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

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

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

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

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

        assign_js('pasangan');
    }

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

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

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

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

    function submitForm() {

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

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

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

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

                        }
                    }
                }
            });
        }
    }

</script>
@endsection