@extends('layout.main')
@section('content')
@push('css')
<style>
.form-select {
padding: 8px 15px;
border: 1px solid #ccc;
border-radius: 0;
width: 100%;
background-color: #ECEFF1;
font-family: montserrat;
color: #2C3E50;
font-size: 16px;
letter-spacing: 1px;
-webkit-appearance: none;
/* Remove default arrow on Chrome */
-moz-appearance: none;
/* Remove default arrow on Firefox */
appearance: none;
/* Remove default arrow on other browsers */
background-image: url("your-arrow-icon.png");
/* Add your custom arrow icon */
background-position: right center;
background-repeat: no-repeat;
}
.form-select:focus {
border: 1px solid #009C98;
outline: none;
}
* {
margin: 0;
padding: 0
}
html {
height: 100%
}
p {
color: grey
}
#heading {
text-transform: uppercase;
color: #009C98;
font-weight: normal
}
#msform {
text-align: center;
position: relative;
margin-top: 20px
}
#msform fieldset {
background: white;
border: 0 none;
border-radius: 0.5rem;
box-sizing: border-box;
width: 100%;
margin: 0;
padding-bottom: 20px;
position: relative
}
.form-card {
text-align: left
}
#msform fieldset:not(:first-of-type) {
display: none
}
#msform input,
#msform textarea {
padding: 8px 15px 8px 15px;
border: 1px solid #ccc;
border-radius: 0px;
margin-bottom: 25px;
margin-top: 2px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
background-color: #ECEFF1;
font-size: 16px;
letter-spacing: 1px
}
#msform input:focus,
#msform textarea:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: 1px solid #009C98;
outline-width: 0
}
#msform .action-button {
width: 100px;
background: #009C98;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 0px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 0px 10px 5px;
float: right
}
#msform .action-button:hover,
#msform .action-button:focus {
background-color: #009C98
}
#msform .action-button-previous {
width: 100px;
background: #616161;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 0px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px 10px 0px;
float: right
}
#msform .action-button-previous:hover,
#msform .action-button-previous:focus {
background-color: #000000
}
.card {
z-index: 0;
border: none;
position: relative
}
.fs-title {
font-size: 25px;
color: #009C98;
margin-bottom: 15px;
font-weight: normal;
text-align: left
}
.purple-text {
color: #009C98;
font-weight: normal
}
.steps {
font-size: 25px;
color: gray;
margin-bottom: 10px;
font-weight: normal;
text-align: right
}
.fieldlabels {
color: gray;
text-align: left
}
#progressbar {
margin-bottom: 30px;
overflow: hidden;
color: lightgrey
}
#progressbar .active {
color: #009C98
}
#progressbar li {
list-style-type: none;
font-size: 15px;
width: 25%;
float: left;
position: relative;
font-weight: 400
}
#progressbar #account:before {
font-family: FontAwesome;
content: "\f13e"
}
#progressbar #personal:before {
font-family: FontAwesome;
content: "\f007"
}
#progressbar #payment:before {
font-family: FontAwesome;
content: "\f030"
}
#progressbar #confirm:before {
font-family: FontAwesome;
content: "\f00c"
}
#progressbar li:before {
width: 50px;
height: 50px;
line-height: 45px;
display: block;
font-size: 20px;
color: #ffffff;
background: lightgray;
border-radius: 50%;
margin: 0 auto 10px auto;
padding: 2px
}
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: lightgray;
position: absolute;
left: 0;
top: 25px;
z-index: -1
}
#progressbar li.active:before,
#progressbar li.active:after {
background: #009C98
}
.progress {
height: 20px
}
.progress-bar {
background-color: #009C98
}
.fit-image {
width: 100%;
object-fit: cover
}
</style>
@endpush
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-11 col-sm-9 col-md-7 col-lg-9 text-center p-0 mt-3 mb-2">
<div class="card px-0 pt-4 pb-0 mt-3 mb-3">
<h2 id="heading">Form Pelatihan Badan Usaha Milik Desa</h2>
<p>Fill all form field to go to next step</p>
<form id="msform" action="/bumdes" method="POST">
@csrf
<!-- progressbar -->
<ul id="progressbar">
<li class="active" id="account"><strong>Data Pribadi</strong></li>
<li id="personal"><strong>Data Distrik</strong></li>
<li id="payment"><strong>Data BumDes</strong></li>
<li id="confirm"><strong>Finish</strong></li>
</ul>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
aria-valuemin="0" aria-valuemax="100"></div>
</div> <br> <!-- fieldsets -->
<fieldset>
<div class="form-card">
<div class="row">
<div class="col-12">
<h2 class="fs-title">Data Pribadi</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="fieldlabels">NIP</label>
<input type="text" class="form-control @error('nip') is-invalid @enderror"
name="nip" required>
@error('nip')
<p class="text text-danger">
{{ $message }}</p>
@enderror
</div>
<div class="col-md-6">
<label class="fieldlabels">Nama Lengkap</label>
<input type="text"
class="form-control @error('nama_lengkap') is-invalid @enderror"
name="nama_lengkap" required>
@error('nama_lengkap')
<p class="text text-danger">
{{ $message }}</p>
@enderror
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="fieldlabels">Pangkat/Golongan</label>
<input type="text" class="form-control @error('pangkat') is-invalid @enderror"
name="pangkat" required>
@error('pangkat')
<p class="text text-danger">
{{ $message }}</p>
@enderror
</div>
<div class="col-md-6">
<label class="fieldlabels">Jabatan</label>
<input type="text" class="form-control @error('jabatan') is-invalid @enderror"
name="jabatan" required>
@error('jabatan')
<p class="text text-danger">
{{ $message }}</p>
@enderror
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="fieldlabels">Instansi</label>
<input type="text" class="form-control @error('instansi') is-invalid @enderror"
name="instansi" required>
@error('instansi')
<p class="text text-danger">
{{ $message }}</p>
@enderror
</div>
<div class="col-md-6">
<label class="fieldlabels">Kabupaten</label>
<input type="text" class="form-control @error('kabupaten') is-invalid @enderror"
name="kabupaten" required>
@error('kabupaten')
<p class="text text-danger">
{{ $message }}</p>
@enderror
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="fieldlabels">No. HP</label>
<input type="text"
class="form-control @error('phone_number') is-invalid @enderror"
name="phone_number" required>
@error('phone_number')
<p class="text text-danger">
{{ $message }}</p>
@enderror
</div>
<div class="col-md-6">
<label class="fieldlabels">Pesan</label>
<textarea type="text" class="form-control @error('pesan') is-invalid @enderror" name="pesan" required></textarea>
@error('pesan')
<p class="text text-danger">
{{ $message }}</p>
@enderror
</div>
</div>
<div class="row">
<div class="col-12">
<label class="fieldlabels">Alamat</label>
<textarea type="text" class="form-control @error('alamat') is-invalid @enderror" name="alamat" required></textarea>
@error('alamat')
<p class="text text-danger">
{{ $message }}</p>
@enderror
</div>
</div>
</div>
<button type="button" name="next" class="next action-button" value="Next">Next</button>
</fieldset>
<fieldset>
<div class="form-card">
<div class="row">
<div class="col-7">
<h2 class="fs-title">Data Distrik</h2>
</div>
</div> <label class="fieldlabels">Nama Distrik</label>
<input type="text" class="form-control @error('nama_distrik') is-invalid @enderror"
name="nama_distrik"> <label class="fieldlabels">Jumlah
Kampung</label>
<input type="text" class="form-control @error('jumlah_kampung') is-invalid @enderror"
name="jumlah_kampung"> <label class="fieldlabels">Jumlah
Penduduk</label>
<input type="text" class="form-control @error('jumlah_penduduk') is-invalid @enderror"
name="jumlah_penduduk">
</div> <input type="button" name="next" class="next action-button" value="Next" />
<input type="button" name="previous" class="previous action-button-previous"
value="Previous" />
</fieldset>
<fieldset>
<div class="form-card">
<div class="row">
<div class="col-md-6">
<h2 class="fs-title">Data KPMD</h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-danger" role="alert" id="showerrors"
style="display: none">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="fieldlabels">Pendidikan</label>
<select class="form-select @error('pendidikan') is-invalid @enderror"
aria-label="Pendidikan" style="width:100%" name="pendidikan">
<option selected>Pendidikan</option>
<option value="1">SMP</option>
<option value="2">SMA</option>
<option value="3">Sarjana</option>
</select>
</div>
<div class="form-group">
<label class="fieldlabels">Potensi SDA</label>
<input type="text"
class="form-control @error('pertanian') is-invalid @enderror"
name="pertanian" placeholder="Pertanian" style="margin-bottom: 25px">
<input type="text"
class="form-control @error('peternakan') is-invalid @enderror"
name="peternakan" placeholder="Peternakan" style="margin-bottom: 25px">
<input type="text"
class="form-control @error('perikanan') is-invalid @enderror"
name="perikanan" placeholder="Perikanan" style="margin-bottom: 25px">
<input type="text"
class="form-control @error('perkebunan') is-invalid @enderror"
name="perkebunan" placeholder="Perkenunan" style="margin-bottom: 25px">
<input type="text"
class="form-control @error('kehutanan') is-invalid @enderror"
name="kehutanan" placeholder="Kehutanan" style="margin-bottom: 25px">
<input type="text"
class="form-control @error('lain_lain') is-invalid @enderror"
name="lain_lain" placeholder="lain_lain" style="margin-bottom: 25px">
</div>
<label class="fieldlabels">kampung binaan</label>
<input type="text"
class="form-control @error('kampung_binaan') is-invalid @enderror"
name="kampung_binaan">
<label class="fieldlabels">Jenis Pelatihan Yang Pernah Diikuti</label>
<input type="text"
class="form-control @error('jenis_pelatihan') is-invalid @enderror"
name="jenis_pelatihan">
</div>
<div class="col-md-6">
<label class="fieldlabels">Kelembagaan</label>
<input type="text"
class="form-control @error('kelembagaan_adat') is-invalid @enderror"
name="kelembagaan_adat" placeholder="Kelembagaan Adat"
style="margin-bottom: 25px">
<input type="text"
class="form-control @error('kelembagaan_sosial') is-invalid @enderror"
name="kelembagaan_sosial" placeholder="Kelembagaan Sosial"
style="margin-bottom: 25px">x
<label class="fieldlabels">Moda Transportasi</label>
<input type="text"
class="form-control @error('jarak_tempuh_bandara') is-invalid @enderror"
name="jarak_tempuh_bandara" placeholder="Jarak tempuh dari Bandara ke Distrik"
style="margin-bottom:45px">
<input type="text"
class="form-control @error('jarak_tempuh_kampung') is-invalid @enderror"
name="jarak_tempuh_kampung" placeholder="Jarak tempuh Distrik ke Kampung">
</div>
<div class="col-md-12">
<label class="fieldlabels">Sharing Information</label>
<textarea type="text" class="form-control @error('sharing_information') is-invalid @enderror"
name="sharing_information"></textarea>
</div>
</div>
</div>
<input type="button" name="next" class="next action-button" value="Submit" />
<input type="button" name="previous" class="previous action-button-previous"
value="Previous" />
</fieldset>
<fieldset class="custom-fieldset">
<div class="form-card">
<div class="row">
<div class="col-md-6">
<h2 class="fs-title">Data KPMD</h2>
<h5><strong> <span id="saved-kabupaten"></span> </strong></h5>
</div>
</div>
<div class="row">
<div class="col-4">Nama Lengkap</div>
<div class="col">: <span id="saved-nama-lengkap"></span></div>
</div>
<div class="row">
<div class="col-4">NIP</div>
<div class="col">: <span id="saved-nip"></div>
</div>
<div class="row">
<div class="col-4">Pangkat / Golongan</div>
<div class="col">: <span id="saved-pangkat"></div>
</div>
<div class="row">
<div class="col-4">Jabatan</div>
<div class="col">: <span id="saved-jabatan"></div>
</div>
<div class="row">
<div class="col-4">Instansi</div>
<div class="col">: <span id="saved-instansi"></div>
</div>
<div class="row">
<div class="col-4">Alamat</div>
<div class="col">: <span id="saved-alamat"></div>
</div>
<div class="row">
<div class="col-4">Pesan</div>
<div class="col">: <span id="saved-pesan"></div>
</div>
<hr>
<div class="row">
<div class="col-4">Nama Distrik</div>
<div class="col">: <span id="saved-nama-distrik"></div>
</div>
<div class="row">
<div class="col-4">Jumlah Kampung</div>
<div class="col">: <span id="saved-jumlah-kampung"></div>
</div>
<div class="row">
<div class="col-4">Jumlah Penduduk</div>
<div class="col">: <span id="saved-jumlah-penduduk"></div>
</div>
{{-- <div class="row">
<div class="col-4">Nama kampung</div>
<div class="col">: <span id="saved-nama-kampung"></div>
</div> --}}
<hr>
<div class="row">
<div class="col-4">Potensi SDM (Pendidikan)</div>
<div class="col">: <span id="saved-pendidikan"></div>
</div>
<div class="row">
<div class="col-4 custom-col-4">
Potensi SDA<br>
 1. pertanian <br>
 2. peternakan<br>
 3. perikanan <br>
 4. perkebunan <br>
 5. kehutanan<br>
 6. lain_lain
