@extends('layouts.frontend')

@section('style')
@endsection

@section('slider')
<section id="page-title">
	<div class="container clearfix">
		<h1>Permohonan Informasi Online</h1>
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="#">PIO</a></li>
			<li class="breadcrumb-item active">Formulir</li>
		</ol>
	</div>
</section>
@endsection

@section('content')
<div class="container clearfix">
	<div id="contact-form-overlay" class="clearfix">
		<div class="fancy-title title-dotted-border">
			<h3>Formulir PIO</h3>
		</div>
				<div class="form-widgets" data-alert-type="inline">

					<div class="form-result"></div>

					<div class="row">
						<div class="col-lg-12">
							<form id="formpermohonan" class="row" action="{{route('kirimpermohonan')}}" method="post" enctype="multipart/form-data">
								<div class="form-process"></div>
								@csrf
								<div class="col-12 form-group">
									<label>Nama :</label>
									<input type="text" name="nama" id="nama" class="sm-form-control show-error-msg" value="" placeholder="Masukkan Nama Lengkap">
								</div>
								<div class="col-12 form-group">
									<div class="row">
										<div class="col-md-6 form-group">
											<label>NIK :</label>
											<input type="text" name="nik" id="nik" class="sm-form-control show-error-msg" value="" placeholder="Masukkan Nomor Induk KTP">
										</div>
										<div class="col-md-6 form-group">
											<label>Upload KTP :</label>
											<input type="file" id="uploadktp" name="uploadktp" class="sm-form-control show-error-msg" data-show-preview="false" />
										</div>
									</div>
								</div>
								<div class="col-12 form-group">
									<label>e-Mail :</label>
									<input type="email" name="email" id="email" class="sm-form-control show-error-msg" value="" placeholder="Masukkan e-Mail">
								</div>
								<div class="col-12 form-group">
									<div class="row">
										<div class="col-md-6 form-group">
											<label>Jenis Permohonan:</label>
											<select class="sm-form-control show-error-msg" name="jenispermohonan" id="jenispermohonan">
												<option value="">-- Pilih Salah Satu --</option>
												<option value="Perorang">Perorang</option>
												<option value="Ormas">Ormas</option>
											</select>
										</div>
										<div class="col-md-6 form-group">
											<label>Upload Akta:</label>
											<input type="file" id="uploadakta" name="uploadakta" class="sm-form-control show-error-msg" data-show-preview="false" disabled />
										</div>
									</div>
								</div>
								<div class="col-12 form-group">
									<label>Alamat :</label>
									<textarea name="alamat" id="alamat" class="sm-form-control show-error-msg" cols="30" rows="7"></textarea>
								</div>
								<div class="col-12 form-group">
									<label>Rincian informasi yang dibutuhkan :</label>
									<textarea name="rincian" id="rincian" class="sm-form-control show-error-msg" cols="30" rows="7"></textarea>
								</div>
								<div class="col-12 form-group">
									<label>Tujuan penggunaan informasi :</label>
									<textarea name="tujuan" id="tujuan" class="sm-form-control show-error-msg" cols="30" rows="7"></textarea>
								</div>
								<div class="col-12 form-group">
									<div class="row">
										<div class="col-md-6 form-group">
											<label>Cara memperoleh informasi:</label>
											<select class="sm-form-control show-error-msg" name="cara" id="cara">
												<option value="">-- Pilih Salah Satu --</option>
												<option value="Melihat/Membaca/Mendengarkan/Mencatat">Melihat/Membaca/Mendengarkan/Mencatat</option>
												<option value="Mendapatkan Salinan Informasi (Hardcopy/Softcopy)">Mendapatkan Salinan Informasi (Hardcopy/Softcopy)</option>
											</select>
										</div>
										<div class="col-md-6 form-group">
											<label>Cara mendapatkan salinan informasi:</label>
											<select class="sm-form-control show-error-msg" name="salin" id="salin" disabled>
												<option value="">-- Pilih Salah Satu --</option>
												<option value="Mengambil Langsung">Mengambil Langsung</option>
												<option value="e-Mail">e-Mail</option>
												<option value="Kurir">Kurir</option>
												<option value="Pos">Pos</option>
												<option value="Faksimili">Faksimili</option>
											</select>
										</div>
									</div>
								</div>
								
								<div class="col-12 hidden">
									<input type="text" id="jobs-application-botcheck" name="jobs-application-botcheck" value="" />
								</div>
								
								<div class="col-12 form-group">
									<script src="https://www.google.com/recaptcha/api.js" async defer></script>
									<div class="g-recaptcha" data-sitekey="6LfAJaMUAAAAAI9KNUm7Bks0XXfsszi57JjpaWY-"></div>
									<input type="hidden" class="hiddenRecaptcha sm-form-control show-error-msg required" name="hiddenRecaptcha" id="hiddenRecaptcha">
								</div>

								<div class="col-12">
									<button type="submit" name="jobs-application-submit" class="btn btn-secondary">Kirim</button>
								</div>

								<input type="hidden" name="prefix" value="jobs-application-">
							</form>
						</div>
					</div>

				</div>

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

