@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 mt-3 bg-white rounded-[2.5rem] shadow-2xl shadow-emerald-100 overflow-hidden border border-emerald-50">
            <div class="text-center mt-16">
                <h3 class="text-3xl font-extrabold text-slate-900 mb-4">Daftar Sebagai Sekolah Adiwiyata</h3>
            </div>
            <!-- Progress Stepper -->
            <!-- Form Content -->
            <form action="{{ url('register') }}" method="POST" class="p-8 lg:p-10">
                {{ csrf_field() }}
                <!-- STEP 1: Identification -->
                @if(session()->get('type')=='error')
                    <div class="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">{{ session('message') }}</span>
                    </div>
                    <br>
                @enderror

                <div id="step-1" class="step-transition block space-y-6 mb-5">
                    <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 {{ old('tingkat_sekolah') == '1' ? 'selected' : '' }} value="1">SD</option>
                        <option {{ old('tingkat_sekolah') == '2' ? 'selected' : '' }} value="2">SMP</option>
                        <option {{ old('tingkat_sekolah') == '3' ? 'selected' : '' }} value="3">SMA</option>
                        <option {{ old('tingkat_sekolah') == '4' ? 'selected' : '' }} value="4">SMK</option>
                        <option {{ old('tingkat_sekolah') == '5' ? 'selected' : '' }} value="5">MI</option>
                        <option {{ old('tingkat_sekolah') == '6' ? 'selected' : '' }} value="6">MTs</option>
                        <option {{ old('tingkat_sekolah') == '7' ? 'selected' : '' }} value="7">MA</option>
                        <option {{ old('tingkat_sekolah') == '8' ? 'selected' : '' }} value="8">SD LB</option>
                        <option {{ old('tingkat_sekolah') == '9' ? 'selected' : '' }} value="9">SMP LB</option>
                        <option {{ old('tingkat_sekolah') == '10' ? 'selected' : '' }} value="10">SMA LM</option>
                        <option {{ old('tingkat_sekolah') == '11' ? 'selected' : '' }} value="11">SLB Khusus</option>
                    </select>
                    @error('tingkat_sekolah')
                    <div class="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">{{$message}}</span>
                    </div>
                    @enderror
                    <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>
                        @error('npsn')
                        <div class="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">{{$message}}</span>
                        </div>
                        @enderror
                    </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  space-y-6 mb-5">
                    <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')
                            <div class="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">{{$message}}</span>
                            </div>
                            @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">{{old('alamat_sekolah')}}</textarea>
                        @error('alamat_sekolah')
                        <div class="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">{{$message}}</span>
                        </div>
                        @enderror
                    </div>
                </div>

                <!-- STEP 3: Contact Details -->
                <div id="step-3" class="step-transition  space-y-6 mb-5">
                    <div class="space-y-1">
                        <label class="block text-sm font-bold text-slate-700">Nama Kontak Person (PIC)</label>
                        <input type="text" value="{{ old('kontak_person') }}" 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">
                        @error('kontak_person')
                        <div class="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">{{$message}}</span>
                        </div>
                        @enderror
                    </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" value="{{ old('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>
                        @error('telp')
                        <div class="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">{{$message}}</span>
                        </div>
                        @enderror
                    </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  space-y-6 mb-5">
                    <div class="space-y-1">
                        <label class="block text-sm font-bold text-slate-700">Email Sekolah (Aktif)</label>
                        <input type="email" name="email" value="{{ old('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>
                        @error('email')
                        <div class="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">{{$message}}</span>
                        </div>
                        @enderror
                    </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>
                        @error('password')
                        <div class="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">{{$message}}</span>
                        </div>
                        @enderror
                    </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.
                        <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-center 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 class="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/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();
            }
        });

        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';
            }
        }

    </script>
@endsection