@extends('registrasi.layouts.main')
@push('styles')
<link rel="stylesheet" type="text/css" href="{{ url('https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css') }}">
{{-- CSS --}}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
@endpush
@push('scripts')
<script src="{{ asset('assets/plugin/assets/js/jquery.validate.min.js') }}" type="text/javascript"></script>
<script type="text/javascript" charset="utf8"
src="{{ url('https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js') }}"></script>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
@endpush
@section('content')
<div class="wizard-container">
<div class="card wizard-card " style="border: 1px solid #333;padding:5%" data-color="green" id="wizardProfile">
<form id="pendaftaranForm" action="{{ route('registrasi.sd.affirmasi.store') }}" method="post"
enctype="multipart/form-data">
{{ csrf_field() }}
<div class=" text-left" style="display: flex;justify-content:space-between;">
<h3 style="font-weight: bold;">Pendaftaran Calon Peserta Didik <br> Sekolah Dasar Jalur
Affirmasi</h3>
<div style="display: flex;min-width:250px;">
<img src="{{ asset('assets/content/images/logo3.png') }}" style="height: 60px" alt="">
<h5 style="font-weight:bold; margin-right:3%">DINAS PENDIDIKAN <br> KOTA
SAMARINDA</h5>
</div>
</div>
<div>
<i>Sudah mendaftar?,<a class="text-color" href="{{ route('cekPengumuman') }}">Cek Hasil
PPDB</a></i>
</div>
<div class="wizard-navigation">
<div class="progress-with-circle">
<div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="6"
style="width: 21%;"></div>
</div>
<ul>
<li>
<a href="#no-identitas" data-toggle="tab">
<div class="icon-circle checked">
<i class="ti-id-badge"></i>
</div>
No.Identitas
</a>
</li>
<li>
<a id="trigger" href="#biodata" data-toggle="tab">
<div
class="icon-circle @if (isset($temp) && $temp['phone_number']) checked @endif @if (session('success')) checked @endif">
<i class="ti-user"></i>
</div>
Biodata
</a>
</li>
<li>
<a href="#kirim-berkas" data-toggle="tab">
<div class="icon-circle @if (session('success')) checked @endif">
<i class="ti-envelope"></i>
</div>
Kirim Berkas
</a>
</li>
<li>
<a href="#sekolah" data-toggle="tab">
<div class="icon-circle @if (session('success')) checked @endif">
<i class="ti-home"></i>
</div>
Sekolah
</a>
</li>
<li>
<a href="#cek-ulang" data-toggle="tab">
<div class="icon-circle @if (session('success')) checked @endif">
<i class="ti-reload"></i>
</div>
Cek Ulang
</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane" id="no-identitas">
@include('registrasi.partials.no_identitas', [
'disabled' => session('success') != null,
])
</div>
<div class="tab-pane @if (isset($temp) && $temp['phone_number']) active @endif" id="biodata">
@include('registrasi.SD.partials.biodata', [
'disabled' => session('success') != null,
])
</div>
<div class="tab-pane" id="kirim-berkas">
@include('registrasi.SD.partials.kirim_berkas', [
'disabled' => session('success') != null,
])
</div>
<div class="tab-pane" id="sekolah">
@include('registrasi.SD.partials.sekolah', [
'disabled' => session('success') != null,
])
</div>
<div class="tab-pane" id="cek-ulang">
@include('registrasi.SD.partials.cek_ulang')
</div>
</div>
<div class="wizard-footer">
<div class="pull-right">
<input type="button" class="btn btn-next btn-fill btn-success btn-wd"
@if (!isset($temp)) disable @endif name="next" value="Next" />
<input type="submit" class="btn btn-finish btn-fill btn-success btn-wd" name="finish"
value="Finish" />
</div>
<div class="pull-left">
<input type="button" class="btn btn-previous btn-default btn-wd" name="previous"
value="Previous" />
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</div>
@endsection
@push('scripts')
<script>
$(document).ready(function() {
/* Activate the tooltips */
$('[rel="tooltip"]').tooltip();
// Code for the Validator
var $validator = $('.wizard-card form').validate({
rules: {
firstname: {
required: true,
minlength: 3
},
lastname: {
required: true,
minlength: 3
},
email: {
required: true
}
},
});
// Wizard Initialization
$('.wizard-card').bootstrapWizard({
'tabClass': 'nav nav-pills',
'nextSelector': '.btn-next',
'previousSelector': '.btn-previous',
onNext: function(tab, navigation, index) {
// console.log(index);
// //submit form in index 4
// const form = $('#pendaftaranForm');
// if (index == 5) {
// form.submit();
// return false;
// } else {
// var $valid = $('.wizard-card form').valid();
// if (!$valid) {
// $validator.focusInvalid();
// return false;
// }
// return true;
// }
var $valid = $('.wizard-card form').valid();
if (!$valid) {
$validator.focusInvalid();
return false;
}
return true;
},
onInit: function(tab, navigation, index) {
//check number of tabs and fill the entire row
var $total = navigation.find('li').length;
$width = 100 / $total;
navigation.find('li').css('width', $width + '%');
},
onTabClick: function(tab, navigation, index) {
var $valid = $('.wizard-card form').valid();
if (!$valid) {
return false;
} else {
return true;
}
},
onTabShow: function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index + 1;
var $wizard = navigation.closest('.wizard-card');
// If it's the last tab then hide the last button and show the finish instead
if ($current >= $total) {
$($wizard).find('.btn-next').hide();
$($wizard).find('.btn-finish').show();
} else {
$($wizard).find('.btn-next').show();
$($wizard).find('.btn-finish').hide();
}
//update progress
var move_distance = 100 / $total;
move_distance = move_distance * (index) + move_distance / 2;
$wizard.find($('.progress-bar')).css({
width: move_distance + '%'
});
//e.relatedTarget // previous tab
$wizard.find($('.wizard-card .nav-pills li.active a .icon-circle')).addClass(
'checked');
}
});
// Prepare the preview for profile picture
$("#wizard-picture").change(function() {
readURL(this);
});
$('[data-toggle="wizard-radio"]').click(function() {
wizard = $(this).closest('.wizard-card');
wizard.find('[data-toggle="wizard-radio"]').removeClass('active');
$(this).addClass('active');
$(wizard).find('[type="radio"]').removeAttr('checked');
$(this).find('[type="radio"]').attr('checked', 'true');
});
$('[data-toggle="wizard-checkbox"]').click(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$(this).find('[type="checkbox"]').removeAttr('checked');
} else {
$(this).addClass('active');
$(this).find('[type="checkbox"]').attr('checked', 'true');
}
});
$('.set-full-height').css('height', 'auto');
});
</script>
@if (isset($temp) && $temp['nik'] != '')
<script>
$(document).ready(function() {
$('.wizard-card').bootstrapWizard('show', 1);
});
</script>
@endif
<script>
$(document).ready(function() {
window.onbeforeunload = function() {
return "Anda akan diminta mengunggah berkas lagi, yakin ingin keluar?";
};
// Disable Wizard Navigation
$('.wizard-navigation a').on('click', function(e) {
return false;
});
// Api Call Data Wilayah
$("#kabupaten_id").change(function(e) {
const kabupaten_id = $(this).val();
$.ajax({
type: "get",
url: "{{ url('api/kecamatan') }}" + "/" + kabupaten_id,
success: function(res) {
if (res.status == "success") {
let option = '<option value="">Pilih Kecamatan</option>';
res.data.forEach((data) => {
option +=
`<option value="${data.id}">${data.nama_kecamatan}</option>`;
});
$('select[id="kecamatan_id"]').html(option);
$('select[id="kelurahan_id"]').html(
`<option value="">Pilih Kecamatan Terlebih Dahulu</option>`);
} else {
alert("gagal.. : " + res.message);
}
}
});
});
$("#kecamatan_id").change(function(e) {
const kecamatan_id = $(this).val();
$.ajax({
type: "get",
url: "{{ url('api/kelurahan') }}" + "/" + kecamatan_id,
success: function(res) {
if (res.status == "success") {
let option = '<option value="">Pilih Kelurahan</option>';
res.data.forEach((data) => {
option +=
`<option value="${data.id}">${data.nama_kelurahan}</option>`;
});
$('select[id="kelurahan_id"]').html(option);
} else {
alert("gagal.. : " + res.message);
}
}
});
});
$('.schoolTable').DataTable();
// Script Pilih Sekolah
var selectedSchoolIds = [];
var selectedSchoolNames = [];
var selectedSchoolNpsn = [];
var selectedSchoolAlamats = [];
$(document).on('click', '.select-school-btn', function() {
if ($(this).hasClass("active-btn-school")) {
$(this).removeClass("active-btn-school");
} else {
$(this).addClass("active-btn-school");
}
var schoolId = $(this).data('school-id');
var schoolName = $(this).data('school-name');
var schoolNpsn = $(this).data('school-npsn');
var schoolAlamat = $(this).data('school-alamat');
var index = selectedSchoolIds.indexOf(schoolId);
if (index === -1) {
selectedSchoolIds.push(schoolId);
selectedSchoolNames.push(schoolName);
selectedSchoolNpsn.push(schoolNpsn);
selectedSchoolAlamats.push(schoolAlamat);
$('#pendaftaranForm').append('<input type="hidden" name="selected_schools[]" value="' +
schoolId + '">');
// Insert selected school data into the table
var newRow = '<tr>' +
'<td>' + schoolName + '</td>' +
'<td>' + schoolNpsn + '</td>' +
'<td>' + schoolAlamat + '</td>' +
'</tr>';
$('#evaluasiSchoolTable').append(newRow);
} else {
// Remove school data if it's already selected
selectedSchoolIds.splice(index, 1);
selectedSchoolNames.splice(index, 1);
selectedSchoolNpsn.splice(index, 1);
selectedSchoolAlamats.splice(index, 1);
$('#evaluasiSchoolTable').find('tr:eq(' + index + ')').remove();
$("input[name='selected_schools[]'][value='" + schoolId + "']").remove();
}
console.log(selectedSchoolIds);
});
// Cek Ulang Wizard Form
$("input[name='nik']").change(function(e) {
$("#cek_nik").val($(this).val())
});
$("input[name='nama']").change(function(e) {
$("#cek_nama").val($(this).val())
});
$("input[name='jenis_kelamin']").change(function(e) {
if ($(this).val() == "L") {
$("#cek_jenis_kelamin").val("Laki-laki")
} else {
$("#cek_jenis_kelamin").val("Perempuan")
}
});
$("input[name='tempat_lahir']").change(function(e) {
$("#cek_tempat_lahir").val($(this).val())
});
$("input[name='tanggal_lahir']").change(function(e) {
$("#cek_tanggal_lahir").val($(this).val())
});
$("select[name='kabupaten_id']").change(function(e) {
var kabupaten = $(this).find(":selected").text();
$("#cek_kabupaten").val(kabupaten)
});
$("select[name='kecamatan_id']").change(function(e) {
var kecamatan = $(this).find(":selected").text();
$("#cek_kecamatan").val(kecamatan)
});
$("select[name='kelurahan_id']").change(function(e) {
var kelurahan = $(this).find(":selected").text();
$("#cek_kelurahan").val(kelurahan)
});
$("input[name='rt']").change(function(e) {
$("#cek_rt").val($(this).val())
});
$("input[name='alamat']").change(function(e) {
$("#cek_alamat").val($(this).val())
});
$("input[name='rw']").change(function(e) {
$("#cek_rw").val($(this).val())
});
$("input[name='no_kk']").change(function(e) {
$("#cek_no_kk").val($(this).val())
});
$("input[name='nama_ortu']").change(function(e) {
$("#cek_nama_ortu").val($(this).val())
});
$("input[name='no_akta_kelahiran']").change(function(e) {
$("#cek_no_akta_kelahiran").val($(this).val())
});
$("input[name='kartu_keluarga']").change(function(e) {
console.log($(this).val());
if ($(this).val() != "" && $(this).val() != null) {
$("#cek_kartu_keluarga").val("ADA");
} else {
$("#cek_kartu_keluarga").val("");
}
});
$("input[name='surat_keterangan_ortu']").change(function(e) {
console.log($(this).val());
if ($(this).val() != "" && $(this).val() != null) {
$("#cek_surat_keterangan_ortu").val("ADA");
} else {
$("#cek_surat_keterangan_ortu").val("");
}
});
$("input[name='kartu_keluarga_lama']").change(function(e) {
console.log($(this).val());
if ($(this).val() != "" && $(this).val() != null) {
$("#cek_kartu_keluarga_lama").val("ADA");
} else {
$("#cek_kartu_keluarga_lama").val("");
}
});
$("input[name='surat_keterangan_panti']").change(function(e) {
console.log($(this).val());
if ($(this).val() != "" && $(this).val() != null) {
$("#cek_surat_keterangan_panti").val("ADA");
} else {
$("#cek_surat_keterangan_panti").val("");
}
});
// Initialize the map 1
var map1 = L.map('map1').setView([-0.48904462972199686, 117.14990418194968],
20); // Set initial coordinates and zoom level
// Add a tile layer map 1
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map1);
map1.locate({
setView: true,
maxZoom: 20
});
var map2 = L.map('map2').setView([-0.48904462972199686, 117.14990418194968], 20);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map2);
// Resize Map 1
$('.btn-wd').on('click', function(e) {
if (map1 && map1.invalidateSize) {
setTimeout(function() {
map1.invalidateSize();
}, 100);
}
if (map2 && map2.invalidateSize) {
setTimeout(function() {
map2.invalidateSize();
}, 100);
}
});
$('#btnGetLoc').on('click', function(e) {
map1.locate({
setView: true,
maxZoom: 20
});
console.log("clicked");
});
const lat1 = document.getElementById('lat1');
const lng1 = document.getElementById('lng1');
var newMarker1 = null;
var newMarker2 = null;
function onLocationFound(e) {
if (newMarker1 == null) {
newMarker1 = L.marker([e.latlng.lat, e.latlng.lng]).addTo(map1);
} else {
newMarker1.setLatLng([e.latlng.lat, e.latlng.lng]);
}
if (newMarker2 == null) {
newMarker2 = L.marker([e.latlng.lat, e.latlng.lng]).addTo(map2);
} else {
newMarker2.setLatLng([e.latlng.lat, e.latlng.lng]);
}
lat1.value = `${e.latlng.lat}`;
lng1.value = `${e.latlng.lng}`;
$("#cek_lintang").val(`${e.latlng.lat}`)
$("#cek_bujur").val(`${e.latlng.lng}`)
map2.flyTo([e.latlng.lat, e.latlng.lng], 20);
}
map1.on('locationfound', onLocationFound);
function onMapClick(e) {
// Membuat marker baru dan menambahkannya ke peta
if (newMarker1 == null) {
newMarker1 = L.marker([e.latlng.lat, e.latlng.lng]).addTo(map1);
} else {
newMarker1.setLatLng([e.latlng.lat, e.latlng.lng]);
}
if (newMarker2 == null) {
newMarker2 = L.marker([e.latlng.lat, e.latlng.lng]).addTo(map2);
} else {
newMarker2.setLatLng([e.latlng.lat, e.latlng.lng]);
}
//map2 flyto and zoom
map2.flyTo([e.latlng.lat, e.latlng.lng], 20);
lat1.value = `${e.latlng.lat}`;
lng1.value = `${e.latlng.lng}`;
$("#cek_lintang").val(`${e.latlng.lat}`)
$("#cek_bujur").val(`${e.latlng.lng}`)
}
map1.on('click', onMapClick);
});
</script>
@endpush
Anons79 File Manager Version 1.0, Coded By Anons79
Email: [email protected]
Anons79 Mini Shell