@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;
   }
   .form-control:focus,
   .form-control:active{
   border-color: #3273dc!important;;
   box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25)!important;
   }
   .m-form .m-form__heading .m-form__heading-title {
   color: #716aca;
   font-weight: 500;
   font-size: 1.3rem;
   }
.placeitrighthandside{
text-align: right;
}
   
   #statusnote{
   font-family:'Myriad Pro';
   font-size: 9.5px;
   font-style: italic;
   line-height: 1.3;
   }
   .tablebutton{
   font-family:'Myriad Pro';
   font-weight: normal;   
   font-size: 14px;
   }
   #muatnaikpelanlokasirumah,
   #gambarrumahtable,
   #ddlgambarrumah,
   .rowgambarrumah,
   .pilih{
   display:none;
   }
   .btn-special{
   font-size: 24px;
   color:white;
   background-color: white;
   border: 0px solid white; 
   }
 
   .tablebodybantuanyangditerimatable.col-1,
   .tablebodybantuanyangditerimatable.col-3,
   .tablebodybantuanyangditerimatable.col-7{
   border: 2px solid #BCBEC0;  
   border-collapse: collapse;
   text-align: center;   
   }
.col-lg-1.tablevisibility,
.col-lg-10.tablevisibility{
border: 2px solid #BCBEC0; 
border-collapse: collapse;  
}
   #rowmuatnaik2,
   #rowpadam2,
   #rowinputdokumenicon{
   padding-bottom: 4px; 
   padding-top: 8px;     
   }
   .labelwarning{
   color: red!important;
   font-size: 13px!important;
   font-family:'Myriad Pro'!important;
   font-weight: normal!important;  
   }
   /*Tooltip popup on mouse hover*/
   .tooltip {
   position: relative !important;
   display: inline-block !important;
   border-bottom: 0px dotted black;
   opacity:1 !important;
   }
   /* Position the tooltip */
   .tooltip .tooltiptext {
   visibility: hidden;
   width:700%;
   margin-left: -60px;
   background-color: #eee;
   color: black;
   text-align: left;
   border-radius: 0px;
   border-color: #E6E7E8;
   padding: 0px 0px;
   opacity: 1;
   transition: opacity 1s;
   border-top-width: 0px;
   border-top-style: solid;
   border-bottom-width: 0px;
   border-bottom-style: solid;
   border-right-width: 0px;
   border-right-style: solid;
   border-left-width: 0px;
   border-left-style: solid;
   position: absolute;
   z-index: 1;
   top: -557px;
   }
   .tooltip:hover .tooltiptext {
   visibility: visible;
   opacity: 1;
   }
   /* tooltip arrow position*/
   .tooltip .tooltiptext::after {
   content: "";
   position: absolute;
   top: 101%;
   right: 91.8%;
   margin-top: -5px;
   border-width: 13px;
   border-style: solid;
   border-color: black transparent transparent transparent;
   }
   h5{
   background-image: url("Information-icon2.png");
   background-repeat: no-repeat;
   background-position: right;
   padding-right: 40px;
   margin-bottom: 5px !important;
   display: inline-block;
   }
   th {
   border: 2px solid #BCBEC0; 
   border-collapse: collapse;
   background-color: #414042;
   color: white;
   padding: 10px;
   font-family:'Myriad Pro';
   font-weight: normal;
   margin-top: 15px;
   margin-bottom: 15px;
   font-size: 16px;
   }
   #tool {
   border: 2px solid #BCBEC0; 
   border-collapse: collapse;
   text-align: left;
   font-family:'Myriad Pro';
   font-weight: normal;
   padding: 5px !important;
   background-color: white;
   margin-top: 5px;
   margin-bottom: 5px;
   }
