@extends('layouts.appNew')
@section('content')
<main class="min-h-screen pt-24 pb-12 flex flex-col lg:flex-row relative overflow-hidden">
        <!-- Background Decor -->
        <div class="absolute top-0 right-0 w-1/2 h-full -z-10 opacity-10">
            <div class="w-full h-full bg-emerald-500 rounded-l-full blur-3xl transform translate-x-1/2"></div>
        </div>

        <!-- Left Section: Information & Hero -->
        <div class="flex-1 px-6 lg:px-16 flex hidden md:block flex-col justify-center py-10">
            <div class="max-w-xl">
                <span class="inline-block px-3 py-1 bg-emerald-100 text-emerald-700 text-xs font-bold rounded-full mb-4">
                    PROGRAM ADIWIYATA {{ date('Y')-1 }}/{{ date('Y') }}
                </span>
                <h2 class="text-4xl lg:text-5xl font-extrabold text-slate-900 leading-tight mb-6">
                    Mewujudkan Sekolah <span class="text-emerald-600">Ramah Lingkungan</span> di Jakarta.
                </h2>
                <p class="text-slate-600 text-lg mb-8 leading-relaxed">
                    Akses portal digital resmi penilaian Adiwiyata. Bergabunglah dengan 481+ sekolah yang berkomitmen menjaga kelestarian lingkungan hidup dan edukasi iklim.
                </p>

                <!-- Achievement Stats -->
                <div class="grid grid-cols-3 gap-4 mb-10">
                    <div class="p-4 bg-white rounded-2xl shadow-sm border border-slate-100">
                        <p class="text-2xl font-bold text-emerald-600">481</p>
                        <p class="text-xs text-slate-500 font-semibold uppercase tracking-wider">Penghargaan 2025</p>
                    </div>
                    <div class="p-4 bg-white rounded-2xl shadow-sm border border-slate-100">
                        <p class="text-2xl font-bold text-emerald-600">107</p>
                        <p class="text-xs text-slate-500 font-semibold uppercase tracking-wider">Provinsi</p>
                    </div>
                    <div class="p-4 bg-white rounded-2xl shadow-sm border border-slate-100">
                        <p class="text-2xl font-bold text-emerald-600">100%</p>
                        <p class="text-xs text-slate-500 font-semibold uppercase tracking-wider">Digital</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Section: Login Card -->
        <div class="flex-1 flex items-center justify-center p-6">
            <div class="w-full max-w-md">
                <div class="bg-white rounded-[2.5rem] p-8 custom-shadow border border-slate-100 relative overflow-hidden">
                    <!-- Decor Circles -->
                    <div class="absolute -top-10 -right-10 w-32 h-32 bg-emerald-50 rounded-full -z-0"></div>
                    
                    <div class="relative z-10">
                        <div class="flex flex-col items-center mb-8">
                            <div class="w-16 h-16 bg-emerald-100 rounded-2xl flex items-center justify-center text-emerald-600 mb-4 floating">
                                <span class="material-symbols-outlined text-3xl">lock_open</span>
                            </div>
                            <h3 class="text-2xl font-bold text-slate-800">Masuk ke Portal</h3>
                            <p class="text-slate-400 text-sm">Silakan gunakan akun sekolah Anda</p>
                        </div>

                        <!-- Login Form -->
                        <form id="loginForm" method="POST" action="{{ url('login') }}" class="space-y-5" onsubmit="handleLogin(event)">
                            {{ csrf_field() }}
                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase tracking-widest mb-2 ml-1">Username / NPSN</label>
                                <div class="relative">
                                    <span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xl">account_circle</span>
                                    <input type="text" name="email" id="username" required="" placeholder="Masukkan NPSN Sekolah" class="w-full pl-12 pr-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-all placeholder:text-slate-300">
                                </div>
                            </div>

                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase tracking-widest mb-2 ml-1">Kata Sandi</label>
                                <div class="relative">
                                    <span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xl">key</span>
                                    <input type="password" name="password" id="password" required="" placeholder="••••••••" class="w-full pl-12 pr-12 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-all placeholder:text-slate-300">
                                    <button type="button" onclick="togglePassword()" class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-emerald-600">
                                        <span id="pass-icon" class="material-symbols-outlined">visibility</span>
                                    </button>
                                </div>
                            </div>

                            <div class="flex items-center justify-between text-sm px-1">
                                <label class="flex items-center gap-2 text-slate-500 cursor-pointer">
                                    <input type="checkbox" class="w-4 h-4 rounded border-slate-300 text-emerald-600 focus:ring-emerald-500">
                                    Ingat Saya
                                </label>
                                {{-- <a href="{{ url('forgotpass') }}" class="text-emerald-600 font-bold hover:underline">Lupa Sandi?</a> --}}
                            </div>

                            <button type="submit" id="submitBtn" class="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-4 rounded-2xl shadow-lg shadow-emerald-200 transition-all flex items-center justify-center gap-2 group">
                                <span id="btnText">Masuk Sekarang</span>
                                <span id="btnIcon" class="material-symbols-outlined transition-transform group-hover:translate-x-1">arrow_forward</span>
                            </button>
                            <div class="px-8 py-6 bg-slate-50 border-t border-slate-100 text-center">
                                <p class="text-sm text-slate-500">Belum memiliki akun? <a href="{{ url('register') }}" class="text-emerald-600 font-bold hover:underline">Daftar di sini</a></p>
                            </div>
                        </form>

                        <!-- Error Message Container -->
                        @include('include.alertNew')
                        

                        <!-- Help Footer -->
                        <div class="mt-8 pt-8 border-t border-slate-100 flex items-center justify-center gap-6">
                            <div class="text-center">
                                <p class="text-xs text-slate-400 font-medium mb-2">Butuh Bantuan?</p>
                                <div class="flex items-center justify-center">
                                    <a href="https://api.whatsapp.com/send/?phone=6285212436339" class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 hover:bg-emerald-50 hover:text-emerald-600 transition-all">
                                        <span class="material-symbols-outlined text-lg">support_agent</span>
                                    </a>
                                    {{-- <a href="#" class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 hover:bg-emerald-50 hover:text-emerald-600 transition-all">
                                        <span class="material-symbols-outlined text-lg">description</span>
                                    </a> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection
@section('js')
<script>
    
        function switchTab(type) {
            const schoolBtn = document.getElementById('tab-school');
            const adminBtn = document.getElementById('tab-admin');
            const usernameInput = document.getElementById('username');

            if (type === 'school') {
                schoolBtn.className = 'flex-1 py-2 text-sm font-bold rounded-lg bg-white text-emerald-700 shadow-sm transition-all';
                adminBtn.className = 'flex-1 py-2 text-sm font-bold rounded-lg text-slate-500 hover:text-slate-700 transition-all';
                usernameInput.placeholder = 'Masukkan NPSN Sekolah';
            } else {
                adminBtn.className = 'flex-1 py-2 text-sm font-bold rounded-lg bg-white text-emerald-700 shadow-sm transition-all';
                schoolBtn.className = 'flex-1 py-2 text-sm font-bold rounded-lg text-slate-500 hover:text-slate-700 transition-all';
                usernameInput.placeholder = 'Masukkan Username Admin';
            }
        }

        function togglePassword() {
            const passInput = document.getElementById('password');
            const passIcon = document.getElementById('pass-icon');
            if (passInput.type === 'password') {
                passInput.type = 'text';
                passIcon.textContent = 'visibility_off';
            } else {
                passInput.type = 'password';
                passIcon.textContent = 'visibility';
            }
        }

        function handleLogin(event) {
            event.preventDefault();
            const btn = document.getElementById('submitBtn');
            const btnText = document.getElementById('btnText');
            const btnIcon = document.getElementById('btnIcon');
            // const errorMsg = document.getElementById('errorMessage');

            // Feedback loop for UI
            btn.disabled = true;
            btn.classList.add('opacity-70', 'cursor-not-allowed');
            btnText.textContent = 'Memverifikasi...';
            btnIcon.textContent = 'sync';
            btnIcon.classList.add('animate-spin');
            // errorMsg.classList.add('hidden');

            document.getElementById('loginForm').submit();
            

            // setTimeout(() => {
            //     // Mock failure to demonstrate interactivity
            //     btn.disabled = false;
            //     btn.classList.remove('opacity-70', 'cursor-not-allowed');
            //     btnText.textContent = 'Masuk Sekarang';
            //     btnIcon.textContent = 'arrow_forward';
            //     btnIcon.classList.remove('animate-spin');
            //     errorMsg.classList.remove('hidden');
            // }, 1500);
        }
    
</script>
@endsection