<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <title>Login - SIPENA</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <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;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        :root {
            --primary: #2563eb;
            --primary-dark: #1d4ed8;
            --primary-light: #eff6ff;
            --success: #16a34a;
            --danger: #dc2626;
            --warning: #f59e0b;
            --text: #0f172a;
            --muted: #64748b;
            --line: #cbd5e1;
            --body: #f8fafc;
            --white: #ffffff;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body, html {
            height: 100vh;
            margin: 0;
            padding: 0;
            font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            overflow: hidden;
            background: #f8fafc;
        }

        .auth-page {
            display: grid;
            grid-template-columns: 1fr 1fr;
            height: 100vh;
            width: 100vw;
        }

        .brand-panel {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 64px;
            background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
            color: #ffffff;
            position: relative;
            overflow: hidden;
        }

        /* Decorative circles */
        .decor-circle {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.05);
            pointer-events: none;
        }
        .circle-1 {
            width: 300px;
            height: 300px;
            top: -100px;
            left: -100px;
        }
        .circle-2 {
            width: 500px;
            height: 500px;
            bottom: -200px;
            right: -100px;
            border: 2px solid rgba(255, 255, 255, 0.08);
            background: transparent;
        }
        .circle-3 {
            width: 150px;
            height: 150px;
            top: 40%;
            right: 10%;
        }

        .brand-logo {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-size: 1.6rem;
            font-weight: 800;
            position: relative;
            z-index: 2;
        }

        .brand-logo i {
            display: grid;
            place-items: center;
            width: 44px;
            height: 44px;
            background: rgba(255, 255, 255, 0.16);
            border-radius: 12px;
            font-size: 1.35rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .brand-copy {
            max-width: 540px;
            position: relative;
            z-index: 2;
            margin: auto 0;
        }

        .brand-copy h1 {
            font-size: clamp(2.2rem, 3.5vw, 3rem);
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 24px;
        }

        .brand-copy p {
            color: rgba(255, 255, 255, 0.85);
            font-size: 1.1rem;
            line-height: 1.7;
            font-weight: 500;
        }

        .brand-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            position: relative;
            z-index: 2;
        }

        .stat-card {
            padding: 20px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 16px;
            backdrop-filter: blur(8px);
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.14);
            border-color: rgba(255, 255, 255, 0.25);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .stat-card i {
            font-size: 1.75rem;
            color: #fbbf24; /* yellow accent */
        }

        .stat-card span {
            font-weight: 700;
            font-size: 0.95rem;
            letter-spacing: 0.5px;
        }

        .form-panel {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
            background: #f8fafc;
            height: 100vh;
        }

        .login-card {
            width: 100%;
            max-width: 420px;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 20px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.12);
            padding: 40px;
            transition: all 0.3s ease;
        }

        .login-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 24px 60px rgba(0,0,0,0.15);
        }

        .card-icon {
            display: grid;
            place-items: center;
            width: 54px;
            height: 54px;
            color: var(--primary);
            background: var(--primary-light);
            border-radius: 14px;
            font-size: 1.45rem;
            margin-bottom: 20px;
        }

        .login-card h2 {
            font-size: 1.8rem;
            font-weight: 800;
            margin-bottom: 8px;
            color: #0f172a;
        }

        .login-card .subtitle {
            color: var(--muted);
            line-height: 1.5;
            margin-bottom: 28px;
            font-size: 0.95rem;
            font-weight: 500;
        }

        .alert {
            display: flex;
            gap: 10px;
            padding: 12px 14px;
            border-radius: 8px;
            margin-bottom: 18px;
            font-size: 0.92rem;
            line-height: 1.5;
            font-weight: 600;
        }

        .alert-danger {
            color: #991b1b;
            background: #fef2f2;
            border: 1px solid #fecaca;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            color: #334155;
            font-size: 0.9rem;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .input-wrap {
            position: relative;
        }

        .input-wrap i {
            position: absolute;
            left: 15px;
            top: 50%;
            color: #94a3b8;
            transform: translateY(-50%);
            font-size: 1.05rem;
            transition: color 0.2s ease;
        }

        input[type="text"],
        input[type="password"] {
            width: 100%;
            height: 48px;
            border: 1.5px solid #cbd5e1;
            border-radius: 10px;
            outline: none;
            padding: 12px 14px 12px 44px;
            color: var(--text);
            background: #ffffff;
            font: inherit;
            transition: all 0.2s ease;
        }

        input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
        }

        input:focus ~ i:not(#togglePassword) {
            color: var(--primary);
        }

        .input-wrap #togglePassword {
            left: auto;
            right: 15px;
            cursor: pointer;
            pointer-events: auto !important;
            transition: color 0.2s;
        }
        
        .input-wrap #togglePassword:hover {
            color: var(--primary);
        }

        .field-error {
            color: var(--danger);
            font-size: 0.85rem;
            margin-top: 7px;
            font-weight: 600;
        }

        .form-options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 4px 0 24px;
        }

        .remember {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #475569;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
        }

        .remember input {
            width: 16px;
            height: 16px;
            accent-color: var(--primary);
            cursor: pointer;
        }

        .login-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            height: 48px;
            border: none;
            border-radius: 10px;
            color: var(--white);
            background: var(--primary);
            cursor: pointer;
            font: inherit;
            font-weight: 700;
            box-shadow: 0 4px 6px rgba(37, 99, 235, 0.12);
            transition: all 0.2s ease;
        }

        .login-btn:hover {
            background: var(--primary-dark);
            box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2);
            transform: translateY(-1px);
        }

        .login-btn:active {
            transform: translateY(0);
        }

        .login-btn:disabled {
            opacity: 0.75;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .login-help {
            margin-top: 24px; 
            padding: 14px 16px; 
            background: var(--primary-light); 
            border-left: 4px solid var(--primary); 
            border-radius: 6px; 
            font-size: 0.86rem; 
            color: #1e3a8a; 
            line-height: 1.6;
            text-align: left;
            font-weight: 600;
        }

        /* Responsive Mobile */
        @media (max-width: 767px) {
            body, html {
                overflow: auto !important;
                height: auto;
                max-height: none;
            }
            .auth-page {
                grid-template-columns: 1fr;
                height: auto;
                min-height: 100vh;
            }
            .brand-panel {
                display: none;
            }
            .form-panel {
                padding: 24px 16px;
                height: auto;
                min-height: 100vh;
            }
            .login-card {
                max-width: 100%;
                padding: 32px 20px;
                border: none;
                box-shadow: none;
                background: transparent;
            }
        }
    </style>
</head>

<body>
    <div class="auth-page">
        <!-- Branding Panel (Left Side) -->
        <section class="brand-panel">
            <div class="decor-circle circle-1"></div>
            <div class="decor-circle circle-2"></div>
            <div class="decor-circle circle-3"></div>

            <div class="brand-logo">
                <i class="fa-solid fa-graduation-cap"></i>
                <span>SIPENA</span>
            </div>

            <div class="brand-copy">
                <h1>Sistem Pembelajaran Digital untuk Sekolah Dasar</h1>
                <p>Menghubungkan guru, siswa, dan administrator dalam satu platform pembelajaran yang terintegrasi.</p>
            </div>

            <div class="brand-stats">
                <div class="stat-card">
                    <i class="fa-solid fa-user-shield"></i>
                    <span>Admin</span>
                </div>
                <div class="stat-card">
                    <i class="fa-solid fa-chalkboard-user"></i>
                    <span>Guru</span>
                </div>
                <div class="stat-card">
                    <i class="fa-solid fa-user-graduate"></i>
                    <span>Siswa</span>
                </div>
            </div>
        </section>

        <!-- Form Panel (Right Side) -->
        <main class="form-panel">
            <section class="login-card">
                <div class="card-icon">
                    <i class="fa-solid fa-user-graduate"></i>
                </div>

                <h2>Login SIPENA</h2>
                <p class="subtitle">Masukkan akun Anda untuk melanjutkan ke dashboard.</p>

                @if ($errors->any())
                    <div class="alert alert-danger">
                        <i class="fa-solid fa-circle-exclamation"></i>
                        <div>
                            @foreach ($errors->all() as $error)
                                <div>{{ $error }}</div>
                            @endforeach
                        </div>
                    </div>
                @endif

                <form action="{{ route('login.store') }}" method="POST">
                    @csrf

                    <div class="form-group">
                        <label for="login">NIS / NIP / Email</label>
                        <div class="input-wrap">
                            <i class="fa-solid fa-user"></i>
                            <input
                                id="login"
                                type="text"
                                name="login"
                                value="{{ old('login') }}"
                                placeholder="Masukkan NIS, NIP, atau Email"
                                autocomplete="username"
                                autofocus
                            >
                        </div>
                        @error('login')
                            <div class="field-error">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="password">Password</label>
                        <div class="input-wrap">
                            <i class="fa-solid fa-lock"></i>
                            <input
                                id="password"
                                type="password"
                                name="password"
                                placeholder="Masukkan password"
                                autocomplete="current-password"
                            >
                            <i class="fa-solid fa-eye-slash" id="togglePassword" style="position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #94a3b8; cursor: pointer;"></i>
                        </div>
                        @error('password')
                            <div class="field-error">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-options">
                        <label class="remember" for="remember">
                            <input id="remember" type="checkbox" name="remember" value="1" {{ old('remember') ? 'checked' : '' }}>
                            <span>Ingat saya</span>
                        </label>
                    </div>

                    <button type="submit" class="login-btn">
                        Login
                    </button>
                </form>

                <div class="login-help">
                    <p style="margin-bottom: 2px;">• Admin login menggunakan <strong>Email</strong></p>
                    <p style="margin-bottom: 2px;">• Guru login menggunakan <strong>NIP</strong></p>
                    <p>• Siswa login menggunakan <strong>NIS</strong></p>
                </div>

            </section>
        </main>
    </div>

    <script>
        const togglePassword = document.querySelector('#togglePassword');
        const password = document.querySelector('#password');

        togglePassword.addEventListener('click', function (e) {
            const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
            password.setAttribute('type', type);
            this.classList.toggle('fa-eye');
            this.classList.toggle('fa-eye-slash');
        });

        const loginForm = document.querySelector('form');
        const loginBtn = document.querySelector('.login-btn');

        loginForm.addEventListener('submit', function() {
            loginBtn.disabled = true;
            loginBtn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> Memproses...';
        });
    </script>
</body>

</html>