</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">
            <!--end::Portlet-->
            <div id="cardbantuanrumah" name="cardbantuanrumah" c 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="bantuanrumah" name="bantuanrumah" class="m-portlet__head-text" >
                           Bantuan Rumah
                        </h3>
                     </div>
                  </div>
               </div>
               <!--begin::Form-->
               <div class="m-portlet__body">
                  <div class="m-form__section m-form__section--first maklumatpemohon">
                     <div class="m-form__heading">
                        <h3 id="maklumatpemohon" 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:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" id="namapemohon" name="namapemohon" placeholder="Sila masukan nama">
                        </div>
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Negeri Kelahiran:
                        </label>
                        <div class="col-lg-4">
                           <select  id="negerikelahiran" name="negerikelahiran" class="form-control m-input">
                              <option value="{{ old('') }}" 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="Penang">Penang</option>
                              <option value="Perak">Perak</option>
                              <option value="Perlis">Perlis</option>
                              <option value="Selangor">Selangor</option>
                              <option value="Terengganu">Terengganu</option>
                              <option value="Sabah">Sabah</option>
                              <option value="Sarawak">Sarawak</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>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>
                  <div class="m-form__seperator m-form__seperator--dashed maklumattempattinggal"></div>
                  <div class="m-form__section m-form__section--middle maklumattempattinggal">
                     <div class="m-form__heading">
                        <h3 id="maklumattempattinggal" class="m-form__heading-title">
                           Maklumat Tempat Tinggal:
                        </h3>
                     </div>
                     <div class="form-group m-form__group row">
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Alamat:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" name="alamat_1" placeholder="Sila masukan alamat">
                        </div>
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Poskod:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" id="poskod" 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" placeholder="Sila masukan alamat">
                        </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" name="daerah" placeholder="Sila masukan 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" name="alamat_3" placeholder="Sila masukan alamat">
                        </div>
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Negeri:
                        </label>
                        <div class="col-lg-4">
                           <select class="form-control m-input" id="negeri" name="negeri"  onchange="getNegeri($(this).val())">
                              <option value="{{ old('') }}" 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="Penang">Penang</option>
                              <option value="Perak">Perak</option>
                              <option value="Perlis">Perlis</option>
                              <option value="Selangor">Selangor</option>
                              <option value="Terengganu">Terengganu</option>
                              <option value="Sabah">Sabah</option>
                              <option value="Sarawak">Sarawak</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>Status Kediaman:
                        </label>
                        <div class="col-lg-4">
                           <select id="statuskediaman" name="statuskediaman" class="form-control m-input"required onchange="getStatusKediaman($(this).val())">
                              <option value="" hidden selected>Sila pilih status kediaman</option>
                              <option value="Rumah Sendiri">Rumah Sendiri</option>
                              <option value="Rumah Pusaka">Rumah Pusaka</option>
                              <option value="Menyewa">Menyewa</option>
                              <option value="Setinggan">Setinggan</option>
                              <option value="Menumpang">Menumpang</option>
                              <option value="Lain-Lain">Lain-lain</option>
                           </select>
                        </div>
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Status Pemilikan Tanah/Tapak:
                        </label>
                        <div class="col-lg-4">
                           <select id="statuspemilikantanahtapak" name="statuspemilikantanahtapak" class="form-control m-input"required onchange="getStatusPemilikanTanahTapak($(this).val())">
                              <option value="" hidden selected>Sila pilih status pemilikan tanah tapak</option>
                              <option value="Ibu">Ibu</option>
                              <option value="Bapa">Bapa</option>
                              <option value="Lain-Lain">Lain-lain</option>
                           </select>
                        </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 id="maklumatpasangan" class="m-form__heading-title">
                           Maklumat Pekerjaan Pemohon:
                        </h3>
                     </div>
                     <div class="form-group m-form__group row">
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Pekerjaan Pemohon:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" id="pekerjaanpemohon" name="pekerjaanpemohon" placeholder="Sila masukan pekerjaan">
                        </div>
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Bilangan Ahli Isi Rumah:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" id="bilanganahliisirumah" name="bilanganahliisirumah" placeholder="Sila masukan bilangan ahli isi 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 Pemohon:
                        </label>
                        <div class="input-group m-input-group col-lg-4">
                           <span class="input-group-addon">
                           RM
                           </span>
                           <input type="text" class="form-control m-input placeitrighthandside" name="pendapatanpemohon" id="pendapatanpemohon"  placeholder="Sila masukan pendapatan bulanan" oninput="totalpendapatanbulanan()">
                        </div>
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Pendapatan Isi Rumah:
                        </label>
                        <div class="input-group m-input-group col-lg-4">
                           <span class="input-group-addon">
                           RM
                           </span>
                           <input type="text" class="form-control m-input placeitrighthandside"  id="pendapatanisirumahpemohon"   name="pendapatanisirumahpemohon" placeholder="Sila masukan pendapatan isi rumah" oninput="totalpendapatanisirumah()">
                        </div>
                     </div>
                  </div>
                  <div class="m-form__seperator m-form__seperator--dashed maklumatahlikeluarga"></div>
                  <div class="m-form__section m-form__section--middle maklumatahlikeluarga">
                     <div class="m-form__heading">
                        <h3 id="maklumatahlikeluarga" class="m-form__heading-title">
                           MAKLUMAT AHLI KELUARGA<small><i><b>(Termasuk Pemohon)</b></i></small>
                        </h3>
                     </div>
                     <div class="form-group m-form__group row">
                        <div class="col-lg-12">
                           <table id="maklumattanggungantable" name="maklumattanggungantable" class="table table-bordered table-responsive" >
                              <thead  >
                                 <tr>
                                    <td class="col-lg-1" id="bilbantuanrumah" >Bil</td>
                                    <td class="col-lg-3" id="namabantuanrumah">Nama</td>
                                    <td class="col-lg-1" id="umurbantuanrumah">Umur(Tahun)</td>
                                    <td class="col-lg-2" id="hubunganbantuanrumah">Hubungan</td>
                                    <td class="col-lg-2" id="statusbantuanrumah">Status<label id="statusnote" name="statusnote" >(Nyatakan sama ada masih belajar,bekerja,OKU atau menganggur)</label></td>
                                    <td class="col-lg-1" id="pendapatanbantuanrumah">Pendapatan(Rm)</td>
                                    <td class="col-lg-1" id="tinggalbersamabantuanrumah">Tinggal Bersama<label id="statusnote" name="statusnote" >(Ya/Tidak)</label></td>
                                    <td class="col-lg-1" id="rowpadammaklumattanggungan"><input type="button" id="padammaklumattanggungan" name="padammaklumattanggungan" value="padam" class="btn-special" disabled></td>
                                 </tr>
                              </thead>
                             
                              <tbody id="ldbodyrow">
                                 <tr>
                                    <td class="col-lg-1" id="rowlabelbilbantuanrumah" ><label  id="labelbilbantuanrumah" class="form-control m-input">1</label></td>
                                    <td class="col-lg-3" id="rowinputnamabantuanrumah"><input id="inputnamabantuanrumah" name="inputnamabantuanrumah[]" type="text" class="form-control m-input"/></td>
                                    <td class="col-lg-1" id="rowinputumurbantuanrumah"><input id="inputumurbantuanrumah" name="inputumurbantuanrumah[]" type="text" class="form-control m-input"/></td>
                                    <td class="col-lg-2" id="rowinputhubunganbantuanrumah"><input id="inputhubunganbantuanrumah" name="inputhubunganbantuanrumah[]" type="text" class="form-control m-input"/></td>
                                    <td class="col-lg-2" id="rowinputstatusbantuanrumah"><input id="inputstatusbantuanrumah"  name="inputstatusbantuanrumah[]" type="text" class="form-control m-input"/></td>
                                    <td class="col-lg-1" id="rowinputpendapatanbantuanrumah"><input id="inputpendapatanbantuanrumah" name="inputpendapatanbantuanrumah[]" type="text" class="form-control m-input"/></td>
                                    <td class="col-lg-1" id="rowinputtinggalbersamabantuanrumah"><input id="inputtinggalbersamabantuanrumah" name="inputtinggalbersamabantuanrumah[]" type="text" class="form-control m-input"/></td>
                                    <td class="col-lg-1" id="rowpadammaklumattanggungan"> <div id="padammaklumattanggungan" class="btn-sm btn btn-warning m-btn m-btn--icon m-btn--pill"><span><i class="la la-trash-o"></i><span id="padammaklumattanggunganrow" name="padammaklumattanggungannrow" class="tablebutton">Padam</span></span></div></td>
                                 </tr>
                              </tbody>
                              <tfoot>
                                 <tr>
                                    <td>
                                       <div  id="addrowmaklumattanggungan" class="btn btn btn-sm btn-success m-btn m-btn--icon m-btn--pill m-btn--wide"><span><i class="la la-plus"></i><span id="tambahmaklumatpemohonrow" name="tambahmaklumatpemohonrow" class="tablebutton">Tambah</span></span></div>
                                    </td>
                                 </tr>
                              </tfoot>
                           </table>
                        </div>
                     </div>
                  </div>
                  <div class="m-form__seperator m-form__seperator--dashed bantuanyangmasihpernahditerima"></div>
                  <div class="m-form__section m-form__section--middle bantuanyangmasihpernahditerima">
                     <div class="m-form__heading">
                        <h3 id="bantuanyangmasihpernahditerima" class="m-form__heading-title">
                           Bantuan yang masih / pernah diterima:
                        </h3>
                     </div>
                     <div class="form-group m-form__group row">
                        <div class="col-lg-12">
                           <table id="bantuanyangditerimatable" class="table table-bordered table-responsive"  >
                              <thead>
                                 <tr>
                                    <td class="col-lg-1" id="bilbantuanyangpernahditerima">Bil</td>
                                    <td class="col-lg-3" id="jenisbantuan" >Jenis Bantuan</td>
                                    <td class="col-lg-3" id="pemberibantuanagensi" >Pemberi Bantuan Agensi/Individu</td>
                                    <td class="col-lg-2" id="tarikhterimabantuan">Tarikh Terima Bantuan</td>
                                    <td class="col-lg-2" id="tarikhakhirbantuan">Tarikh Akhir Bantuan</td>
                                    <td class="col-lg-1" id="rowpadambantuanyangditerima" ><input type="button" id="padambantuanyangditerima" name="padambantuanyangditerima" value="padam" class="btn-special" disabled></td>
                                 </tr>
                              </thead>
                              <tbody>
                              </tbody>
                              <tfoot>
                                 <tr>
                                    <td>
                                       <div  id="addrowbantuanyangditerima" name="addrowbantuanyangditerima" class="btn btn btn-sm btn-success m-btn m-btn--icon m-btn--pill m-btn--wide"><span><i class="la la-plus"></i><span id="tambahbantuanyangditerimarow" name="tambahbantuanyangditerimarow" class="tablebutton">Tambah</span></span></div>
                                    </td>
                                 </tr>
                              </tfoot>
                           </table>
                        </div>
                     </div>
                  </div>
                  <div class="m-form__seperator m-form__seperator--dashed lampirandokumen"></div>
                  <div class="m-form__section m-form__section--middle lampirandokumen">
                     <div class="m-form__heading">
                        <h3  id="lampirandokumen" class="m-form__heading-title">
                           LAMPIRAN DOKUMEN:
                        </h3>
                     </div>
                     <div class="form-group m-form__group row">
                        <table id="lampirandokumentunastable" class="table order" >
                           <thead >
                              <tr>
                                 <td class="col-lg-10 tablevisibility" id="rowinputdokumenicon">
                                    <div id="popup" class="tooltip">
                                       <h5 class="abc">Dokumen</h5>
                                       <span class="tooltiptext">
                                          <table id="doclist" class="table-responsive" >
                                             <tr>
                                                <th>SENARAI SEMAK DOKUMEN</th>
                                             </tr>
                                             <tr >
                                                <td>
                                                   <table id="doctable" class="table-responsive" >
                                                      <col width="20">
                                                      <col width="940">
                                                      <col width="230">
                                                      <tr>
                                                         <td id="tool" ><b>No.</b></td>
                                                         <td id="tool"><b>Dokumen</b></td>
                                                         <td id="tool"><b>Butiran</b></td>
                                                      </tr>
                                                      <tr>
                                                         <td id="tool">1.</td>
                                                         <td id="tool">Salinan Borang Permohonan Skim Ceria</td>
                                                         <td id="tool"></td>
                                                      </tr>
                                                      <tr>
                                                         <td id="tool">2. </td>
                                                         <td id="tool">Laporan Kerosakan Bergambar</td>
                                                         <td id="tool"></td>
                                                      </tr>
                                                      <tr>
                                                         <td id="tool">3.</td>
                                                         <td id="tool">Pelan Susunatur Kawasan Pemajuan (jika ada)</td>
                                                         <td id="tool"></td>
                                                      </tr>
                                                      <tr>
                                                         <td id="tool">4.</td>
                                                         <td id="tool">Salinan Sijil JMB/MC atau Surat Lantikan</td>
                                                         <td id="tool"></td>
                                                      </tr>
                                                      <tr>
                                                         <td id="tool">5.</td>
                                                         <td id="tool">Salinan Perjanjian Jual Beli yang Pertama (Beli dengan Pemaju) yang telah di cop sah oleh COB, PBT</td>
                                                         <td id="tool"></td>
                                                      </tr>
                                                      <tr>
                                                         <td id="tool">6.</td>
                                                         <td id="tool">Laporan Pengurusan Kewangan JMB/MC 3 Bulan Terkini</td>
                                                         <td id="tool"></td>
                                                      </tr>
                                                   </table>
                                                </td>
                                             </tr>
                                          </table>
                                       </span>
                                    </div>
                                 </td>
                                 <td class="col-lg-1 tablevisibility" id="rowmuatnaik2" ></td>
                                 <td class="col-lg-1 tablevisibility" id="rowpadam2" ><label class="labelwarning" id="ldrowCount"></label></td>
                              </tr>
                           </thead>
                           <tbody id="ldbodyrow">
                              <tr>
                                 <td class="col-lg-10 tablevisibility" id="rowinputdokumen">
                                    <input type="file" id="real-file" hidden="hidden" />
                                    <select id="ddlmaklumat" name="ddlmaklumat" class="form-control m-input" >
                                       <option value="" hidden selected>Sila Pilih</option>
                                       <option value="Salinan Borang Permohonan Skim Ceria">Salinan Borang Permohonan Skim Ceria</option>
                                       <option value="Laporan Kerosakan Bergambar">Laporan Kerosakan Bergambar</option>
                                       <option value="Pelan Susunatur Kawasan Pemajuan (jika ada)">Pelan Susunatur Kawasan Pemajuan (jika ada)</option>
                                       <option value="Salinan Sijil JMB/MC atau Surat Lantikan">Salinan Sijil JMB/MC atau Surat Lantikan</option>
                                       <option value="Salinan Perjanjian Jual Beli yang Pertama (Beli dengan Pemaju) yang telah di cop sah oleh COB, PBT">Salinan Perjanjian Jual Beli yang Pertama (Beli dengan Pemaju) yang telah di cop sah oleh COB, PBT</option>
                                       <option value="Laporan Pengurusan Kewangan JMB/MC 3 Bulan Terkini">Laporan Pengurusan Kewangan JMB/MC 3 Bulan Terkini</option>
                                    </select>
                                 </td>
                                 </select></td>
                                 <td class="col-lg-1 tablevisibility" id="rowmuatnaik"><button  id="muatnaiklampirandokumen" name="muatnaiklampirandokumen" type="submit" class="btn blue start" style="background-color:#2a9df4"><i class="fa fa-upload"></i> <span> Start upload </span></button> </td>
                                 <td class="col-lg-1 tablevisibility" id="rowpadamlampirandokumen"><div id="padamlampirandokumen" class="btn-sm btn btn-warning m-btn m-btn--icon m-btn--pill"><span><i class="la la-trash-o"></i><span id="padamlampirandokumen" name="padamlampirandokumen" class="tablebutton">Padam</span></span></div></td>
                              </tr>
                           </tbody>
                           <tfoot>
                              <tr>
                                 <td>
                                    <div id="addrowlampirandokumen" class="btn btn btn-sm btn-success m-btn m-btn--icon m-btn--pill m-btn--wide"><span><i class="la la-plus"></i><span id="tambahlampirandokumen" name="tambahlampirandokumen" class="tablebutton" >Tambah</span></span></div>
                                 </td>
                              </tr>
                           </tfoot>
                        </table>
                     </div>
                  </div>
                  <div class="m-form__seperator m-form__seperator--dashed lampirangambarrumah"></div>
                  <div class="m-form__section m-form__section--last lampirangambarrumah">
                     <div class="m-form__heading">
                        <h3 id="lampirangambarrumah" class="m-form__heading-title">
                           Sila lampirkan gambar rumah:
                        </h3>
                     </div>
                     <div class="form-group m-form__group row">
						<label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Bantuan Yang Dipohon:
                        </label>
						<div class="col-lg-4">
                           <select id="bantuanyangdipohon" name="bantuanyangdipohon"  class="form-control m-input"  onchange="getBantuanyangDipohon($(this).val())">
						      <option value="" hidden selected>Sila pilih bantuan yang dipohon</option>
                              <option value="Baik Pulih">Baik Pulih</option>
                              <option value="Bina Rumah">Bina Rumah</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>Gambar Rumah:
                        </label>
						<div class="col-lg-4">
                           <select id="ddlgambarrumah" name="ddlgambarrumah" class="form-control m-input" onchange="getGambarRumah($(this).val())">
						      <option value="" hidden selected>Sila pilih gambar rumah</option>
                              <option value="Gambar Hadapan Rumah">Gambar Hadapan Rumah</option>
                              <option value="Gambar Belakang Rumah">Gambar Belakang Rumah</option>
                              <option value="Gambar Sisi Kanan Rumah">Gambar Sisi Kanan Rumah</option>
                              <option value="Gambar Sisi Kiri Rumah">Gambar Sisi Kiri Rumah</option>
                           </select>
						      </div>
                     </div>
                     <div class="form-group m-form__group row">
                        <div class="col-lg-12">
                           <table id="gambarrumahtable" class="table order table-responsive"  >
                              <tbody id="ldbodyrow2">
                                 <tr id="rowgambarhadapan" class="rowgambarrumah"  >
                                    <td class="tablebodybantuanyangditerimatable col-3" id="rowlabelgambarhadapanrumah"><label id="labelgambarhadapanrumah">Gambar Hadapan Rumah</label></td>
                                    <td class="tablebodybantuanyangditerimatable col-7" id="rowgambarhadapanrumah" ></td>
                                    <td class="tablebodybantuanyangditerimatable col-1" id="rowmuatnaikgambarhadapanrumah">
                                    <div id="muatnaikgambarhadapanrumah" class="btn-sm btn btn-warning m-btn m-btn--icon m-btn--pill"><span><i class="la la-trash-o"></i><span id="muatnaikgambarhadapan" name="muatnaikgambarhadapan" class="tablebutton">Muat Naik</span></span></div></td>
                                    <td class="tablebodybantuanyangditerimatable col-1" id="rowpadamgambarhadapanrumah"><div id="padamgambarhadapanrumah" class="btn-sm btn btn-warning m-btn m-btn--icon m-btn--pill"><span><i class="la la-trash-o"></i><span id="padamgambarhadapan" class="tablebutton">Padam</span></span></div></td>
                                 </tr>
                                 <tr id="rowgambarbelakang" name="rowgambarbelakang"  class="rowgambarrumah">
                                    <td class="tablebodybantuanyangditerimatable col-3" id="rowlabelgambarbelakangrumah"><label  id="labelgambarbelakangrumah">Gambar Belakang Rumah</label></td>
                                    <td class="tablebodybantuanyangditerimatable col-7" id="rowgambarbelakangrumah"></td>
                                    <td class="tablebodybantuanyangditerimatable col-1" id="rowmuatnaikgambarbelakangrumah">
                                    <div id="muatnaikgambarbelakangrumah" class="btn-sm btn btn-warning m-btn m-btn--icon m-btn--pill"><span><i class="la la-trash-o"></i><span id="muatnaikgambarbelakang" name="muatnaikgambarbelakang" class="tablebutton">Muat Naik</span></span></div></td>
                                    <td class="tablebodybantuanyangditerimatable col-1" id="rowpadamgambarbelakangrumah"><div id="padamgambarbelakangrumah" class="btn-sm btn btn-warning m-btn m-btn--icon m-btn--pill"><span><i class="la la-trash-o"></i><span id="padamgambarbelakang" class="tablebutton">Padam</span></span></div></td>
                                 </tr>
                                 </tr>
                                 <tr id="rowgambarsisikanan" name="rowgambarsisikanan"  class="rowgambarrumah" >
                                    <td class="tablebodybantuanyangditerimatable col-3" id="rowlabelgambarsisikananrumah"><label id="labelgambarsisikananrumah">Gambar Sisi Kanan Rumah</label></td>
                                    <td class="tablebodybantuanyangditerimatable col-7" id="rowgambarsisikananrumah"></td>
                                    <td class="tablebodybantuanyangditerimatable col-1" id="rowmuatnaiksisikananrumah">
                                    <div id="muatnaiksisikananrumah" class="btn-sm btn btn-warning m-btn m-btn--icon m-btn--pill"><span><i class="la la-trash-o"></i><span id="muatnaikgambarsisikanan" name="muatnaikgambarsisikanan" class="tablebutton">Muat Naik</span></span></div></td>
                                    <td class="tablebodybantuanyangditerimatable col-1" id="rowpadamgambarsisikananrumah"><div id="padamgambarsisikananrumah" class="btn-sm btn btn-warning m-btn m-btn--icon m-btn--pill"><span><i class="la la-trash-o"></i><span id="padamgambarsisikanan" class="tablebutton">Padam</span></span></div></td>
                                 </tr>
                                 </tr>
                                 <tr id="rowgambarsisikiri"  name="rowgambarsisikiri"  class="rowgambarrumah" >
                                    <td class="tablebodybantuanyangditerimatable col-3" id="rowlabelgambarsisikirirumah"><label  id="labelgambarsisikirirumah">Gambar Sisi Kiri Rumah</label></td>
                                    <td class="tablebodybantuanyangditerimatable col-7" id="rowgambarsisikirirumah"></td>
                                    <td class="tablebodybantuanyangditerimatable col-1" id="rowmuatnaiksisikirirumah">
                                    <div id="muatnaiksisikirirumah" class="btn-sm btn btn-warning m-btn m-btn--icon m-btn--pill"><span><i class="la la-trash-o"></i><span id="muatnaikgambarsisikiri" name="muatnaikgambarsisikiri" class="tablebutton">Muat Naik</span></span></div></td>
                                    <td class="tablebodybantuanyangditerimatable col-1" id="rowpadamgambarsisikirirumah"><div id="padamgambarsisikirirumah" class="btn-sm btn btn-warning m-btn m-btn--icon m-btn--pill"><span><i class="la la-trash-o"></i><span id="padamgambarsisikiri" class="tablebutton">Padam</span></span></div></td>
                                 </tr>
                                 </tr>
                              </tbody>
                           </table>
                           
                        </div>
                     </div>
                     <div class="form-group m-form__group row">
                      
						<label class="col-lg-2 col-form-label">
                                <span style="color: red">* </span>Pelan Lokasi Rumah:
                        </label>
                        <div class="col-lg-2">
                                <div id="muatnaikpelanlokasirumah"  name="muatnaikpelanlokasirumah" class="btn-sm btn btn-warning m-btn m-btn--icon m-btn--pill"><span><i class="la la-trash-o"></i><span id="muatnaikpelan" name="muatnaikpelan" class="tablebutton">Muat Naik</span></span></div>
                        </div>
						<div class="col-lg-8">

						</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").inputmask({mask: "999999999999", placeholder: ""});
   
   $('#notelefonbimbitpemohon').inputmask('Regex', { regex: "^(01)[0-9]{8,9}$"});
   
   $('#notelefonrumahpemohon').inputmask('Regex', { regex: "^(03)[0-9]{8}$"});
   
   $("#poskod").inputmask({mask: "99999", placeholder: ""});
   
   $("#bilanganahliisirumah").inputmask({mask: "99",placeholder: ""});
   
   $("#pendapatanpemohon,#pendapatanisirumahpemohon").inputmask({mask: "9999999",placeholder: ""});
   
   function getBantuanyangDipohon(x) {
                if(x == 'Baik Pulih') 
                {
                    $('#ddlgambarrumah').show('slow');

					$('#gambarrumahtable').show('slow');

                    $('#muatnaikpelanlokasirumah').hide('slow');

                } 
				else if(x == 'Bina Rumah') 
                {
					$('#ddlgambarrumah').hide('slow');

					$('#gambarrumahtable').hide('slow');

                    $('#muatnaikpelanlokasirumah').show('slow');  
                  
                }
                else
                {
					$('#ddlgambarrumah').hide('slow');

					$('#gambarrumahtable').hide('slow');

                    $('#muatnaikpelanlokasirumah').hide('slow');  
                }
            }
   
   
   
   
   
   $(document).ready(function () {
       var counter = 2;
   
       $("#addrowmaklumattanggungan").on("click", function () {
           var newRow = $("<tr>");
           var cols = "";

           
           cols += '<td id="rowlabelbilbantuanrumah" ><label id="labelbilbantuanrumah" name="labelbilbantuanrumah[]" class="form-control m-input" >' + counter + '</label></td>';
           cols += '<td id="rowinputnamabantuanrumah"><input id="inputnamabantuanrumah" name="inputnamabantuanrumah[]"  class="form-control m-input" type="text" /></td>';
           cols += '<td id="rowinputumurbantuanrumah"><input id="inputumurbantuanrumah" name="inputumurbantuanrumah[]" class="form-control m-input" type="text" /></td>';
           cols += '<td id="rowinputhubunganbantuanrumah"><input id="inputhubunganbantuanrumah" name="inputhubunganbantuanrumah[]" class="form-control m-input" type="text" /></td>';
           cols += '<td id="rowinputstatusbantuanrumah"><input id="inputstatusbantuanrumah" name="inputstatusbantuanrumah[]" class="form-control m-input" type="text" /></td>';
           cols += '<td id="rowinputpendapatanbantuanrumah"><input id="inputpendapatanbantuanrumah" name="inputpendapatanbantuanrumah[]" class="form-control m-input" type="text" /></td>';
           cols += '<td id="rowinputtinggalbersamabantuanrumah"><input id="inputtinggalbersamabantuanrumah" name="inputtinggalbersamabantuanrumah[]" class="form-control m-input" type="text" /></td>';
           cols += '<td id="rowpadammaklumattanggungan"><div id="padammaklumattanggungan" class="btn-sm btn btn-warning m-btn m-btn--icon m-btn--pill"><span><i class="la la-trash-o"></i><span id="padammaklumattanggunganrow" name="padammaklumattanggungannrow" class="tablebutton">Padam</span></span></div></td>';
   		
           newRow.append(cols);
           $("#maklumattanggungantable").append(newRow);  
           counter++;
       });
          $("#maklumattanggungantable").on("click", "#padammaklumattanggungan", function (event) { 
   
          $(this).closest("tr").remove();   
          counter--;    
      });
   });
   
  
   $(document).ready(function () {
       var counter = 1;
       
   
       $("#addrowbantuanyangditerima").on("click", function () {
           var newRow = $("<tr>");
           var cols = "";
   
           cols += '<td id="rowlabelbilbantuanyangpernahditerima"><label id="labelbilbantuanyangpernahditerima" name="labelbilbantuanyangpernahditerima[]" class="form-control m-input" >' + counter + '</label></td>';
           cols += '<td id="rowinputjenisbantuan"><input id="inputjenisbantuan" name="inputjenisbantuan[]" type="text" class="form-control m-input"/></td>';
           cols += '<td id="rowinputpemberibantuanagensi"><input id="inputpemberibantuanagensi" name="inputpemberibantuanagensi[]" type="text" class="form-control m-input"/></td>';
           cols += '<td id="rowinputtarikhterimabantuan"><input id="inputtarikhterimabantuan" name="inputtarikhterimabantuan[]" type="text" class="form-control m-input"/></td>';
           cols += '<td id="rowinputtarikhakhirbantuan"><input id="inputtarikhakhirbantuan" name="inputtarikhakhirbantuan[]" type="text" class="form-control m-input"/></td>';
           cols += '<td id="rowpadambantuanyangditerima"><div   id="rowpadambantuanyangditerima" name="rowpadambantuanyangditerima[]" class="btn-sm btn btn-warning m-btn m-btn--icon m-btn--pill"><span><i class="la la-trash-o"></i><span id="padammaklumattanggunganrow" class="tablebutton">Padam</span></span></div></td>';
   		
           newRow.append(cols);
           $("#bantuanyangditerimatable").append(newRow);
           counter++;
       });
       
       $("#bantuanyangditerimatable").on("click", "#rowpadambantuanyangditerima", function (event) { 
   
         $(this).closest("tr").remove();       
         counter--;
      
    });
    

   $(document).ready(function () {
       var counter = 0;
   
       $("#addrowlampirandokumen").on("click", function () {
           var newRow = $("<tr>");
           var cols = "";
   
           cols += '<td id="rowinputdokumen" class="col-lg-10 tablevisibility"><input type="file" id="real-file" hidden="hidden" />'+
                     '<select id="ddlmaklumat" name="ddlmaklumat" class="form-control m-input">'+ 
                     '<option value="" hidden selected>Sila Pilih</option>'+                            
                     '<option value="Salinan kad pengenalan">Salinan kad pengenalan</option>'+   
                     '<option value="Salinan Surat Beranak">Salinan Surat Beranak</option>'+                 
                     '<option value="Penyata Pendapatan/Pencen Pemohon">Penyata Pendapatan/Pencen Pemohon</option>'+   
                     '<option value="Salinan Kad OKU">Salinan Kad OKU</option>'+   
                     '<option value="Salinan geran Tanah">Salinan geran Tanah</option>'+   
                     '<option value="Surat Kebenaran Menduduki">Surat Kebenaran Menduduki</option>'+  
                     '<option value="Dokumen-dokumen yang berkaitan sebagai sokongan pemohon">Dokumen-dokumen yang berkaitan sebagai sokongan pemohon</option>'+   
                     '<option value="Cop Pengesahan Tadika Tempat Anak Belajar">Cop Pengesahan Tadika Tempat Anak Belajar</option>'+
                     '<option value="Salinan Bil Air / Bil Elektrik / TM / ASTRO / Muka Depan Buku Merah IBU">Salinan Bil Air / Bil Elektrik / TM / ASTRO / Muka Depan Buku Merah IBU</option>'+  
                     '<option value="Cop Pengesahan Bermastautin">Cop Pengesahan Bermastautin</option></select></td>';
           cols += '<td class="col-lg-1 tablevisibility" id="rowmuatnaik"><button  id="muatnaiklampirandokumen" name="muatnaiklampirandokumen" type="submit" class="btn blue start" style="background-color:#2a9df4"><i class="fa fa-upload"></i> <span> Start upload </span></button> </td>';
           cols += '<td class="col-lg-1 tablevisibility" id="rowpadamlampirandokumen"><div id="padamlampirandokumen"class="btn-sm btn btn-warning m-btn m-btn--icon m-btn--pill"><span><i class="la la-trash-o"></i><span id="padamlampirandokumen" name="padamlampirandokumen" class="tablebutton">Padam</span></span></div></td>';
           newRow.append(cols);
           $("#lampirandokumentunastable").append(newRow);
           counter++;
       });
     
   });
   
   $(document).ready(function () {
      
      $("#lampirandokumentunastable").on("click", "#padamlampirandokumen", function (event) {
   
       var lampirandokumenrowCount = $('#lampirandokumentable tr').length;
   
        document.getElementById('ldrowCount').innerHTML = lampirandokumenrowCount;
   
        $(this).closest("tr").remove()
         
 
      });
      
   });

   $(document).ready(function(){
       $('#ddlgambarrumah').on('change', function() {
         if ( this.value == 'Gambar Hadapan Rumah')
         {
           $("#rowgambarhadapan").show(); 
         }
         else if ( this.value == 'Gambar Belakang Rumah')
         {
           $("#rowgambarbelakang").show(); 
         }
         else if ( this.value == 'Gambar Sisi Kanan Rumah')
         {
           $("#rowgambarsisikanan").show(); 
         }
         else if ( this.value == 'Gambar Sisi Kiri Rumah')
         {
           $("#rowgambarsisikiri").show(); 
         }
       });
   });

   $("#gambarrumahtable").on("click", "#padamgambarhadapanrumah", function (event) { 
          
   $("#ddlgambarrumah").val($("#ddlgambarrumah option:first").val());
   $(this).closest("#rowgambarhadapan").hide();       
           counter -= 1
       });
   $("#gambarrumahtable").on("click", "#padamgambarbelakangrumah", function (event) { 
   $("#ddlgambarrumah").val($("#ddlgambarrumah option:first").val());
           $(this).closest("#rowgambarbelakang").hide();       
           counter -= 1
       });
   $("#gambarrumahtable").on("click", "#padamgambarsisikananrumah", function (event) { 
   $("#ddlgambarrumah").val($("#ddlgambarrumah option:first").val());
           $(this).closest("#rowgambarsisikanan").hide();       
           counter -= 1
       });
   $("#gambarrumahtable").on("click", "#padamgambarsisikirirumah", function (event) { 
   $("#ddlgambarrumah").val($("#ddlgambarrumah option:first").val());
           $(this).closest("#rowgambarsisikiri").hide();       
           counter -= 1
       });
</script>
@endsection