@extends('adminlte::master')

@section('adminlte_css')
    {{-- 1. FAVICON --}}
    <link rel="icon" type="image/png" href="{{ asset('assets/img/favicon.png') }}">

    {{-- 2. FONTS (Inter & Poppins) --}}
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@500;600;700;800;900&display=swap" rel="stylesheet">
    
    {{-- 3. CUSTOM STYLES (SMART CENDEKIA THEME) --}}
    <style>
        /* ==========================================
           CORE LAYOUT & TYPOGRAPHY
           ========================================== */
        :root {
            --brand-teal: #0f766e;      /* Teal-700 */
            --brand-teal-dark: #042f2e; /* Teal-950 */
            --brand-amber: #f59e0b;     /* Amber-500 */
        }

        body, html {
            height: 100%; margin: 0; padding: 0;
            font-family: 'Inter', sans-serif;
            background-color: #f8fafc; 
            overflow: hidden; /* Desktop: No Scroll */
        }
        
        h1, h2, h3, h4, h5, h6, .brand-title {
            font-family: 'Poppins', sans-serif;
        }

        .login-container {
            display: flex;
            height: 100vh;
            width: 100%;
        }
        
        /* ==========================================
           BAGIAN KIRI (BRANDING - TEAL THEME)
           ========================================== */
        .login-left {
            flex: 1.2;
            background: linear-gradient(135deg, var(--brand-teal-dark) 0%, var(--brand-teal) 100%);
            display: flex; flex-direction: column;
            justify-content: center; align-items: center;
            color: white; position: relative; overflow: hidden;
            padding: 40px; text-align: center;
            box-shadow: inset -10px 0 30px rgba(0,0,0,0.15);
        }
        
        /* Pattern Overlay */
        .login-left::after {
            content: ""; position: absolute; inset: 0;
            background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
            opacity: 0.15; mix-blend-mode: overlay; pointer-events: none;
        }

        /* Animated Blobs for Premium Feel */
        .blob-bg {
            position: absolute; border-radius: 50%; filter: blur(60px);
            z-index: 0; animation: float 8s ease-in-out infinite alternate;
        }
        .blob-1 { width: 40vh; height: 40vh; background: rgba(245, 158, 11, 0.2); top: -10vh; left: -10vh; }
        .blob-2 { width: 50vh; height: 50vh; background: rgba(20, 184, 166, 0.2); bottom: -15vh; right: -15vh; animation-delay: -4s; }

        @keyframes float {
            0% { transform: translateY(0) scale(1); }
            100% { transform: translateY(-20px) scale(1.05); }
        }

        /* LOGO UTAMA */
        .brand-logo-desktop {
            width: auto; height: 160px; margin-bottom: 30px;
            filter: drop-shadow(0 15px 25px rgba(0,0,0,0.3));
            z-index: 2; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            object-fit: contain;
        }
        .brand-logo-desktop:hover { transform: scale(1.08) translateY(-5px); }
        
        .brand-title { 
            font-size: 2.5rem; font-weight: 900; margin-bottom: 5px; 
            color: #ffffff; letter-spacing: -0.5px;
            text-shadow: 0 4px 15px rgba(0,0,0,0.3); z-index: 2;
        }
        .brand-title span { color: var(--brand-amber); }
        
        .brand-subtitle { 
            font-size: 1.1rem; opacity: 0.85; max-width: 80%; 
            line-height: 1.6; font-weight: 400; z-index: 2;
        }

        /* ==========================================
           BAGIAN KANAN (FORM LOGIN)
           ========================================== */
        .login-right {
            flex: 1; display: flex; flex-direction: column;
            justify-content: center; align-items: center;
            padding: 0 50px; background-color: #ffffff; position: relative;
        }
        
        .login-form-wrapper { width: 100%; max-width: 420px; position: relative; z-index: 10; }
        
        /* HEADER TEKS */
        .login-header { margin-bottom: 40px; text-align: left; }
        .login-header h3 { 
            font-weight: 800; color: #0f172a; margin-bottom: 8px; font-size: 2rem; letter-spacing: -0.5px;
        }
        .login-header p { color: #64748b; font-size: 0.95rem; margin: 0; font-weight: 400; }

        /* INPUT STYLES */
        .form-group { margin-bottom: 24px; position: relative; }
        .form-group label {
            font-size: 0.8rem; font-weight: 700; color: #475569;
            margin-bottom: 8px; display: block; text-transform: uppercase; letter-spacing: 0.5px;
        }
        
        .input-group-custom { position: relative; }

        .form-control-custom {
            background-color: #f1f5f9; border: 2px solid transparent;
            border-radius: 1rem; padding: 16px 20px;
            font-size: 1rem; color: #1e293b; font-weight: 600; font-family: 'Inter', sans-serif;
            width: 100%; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .form-control-custom::placeholder { color: #94a3b8; font-weight: 500; }
        
        .form-control-custom:focus {
            background-color: #ffffff; border-color: var(--brand-teal);
            box-shadow: 0 5px 15px rgba(15, 118, 110, 0.15); outline: none; transform: translateY(-2px);
        }

        /* TOMBOL LOGIN */
        .btn-login {
            background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-teal-dark) 100%);
            border: none; border-radius: 1rem; padding: 18px;
            font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: 1px; color: white;
            box-shadow: 0 10px 25px rgba(15, 118, 110, 0.3);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: pointer; width: 100%; margin-top: 15px; text-transform: uppercase;
        }
        .btn-login:hover {
            transform: translateY(-3px); box-shadow: 0 15px 35px rgba(15, 118, 110, 0.4); filter: brightness(1.1);
        }
        .btn-login:active { transform: scale(0.98); }

        /* UTILS & EXTRAS */
        .text-brand-teal { color: var(--brand-teal) !important; }
        .text-brand-amber { color: var(--brand-amber) !important; }
        
        .custom-control-label { font-size: 0.9rem; color: #64748b; font-weight: 500; padding-top: 2px; cursor: pointer; }
        .forgot-link { color: var(--brand-teal); font-size: 0.9rem; font-weight: 700; text-decoration: none; transition: color 0.3s; }
        .forgot-link:hover { color: var(--brand-amber); }

        .login-footer {
            position: absolute; bottom: 30px; 
            text-align: center; font-size: 0.8rem; color: #94a3b8; width: 100%; font-weight: 500;
        }

        /* ==========================================
           MODERN ANDROID APP UI (MOBILE ONLY)
           ========================================== */
        .mobile-brand { display: none; }

        @media (max-width: 992px) {
            .login-left { display: none; }
            
            /* Background utama menjadi warna brand seperti Splash Screen Native */
            .login-right { 
                background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-teal-dark) 100%);
                display: flex; height: 100vh; flex-direction: column; 
                padding: 0; justify-content: space-between;
                overflow: hidden;
            }
            body, html { overflow: hidden; }

            /* Logo & Text di bagian atas aplikasi */
            .mobile-brand { 
                display: flex; flex-direction: column; align-items: center; justify-content: center;
                flex: 1; padding: 30px 20px; text-align: center;
            }
            .mobile-brand img { height: 90px; width: auto; object-fit: contain; margin-bottom: 15px; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2)); }
            .mobile-brand-title { font-family: 'Poppins', sans-serif; font-size: 2rem; font-weight: 900; color: white; margin-bottom: 5px; line-height: 1;}
            .mobile-brand-title span { color: var(--brand-amber); }
            .mobile-brand-subtitle { color: rgba(255,255,255,0.9); font-size: 0.85rem; }

            .login-header { text-align: center; margin-bottom: 30px; }
            
            /* Form Login bergaya Bottom Sheet melengkung */
            .login-form-wrapper { 
                background: white; padding: 35px 30px 20px; 
                border-radius: 35px 35px 0 0; 
                box-shadow: 0 -15px 40px rgba(0,0,0,0.15); 
                margin: 0; width: 100%; max-width: 100%;
                position: relative; animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            }
            
            /* Pil Drag Handle ala Android/iOS */
            .login-form-wrapper::before {
                content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
                width: 50px; height: 5px; border-radius: 5px; background: #e2e8f0;
            }

            .login-footer { position: relative; margin-top: 25px; bottom: auto; padding-bottom: 15px; }

            @keyframes slideUp {
                from { transform: translateY(100%); }
                to { transform: translateY(0); }
            }
        }
    </style>
