<!DOCTYPE html>
<html lang="id" data-bs-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login | SIMAK</title>
    
    <!-- Google Fonts: Plus Jakarta Sans -->
    <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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Bootstrap 5 & Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    
    <?php helper('logo'); ?>
<link rel="icon" type="image/png" href="<?= getLogo('sekolah') ?>">

    <!-- PWA Meta -->
    <meta name="theme-color" content="#0d6efd">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="SIMAK PPDS">
    <link rel="apple-touch-icon" href="/assets/img/icons/icon-192x192.png">
    <link rel="manifest" href="/manifest.json">
    <link rel="stylesheet" href="/css/pwa.css">


    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            --accent-gradient: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
            --card-bg: rgba(255, 255, 255, 0.85);
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --input-focus: #3b82f6;
            --border-color: rgba(100, 116, 139, 0.15);
        }

        [data-bs-theme="dark"] {
            --primary-gradient: linear-gradient(135deg, #020617 0%, #0f172a 100%);
            --card-bg: rgba(15, 23, 42, 0.85);
            --text-primary: #f8fafc;
            --text-secondary: #94a3b8;
            --border-color: rgba(148, 163, 184, 0.15);
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: var(--primary-gradient);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            margin: 0;
            padding: 1.5rem;
        }

        /* Abstract Floating Shapes */
        .bg-shape {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            z-index: 0;
            opacity: 0.12;
            pointer-events: none;
        }
        .shape-1 {
            width: 320px; height: 320px;
            background: #3b82f6;
            top: -50px; left: -50px;
            animation: float 10s ease-in-out infinite;
        }
        .shape-2 {
            width: 280px; height: 280px;
            background: #10b981;
            bottom: -50px; right: -50px;
            animation: float 12s ease-in-out infinite reverse;
        }

        @keyframes float {
            0% { transform: translateY(0px) scale(1); }
            50% { transform: translateY(-30px) scale(1.08); }
            100% { transform: translateY(0px) scale(1); }
        }

        /* Glassmorphism Card */
        .login-card {
            width: 100%;
            max-width: 440px;
            background: var(--card-bg) !important;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.18) !important;
            border-radius: 24px !important;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25) !important;
            z-index: 10;
            animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes slideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Logo Animation & Container */
        .login-logo-container {
            width: 86px; height: 86px;
            margin: 0 auto 1.25rem;
            position: relative;
            display: flex; align-items: center; justify-content: center;
        }
        .login-logo-bg {
            position: absolute;
            inset: 0;
            background: var(--accent-gradient);
            border-radius: 24px;
            transform: rotate(45deg);
            opacity: 0.08;
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .login-card:hover .login-logo-bg {
            transform: rotate(90deg);
            opacity: 0.12;
        }
        .login-logo {
            width: 72px; height: 72px;
            object-fit: contain;
            z-index: 2;
            border-radius: 18px;
            background: #ffffff;
            box-shadow: 0 8px 16px rgba(0,0,0,0.08);
            padding: 5px;
            transition: transform 0.3s ease;
        }
        .login-card:hover .login-logo {
            transform: scale(1.05);
        }

        /* Headings */
        .card-title {
            color: var(--text-primary);
            font-weight: 700;
        }
        .card-subtitle {
            color: var(--text-secondary);
            font-size: 0.85rem;
        }

        /* Form Inputs */
        .form-label {
            font-weight: 600;
            font-size: 0.82rem;
            color: var(--text-primary);
            margin-bottom: 0.4rem;
        }
        .input-group {
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }
        .input-group-text {
            background-color: rgba(255, 255, 255, 0.45) !important;
            border: 1.5px solid var(--border-color);
            border-right: none;
            color: var(--text-secondary);
            padding: 0.75rem 1rem;
            transition: all 0.3s ease;
        }
        [data-bs-theme="dark"] .input-group-text {
            background-color: rgba(15, 23, 42, 0.45) !important;
        }
        .form-control {
            background-color: rgba(255, 255, 255, 0.45) !important;
            border: 1.5px solid var(--border-color) !important;
            border-left: none !important;
            color: var(--text-primary) !important;
            padding: 0.75rem 1rem 0.75rem 0 !important;
            font-size: 0.92rem;
            transition: all 0.3s ease;
        }
        [data-bs-theme="dark"] .form-control {
            background-color: rgba(15, 23, 42, 0.45) !important;
        }
        .form-control:focus {
            box-shadow: none;
        }
        .input-group:focus-within {
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
        }
        .input-group:focus-within .input-group-text,
        .input-group:focus-within .form-control {
            border-color: var(--input-focus) !important;
            background-color: #ffffff !important;
        }
        [data-bs-theme="dark"] .input-group:focus-within .input-group-text,
        [data-bs-theme="dark"] .input-group:focus-within .form-control {
            background-color: #0f172a !important;
        }

        /* Show/Hide Password Button */
        .btn-toggle-password {
            background-color: rgba(255, 255, 255, 0.45) !important;
            border: 1.5px solid var(--border-color) !important;
            border-left: none !important;
            color: var(--text-secondary);
            padding: 0 1rem;
            transition: all 0.3s ease;
        }
        [data-bs-theme="dark"] .btn-toggle-password {
            background-color: rgba(15, 23, 42, 0.45) !important;
        }
        .input-group:focus-within .btn-toggle-password {
            border-color: var(--input-focus) !important;
            background-color: #ffffff !important;
            color: var(--text-primary);
        }
        [data-bs-theme="dark"] .input-group:focus-within .btn-toggle-password {
            background-color: #0f172a !important;
        }

        /* Premium Button */
        .btn-login {
            background: var(--accent-gradient);
            border: none;
            border-radius: 14px !important;
            padding: 0.8rem !important;
            font-weight: 700;
            color: #ffffff !important;
            font-size: 0.95rem;
            box-shadow: 0 6px 16px rgba(13, 110, 253, 0.25);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(13, 110, 253, 0.4);
            filter: brightness(1.05);
        }
        .btn-login:active {
            transform: translateY(0);
        }

        /* Theme Toggle Button */
        .theme-toggle-btn {
            position: absolute;
            top: 24px; right: 24px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.15);
            width: 42px; height: 42px;
            border-radius: 50%;
            color: #ffffff;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition: all 0.3s ease;
            z-index: 100;
            font-size: 1.1rem;
        }
        .theme-toggle-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.08);
            border-color: rgba(255, 255, 255, 0.3);
        }

        /* Alert Styling */
        .alert {
            border-radius: 14px;
            font-size: 0.85rem;
            border: none;
            background-color: rgba(220, 53, 69, 0.1);
            color: #dc3545;
        }

        /* Copyright */
        .copyright {
            color: var(--text-secondary);
            font-size: 0.78rem;
            margin-top: 1.75rem;
        }
    </style>
