update
Ilham Wara Nugroho
parent
dd6612629d
commit
5ff536efc1
|
|
@ -24,7 +24,6 @@
|
||||||
@endsection
|
@endsection
|
||||||
@section('content')
|
@section('content')
|
||||||
<main class="max-w-7xl mx-auto px-6 py-10 lg:py-16 grid lg:grid-cols-12 gap-12 items-start">
|
<main class="max-w-7xl mx-auto px-6 py-10 lg:py-16 grid lg:grid-cols-12 gap-12 items-start">
|
||||||
|
|
||||||
<!-- Right Content: Interactive Form Card -->
|
<!-- Right Content: Interactive Form Card -->
|
||||||
<div class="lg:col-span-12 mt-3 bg-white rounded-[2.5rem] shadow-2xl shadow-emerald-100 overflow-hidden border border-emerald-50">
|
<div class="lg:col-span-12 mt-3 bg-white rounded-[2.5rem] shadow-2xl shadow-emerald-100 overflow-hidden border border-emerald-50">
|
||||||
<div class="text-center mt-16">
|
<div class="text-center mt-16">
|
||||||
|
|
@ -283,102 +282,6 @@
|
||||||
$('#result').hide();
|
$('#result').hide();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
let currentStep = 1;
|
|
||||||
const totalSteps = 4;
|
|
||||||
const form = document.getElementById('register-form');
|
|
||||||
const progressBar = document.getElementById('progress-bar');
|
|
||||||
const stepTitle = document.getElementById('step-title');
|
|
||||||
const stepCounter = document.getElementById('step-counter');
|
|
||||||
|
|
||||||
const stepTitles = [
|
|
||||||
"NPSN Sekolah",
|
|
||||||
"Data Alamat Sekolah",
|
|
||||||
"Kontak Person",
|
|
||||||
"Pengaturan Akun"
|
|
||||||
];
|
|
||||||
|
|
||||||
function updateUI() {
|
|
||||||
// Hide all steps
|
|
||||||
for (let i = 1; i <= totalSteps; i++) {
|
|
||||||
document.getElementById(`step-${i}`).classList.add('hidden');
|
|
||||||
const dot = document.getElementById(`dot-${i}`);
|
|
||||||
if (dot) {
|
|
||||||
if (i <= currentStep) {
|
|
||||||
dot.classList.add('bg-emerald-500');
|
|
||||||
dot.classList.remove('bg-slate-300');
|
|
||||||
} else {
|
|
||||||
dot.classList.remove('bg-emerald-500');
|
|
||||||
dot.classList.add('bg-slate-300');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show current
|
|
||||||
document.getElementById(`step-${currentStep}`).classList.remove('hidden');
|
|
||||||
|
|
||||||
// Progress Bar
|
|
||||||
progressBar.style.width = `${(currentStep / totalSteps) * 100}%`;
|
|
||||||
|
|
||||||
// Text
|
|
||||||
stepTitle.innerText = stepTitles[currentStep - 1];
|
|
||||||
stepCounter.innerText = `Langkah ${currentStep} dari ${totalSteps}`;
|
|
||||||
|
|
||||||
// Buttons
|
|
||||||
document.getElementById('prev-btn').classList.toggle('hidden', currentStep === 1);
|
|
||||||
document.getElementById('next-btn').classList.toggle('hidden', currentStep === totalSteps);
|
|
||||||
document.getElementById('submit-btn').classList.toggle('hidden', currentStep !== totalSteps);
|
|
||||||
}
|
|
||||||
|
|
||||||
function nextStep() {
|
|
||||||
if (currentStep < totalSteps) {
|
|
||||||
// Mock validation for Step 1
|
|
||||||
if (currentStep === 1) {
|
|
||||||
const npsn = document.getElementById('npsn').value;
|
|
||||||
if (npsn.length < 8) {
|
|
||||||
alert("Mohon masukkan 8 digit NPSN yang valid.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
currentStep++;
|
|
||||||
updateUI();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function prevStep() {
|
|
||||||
if (currentStep > 1) {
|
|
||||||
currentStep--;
|
|
||||||
updateUI();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function fetchSchoolData() {
|
|
||||||
const npsn = document.getElementById('npsn').value;
|
|
||||||
const btn = document.getElementById('btn-fetch');
|
|
||||||
const autoFill = document.getElementById('auto-fill-data');
|
|
||||||
|
|
||||||
if (npsn.length === 8) {
|
|
||||||
btn.innerHTML = `<span class="material-symbols-outlined animate-spin">sync</span> Tunggu...`;
|
|
||||||
btn.disabled = true;
|
|
||||||
|
|
||||||
// Simulate API call
|
|
||||||
setTimeout(() => {
|
|
||||||
autoFill.classList.remove('hidden');
|
|
||||||
btn.innerHTML = `<span class="material-symbols-outlined">check_circle</span> Terdata`;
|
|
||||||
btn.classList.replace('bg-emerald-600', 'bg-blue-600');
|
|
||||||
|
|
||||||
// Specific Mock Data for Jakarta
|
|
||||||
const names = ["SDN MENTENG 01", "SMP NEGERI 1 JAKARTA", "SMA NEGERI 8 JAKARTA", "SMK NEGERI 26 JAKARTA"];
|
|
||||||
const levels = ["Sekolah Dasar (SD) • Negeri", "Menengah Pertama (SMP) • Negeri", "Menengah Atas (SMA) • Negeri", "Kejuruan (SMK) • Negeri"];
|
|
||||||
const idx = Math.floor(Math.random() * names.length);
|
|
||||||
|
|
||||||
document.getElementById('display-school-name').innerText = names[idx];
|
|
||||||
document.getElementById('display-school-type').innerText = levels[idx];
|
|
||||||
}, 1200);
|
|
||||||
} else {
|
|
||||||
alert("NPSN harus 8 digit.");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkStrength() {
|
function checkStrength() {
|
||||||
const pwd = document.getElementById('password').value;
|
const pwd = document.getElementById('password').value;
|
||||||
|
|
@ -419,44 +322,5 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
form.addEventListener('submit', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!document.getElementById('terms').checked) {
|
|
||||||
alert("Mohon setujui Syarat & Ketentuan.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
$.ajax({
|
|
||||||
url: "{{ url('register') }}",
|
|
||||||
type: "POST",
|
|
||||||
xhrFields: {
|
|
||||||
withCredentials: true
|
|
||||||
},
|
|
||||||
data: $(form).serialize(), // 🔥 serialize di sini
|
|
||||||
success: function(response) {
|
|
||||||
// let res = response.responseJSON;
|
|
||||||
// console.log(response.message);
|
|
||||||
if(response.type == 'error'){
|
|
||||||
$('#errorMessage').removeClass('hidden');
|
|
||||||
$('.message').html(response.message);
|
|
||||||
}else{
|
|
||||||
document.getElementById('success-modal').classList.remove('hidden');
|
|
||||||
}
|
|
||||||
},error:function(xhr){
|
|
||||||
let res = xhr.responseJSON;
|
|
||||||
$('#errorMessage').removeClass('hidden');
|
|
||||||
$('.message').html(res.message);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Styles for animations
|
|
||||||
const style = document.createElement('style');
|
|
||||||
style.textContent = `
|
|
||||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
||||||
@keyframes zoomIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
|
|
||||||
`;
|
|
||||||
document.head.appendChild(style);
|
|
||||||
</script>
|
</script>
|
||||||
@endsection
|
@endsection
|
||||||
Loading…
Reference in New Issue