@extends('layouts.app')
@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;
   }
   .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;
   }
   #alamatsuratmenyurat{
   resize: none;
   }
.placeitrighthandside{
text-align: right;
}
  
 
   .tablebutton{
   font-family:'Myriad Pro';
   font-weight: normal;   
   font-size: 15px;
   }
   .btn-special{
   font-size: 24px;
   color:white;
   background-color: white;
   border: 0px solid white; 
   }
  
   .labelwarning{
   color: red!important;
   font-size: 13px!important;
   font-family:'Myriad Pro'!important;
   font-weight: normal!important;  
   }

</style>
@endsection
@section('content')
<form class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed">
   <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"  >
                           JOM SHOPPING
                        </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-2 col-form-label">
                           <span style="color: red">* </span>
                           Aduan Dewan Undangan Negeri(ADUN):
                           </label>
                           <div class="col-lg-5">
                              <select class="form-control m-input" id="adun" name="adun" onchange="getAdun($(this).val())">
                                 <option value="" hidden selected>Sila pilih Aduan Dewan Undangan Negeri(ADUN)</option>
                                 <option value="BALAKONG">BALAKONG</option>
                                 <option value="BANDAR BARU KLANG">BANDAR BARU KLANG</option>
                                 <option value="BANDAR UTAMA">BANDAR UTAMA</option>
                                 <option value="BANTING">BANTING</option>
                                 <option value="BATANG KALI">BATANG KALI</option>
                                 <option value="BATU TIGA">BATU TIGA</option>
                                 <option value="BUKIT ANTARABANGSA">BUKIT ANTARABANGSA</option>
                                 <option value="BUKIT GASING">BUKIT GASING</option>
                                 <option value="BUKIT LANJAN">BUKIT LANJAN</option>
                                 <option value="BUKIT MELAWATI">BUKIT MELAWATI</option>
                                 <option value="DENGKIL">DENGKIL</option>
                                 <option value="DUSUN TUA">DUSUN TUA</option>
                                 <option value="GOMBAK SETIA">GOMBAK SETIA</option>
                                 <option value="HULU BERNAM">HULU BERNAM</option>
                                 <option value="HULU KELANG">HULU KELANG</option>
                                 <option value="IJOK">IJOK</option>
                                 <option value="JERAM">JERAM</option>
                                 <option value="KAJANG">KAJANG</option>
                                 <option value="KAMPUNG TUNKU">KAMPUNG TUNKU</option>
                                 <option value="KINRARA">KINRARA</option>
                                 <option value="KOTA ANGGERIK">KOTA ANGGERIK</option>
                                 <option value="KOTA DAMANSARA">KOTA DAMANSARA</option>
                                 <option value="KOTA KEMUNING">KOTA KEMUNING</option>
                                 <option value="KUALA KUBU BAHARU">KUALA KUBU BAHARU</option>
                                 <option value="KUANG">KUANG</option>
                                 <option value="LEMBAH JAYA">LEMBAH JAYA</option>
                                 <option value="MERU">MERU</option>
                                 <option value="MORIB">MORIB</option>
                                 <option value="PANDAMARAN">PANDAMARAN</option>
                                 <option value="PANDAN INDAH">PANDAN INDAH</option>
                                 <option value="PAYA JARAS">PAYA JARAS</option>
                                 <option value="PELABUHAN KLANG">PELABUHAN KLANG</option>
                                 <option value="PERMATANG">PERMATANG</option>
                                 <option value="RAWANG">RAWANG</option>
                                 <option value="SABAK">SABAK</option>
                                 <option value="SEKINCHAN">SEKINCHAN</option>
                                 <option value="SELAT KLANG">SELAT KLANG</option>
                                 <option value="SEMENTA">SEMENTA</option>
                                 <option value="SEMENYIH">SEMENYIH</option>
                                 <option value="SENTOSA">SENTOSA</option>
                                 <option value="SERI KEMBANGAN">SERI KEMBANGAN</option>
                                 <option value="SERI SERDANG">SERI SERDANG</option>
                                 <option value="SERI SETIA">SERI SETIA</option>
                                 <option value="SIJANGKANG">SIJANGKANG</option>
                                 <option value="SUBANG JAYA">SUBANG JAYA</option>
                                 <option value="SUNGAI AIR TAWAR">SUNGAI AIR TAWAR</option>
                                 <option value="SUNGAI BURONG">SUNGAI BURONG</option>
                                 <option value="SUNGAI KANDIS">SUNGAI KANDIS</option>
                                 <option value="SUNGAI PANJANG">SUNGAI PANJANG</option>
                                 <option value="SUNGAI PELEK">SUNGAI PELEK</option>
                                 <option value="SUNGAI RAMAL">SUNGAI RAMAL</option>
                                 <option value="SUNGAI TUA">SUNGAI TUA</option>
                                 <option value="TAMAN MEDAN">TAMAN MEDAN</option>
                                 <option value="TAMAN TEMPLER">TAMAN TEMPLER</option>
                                 <option value="TANJONG SEPAT">TANJONG SEPAT</option>
                                 <option value="TERATAI">TERATAI</option>
                              </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="namapenuhpemohon" placeholder="Sila masukan 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="negeripemohon" 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.Kad Pengenalan / No.Polis / No.Tentera:
                           </label>
                           <div class="input-group m-input-group col-lg-4">
                                <select class="m-input" id="ic_type" name="ic_type" style="font-size: 13px; color: #575962; border-color: #ebedf2; background-color: #f4f5f8" onchange="getIc($(this).val())">
                                    <option value="1">No. K/P</option>
                                    <option value="2">No. Tentera</option>
                                    <option value="3">No. Polis</option>
                                </select>
                                <input type="text" class="form-control m-input" id="nokadpengenalanpemohon" name="nokadpengenalanpemohon" placeholder="Sila masukan no kad pengenalan" value="" onblur="checkDuplicate($(this).val(),'ic')" data-inputmask-regex="([a-zA-Z0-9 ])+/g" maxlength="12">
                            </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="ddlbangsa" name="ddlbangsa" 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>
                                </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="umurpemohon" placeholder="Sila masukan 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="notelefonbimbitpemohon" name="notelefonbimbitpemohon" placeholder="Sila masukan 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>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="inputlelakiperempuan" id="lelaki" value="lelaki">
                               Lelaki
                              <span></span>
                              </label>
                              <label class="m-radio m-radio--solid m-radio--brand">
                              <input type="radio" name="inputlelakiperempuan" 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 Rumah:
                           </label>
                           <div class="col-lg-4">
                              <input type="text" class="form-control m-input" id="notelefonrumahpemohon" name="notelefonrumahpemohon" placeholder="Sila masukan 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>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 placeitrighthandside" id="pendapatanbulananpemohon" name="pendapatanbulananpemohon" value="" placeholder="Sila masukan pendapatan bulanan" oninput="total()">
                            </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 masukan 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.Kad Pengenalan / No.Polis / No.Tentera:
                           </label>
                           <div class="input-group m-input-group col-lg-4">
                                <select class="m-input" id="ic_type" name="ic_type" style="font-size: 13px; color: #575962; border-color: #ebedf2; background-color: #f4f5f8" onchange="getIc($(this).val())">
                                    <option value="1">No. K/P</option>
                                    <option value="2">No. Tentera</option>
                                    <option value="3">No. Polis</option>
                                </select>
                                <input type="text" class="form-control m-input" id="nokadpengenalanpemohon" name="nokadpengenalanpemohon" placeholder="Sila masukan no kad pengenalan" value="" onblur="checkDuplicate($(this).val(),'ic')" data-inputmask-regex="([a-zA-Z0-9 ])+/g" maxlength="12">
                            </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="ddlbangsa" name="ddlbangsa" 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>
                                </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="umurpasangan" name="umurpasangan" placeholder="Sila masukan 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 masukan 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 placeitrighthandside" id="pendapatanbulananpasangan" name="pendapatanbulananpasangan" value="" placeholder="Sila masukan pendapatan bulanan" oninput="total()">
                            </div>
                           <label class="col-lg-2 col-form-label">
                           <span style="color: red">* </span>No Telefon Rumah:
                           </label>
                           <div class="col-lg-4">
                              <input type="text" class="form-control m-input" id="notelefonrumahpasangan" name="notelefonrumahpasangan" placeholder="Sila masukan 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 Surat Menyurat:
                           </label>
                           <div class="col-lg-4">
                           <textarea  id="alamatsuratmenyurat" name="alamatsuratmenyurat" class="form-control m-input"  rows="11" cols="3"></textarea>
                           </div>
                        
                           <label class="col-lg-2 col-form-label">
                              <span style="color: red">* </span>Poskod:<br/><br/><br/><br/>
                              <span style="color: red">* </span>Bandar:<br/><br/><br/><br/>
                              <span style="color: red">* </span>Negeri:
                            </label>
                           <div class="col-lg-4">
                           <input type="text" class="form-control m-input" id="poskod" name="poskod" placeholder="Sila masukan poskod"> <br><br>
                           <input type="text" class="form-control m-input" id="bandar" name="bandar" placeholder="Sila masukan bandar"><br><br>
                           <select class="form-control m-input" id="status_perkahwinan" name="status_perkahwinan" 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>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</form>
@endsection
@section('js')
<script src="../../../assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
<script src="../../../assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
<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: ""});
   
      
</script>
@endsection