update
Ilham Wara Nugroho
parent
dd6612629d
commit
5ff536efc1
|
|
@ -24,7 +24,6 @@
|
|||
@endsection
|
||||
@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">
|
||||
|
||||
<!-- 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="text-center mt-16">
|
||||
|
|
@ -284,102 +283,6 @@
|
|||
}
|
||||
});
|
||||
|
||||
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() {
|
||||
const pwd = document.getElementById('password').value;
|
||||
const bar = document.getElementById('strength-bar');
|
||||
|
|
@ -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>
|
||||
@endsection
|
||||
Loading…
Reference in New Issue