</head>
<body>

    <!-- Floating Background Orbs -->
    <div class="bg-shape shape-1"></div>
    <div class="bg-shape shape-2"></div>

    <!-- Theme Toggle -->
    <button class="theme-toggle-btn" id="themeToggleBtn" title="Ganti Tema">
        <i class="bi bi-moon-stars-fill" id="themeToggleIcon"></i>
    </button>

    <!-- Login Card -->
    <div class="login-card card p-4 p-md-5">
        <div class="text-center mb-4">
            <!-- Dynamic School Logo -->
            <div class="login-logo-container">
                <div class="login-logo-bg"></div>
                <img src="<?= getLogo('sekolah') ?>" class="login-logo" alt="Logo Sekolah">
            </div>
            
            <h4 class="card-title mb-1">SIMAK</h4>
            <p class="card-subtitle">Sistem Informasi Manajemen Akademik</p>
        </div>

        <?php if (session()->getFlashdata('error')): ?>
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <div class="d-flex align-items-center">
                <i class="bi bi-exclamation-circle-fill me-2 fs-5"></i>
                <div><?= session()->getFlashdata('error') ?></div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        <?php endif; ?>

        <form action="/login" method="post">
            <?= csrf_field() ?>
            
            <!-- Username / Email / NIP Input -->
            <div class="mb-3">
                <label class="form-label">Email / NIP / PEG ID</label>
                <div class="input-group">
                    <span class="input-group-text">
                        <i class="bi bi-person-fill fs-5"></i>
                    </span>
                    <input type="text" name="username"
                        class="form-control"
                        placeholder="Masukkan Email, NIP, atau PEG ID"
                        value="<?= old('username') ?>"
                        autocomplete="username"
                        required>
                </div>
                <div class="form-text small text-muted mt-2" style="font-size: 0.75rem;">
                    <i class="bi bi-info-circle me-1"></i> Admin: gunakan Email | Guru: gunakan NIP / PEG ID
                </div>
            </div>
            
            <!-- Password Input -->
            <div class="mb-4">
                <label class="form-label">Password</label>
                <div class="input-group">
                    <span class="input-group-text">
                        <i class="bi bi-shield-lock-fill fs-5"></i>
                    </span>
                    <input type="password" name="password" id="passwordInput"
                        class="form-control"
                        placeholder="••••••••"
                        required>
                    <button class="btn btn-toggle-password" type="button" id="togglePasswordBtn">
                        <i class="bi bi-eye-fill" id="togglePasswordIcon"></i>
                    </button>
                </div>
            </div>
            
            <!-- Login Button -->
            <button type="submit" class="btn-login btn w-100">
                <i class="bi bi-box-arrow-in-right me-2"></i>Masuk Aplikasi
            </button>
        </form>

        <!-- Footer Copyright -->
        <div class="text-center copyright">
            &copy; <?= date('Y') ?> Sistem Informasi Manajemen Akademik &bull; v<?= get_app_version() ?>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Password Visibility Toggle
        const passwordInput = document.getElementById('passwordInput');
        const togglePasswordBtn = document.getElementById('togglePasswordBtn');
        const togglePasswordIcon = document.getElementById('togglePasswordIcon');

        togglePasswordBtn.addEventListener('click', function() {
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                togglePasswordIcon.className = 'bi bi-eye-slash-fill';
            } else {
                passwordInput.type = 'password';
                togglePasswordIcon.className = 'bi bi-eye-fill';
            }
        });

        // Theme Toggle (Light / Dark Mode)
        const html = document.documentElement;
        const themeBtn = document.getElementById('themeToggleBtn');
        const themeIcon = document.getElementById('themeToggleIcon');

        // Load theme from localStorage
        const savedTheme = localStorage.getItem('darkMode') === 'true' ? 'dark' : 'light';
        html.setAttribute('data-bs-theme', savedTheme);
        themeIcon.className = savedTheme === 'dark' ? 'bi bi-sun-fill' : 'bi bi-moon-stars-fill';

        themeBtn.addEventListener('click', () => {
            const isDark = html.getAttribute('data-bs-theme') === 'dark';
            const newTheme = isDark ? 'light' : 'dark';
            
            html.setAttribute('data-bs-theme', newTheme);
            themeIcon.className = newTheme === 'dark' ? 'bi bi-sun-fill' : 'bi bi-moon-stars-fill';
            localStorage.setItem('darkMode', !isDark);
        });
    </script>

    <!-- PWA -->
    <script src="/js/pwa.js"></script>
</body>
</html>