@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"> Formulir Permohonan SKT </h3>
          </div>
        </div>
        <div class="card">
          <div class="card-body" id="tab_identitas">
            <form id="form_input_skt" method="post" enctype="multipart/form-data" action="{{ route('e_rekomendasi.simpan_skt') }}" >
            @csrf
              <div class="row">
                <div class="col-md-6">
                  <div class="form-floating mb-4">
                          <input id="nama_organisasi" name="nama_organisasi" type="text" class="form-control" placeholder="nama_organisasi" required>
                          <label for="nama_organisasi"> Nama Organisasi</label>
                  </div>
                  <div class="form-control mb-4">
                          <label for="bidang"> Bidang Kegiatan </label>
                          <!-- <input id="bidang" name="bidang" type="text" class="form-control" placeholder="bidang"> -->
                          <select class="form-select" id="bidang" name="bidang" required>
                          </select>
                  </div>
                  <div class="form-floating mb-4">
                          <!-- <input id="alamat" name="alamat" type="text" class="form-control" placeholder="alamat"> -->
                          <textarea name="alamat" id="alamat" cols="20" rows="5" class="form-control" style="height: 110px" required></textarea>
                          <label for="alamat"> Alamat Kantor / Sekretariat</label>
                  </div>
                  <div class="form-floating mb-4">
                          <input id="tempat_p" name="tempat_p" type="text" class="form-control" placeholder="tempat_p" required>
                          <label for="tempat_p"> Tempat Pendirian</label>
                  </div>
                  <div class="form-floating mb-4">
                          <input id="waktu_p" name="waktu_p" type="date" class="form-control" placeholder="waktu_p" required>
                          <label for="waktu_p"> Waktu Pendirian</label>
                  </div>
                  <div class="form-floating mb-4">
                          <input id="asas_o" name="asas_o" type="text" class="form-control" placeholder="asas_o" required>
                          <label for="asas_o"> Asas Ciri Organisasi</label>
                  </div>
                  <div class="form-floating mb-4">
                          <!-- <input id="tujuan" name="tujuan" type="text" class="form-control" placeholder="tujuan"> -->
                          <textarea name="tujuan_o" id="tujuan_o" cols="20" rows="5" class="form-control" style="height: 110px" required></textarea>
                          <label for="tujuan_o"> Tujuan Organisasi</label>
                  </div>
                  <div class="form-floating mb-4">
                          <input id="nama_pendiri" name="nama_pendiri" type="text" class="form-control" placeholder="nama_pendiri" required>
                          <label for="nama_pendiri"> Nama Pendiri</label>
                  </div>
                  <div class="form-floating mb-4">
                          <input id="nama_pembina" name="nama_pembina" type="text" class="form-control" placeholder="nama_pembina" required>
                          <label for="nama_pembina"> Nama Pembina</label>
                  </div>
                  <div class="form-floating mb-4">
                          <input id="nama_penasehat" name="nama_penasehat" type="text" class="form-control" placeholder="nama_penasehat" required>
                          <label for="nama_penasehat"> Nama Penasehat</label>
                  </div>
                  <div class="form-control mb-4">
                          <label for="jenis"> Jenis</label>
                          <!-- <input id="jenis" name="jenis" type="text" class="form-control" placeholder="jenis"> -->
                          <select class="form-select" id="jenis" name="jenis" required>
                            <option value="1">Baru</option>
                            <option value="2">Perpanjang</option>
                          </select>
                  </div>
                  <div class="form-floating mb-4">
                          <input id="logo" name="logo" type="file" class="form-control" placeholder="logo" required>
                          <label for="logo"> Lambang / Logo Organisasi</label>
                          <small>Maksimal ukuran file 5 MB</small>
                  </div>
                  <div class="form-floating mb-4">
                          <input id="bendera" name="bendera" type="file" class="form-control" placeholder="bendera" required>
                          <label for="bendera"> Papan Nama Organisasi</label>
                          <small>Maksimal ukuran file 5 MB</small>
                  </div>
                </div>

                <div class="col-md-6">
                  <div class="card-body">
                    <p>Nama Pengurus</p>
                    <div class="form-floating mb-4">
                            <input id="nama_ketua" name="nama_ketua" type="text" class="form-control" placeholder="nama_ketua" required>
                            <label for="nama_ketua"> a. Nama Ketua / Sederajat</label>
                    </div>
                    <div class="form-floating mb-4">
                            <input id="nama_sekretaris" name="nama_sekretaris" type="text" class="form-control" placeholder="nama_sekretaris" required>
                            <label for="nama_sekretaris"> b. Nama Sekretaris / Sederajat</label>
                    </div>
                    <div class="form-floating mb-4">
                            <input id="nama_bendahara" name="nama_bendahara" type="text" class="form-control" placeholder="nama_bendahara" required>
                            <label for="nama_bendahara"> c. Nama Bendahara / Sederajat</label>
                    </div>
                  </div>
                  <div class="form-floating mb-4">
                          <input id="masa_bhakti" name="masa_bhakti" type="text" class="form-control" placeholder="masa_bhakti" required>
                          <label for="masa_bhakti"> Masa Bakti Kepengurusan </label>
                  </div>
                  <div class="form-floating mb-4">
                          <input id="keputusan" name="keputusan" type="text" class="form-control" placeholder="keputusan" required>
                          <label for="keputusan">Keputusan Tertinggi Ormas </label>
                  </div>
                  <div class="form-floating mb-4">
                          <input id="unit" name="unit" type="text" class="form-control" placeholder="unit" required>
                          <label for="unit"> Unit/cabang/Sayap Otonom Organisasi</label>
                  </div>
                  <div class="form-floating mb-4">
                          <input id="usaha" name="usaha" type="text" class="form-control" placeholder="usaha" required>
                          <label for="usaha"> Usaha Organisasi </label>
                  </div>
                  <div class="form-floating mb-4">
                          <input id="sumber_keuangan" name="sumber_keuangan" type="text" class="form-control" placeholder="sumber_keuangan" required>
                          <label for="sumber_keuangan"> Sumber Keuangan </label>
                  </div>
                </div>
              </div>
              
              <hr class="my-8">
              <div class="row">
                <h3>Berkas</h3>
                <p>Lampirkan berkas yang dibutuhkan, antara lain Akta pendirian yang dikeluarkan oleh Notaris yang memuat 
                        AD atau AD dan ART (Sampul depan, halaman tanda tangan, dan Keterangan), Susunan Pengurus, Surat Keterangan Domisili Ormas 
                        dan berkas lain yang dibutuhkan 
                </p>
                <div class="mb-4 col-md-10">
                        <label for="">Berkas</label>
                        <small>Maksimal ukuran file 5 MB</small>
                        <input type="text" id="nama_berkas" name="nama_berkas[]" class="form-control" placeholder="Nama Berkas" required>
                        <input id="berkas" name="berkas[]" type="file" class="form-control" placeholder="berkas" required>
                          <hr class="divider my-4">
                                <div id="list_berkas">
                                </div>
                          <br>
                          <button id="btnaddberkas" type="button" class="btn btn-success btn-sm rounded-0"><i class="fa fa-plus"></i>&nbsp Tambah Berkas</button>
                </div>
              </div>
              <div class="text-center">
                <button type="submit" class="btn btn-lg btn-primary rounded-0"> Kirim Permohonan SKT <i class="uil uil-check"></i></button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>
