@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>
                        <small class="text-red-500 mb-2"><i>Kata Sandi harus mengandung Minimal 8 karakter, maksimal 15 karakter, setidaknya 1 huruf kecil dan huruf besar, angka dan simbol </i></small>
                        <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.</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