@endsection

@section('modal')
@endsection

@section('script')
<script>
	jQuery(function($) {
		$("#jenispermohonan").on("change",function () {
			$("#uploadakta").val("");
			if($("#jenispermohonan").val() == "Ormas"){
				// $("#uploadakta").addClass("show-error-msg");
				$('#uploadakta').prop('disabled', false);
			}else{
				// $("#uploadakta").removeClass("show-error-msg");
				$("#uploadakta").removeClass("error");
				$('#uploadakta').prop('disabled', true);
			}
		});

		$("#cara").on("change",function () {
			$("#salin").val("");
			if($("#cara").val() == "Mendapatkan Salinan Informasi (Hardcopy/Softcopy)"){
				// $("#salin").addClass("show-error-msg");
				$('#salin').prop('disabled', false);
			}else{
				// $("#salin").removeClass("show-error-msg");
				$("#salin").removeClass("error");
				$('#salin').prop('disabled', true);
			}
		});

		$("#formpermohonan").validate({
        	ignore: ".ignore",
			rules: {
				nama: "required",
				nik: "required",
				uploadktp: {
					required: true,
					accept: "image/*"
				},
				email: "required",
				jenispermohonan: "required",
				uploadakta: {
					required: function() {
						if($("#jenispermohonan").val() == "Ormas"){
							return true;
						}else{
							$("#uploadakta").removeClass("error");
							return false;
						}
					},
					accept: "application/pdf"
				},
				alamat: "required",
				rincian: "required",
				tujuan: "required",
				cara: "required",
				salin: {
					required: function() {
						if($("#cara").val() == "Mendapatkan Salinan Informasi (Hardcopy/Softcopy)"){
							return true;
						}else{
							$("#salin").removeClass("error");
							return false;
						}
				}},
				hiddenRecaptcha: {
                	required: function () {
	                    if (grecaptcha.getResponse() == '') {
	                        return true;
	                    } else {
	                        return false;
	                    }
				}},

			},
			messages: {
				nama: "Nama tidak boleh kosong",
				nik: "NIK tidak boleh kosong",
				uploadktp: {
					"required":"KTP harus di upload",
					"accept":"File tidak sesuai",
				},
				email: "e-Mail tidak boleh kosong",
				jenispermohonan: "Jenis Permohonan harus di pilih",
				uploadakta: {
					"required":"Akta harus di upload",
					"accept":"File tidak sesuai",
				},
				alamat: "Alamat tidak boleh kosong",
				rincian: "Rincian Informasi tidak boleh kosong",
				tujuan: "Tujuan Penggunaan tidak boleh kosong",
				cara: "Cara Memperoleh Informasi harus di pilih",
				salin: "Cara Mendapatkan Salinan harus di pilih",
				hiddenRecaptcha: "Captcha belum di konfirmasi"
			}//,
			// submitHandler: function() {
				// $("#formpermohonan").find('.form-process').fadeIn();
			// }
		});

	})
</script>

@endsection