@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-15 py-md-17">
        <div class="row text-center mb-10">
          <div class="col-md-10 col-lg-9 col-xxl-8 mx-auto">
            <h3 class="display-3 px-xl-10 mb-0">The service we offer is specifically designed to meet your needs.</h3>
          </div>
          <!-- /column -->
        </div>
        <div class="row">
          <div class="col-md-5">
            <figure class="rounded mb-0"><img class="img-fluid" src="{{asset('assets/img/illustrations/ui5.png')}}" srcset="{{asset('assets/img/illustrations/ui5@2x.png 2x')}}" alt="" /></figure>
          </div>
          <div class="col-md-7">
            <ul class="nav nav-tabs nav-tabs-basic">
              <li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab_data_diri">Data Diri</a> </li>
              <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab_berkas">Berkas</a> </li>
              <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab_lampiran_tambahan">Lampiran Tambahan</a> </li>
            </ul>
            <!-- /.nav-tabs -->
            <form action="#">
              <div class="tab-content mt-0 mt-md-5">
                <div class="tab-pane fade show active" id="tab_data_diri">
                  <div class="form-floating mb-4">
                    <input id="nik" name="nik" type="text" class="form-control" placeholder="NIK">
                    <label for="textInputExample">NIK</label>
                  </div>
        
                  <div class="form-floating mb-4">
                    <input id="no_kk" name="no_kk" type="text" class="form-control" placeholder="No. KK">
                    <label for="textInputExample">No. KK</label>
                  </div>
        
                  <div class="form-floating mb-4">
                    <input id="nama" name="nama" type="text" class="form-control" placeholder="Nama Lengkap">
                    <label for="textInputExample">Nama Lengkap</label>
                  </div>
        
                  <div class="form-floating mb-4">
                    <input id="tanggal_lahir" name="tanggal_lahir" type="date" class="form-control" placeholder="Tanggal Lahir">
                    <label for="textInputExample">Tanggal Lahir</label>
                  </div>
                  
                  <div class="form-select-wrapper mb-4">
                    <select class="form-select" aria-label="Default select example" required>
                      <option selected>Pilih Jenis Kelamin</option>
                      <option value="1">Laki Laki</option>
                      <option value="2">Perempuan</option>
                    </select>
                  </div>
                </div>
                <!--/.tab-pane -->
                <div class="tab-pane fade" id="tab_berkas">
                  
                  <div class="form-group mb-4">
                    <label for="textInputExample">Foto Diri 3 X 6</label>
                    <input id="swafoto" name="swafoto" type="file" class="form-control" placeholder="Nama Lengkap">
                  </div>
        
                  <div class="form-group mb-4">
                    <label for="textInputExample">Scan Kartu Keluarga</label>
                    <input id="scan_kk" name="scan_kk" type="file" class="form-control" placeholder="Tanggal Lahir">
                  </div>
                </div>
                <!--/.tab-pane -->
                <div class="tab-pane fade" id="tab_lampiran_tambahan">
                  ...
                </div>
                <!--/.tab-pane -->
              </div>

              <button type="button" class="btn btn-lg btn-primary rounded-0"> Kirimkan Pengajuan <i class="uil uil-check"></i></button>
            </form>
          </div>
        </div>
      </div>
    </section>
  </div>   
</div>
@endsection

@section('script')
<script>

    function showModalLayanan(_this){
        let url = $(_this).data("url");
        let nama_layanan = $(_this).data("nama_layanan");

        $('#nama_layanan').empty();
        $('#nama_layanan').append(nama_layanan);
        $('#modal_informasi_layanan').modal('show');
        console.log("link : "+url);
    }
    
</script>
@endsection