@stop

@section('body')
    <div class="login-container">
        
        {{-- =================================== --}}
        {{-- BAGIAN KIRI (BRANDING DESKTOP) --}}
        {{-- =================================== --}}
        <div class="login-left">
            <div class="blob-bg blob-1"></div>
            <div class="blob-bg blob-2"></div>

            {{-- LOGO DINAMIS DARI DATABASE / CONFIG --}}
            <img src="{{ asset(config('adminlte.logo_img', 'assets/img/logo.png')) }}" class="brand-logo-desktop" alt="Logo {{ config('adminlte.title', 'Smart Cendekia') }}">
            
            {{-- NAMA APLIKASI DINAMIS --}}
            <div class="brand-title">Smart <span>Cendekia</span></div>
            <div class="brand-subtitle">
                Sistem Informasi Manajemen Terpadu<br>
                <strong>Puruhita Islamic School</strong>
            </div>
        </div>

        {{-- =================================== --}}
        {{-- BAGIAN KANAN (FORM) --}}
        {{-- =================================== --}}
        <div class="login-right">
            
            {{-- SPLASH HERO (Muncul hanya di HP) --}}
            <div class="mobile-brand">
                <img src="{{ asset(config('adminlte.logo_img', 'assets/img/logo.png')) }}" alt="Logo {{ config('adminlte.title', 'Smart Cendekia') }}">
                <div class="mobile-brand-title">Smart <span>Cendekia</span></div>
                <div class="mobile-brand-subtitle">Puruhita Islamic School</div>
            </div>

            {{-- BOTTOM SHEET FORM --}}
            <div class="login-form-wrapper">
                
                <div class="login-header">
                    <h3>Ahlan wa Sahlan 👋</h3>
                    <p>Silakan masuk untuk mengakses dashboard Anda.</p>
                </div>

                <form action="{{ route('login') }}" method="post" autocomplete="off">
                    @csrf
                    
                    {{-- 1. Input Email / NISN --}}
                    <div class="form-group">
                        <label id="login-label">Email / NISN / Username</label>
                        <div class="input-group-custom">
                            <input type="text" id="login-input" name="email" 
                                   class="form-control-custom @error('email') is-invalid @enderror"
                                   value="{{ old('email') }}" 
                                   placeholder="Ketik identitas Anda..." required autofocus>
                        </div>
                        
                        {{-- Hint Dinamis --}}
                        <div id="login-hint" class="mt-2 small text-muted font-weight-bold" style="font-size: 0.8rem;">
                            <i class="fas fa-info-circle mr-1"></i> Gunakan <strong>NISN</strong> atau <strong>Email</strong>
                        </div>

                        @error('email')
                            <span class="invalid-feedback d-block mt-1 text-danger small font-weight-bold">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    {{-- 2. Input Password --}}
                    <div class="form-group">
                        <label>Kata Sandi</label>
                        <div style="position: relative;">
                            <input type="password" name="password" id="password-field"
                                   class="form-control-custom @error('password') is-invalid @enderror"
                                   placeholder="••••••••" required>
                            
                            {{-- Toggle Show/Hide Password --}}
                            <i class="fas fa-eye" id="toggle-password" 
                               style="position: absolute; right: 20px; top: 18px; cursor: pointer; color: #94a3b8; transition: color 0.3s; font-size: 1.1rem;"></i>
                        </div>
                        @error('password')
                            <span class="invalid-feedback d-block mt-1 text-danger small font-weight-bold">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    {{-- 3. Remember & Forgot --}}
                    <div class="d-flex justify-content-between align-items-center mb-4 mt-2">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="remember" name="remember" {{ old('remember') ? 'checked' : '' }}>
                            <label class="custom-control-label" for="remember">Ingat Saya</label>
                        </div>
                        @if (Route::has('password.request'))
                            <a href="{{ route('password.request') }}" class="forgot-link">Lupa Password?</a>
                        @endif
                    </div>

                    {{-- 4. Tombol Submit --}}
                    <button type="submit" class="btn-login">
                        Masuk Sistem <i class="fas fa-arrow-right ml-2"></i>
                    </button>
                </form>
                
               
            </div>
             {{-- Footer Dinamis --}}
                <div class="login-footer">
                    &copy; {{ date('Y') }} <strong>{{ config('adminlte.title', 'Puruhita Islamic School') }}</strong>.<br>
                    Developed by CV. SOE MULTI DIGITAL
                </div>

        </div>

    </div>

    {{-- SCRIPT: UX INTERACTION --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 1. SETUP VARIABEL
            const loginInput = document.getElementById('login-input');
            const loginLabel = document.getElementById('login-label');
            const loginHint = document.getElementById('login-hint');
            const passwordField = document.getElementById('password-field');
            const togglePassword = document.getElementById('toggle-password');

            // Warna Tema Puruhita (Teal & Amber)
            const colorTeal = "#0f766e";  // Untuk Staff/Guru/Umum
            const colorAmber = "#f59e0b"; // Untuk Siswa/Santri
            const colorGray = "#94a3b8";  

            // 2. LOGIKA DETEKSI INPUT (NISN vs EMAIL)
            loginInput.addEventListener('input', function() {
                const val = this.value;
                
                // Jika input angka > 3 digit (Asumsi NISN Santri)
                if (/^\d+$/.test(val) && val.length > 3) {
                    loginLabel.innerText = "Nomor Induk Siswa Nasional (NISN)";
                    loginLabel.style.color = colorAmber;
                    loginHint.innerHTML = `<span style="color:${colorAmber}"><i class="fas fa-user-graduate"></i> Login terdeteksi sebagai <strong>Siswa/Santri</strong></span>`;
                    this.style.borderColor = colorAmber;
                    this.style.boxShadow = "0 5px 15px rgba(245, 158, 11, 0.15)"; 
                
                // Jika input mengandung @ (Asumsi Email Guru/Staff)
                } else if (val.includes('@')) {
                    loginLabel.innerText = "Alamat Email Akun";
                    loginLabel.style.color = colorTeal;
                    loginHint.innerHTML = `<span style="color:${colorTeal}"><i class="fas fa-user-tie"></i> Login terdeteksi sebagai <strong>Guru / Staff</strong></span>`;
                    this.style.borderColor = colorTeal;
                    this.style.boxShadow = "0 5px 15px rgba(15, 118, 110, 0.15)"; 
                
                // Default
                } else {
                    loginLabel.innerText = "Email / NISN / Username";
                    loginLabel.style.color = "#475569";
                    loginHint.innerHTML = '<i class="fas fa-info-circle"></i> Masukkan <strong>NISN</strong> atau <strong>Email</strong>';
                    this.style.borderColor = "transparent";
                    this.style.boxShadow = "none";
                }
            });

            // 3. FITUR SHOW/HIDE PASSWORD
            togglePassword.addEventListener('click', function () {
                const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordField.setAttribute('type', type);
                
                // Ganti Icon
                this.classList.toggle('fa-eye');
                this.classList.toggle('fa-eye-slash');
                
                // Ganti Warna Icon saat aktif
                if(type === 'text'){
                    this.style.color = colorTeal;
                } else {
                    this.style.color = colorGray;
                }
            });
        });
    </script>
@stop