@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;
   }
  
   
  
   .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; 
   }
 
   #rowinputdokumenicon,
   #rowinputdokumen,
   #rowmuatnaik,
   #rowmuatnaik2,
   #rowpadamlampirandokumen,
   #rowpadam2{
   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;  
   }
   
   h5{
   background-image: url("Information-icon2.png")!important;
   background-repeat: no-repeat!important;
   background-position: right!important;
   padding-right: 40px!important;
   margin-bottom: 5px !important;
   display: inline-block!important;
   }
   th {
   border: 2px solid #BCBEC0!important;
   border-collapse: collapse!important;
   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">
            <div class="m-portlet__head-caption">
               <div class="m-portlet__head-title">
                  <h3 class="m-portlet__head-text">{{ App\IPR::where('name', 'sitec')->pluck('display_name')[0] }}
               </div>
            </div>
            <div id="cardsitec" 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="sitec" class="m-portlet__head-text"  >
                           SIDEC
                        </h3>
                     </div>
                  </div>
               </div>
               <!--begin::Form-->
               <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">
                           Kategori:
                        </h3>
                     </div>
                     <div class="form-group m-form__group row">
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>
                        Silih pilih kategori:
                        </label>
                        <div class="col-lg-4">
                           <select id="kategori" name="kategori" class="form-control m-input" onchange="getKategori($(this).val())">
                              <option value="" hidden selected>Sila pilih kategori</option>
                              <option value="Electronics, Games, Phone & Gadjet">Electronics, Games, Phone & Gadjet</option>
                              <option value="Book & Stationery">Book & Stationery</option>
                              <option value="Home & Living">Home & Living</option>
                              <option value="Sport, Outdoor & Hobbies">Sport, Outdoor & Hobbies</option>
                              <option value="Baby & Kids">Baby & Kids</option>
                              <option value="Fashion, Shoes & Accessories">Fashion, Shoes & Accessories</option>
                              <option value="Pharmacy, Health & Beauty">Pharmacy, Health & Beauty</option>
                              <option value="Pets, Grocery, Food & Baverage">Pets, Grocery, Food & Baverage</option>
                              <option value="Automotive & Machinery">Automotive & Machinery</option>
                              <option value="Coupon, Tiket, Service & Package">Coupon, Tiket, Service & Package</option>
                              <option value="lainlain">Other(Allow Manual Enter)</option>
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="m-form__seperator m-form__seperator--dashed maklumatsyarikat"></div>
                  <div class="m-form__section m-form__section--middle maklumatsyarikat">
                     <div class="m-form__heading">
                        <h3 id="maklumatsyarikat" class="m-form__heading-title">
                           Maklumat Syarikat:
                        </h3>
                     </div>
                     <div class="form-group m-form__group row">
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Nama Syarikat:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" id="namasyarikat" name="namasyarikat" placeholder="Sila masukan nama syarikat">
                        </div>
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Nama Kedai:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" id="namakedai" name="namakedai" placeholder="Sila masukan nama kedai">
                        </div>
                     </div>
                     <div class="form-group m-form__group row">
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>No. Pendaftaran Syarikat:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" id="nopendaftaransyarikat" name="nopendaftaransyarikat" placeholder="Sila masukan nombor pendaftaran syarikat">
                        </div>
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Nama Akaun (Syarikat Atau Persendirian):
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" id="namaakaun" name="namaakaun" placeholder="Sila masukan nama akaun">
                        </div>
                     </div>
                     <div class="form-group m-form__group row">
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Nama Pemilik:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" id="namapemilik" name="namapemilik" placeholder="Sila masukan nama pemilik">
                        </div>
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Nama Bank:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" id="namabank" name="namabank" placeholder="Sila masukan nama bank">
                        </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="nokadpengenalan" name="nokadpengenalan" 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 Akuan:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" name="noakuan" id="noakuan" placeholder="Sila masukan no akuan">
                        </div>
                     </div>
                     <div class="form-group m-form__group row">
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Emel:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" name="emel" id="emel" placeholder="Sila masukan emel"  onblur="checkEmail($(this))">
                        </div>
                        <label class="col-lg-2 col-form-label">
                        <span style="color: red">* </span>Pautan URL Laman Web/ Facebook:
                        </label>
                        <div class="col-lg-4">
                           <input type="text" class="form-control m-input" name="pautanurllamanwebfacebook" id="pautanurllamanwebfacebook" placeholder="Sila masukan pautan url laman web/facebook" >
                        </div>
                     </div>
                  </div>
                  <div class="m-form__seperator m-form__seperator--dashed maklumatoranguntukdihubungi"></div>
                  <div class="m-form__section m-form__section--middle maklumatoranguntukdihubungi">
                     <div class="m-form__heading">
                        <h3 id="maklumatoranguntukdihubungi" class="m-form__heading-title">
                           Maklumat Orang Untuk Dihubungi:
                        </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="namamaklumatoranguntukdihubungi" name="namamaklumatoranguntukdihubungi" placeholder="Sila masukan nama">
                        </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="notelefonbimbitmaklumatoranguntukdihubungi" name="notelefonbimbitmaklumatoranguntukdihubungi" placeholder="Sila masukan no telefon bimbit">
                        </div>
                     </div>
                  </div>
                  <div class="m-form__seperator m-form__seperator--dashed lampirandokumen"></div>
                  <div class="m-form__section m-form__section--last 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">
                     <div class="col-lg-12">
                        <table id="lampirandokumentable"  class="table order" >
                           <thead >
                              <tr>
                                 <td class="col-lg-10" id="rowinputdokumenicon">
                                    <div id="popup" name="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">Borang Pendaftaran Online Yang Dicetak Dari Sistem</td>
                                                         <td id="tool">Pemohon</td>
                                                      </tr>
                                                      <tr>
                                                         <td id="tool">2. </td>
                                                         <td id="tool">Salinan Sijil Kelahiran Anak Yang Dipohon</td>
                                                         <td id="tool">Anak Pemohon</td>
                                                      </tr>
                                                      <tr>
                                                         <td id="tool">3.</td>
                                                         <td id="tool">Salinan MyKad Bapa/Ibu/Anak (anak yang dihantar di taska sahaja)</td>
                                                         <td id="tool">Pemohon/ Pasangan</td>
                                                      </tr>
                                                      <tr>
                                                         <td id="tool">4.</td>
                                                         <td id="tool">Salinan MyKad Bapa</td>
                                                         <td id="tool">Pemohon/ Pasangan</td>
                                                      </tr>
                                                      <tr>
                                                         <td id="tool">5.</td>
                                                         <td id="tool">Salinan Slip Gaji Bapa/Ibu</td>
                                                         <td id="tool"> Pemohon/ Pasangan</td>
                                                      </tr>
                                                      <tr>
                                                         <td id="tool">6.</td>
                                                         <td id="tool">Salinan pengesahan akuan pendapatan bagi ibu bapa yang bekerja sendiri</td>
                                                         <td id="tool">Pemohon/ Pasangan</td>
                                                      </tr>
                                                      <tr>
                                                         <td id="tool">7.</td>
                                                         <td id="tool">Cop Pengesahan Mastautin(bagi bukan kelahiran Selangor)</td>
                                                         <td id="tool">Pemohon/ Pasangan</td>
                                                      </tr>
                                                      <tr>
                                                         <td id="tool">8.</td>
                                                         <td id="tool">Cop Pengesahan Tadika Tempat Anak Belajar</td>
                                                         <td id="tool">Pemohon/ Pasangan</td>
                                                      </tr>
                                                      <tr>
                                                         <td id="tool">9.</td>
                                                         <td id="tool">Salinan Pengesahan Pendaftaran SPR bagi Ibu dan Bapa</td>
                                                         <td id="tool">Pemohon/ Pasangan</td>
                                                      </tr>
                                                   </table>
                                                </td>
                                             </tr>
                                          </table>
                                       </span>
                                    </div>
                                 </td>
                                 <td class="col-lg-1" id="rowmuatnaik2"></td>
                                 <td class="col-lg-1" id="rowpadam2"  ><label class="labelwarning" id="ldrowCount"></label></td>
                              </tr>
                           </thead>
                           <tbody id="ldbodyrow" name="ldbodyrow">
                              <tr>
                                 <td class="col-lg-10 tablevisibity" id="rowinputdokumen" >
                                    <input type="file" id="real-file" hidden="hidden" />
                                    <select id="ddlmaklumat" class="form-control m-input"  >
                                    <option value="" hidden selected>Sila Pilih</option>
                                       <option value="Borang Pendaftaran Online Yang Dicetak Dari Sistem">Borang Pendaftaran Online Yang Dicetak Dari Sistem</option>
                                       <option value="Salinan Sijil Kelahiran Anak Yang Dipohon">Salinan Sijil Kelahiran Anak Yang Dipohon</option>
                                       <option value="Salinan MyKad Bapa/Ibu/Anak">Salinan MyKad Bapa/Ibu/Anak</option>
                                       <option value="Salinan MyKad Bapa">Salinan MyKad Bapa</option>
                                       <option value="Salinan Slip Gaji Bapa/Ibu">Salinan Slip Gaji Bapa/Ibu</option>
                                       <option value="Salinan pengesahan akuan pendapatan bagi ibu bapa yang bekerja sendiri">Salinan pengesahan akuan pendapatan bagi ibu bapa yang bekerja sendiri</option>
                                       <option value="Cop Pengesahan Mastautin(bagi bukan kelahiran Selangor)">Cop Pengesahan Mastautin(bagi bukan kelahiran Selangor)</option>
                                       <option value="Salinan Pengesahan Pendaftaran SPR bagi Ibu dan Bapa">Salinan Pengesahan Pendaftaran SPR bagi Ibu dan Bapa</option>
                                    </select>
                                 </td>
                                 <td class="col-lg-1 tablevisibity" id="rowmuatnaik" ><button  id="muatnaiklampirandokumen" name="muatnaiklampirandokumen" type="submit" class="btn blue start" style="background-color:#2a9df4"><i class="fa fa-upload"></i> <span> Muat Naik </span></button> </td>
                                 <td class="col-lg-1 tablevisibity" 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" 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" class="tablebutton" >Tambah</span></span></div>
                                 </td>
                              </tr>
                           </tfoot>
                        </table>
                        </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>
   $("#inputnamapangsapuri,#inputpengerusi,#inputjeniskerosakan").inputmask("Regex", { regex: "[a-zA-Z]*" });
   
   $("#nokadpengenalan").inputmask({mask: "999999999999", placeholder: ""});
   
   $('#notelefonbimbitmaklumatoranguntukdihubungi').inputmask('Regex', { regex: "^(01)[0-9]{8,9}$"});
   
   $("#noakuan").inputmask({mask: "99999999999999999999",placeholder: ""});
   
   $('#inputnotelefonpejabat,#inputnotelefonfax').inputmask('Regex', { regex: "^(03)[0-9]{8}$"});
   
   $("#inputposkod,#inputposkodpejabatpasangan").inputmask({mask: "99999", placeholder: ""});
   
   $('#inputbilblokpangsapuri,#inputbiltingkatblok,#inputbilunitrumah,#inputbilunitlif').inputmask('Regex', { regex: "^[0-9]{1,2}$"});  
   
   function checkEmail(x) {
   var email_format = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
   
       x.next().remove();
           
       if(x.val().match(email_format)) {
               x.next().remove();
           } else if(x.val() == '') {
               x.next().remove();
           } else {
               x.after("<small style='color: #f4516c'>Sila masukkan format emel yang betul.</small>");
               x.focus();
           }
       }
        
   
   

   
   $(document).ready(function(){
     $("#inputalamatpenuh").on('input',function () {
       var namapangsapuri = $("#inputalamatpenuh").val();
       
   
        if(namapangsapuri.length == 0)
        {
         $(this).css("box-shadow", "0 0 0 .2rem rgb(247, 14, 14)!important");
           $(this).css({background:'url("Warning Icon.png") right no-repeat'});
           document.getElementById('labelwarningalamatpenuh').innerHTML = 'Sila nyatakan alamat penuh.';
       } 
       else
       {            
           $(this).css({background:'url("")'});          
           document.getElementById('labelwarningalamatpenuh').innerHTML = '';
       }
     });
   });
   
   
   
   $(document).ready(function () {
      var counter = 0;
   
      $("#addrowlampirandokumen").on("click", function () {
          var newRow = $("<tr>");
          var cols = "";
   
            cols += '<td id="rowinputdokumen" class="col-lg-10 tablevisibity"><input type="file" id="real-file" hidden="hidden" />'+
                    '<select id="ddlmaklumat" class="form-control m-input" >'+ 
                    '<option value="" hidden selected>Sila Pilih</option>'+                            
                    '<option value="a">Cetak Borang Permohonan</option>'+   
                    '<option value="b">Salinan Sijil Lahir / Mykid Anak</option>'+                 
                    '<option value="c">Salinan MyKad Ibu</option>'+   
                    '<option value="d">Salinan MyKad Bapa</option>'+   
                    '<option value="e">Salinan Perakuan Anak Angkat / Sijil Kematian / Sijil Cerai</option>'+   
                    '<option value="f">Salinan Slip Gaji / Surat Akuan Pengesahan Pendapatan IBU</option> '+  
                    '<option value="g">Salinan Slip Gaji / Surat Akuan Pengesahan Pendapatan BAPA</option>'+   
                    '<option value="h">Cop Pengesahan Tadika Tempat Anak Belajar</option>'+
                    '<option value="i">Salinan Bil Air / Bil Elektrik / TM / ASTRO / Muka Depan Buku Merah IBU</option> '+  
                    '<option value="j">Cop Pengesahan Bermastautin</option></select></td>';
            cols += '<td class="col-lg-1 tablevisibity" id="rowmuatnaik"><button  id="muatnaiklampirandokumen" name="muatnaiklampirandokumen" type="submit" class="btn blue start" style="background-color:#2a9df4"><i class="fa fa-upload"></i> <span> Muat Naik </span></button> </td>';
            cols += '<td class="col-lg-1 tablevisibity" id="rowpadamlampirandokumen"><div id="padamlampirandokumen" name="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);
          $("#lampirandokumentable").append(newRow);
          counter++;
     
      });
   });
   
   
   $(document).ready(function () {
          
          $("#lampirandokumentable").on("click", "#padamlampirandokumen", function (event) {
   
            $(this).closest("tr").remove() 
          });
          
      });
</script>
@endsection