@endsection

@section('script')
<script>
var berkas_count = 0;

$("#jenis").select2();
// $("#bidang").select2();

$('#masa_bhakti').daterangepicker({
        // locale: {
        //     format: 'DD/MM/YYYY'
        // }
});

$("#btnaddberkas").on("click",function(){
  berkas_count = berkas_count+1;
  // console.log("berhasil")
  let id_berkas = `berkas-${berkas_count}`;
  let form_berkas = `
    <div id="${id_berkas}">
      <hr class="divider my-4">
      <label for="">Berkas</label>
      <small>Maksimal ukuran file 5 MB</small>
      <div class="input-group mb-3">
                <input type="text" id="nama_berkas" name="nama_berkas[]" class="form-control" placeholder="Nama Berkas" required>
        <div class="input-group-append">
                <input type="file" id="berkas" name="berkas[]" class="form-control" required>
        </div>
        <div class="input-group-append">
                <button type="button" class="btn btn-lg btn-danger rounded-0" onclick="hapusElement('${id_berkas}')"><i class="fa fa-trash"></i></button>
        </div>
      </div>
      
    </div>
  `;

  $("#list_berkas").append(form_berkas);
})

function hapusElement(idelment){
  $(`#${idelment}`).remove();
}

$('#bidang').select2({
	ajax: {
		url: "{{ route('e_rekomendasi.master.bidang_skt')}}",
		dataType: 'json',
		type: "GET",
		delay: 700,
		quietMillis: 10,
		data: function (params) {
			return {
				param: $.trim(params.term)
		        };
		},
		processResults: function (data) {
			return {
				results: $.map(data, function (item) {
					return {
						id: item.id,
						text: item.bidang,
					}
				})
			}
		}
	}
});
</script>
@endsection