@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"> PERMOHONAN REKOMENDASI</h3>
          </div>
          <!-- /column -->
        </div>
        <form action="" id="form_permohonan" enctype="multipart/form-data">
          <div class="row">
            <div class="card shadow-lg">
              <div class="card-header">
                <h2>Formulir Permohonan Rekomendasi</h2>
              </div>
              <div class="card-body px-5">
                <div class="row">
                  <div class="col-md-6">
                      <div class="form-control mb-4">
                        <select class="form-select" name="permohonan" id="sp_permohonan"></select>
                        <label for="textInputExample">Jenis Permohonan</label>
                      </div>
    
                      <div class="form-control mb-4 shadow-lg">
                        <label for="textInputExample">Nama Pemohon</label>
                        <input name="pemohon[]" type="text" class="form-control" placeholder="Nama Pemohon">
                        <div id='list_nama_pemohon'>
                          
                        </div>
                        <button type="button" id="btnaddpemohon" class="btn btn-green btn-sm rounded-0 mt-2"><i class="fa fa-plus"></i>&nbsp Tambah Pemohon</button>
                      </div>
    
                      <div class="form-control mb-2">
                        {{-- <input id="nik" name="jenis_pengajuan" type="text" class="form-control" placeholder="NIK"> --}}
                        <select id="sp_pekerjaan" class="form-select" name="pekerjaan">
                        </select>
                        <label for="textInputExample">Pekerjaan</label>
                      </div>
    
                      <div class="form-floating mb-4">
                        <input id="asal" name="asal" type="text" class="form-control" placeholder="Universitas / Instansi / Lembaga">
                        <label for="textInputExample">Universitas / Instansi / Lembaga</label>
                      </div>
    
                      {{-- <div class="form-floating mb-4">
                        <textarea id="alamat_pemohon" name="alamat_pemohon" class="form-control" placeholder="Textarea" style="height: 150px"></textarea>
                        <label for="textareaExample">Alamat ( Pemohon / Universitas)</label>
                      </div> --}}
    
                      <div class="form-floating mb-4">
                        <input id="tujuan" name="tujuan" type="text" class="form-control" placeholder="Tujuan Survei">
                        <label for="textInputExample">Tujuan Survei</label>
                      </div>
    
                      <div class="form-floating mb-4">
                        <input id="waktu_survei" name="waktu_p" type="text" class="form-control" placeholder="Waktu Survei">
                        <label for="textInputExample">Waktu Survei</label>
                      </div>
    
                      <div class="form-floating mb-4">
                        <input id="penanggung_jawab" name="penanggung_jawab" type="text" class="form-control" placeholder="Penanggung Jawab">
                        <label for="textInputExample">Penanggung Jawab</label>
                      </div>
    
                      <div class="form-control mb-4">
                        <select class="form-select" name="status" id="status">
                          <option value="1">Baru</option>
                          <option value="2">Perpanjangan</option>
                        </select>
                        <label for="textInputExample">Status Survei</label>
                      </div>
    
                      <div class="form-control mb-4">
                        <select class="form-select" name="lampiran" id="lampiran">
                          <option value="1">Ada</option>
                          <option value="2">Menyusul saat pengambilan rekom</option>
                        </select>
                        <label for="textInputExample">Lampiran Proposal / Abstrak</label>
                      </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-floating mb-4">
                      <input name="pengikut" type="text" class="form-control" placeholder="Nama Peneliti Utama" disabled>
                      <label for="textInputExample">Nama Peneliti Utama</label>
                    </div>
    
                    <div class="form-floating mb-4">
                      <input name="hp" type="number" class="form-control" placeholder="HP">
                      <label for="textInputExample">HP</label>
                    </div>
    
                    <div class="form-floating mb-4">
                      <input name="judul" type="text" class="form-control" placeholder="Tema Survei">
                      <label for="textInputExample">Tema Survei</label>
                    </div>
    
                    <div class="form-control mb-4">
                      <select class="form-select" name="bidang" id="sp_bidang">
                      </select>
                      <label for="textInputExample">Bidang <span name="text_ganti2"></span></label>
                    </div>
    
                    {{-- <div class="form-floating mb-4">
                      <textarea id="lokasi" name="lokasi" class="form-control" placeholder="Textarea" style="height: 150px"></textarea>
                      <label for="textareaExample">Lokasi Survei</label>
                    </div> --}}
    
                    <div class="form-floating mb-4">
                      <input name="jumlah" type="text" class="form-control" placeholder="Jumlah Peserta">
                      <label for="textInputExample">Jumlah Peserta</label>
                    </div>
    
                    <div class="form-control mb-4">
                      <select class="form-select" name="persetujuan" id="persetujuan">
                        <option value="1">Baru</option>
                        <option value="2">Perpanjangan</option>
                      </select>
                      <label for="textInputExample">Persetujuan dari Lokasi</label>
                    </div>
    
                    <div class="form-control mb-4">
                      <select class="form-select" name="kewarganegaraan" id="kewarganegaraan">
                        <option value="1">Warga Negara Indonesia</option>
                        <option value="2">Warga Negara Asing</option>
                      </select>
                      <label for="textInputExample">Kewarganegaraan</label>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>

          <hr class="divider my-4">

          <div class="row">
            <div class="card shadow-lg">
              <div class="card-header">
                <h2>Berkas</h2>
              </div>
              <div class="card-body">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-control mb-4 shadow-lg">
                      <label for="jenis_url">Berkas</label>
                      <input type="file" name="nama_berkas[]" class="form-control ">
                      <small>Maksimal ukuran file 5 MB</small>
  
                      <hr class="divider my-4">
                      <div id="list_berkas">
                      </div>

                    </div>
                    <button id="btnaddberkas" type="button" class="btn btn-success btn-sm rounded-0"><i class="fa fa-plus"></i>&nbsp Tambah Berkas Lainnya</button>
                  </div>

                  <div class="col-md-5">
                    <div class="alert alert-dark alert-icon" role="alert">
                      <i class="uil uil-map-marker-info"></i> 
                      Lampirkan berkas yang dibutuhkan, antara lain Tanda Pengenal <b>( KTP / KTM / Pasport )</b>, <b>Surat Persetujuan</b>, Lampiran Abstrak dan berkas - berkas lain yang diperlukan.
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>

        </form>
        <button type="submit" form="form_permohonan" class="btn btn-lg btn-primary rounded-0"> Kirimkan Pengajuan <i class="uil uil-check"></i></button>

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

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

