419 lines
23 KiB
PHP
419 lines
23 KiB
PHP
@extends('layouts.appNew')
|
|
@section('css')
|
|
<style>
|
|
#result {
|
|
border: 1px solid #ccc;
|
|
display: none;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
background: #fff;
|
|
position: absolute;
|
|
width: 80%;
|
|
z-index: 999;
|
|
padding-left: 0px;
|
|
}
|
|
#result li {
|
|
padding: 10px;
|
|
list-style: none;
|
|
cursor: pointer;
|
|
}
|
|
#result li:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
</style>
|
|
@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 bg-white rounded-[2.5rem] shadow-2xl shadow-emerald-100 overflow-hidden border border-emerald-50">
|
|
<div class="text-center my-16">
|
|
<h3 class="text-3xl font-extrabold text-slate-900 mb-4">Daftar Sebagai Sekolah Adiwiyata</h3>
|
|
</div>
|
|
<!-- Progress Stepper -->
|
|
<div class="bg-slate-50 px-8 py-6 border-b border-emerald-100">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h3 class="text-xl font-bold text-slate-800" id="step-title">Identitas Sekolah</h3>
|
|
<span class="text-sm font-bold text-emerald-600 bg-emerald-50 px-3 py-1 rounded-lg" id="step-counter">Langkah 1 dari 4</span>
|
|
</div>
|
|
<div class="h-2 w-full bg-slate-200 rounded-full overflow-hidden">
|
|
<div id="progress-bar" class="progress-bar h-full bg-emerald-500 w-1/4"></div>
|
|
</div>
|
|
<div class="flex justify-between mt-3">
|
|
<div class="flex flex-col items-center"><div class="w-3 h-3 rounded-full bg-emerald-500"></div></div>
|
|
<div class="flex flex-col items-center"><div class="w-3 h-3 rounded-full bg-slate-300 transition-colors duration-500" id="dot-2"></div></div>
|
|
<div class="flex flex-col items-center"><div class="w-3 h-3 rounded-full bg-slate-300 transition-colors duration-500" id="dot-3"></div></div>
|
|
<div class="flex flex-col items-center"><div class="w-3 h-3 rounded-full bg-slate-300 transition-colors duration-500" id="dot-4"></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Content -->
|
|
<form id="register-form" class="p-8 lg:p-10">
|
|
{{ csrf_field() }}
|
|
<!-- STEP 1: Identification -->
|
|
<div id="step-1" class="step-transition block space-y-6">
|
|
<select name="tingkat_sekolah" class="w-full px-5 py-4 bg-slate-50 border-2 border-slate-100 rounded-2xl focus:ring-4 focus:ring-emerald-100 focus:border-emerald-500 transition-all outline-none font-medium text-lg tracking-wider tingkat_sekolah select2 @error('tingkat_sekolah') is-invalid @enderror">
|
|
<option value="">-Pilih Tingkat Sekolah-</option>
|
|
<option value="1">SD</option>
|
|
<option value="2">SMP</option>
|
|
<option value="3">SMA</option>
|
|
<option value="4">SMK</option>
|
|
<option value="5">MI</option>
|
|
<option value="6">MTs</option>
|
|
<option value="7">MA</option>
|
|
<option value="8">SD LB</option>
|
|
<option value="9">SMP LB</option>
|
|
<option value="10">SMA LM</option>
|
|
<option value="11">SLB Khusus</option>
|
|
</select>
|
|
<div class="space-y-1">
|
|
<label class="block text-sm font-bold text-slate-700">NPSN (Nomor Pokok Sekolah Nasional) <span class="text-red-500">*</span></label>
|
|
<div class="relative group">
|
|
|
|
<input maxlength="8" autocomplete="off" type="text" value="{{old('npsn')}}" name="npsn" id="npsn" class="w-full px-5 py-4 bg-slate-50 border-2 border-slate-100 rounded-2xl focus:ring-4 focus:ring-emerald-100 focus:border-emerald-500 transition-all outline-none font-medium text-lg tracking-wider npsn @error('npsn') is-invalid @enderror numberInput npsn" placeholder="Masukan NPSN">
|
|
<ul id="result"></ul>
|
|
|
|
{{-- <input type="text" id="npsn" maxlength="8" placeholder="Masukkan 8 digit NPSN" class="w-full px-5 py-4 bg-slate-50 border-2 border-slate-100 rounded-2xl focus:ring-4 focus:ring-emerald-100 focus:border-emerald-500 transition-all outline-none font-medium text-lg tracking-wider"> --}}
|
|
{{-- <button type="button" onclick="fetchSchoolData()" id="btn-fetch" class="absolute right-2 top-2 bottom-2 bg-emerald-600 text-white px-6 rounded-xl font-bold text-sm hover:bg-emerald-700 active:scale-95 transition-all flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-sm">search</span> Cari
|
|
</button> --}}
|
|
</div>
|
|
<p class="text-xs text-slate-400 mt-2">Data nama dan tingkat sekolah akan terisi otomatis dari Dapodik/EMIS.</p>
|
|
</div>
|
|
|
|
<div id="auto-fill-data" class="hidden space-y-4 animate-[fadeIn_0.5s_ease-in-out]">
|
|
<div class="p-4 bg-emerald-50 rounded-2xl border border-emerald-100">
|
|
<label class="text-xs font-bold text-emerald-600 uppercase tracking-widest">Sekolah Terdeteksi</label>
|
|
<h4 id="display-school-name" class="text-xl font-extrabold text-emerald-900 mt-1">SDN MENTENG 01</h4>
|
|
<p id="display-school-type" class="text-emerald-700 font-medium">Sekolah Dasar (SD) • Negeri</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- STEP 2: Basic Info -->
|
|
<div id="step-2" class="step-transition hidden space-y-6">
|
|
<div class="space-y-1">
|
|
<label class="block text-sm font-bold text-slate-700">Nama Sekolah</label>
|
|
<div class="col-12 pr-1">
|
|
<input type="text" readonly value="{{old('name')}}" name="name" class="w-full px-5 py-4 bg-slate-50 border-2 border-slate-100 rounded-2xl focus:border-emerald-500 outline-none nama_sekolah @error('name') is-invalid @enderror" placeholder="Masukan Nama Sekolah">
|
|
@error('name')
|
|
<span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<label class="block text-sm font-bold text-slate-700">Alamat Lengkap</label>
|
|
<textarea rows="3" name="alamat_sekolah" placeholder="Nama Jalan, RT/RW, Kelurahan, Kecamatan" class="w-full px-5 py-4 bg-slate-50 border-2 border-slate-100 rounded-2xl focus:border-emerald-500 outline-none resize-none"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- STEP 3: Contact Details -->
|
|
<div id="step-3" class="step-transition hidden space-y-6">
|
|
<div class="space-y-1">
|
|
<label class="block text-sm font-bold text-slate-700">Nama Kontak Person (PIC)</label>
|
|
<input type="text" placeholder="Masukkan nama lengkap penanggung jawab" name="kontak_person" class="w-full px-5 py-4 bg-slate-50 border-2 border-slate-100 rounded-2xl focus:border-emerald-500 outline-none">
|
|
</div>
|
|
<div class="space-y-1">
|
|
<label class="block text-sm font-bold text-slate-700">Nomor WhatsApp / Telp</label>
|
|
<div class="flex gap-2">
|
|
<span class="bg-slate-100 px-4 py-4 rounded-2xl font-bold flex items-center border-2 border-slate-100">+62</span>
|
|
<input type="tel" name="telp" placeholder="812xxxxxx" class="flex-1 px-5 py-4 bg-slate-50 border-2 border-slate-100 rounded-2xl focus:border-emerald-500 outline-none">
|
|
</div>
|
|
</div>
|
|
{{-- <div class="p-4 bg-blue-50 rounded-2xl border border-blue-100 flex gap-3">
|
|
<span class="material-symbols-outlined text-blue-500">upload_file</span>
|
|
<div>
|
|
<h5 class="text-sm font-bold text-blue-900 leading-tight">Siapkan SK Tim Adiwiyata</h5>
|
|
<p class="text-xs text-blue-700 mt-1">Anda akan diminta mengunggah dokumen SK ini setelah login untuk verifikasi awal.</p>
|
|
</div>
|
|
</div> --}}
|
|
</div>
|
|
|
|
<!-- STEP 4: Account Setup -->
|
|
<div id="step-4" class="step-transition hidden space-y-6">
|
|
<div class="space-y-1">
|
|
<label class="block text-sm font-bold text-slate-700">Email Sekolah (Aktif)</label>
|
|
<input type="email" name="email" placeholder="contoh: sdn.menteng01@jakarta.go.id" class="w-full px-5 py-4 bg-slate-50 border-2 border-slate-100 rounded-2xl focus:border-emerald-500 outline-none">
|
|
<p class="text-xs text-slate-400">Pastikan email benar. Akses login akan dikirim melalui email ini.</p>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<label class="block text-sm font-bold text-slate-700">Kata Sandi</label>
|
|
<div class="relative">
|
|
<input type="password" id="password" name="password" placeholder="Minimal 8 karakter" oninput="checkStrength()" class="w-full px-5 py-4 bg-slate-50 border-2 border-slate-100 rounded-2xl focus:border-emerald-500 outline-none pr-12">
|
|
<span class="material-symbols-outlined absolute right-4 top-4 text-slate-400 cursor-pointer" id="toggle-pwd" onclick="togglePassword()">visibility</span>
|
|
</div>
|
|
<div class="h-1.5 w-full bg-slate-100 rounded-full mt-3 overflow-hidden">
|
|
<div id="strength-bar" class="h-full bg-slate-300 w-0 transition-all duration-300"></div>
|
|
</div>
|
|
<p id="strength-text" class="text-xs font-bold text-slate-400 mt-1 uppercase tracking-tighter">Sandi Sangat Lemah</p>
|
|
</div>
|
|
<div class="flex items-start gap-3 p-4 bg-slate-50 rounded-2xl">
|
|
<input type="checkbox" id="terms" name="check" class="mt-1 w-5 h-5 accent-emerald-600 rounded">
|
|
<label for="terms" class="text-sm text-slate-600">
|
|
Saya menyatakan bahwa data yang diisi adalah benar dan sekolah berkomitmen menjalankan Gerakan PBLHS sesuai <a href="https://kemenlh.go.id/contents/15/Adiwiyata" target="_blank" class="text-emerald-600 font-bold hover:underline">Permen LH No. 5 Tahun 2025</a>.
|
|
<p></p>
|
|
</label></div>
|
|
</div>
|
|
|
|
<div id="errorMessage" class="hidden mt-4 p-3 bg-red-50 border border-red-100 rounded-xl flex items-center gap-2 text-red-600 text-sm font-medium">
|
|
<span class="material-symbols-outlined text-lg">error</span>
|
|
<span class="message">Username atau password salah. Silakan coba lagi.</span>
|
|
</div>
|
|
|
|
<!-- Navigation Buttons -->
|
|
<div class="flex items-center justify-between pt-10">
|
|
<button type="button" id="prev-btn" onclick="prevStep()" class="hidden px-8 py-4 bg-slate-100 text-slate-600 rounded-2xl font-bold hover:bg-slate-200 transition-all flex items-center gap-2">
|
|
<span class="material-symbols-outlined">arrow_back</span> Kembali
|
|
</button>
|
|
<div class="flex-1"></div>
|
|
<button type="button" id="next-btn" onclick="nextStep()" class="px-10 py-4 bg-emerald-600 text-white rounded-2xl font-extrabold shadow-xl shadow-emerald-200 hover:bg-emerald-700 active:scale-95 transition-all flex items-center gap-2">
|
|
Lanjut <span class="material-symbols-outlined">arrow_forward</span>
|
|
</button>
|
|
<button type="submit" id="submit-btn" class="hidden px-12 py-4 bg-emerald-600 text-white rounded-2xl font-extrabold shadow-xl shadow-emerald-200 hover:bg-emerald-700 active:scale-95 transition-all">
|
|
Daftar Sekarang
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="px-8 py-6 bg-slate-50 border-t border-slate-100 text-center">
|
|
<p class="text-sm text-slate-500">Sudah memiliki akun? <a href="{{ url('login') }}" class="text-emerald-600 font-bold hover:underline">Masuk di sini</a></p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<div id="success-modal" class="fixed inset-0 z-[100] hidden flex items-center justify-center p-6 bg-slate-900/60 backdrop-blur-sm">
|
|
<div class="bg-white rounded-[3rem] p-10 max-w-lg w-full text-center shadow-2xl animate-[zoomIn_0.3s_ease-out] relative overflow-hidden">
|
|
<div class="absolute top-0 left-0 w-full h-2 bg-emerald-500"></div>
|
|
<div class="w-24 h-24 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<span class="material-symbols-outlined text-5xl">task_alt</span>
|
|
</div>
|
|
<h3 class="text-3xl font-extrabold text-slate-900 mb-4">Registrasi Berhasil!</h3>
|
|
<p class="text-slate-600 mb-8">Data pendaftaran sekolah Anda telah diterima. Silakan cek email Anda untuk instruksi verifikasi dan login.</p>
|
|
<button onclick="window.location.reload()" class="w-full py-4 bg-emerald-600 text-white rounded-2xl font-bold hover:bg-emerald-700 transition-all">Selesai</button>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
@section('js')
|
|
<script src="{{asset('assets/js/vendors.bundle.js')}}"></script>
|
|
{{-- <script src="{{asset('assets/js/app.bundle.js')}}"></script> --}}
|
|
<script>
|
|
$('.npsn').on('keyup', function(){
|
|
var query = $(this).val();
|
|
var tingkat_sekolah = $('.tingkat_sekolah').find(':selected').val();
|
|
if(query.length > 0) {
|
|
$.ajax({
|
|
url: "{{ url('sekolahNpsn') }}",
|
|
type: "POST",
|
|
xhrFields: {
|
|
withCredentials: true
|
|
},
|
|
data: {
|
|
query: query,
|
|
_token: '{{csrf_token()}}',
|
|
tingkat_sekolah:tingkat_sekolah
|
|
},
|
|
success: function(data) {
|
|
$('#result').html('');
|
|
if(data.length > 0) {
|
|
$('#result').show();
|
|
$.each(data, function(index, data){
|
|
$('#result').append('<li data-npsn="'+data.npsn+'">' + data.nama_sekolah + '</li>');
|
|
});
|
|
|
|
} else {
|
|
$('.nama_sekolah').removeAttr('readonly');
|
|
$('#result').hide();
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
$('#result').hide();
|
|
}
|
|
});
|
|
|
|
// Saat klik pada hasil pencarian, isi input dan sembunyikan daftar
|
|
$(document).on('click', '#result li', function(){
|
|
var npsn = $(this).attr('data-npsn');
|
|
|
|
$('.npsn').val(npsn);
|
|
$('.nama_sekolah').attr('readonly',true);
|
|
$('.nama_sekolah').val($(this).text());
|
|
$('#result').hide();
|
|
});
|
|
|
|
// Klik di luar input atau hasil pencarian untuk menyembunyikan daftar
|
|
$(document).on('click', function(e) {
|
|
if (!$(e.target).closest('.npsn, #result').length) {
|
|
$('#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() {
|
|
const pwd = document.getElementById('password').value;
|
|
const bar = document.getElementById('strength-bar');
|
|
const text = document.getElementById('strength-text');
|
|
|
|
if (pwd.length === 0) {
|
|
bar.style.width = '0%';
|
|
text.innerText = 'Sandi Kosong';
|
|
text.className = 'text-xs font-bold text-slate-400 mt-1 uppercase tracking-tighter';
|
|
} else if (pwd.length < 6) {
|
|
bar.style.width = '30%';
|
|
bar.className = 'h-full bg-red-500 transition-all';
|
|
text.innerText = 'Sandi Lemah';
|
|
text.className = 'text-xs font-bold text-red-500 mt-1 uppercase tracking-tighter';
|
|
} else if (pwd.length < 10) {
|
|
bar.style.width = '60%';
|
|
bar.className = 'h-full bg-amber-500 transition-all';
|
|
text.innerText = 'Sandi Sedang';
|
|
text.className = 'text-xs font-bold text-amber-500 mt-1 uppercase tracking-tighter';
|
|
} else {
|
|
bar.style.width = '100%';
|
|
bar.className = 'h-full bg-emerald-500 transition-all';
|
|
text.innerText = 'Sandi Sangat Kuat';
|
|
text.className = 'text-xs font-bold text-emerald-500 mt-1 uppercase tracking-tighter';
|
|
}
|
|
}
|
|
|
|
function togglePassword() {
|
|
const input = document.getElementById('password');
|
|
const icon = document.getElementById('toggle-pwd');
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
icon.innerText = 'visibility_off';
|
|
} else {
|
|
input.type = 'password';
|
|
icon.innerText = 'visibility';
|
|
}
|
|
}
|
|
|
|
|
|
|
|
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) {
|
|
$('#errorMessage').addClass('hidden');
|
|
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 |