<?= $this->extend('layout/main') ?>

<?= $this->section('content') ?>
<style>
    /* Override main layout styles for full screen login page */
    body, main {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
    
    /* Radial glow effect for the background */
    .glow-bg {
        background: radial-gradient(circle at 20% 30%, rgba(20, 83, 45, 0.15) 0%, rgba(15, 17, 21, 0) 50%),
                    radial-gradient(circle at 80% 70%, rgba(17, 24, 39, 0.2) 0%, rgba(15, 17, 21, 0) 50%);
    }
</style>

<div class="min-h-screen w-full flex items-center justify-center bg-background text-on-surface-variant glow-bg p-4 sm:p-8 font-sans relative">
    
    <!-- Theme Toggle Button -->
    <button onclick="toggleTheme()" class="absolute top-4 right-4 sm:top-8 sm:right-8 w-10 h-10 rounded-full bg-surface-container border border-outline-variant flex items-center justify-center text-secondary hover:text-on-surface hover:bg-surface-container-high transition shadow-sm" title="Ganti Tema">
        <span class="material-symbols-outlined" id="theme-icon-login">dark_mode</span>
    </button>

    <div class="w-full max-w-[1100px] flex flex-col lg:flex-row items-center justify-between gap-12 lg:gap-8">
        
        <!-- Left Side: Branding -->
        <div class="w-full lg:w-1/2 flex flex-col space-y-8 relative z-10 lg:pr-8">
            <!-- Icon at top -->
            <div class="w-12 h-12 bg-surface rounded-xl flex items-center justify-center border border-outline-variant shadow-lg">
                <span class="material-symbols-outlined text-primary">grid_view</span>
            </div>
            
            <!-- Headline -->
            <div>
                <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-on-surface tracking-tight leading-tight">
                    Perizinan<br>
                    <span class="text-primary">Digitalized.</span>
                </h1>
            </div>
            
            <!-- Description -->
            <p class="text-secondary text-base sm:text-lg max-w-md leading-relaxed">
                Akses sistem informasi perizinan terpadu dan prediktif. Cepat, aman, dan mutakhir untuk pengelolaan santri secara presisi.
            </p>

            <!-- Bottom Avatars / Info -->
            <div class="flex items-center space-x-4 pt-6">
                <div class="flex -space-x-3">
                    <div class="w-8 h-8 rounded-full bg-slate-300 border-2 border-background flex items-center justify-center text-xs font-bold text-slate-700">W</div>
                    <div class="w-8 h-8 rounded-full bg-slate-400 border-2 border-background flex items-center justify-center text-xs font-bold text-slate-800">K</div>
                    <div class="w-8 h-8 rounded-full bg-emerald-100 border-2 border-background flex items-center justify-center text-xs font-bold text-emerald-800">S</div>
                </div>
                <span class="text-[11px] font-bold tracking-widest text-secondary uppercase">+3 HAK AKSES SISTEM</span>
            </div>
        </div>

        <!-- Right Side: Login Card -->
        <div class="w-full lg:w-[480px] z-10">
            <div class="bg-surface p-8 sm:p-10 rounded-2xl shadow-2xl relative overflow-hidden border border-outline-variant">
                <!-- Subtle top reflection -->
                <div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary/20 to-transparent"></div>

                <div class="mb-8">
                    <h2 class="text-2xl font-bold text-on-surface mb-2">Welcome back</h2>
                    <p class="text-sm text-secondary">Sign in to your SIPEDI account.</p>
                </div>

                <form action="/login" method="post" class="space-y-6">
                    <?= csrf_field() ?>
                    
                    <div class="space-y-5">
                        <!-- Username Field -->
                        <div>
                            <label for="username" class="block text-[11px] font-bold text-secondary uppercase tracking-widest mb-2">Username</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-on-surface-variant">
                                    <span class="material-symbols-outlined text-[18px]">person</span>
                                </span>
                                <input type="text" name="username" id="username" required 
                                       class="pl-11 block w-full rounded-lg bg-surface-container-highest text-on-surface shadow-sm border border-outline focus:border-primary focus:ring-1 focus:ring-primary sm:text-sm py-3 transition-colors placeholder-outline"
                                       placeholder="Masukkan username"/>
                            </div>
                        </div>

                        <!-- Password Field -->
                        <div>
                            <div class="flex items-center justify-between mb-2">
                                <label for="password" class="block text-[11px] font-bold text-secondary uppercase tracking-widest">Password</label>
                                <a href="#" class="text-[11px] font-bold text-primary hover:text-primary-hover transition-colors">Forgot password?</a>
                            </div>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-on-surface-variant">
                                    <span class="material-symbols-outlined text-[18px]">lock</span>
                                </span>
                                <input type="password" name="password" id="password" required 
                                       class="pl-11 pr-11 block w-full rounded-lg bg-surface-container-highest text-on-surface shadow-sm border border-outline focus:border-primary focus:ring-1 focus:ring-primary sm:text-sm py-3 transition-colors placeholder-outline"
                                       placeholder="••••••••"/>
                                <button type="button" onclick="togglePassword()" class="absolute inset-y-0 right-0 pr-4 flex items-center text-on-surface-variant hover:text-on-surface transition-colors">
                                    <span class="material-symbols-outlined text-[18px]" id="toggle-icon">visibility_off</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <button type="submit" 
                            class="w-full flex justify-center items-center py-3 px-4 rounded-lg text-sm font-extrabold text-white bg-primary hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-background focus:ring-primary transition-all shadow-sm mt-2">
                        SIGN IN <span class="material-symbols-outlined text-[18px] ml-2 font-bold">arrow_forward</span>
                    </button>
                </form>

                <!-- Divider -->
                <div class="mt-8 mb-6 flex items-center justify-center space-x-4">
                    <div class="h-px bg-outline-variant flex-1"></div>
                    <span class="text-[10px] font-bold text-secondary uppercase tracking-widest">Or continue with</span>
                    <div class="h-px bg-outline-variant flex-1"></div>
                </div>

                <!-- Demo Logins -->
                <div class="grid grid-cols-2 gap-3">
                    <button onclick="quickLogin('wali', 'wali123')" type="button" class="flex items-center justify-center space-x-2 bg-surface-container border border-outline-variant hover:bg-surface-container-high hover:border-outline text-secondary hover:text-on-surface rounded-lg py-2.5 px-4 text-xs font-bold transition-all">
                        <span class="material-symbols-outlined text-[16px]">family_restroom</span>
                        <span>Wali</span>
                    </button>
                    <button onclick="quickLogin('kesantrian', 'kesantrian123')" type="button" class="flex items-center justify-center space-x-2 bg-surface-container border border-outline-variant hover:bg-surface-container-high hover:border-outline text-secondary hover:text-on-surface rounded-lg py-2.5 px-4 text-xs font-bold transition-all">
                        <span class="material-symbols-outlined text-[16px]">school</span>
                        <span>Ustadz</span>
                    </button>
                    <button onclick="quickLogin('satpam', 'satpam123')" type="button" class="flex items-center justify-center space-x-2 bg-surface-container border border-outline-variant hover:bg-surface-container-high hover:border-outline text-secondary hover:text-on-surface rounded-lg py-2.5 px-4 text-xs font-bold transition-all">
                        <span class="material-symbols-outlined text-[16px]">shield</span>
                        <span>Satpam</span>
                    </button>
                    <button onclick="quickLogin('admin', 'admin123')" type="button" class="flex items-center justify-center space-x-2 bg-surface-container border border-outline-variant hover:bg-surface-container-high hover:border-outline text-secondary hover:text-on-surface rounded-lg py-2.5 px-4 text-xs font-bold transition-all">
                        <span class="material-symbols-outlined text-[16px]">admin_panel_settings</span>
                        <span>Admin</span>
                    </button>
                </div>
                
            </div>
        </div>
    </div>
</div>

<script>
    function quickLogin(username, password) {
        document.getElementById('username').value = username;
        document.getElementById('password').value = password;
        document.querySelector('form').submit();
    }

    function togglePassword() {
        const input = document.getElementById('password');
        const icon = document.getElementById('toggle-icon');
        if (input.type === 'password') {
            input.type = 'text';
            icon.innerText = 'visibility';
        } else {
            input.type = 'password';
            icon.innerText = 'visibility_off';
        }
    }
</script>
<?= $this->endSection() ?>