$('#sp_pekerjaan').select2({
	ajax: {
		url: "{{ route('e_rekomendasi.master.pekerjaan')}}",
		dataType: 'json',
		type: "GET",
		delay: 700,
		quietMillis: 10,
		data: function (params) {
			return {
				param: $.trim(params.term)
			};
		},
		processResults: function (data) {
      // console.log(data)
			return {
				results: $.map(data, function (item) {
          // console.log(item);
					return {
						id: item.id,
						text: item.pekerjaan,
					}
				})
			}
		}
	}
});

$('#sp_permohonan').select2({
	ajax: {
		url: "{{ route('e_rekomendasi.master.permohonan')}}",
		dataType: 'json',
		type: "GET",
		delay: 700,
		quietMillis: 10,
		data: function (params) {
			return {
				param: $.trim(params.term)
			};
		},
		processResults: function (data) {
      // console.log(data)
			return {
				results: $.map(data, function (item) {
          // console.log(item);
					return {
						id: item.id,
						text: item.permohonan,
					}
				})
			}
		}
	}
});

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

$('#waktu_survei').daterangepicker();

$("#btnaddpemohon").on("click",function() {
  pemohon_count = pemohon_count + 1;
  let id_pemohon = `pemohon-${pemohon_count}`;
  let form_nama_pemohon = `
    <div id="${id_pemohon}">
      <hr class="divider my-4">
      <div class="input-group mb-3">
        <input type="text" name="pemohon[]" class="form-control" placeholder="Nama Pemohon">
        <div class="input-group-append">
          <button type="button" class="btn btn-lg btn-danger rounded-0" onclick="hapusElement('${id_pemohon}')"><i class="fa fa-trash"></i></button>
        </div>
      </div>
    </div>
  `
  $("#list_nama_pemohon").append(form_nama_pemohon);
})

$("#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="jenis_url">Berkas</label>
      <small>Maksimal ukuran file 5 MB</small>
      <div class="input-group mb-3">
        <input type="file" name="nama_berkas[]" class="form-control ">
        <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);
})

$("#form_permohonan").on("submit", function (event) {
  event.preventDefault();
  // swal.showLoading();
  // let formData = new FormData(this);
  let formData = $("#form_permohonan").serialize();
  let url = "http://e-rekomendasi.kedirikab.go.id/api/api_pemohon/simpan";
  swal.showLoading();
  $.ajax({
      type:'POST',
      url: url,
      data: formData,
      dataType: "json",
      cache:false,
      contentType: false,
      processData: false,
      success: (data) => {
          this.reset();
          console.log(data)
          // let status = data.result.status;  
          // let title_status = data.result.title_status;  
          // let keterangan_status = data.result.keterangan_status;  
          // let redirect = data.result.redirect;  
          
          // showSwal(status,title_status,keterangan_status);
          // location.reload();
      },
      error: function(err){
          console.log(err)
          alert('Terjadi kesalahan pada server');
      }
  });
});

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


</script>
@endsection