</div>
<div class="col-4">
<div class="col">: <span id="saved-pertanian"></div>
<div class="col">: <span id="saved-peternakan"></div>
<div class="col">: <span id="saved-perikanan"></div>
<div class="col">: <span id="saved-perkebunan"></div>
<div class="col">: <span id="saved-kehutanan"></div>
<div class="col">: <span id="saved-lain-lain"></div>
</div>
</div>
<div class="row">
<div class="col-4 custom-col-4">
Potensi Kelembagan<br>
 1. kelembagaan Adat <br>
 2. kelembagaan Sosial<br>
</div>
<div class="col-4">
<div class="col">: <span id="saved-kelembagaan-adat"></div>
<div class="col">: <span id="saved-kelembagaan-sosial"></div>
</div>
</div>
<div class="row">
<div class="col-4 custom-col-6">
Moda Transportasi<br>
 1. Jarak tempuh dari Bandara ke Distrik<br>
 2. Jarak tempuh Distrik ke Kampung
</div>
<div class="col-4">
<div class="col">: <span id="saved-jarak-tempuh-bandara"></div>
<div class="col">: <span id="saved-jarak-tempuh-kampung"></div>
</div>
</div>
<div class="row">
<div class="col-4">Kampung Binaan</div>
<div class="col">: <span id="saved-kampung-binaan"></div>
</div>
<div class="row">
<div class="col-4">Jenis Pelatihan Yang sudah pernah diikuti</div>
<div class="col">: <span id="saved-jenis-pelatihan"></div>
</div>
<div class="row">
<div class="col-4">Sharing Information</div>
<div class="col">
: <span id="saved-sharing-information">
</div>
</div>
<input type="button" name="print" class="print action-button" value="Print" />
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
@push('js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var coba
$(document).ready(function() {
var current_fs, next_fs, previous_fs; //fieldsets
var opacity;
var current = 1;
var steps = $("fieldset").length;
setProgressBar(current);
$(".next").click(function() {
$("#showerrors").hide()
coba = this
current_fs = $(this).parent();
next_fs = $(this).parent().next();
// let node_button = next_fs.find(".next").attr("value")
if ($(this).attr("value") === "Submit") {
let data = {
nip: $('input[name="nip"]').val(),
nama_lengkap: $('input[name="nama_lengkap"]').val(),
pangkat: $('input[name="pangkat"]').val(),
jabatan: $('input[name="jabatan"]').val(),
instansi: $('input[name="instansi"]').val(),
kabupaten: $('input[name="kabupaten"]').val(),
phone_number: $('input[name="phone_number"]').val(),
pesan: $('textarea[name="pesan"]').val(),
alamat: $('textarea[name="alamat"]').val(),
nama_distrik: $('input[name="nama_distrik"]').val(),
jumlah_kampung: $('input[name="jumlah_kampung"]').val(),
jumlah_penduduk: $('input[name="jumlah_penduduk"]').val(),
pendidikan: $('select[name="pendidikan"]').val(),
pertanian: $('input[name="pertanian"]').val(),
peternakan: $('input[name="peternakan"]').val(),
perikanan: $('input[name="perikanan"]').val(),
perkebunan: $('input[name="perkebunan"]').val(),
kehutanan: $('input[name="kehutanan"]').val(),
lain_lain: $('input[name="lain_lain"]').val(),
jenis_pelatihan: $('input[name="jenis_pelatihan"]').val(),
kelembagaan_adat: $('input[name="kelembagaan_adat"]').val(),
kelembagaan_sosial: $('input[name="kelembagaan_sosial"]').val(),
jarak_tempuh_bandara: $('input[name="jarak_tempuh_bandara"]').val(),
jarak_tempuh_kampung: $('input[name="jarak_tempuh_kampung"]').val(),
kampung_binaan: $('input[name="kampung_binaan"]').val(),
sharing_information: $('textarea[name="sharing_information"]').val(),
}
$.ajax({
type: "POST",
url: "{{ URL::to('/') }}/save-kpmd-data-kpmd",
data: data,
success: function(response) {
// Menampilkan data yang telah disimpan dalam elemen HTML
console.log(response)
$('#saved-kabupaten').text(response.data.kabupaten);
$('#saved-nama-lengkap').text(response.data.nama_lengkap);
$('#saved-nip').text(response.data.nip);
$('#saved-pangkat').text(response.data.pangkat);
$('#saved-jabatan').text(response.data.jabatan);
$('#saved-instansi').text(response.data.instansi);
$('#saved-alamat').text(response.data.alamat);
$('#saved-pesan').text(response.data.pesan);
$('#saved-nama-distrik').text(response.data.nama_distrik);
$('#saved-jumlah-kampung').text(response.data.jumlah_kampung);
$('#saved-jumlah-penduduk').text(response.data.jumlah_penduduk);
$('#saved-pendidikan').text(response.data.pendidikan);
$('#saved-pertanian').text(response.data.pertanian);
$('#saved-peternakan').text(response.data.peternakan);
$('#saved-perikanan').text(response.data.perikanan);
$('#saved-perkebunan').text(response.data.perkebunan);
$('#saved-kehutanan').text(response.data.kehutanan);
$('#saved-lain-lain').text(response.data.lain_lain);
$('#saved-kelembagaan-adat').text(response.data.kelembagaan_adat);
$('#saved-kelembagaan-sosial').text(response.data
.kelembagaan_sosial);
$('#saved-jarak-tempuh-bandara').text(response.data
.jarak_tempuh_bandara);
$('#saved-jarak-tempuh-kampung').text(response.data
.jarak_tempuh_kampung);
$('#saved-kampung-binaan').text(response.data.kampung_binaan);
$('#saved-jenis-pelatihan').text(response.data.jenis_pelatihan);
$('#saved-sharing-information').text(response.data
.sharing_information);
// Tampilkan pesan sukses jika diperlukan
alert(response.message);
// console.log(response)
//Add Class Active
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass(
"active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({
opacity: 0
}, {
step: function(now) {
// for making fielset appear animation
opacity = 1 - now;
current_fs.css({
'display': 'none',
'position': 'relative'
});
next_fs.css({
'opacity': opacity
});
},
duration: 500
});
setProgressBar(++current);
},
dataType: "JSON",
error: function(response) {
let res = response.responseJSON
const entries = Object.entries(res.input_data_gagal);
let html = ""
entries.forEach(([key, value]) => {
html += `<li>${value}</li>`
});
$("#showerrors").html(html)
$("#showerrors").show()
window.location.href = "#showerrors"
return false
}
});
} else {
//Add Class Active
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({
opacity: 0
}, {
step: function(now) {
// for making fielset appear animation
opacity = 1 - now;
current_fs.css({
'display': 'none',
'position': 'relative'
});
next_fs.css({
'opacity': opacity
});
},
duration: 500
});
setProgressBar(++current);
}
});
$(".previous").click(function() {
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
$("#showerrors").hide()
//Remove class active
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({
opacity: 0
}, {
step: function(now) {
// for making fielset appear animation
opacity = 1 - now;
current_fs.css({
'display': 'none',
'position': 'relative'
});
previous_fs.css({
'opacity': opacity
});
},
duration: 500
});
setProgressBar(--current);
});
function setProgressBar(curStep) {
var percent = parseFloat(100 / steps) * curStep;
percent = percent.toFixed();
$(".progress-bar")
.css("width", percent + "%")
}
$(".submit").click(function() {
return false;
})
});
</script>
@endpush
@endsection