@extends('layouts.app')

@section('content')
<div class="page-frame bg-pale-navy">
  <div class="content-wrapper">
    <section class="wrapper bg-light">
      <div class="container py-5 py-md-7">
        <div class="row">
          <div class="col-md-6 offset-md-3">
            <ul class="nav nav-tabs nav-tabs-basic">
              <!-- <li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab_tagihan">Cek Tagihan</a></li> -->
              <!-- <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab_data_kkpr">Data KKPR Non Berusaha</a> </li> -->
            </ul>

            <div class="tab-content mt-0 mt-md-5">

              {{-- Tab Cek Tagihan --}}
              <div class="tab-pane fade show active" id="tab_tagihan">
                <div class="card mb-4">
                  <div class="card-header">
                    <h2> Ajukan Permohonan Pembaharuan NIK</h2>
                  </div>
                  <div class="card-body px-5">
                    <form id="form_cek_tagihan" method="post" action="{{ route('e_sppt.cek_tagihan') }}">
                      @csrf
                      <div class="row">
                        
                        <div class="form-control mb-4 col-8">
                          <label for="nik">NIK</label>
                          <input id="nik" name="nik" type="number" class="form-control" >
                        </div>
                        
                        <div class="form-control mb-4 col-8">
                          <label for="no_kk">Nomor KK</label>
                          <input id="no_kk" name="no_kk" type="number" class="form-control" >
                        </div>

                        <div class="form-control mb-4 col-8">
                          <label for="nama">Nama</label>
                          <input id="nama" name="nama" type="text" class="form-control" >
                        </div>

                        <div class="form-control mb-4 col-8">
                          <label for="keperluan">Keperluan</label>
                          <input id="keperluan" name="keperluan" type="text" class="form-control">
                        </div>

                        <div class="form-control mb-4 col-8">
                          <label for="ktp_kia_akta">Foto KTP / KIA / Akta Lahir</label>
                          <input id="ktp_kia_akta" name="ktp_kia_akta" type="file" class="form-control">
                        </div>

                        <div class="form-control mb-4 col-8">
                          <label for="foto_kk">Foto KK</label>
                          <input id="foto_kk" name="foto_kk" type="file" class="form-control">
                          
                        </div>

                        <div class="col-4">
                          <button type="button" onclick="" class="btn btn-sm btn-primary rounded"> <i class="uil uil-check"></i>&nbspKirim Pengajuan</button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>               
              </div>

            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>
@endsection

@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
<script>
  $(document).ready(function() {
    $('.nop').mask('00.00.000.000.000.0000.0');
  });

  function valid_nop()
    {
        var nop = $('#nop').val();
        var char = nop.length;
        if(char == 24)
        {
            $('#form_cek_tagihan').submit();
        }else{
            alert('FORMAT NOP BELUM SESUAI');
        }
    }
</script>
@endsection