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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Login — GP Crackers</title>
    <meta name="description" content="GP Crackers Admin Portal — Secure access for administrators.">
    <link rel="icon" type="image/png" href="../assets/images/favicon_gp.png">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <style>
        :root {
            --gold:       #FFBA00;
            --gold-warm:  #FF8F00;
            --gold-light: #FFD54F;
            --navy:       #0C2D5E;
            --navy-dark:  #061A3A;
            --navy-mid:   #0a2040;
            --white:      #ffffff;
        }

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

        body {
            font-family: 'Poppins', sans-serif;
            background: var(--navy-dark);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }

        /* ─── Animated Background ─────────────────────── */
        .bg-particles {
            position: fixed;
            inset: 0;
            z-index: 0;
            overflow: hidden;
        }

        .bg-particles::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 80% 60% at 20% 30%, rgba(255,186,0,0.08) 0%, transparent 60%),
                radial-gradient(ellipse 60% 80% at 80% 70%, rgba(12,45,94,0.6) 0%, transparent 60%);
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            opacity: 0.12;
            animation: float linear infinite;
        }

        @keyframes float {
            0%   { transform: translateY(100vh) rotate(0deg); opacity: 0; }
            10%  { opacity: 0.12; }
            90%  { opacity: 0.12; }
            100% { transform: translateY(-100px) rotate(720deg); opacity: 0; }
        }

        /* ─── Login Card ──────────────────────────────── */
        .login-wrapper {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 460px;
            padding: 20px;
        }

        .login-card {
            background: rgba(255,255,255,0.04);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 24px;
            padding: 50px 44px;
            box-shadow:
                0 32px 64px rgba(0,0,0,0.4),
                inset 0 1px 0 rgba(255,255,255,0.08);
            animation: slideUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
        }

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

        /* Logo / Brand */
        .admin-brand {
            text-align: center;
            margin-bottom: 36px;
        }

        .brand-icon {
            width: 72px;
            height: 72px;
            background: linear-gradient(135deg, var(--gold), var(--gold-warm));
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: var(--navy-dark);
            margin-bottom: 16px;
            box-shadow: 0 8px 24px rgba(255,186,0,0.4);
            animation: pulse-glow 3s ease-in-out infinite;
        }

        @keyframes pulse-glow {
            0%,100% { box-shadow: 0 8px 24px rgba(255,186,0,0.4); }
            50%      { box-shadow: 0 8px 40px rgba(255,186,0,0.7); }
        }

        .brand-title {
            font-size: 1.6rem;
            font-weight: 800;
            color: #fff;
            letter-spacing: -0.5px;
        }

        .brand-subtitle {
            font-size: 0.82rem;
            color: rgba(255,255,255,0.45);
            margin-top: 4px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }

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

        .form-label {
            display: block;
            font-size: 0.82rem;
            font-weight: 600;
            color: rgba(255,255,255,0.65);
            margin-bottom: 8px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .input-wrap {
            position: relative;
            display: flex;
            align-items: center;
        }

        .input-icon {
            position: absolute;
            left: 16px;
            color: rgba(255,255,255,0.3);
            font-size: 1rem;
            transition: color 0.3s;
            pointer-events: none;
        }

        .form-input {
            width: 100%;
            padding: 14px 16px 14px 46px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px;
            color: #fff;
            font-family: 'Poppins', sans-serif;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            outline: none;
        }

        .form-input::placeholder { color: rgba(255,255,255,0.25); }

        .form-input:focus {
            border-color: var(--gold);
            background: rgba(255,255,255,0.09);
            box-shadow: 0 0 0 4px rgba(255,186,0,0.12);
        }

        .form-input:focus ~ .input-icon,
        .input-wrap:focus-within .input-icon { color: var(--gold); }

        .pw-toggle {
            position: absolute;
            right: 16px;
            color: rgba(255,255,255,0.3);
            cursor: pointer;
            font-size: 1rem;
            transition: color 0.3s;
        }
        .pw-toggle:hover { color: var(--gold); }

        .error-msg {
            font-size: 0.78rem;
            color: #ff6b6b;
            margin-top: 6px;
            display: none;
        }

        /* Submit Button */
        .btn-login {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, var(--gold), var(--gold-warm));
            border: none;
            border-radius: 12px;
            color: var(--navy-dark);
            font-family: 'Poppins', sans-serif;
            font-size: 0.95rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 8px;
            position: relative;
            overflow: hidden;
        }

        .btn-login::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(255,186,0,0.45);
        }
        .btn-login:hover::after { opacity: 1; }
        .btn-login:active { transform: translateY(0); }

        .btn-login:disabled {
            opacity: 0.7;
            cursor: not-allowed;
            transform: none;
        }

        /* Alert / Toast */  
        .alert-box {
            padding: 12px 16px;
            border-radius: 10px;
            font-size: 0.88rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
            animation: fadeIn 0.3s ease;
        }

        .alert-box.error {
            background: rgba(220,53,69,0.15);
            border: 1px solid rgba(220,53,69,0.3);
            color: #ff8b8b;
        }

        .alert-box.success {
            background: rgba(25,135,84,0.15);
            border: 1px solid rgba(25,135,84,0.3);
            color: #75d49d;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-8px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* Back link */
        .back-link {
            text-align: center;
            margin-top: 24px;
        }

        .back-link a {
            color: rgba(255,255,255,0.4);
            font-size: 0.83rem;
            text-decoration: none;
            transition: color 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .back-link a:hover { color: var(--gold); }

        /* Credentials hint */
        .cred-hint {
            background: rgba(255,186,0,0.08);
            border: 1px solid rgba(255,186,0,0.2);
            border-radius: 10px;
            padding: 12px 16px;
            margin-bottom: 24px;
            font-size: 0.8rem;
            color: rgba(255,186,0,0.8);
        }

        .cred-hint strong { color: var(--gold); }

        /* Responsive */
        @media (max-width: 480px) {
            .login-card { padding: 36px 24px; }
            .brand-title { font-size: 1.4rem; }
        }
    </style>
</head>

<body>
    <!-- Particle Background -->
    <div class="bg-particles" id="bgParticles"></div>

    <!-- Login Card -->
    <div class="login-wrapper">
        <div class="login-card">

            <!-- Brand -->
            <div class="admin-brand">
                <div class="brand-icon">
                    <i class="bi bi-shield-lock-fill"></i>
                </div>
                <div class="brand-title">GP Crackers</div>
                <div class="brand-subtitle">Admin Portal</div>
            </div>

            <!-- Alert Box -->
            <div id="alert-box" style="display:none;" class="alert-box"></div>

            <!-- Hint -->
            <div class="cred-hint">
                <i class="bi bi-info-circle me-2"></i>
                <strong>Default Credentials:</strong> admin@gpcrackers.com / Admin@123
            </div>

            <!-- Login Form -->
            <form id="admin-login-form" novalidate>
                <div class="form-group">
                    <label class="form-label" for="admin-email">Email Address</label>
                    <div class="input-wrap">
                        <i class="bi bi-envelope input-icon"></i>
                        <input type="email" id="admin-email" name="email" class="form-input"
                            placeholder="admin@gpcrackers.com" autocomplete="email" required>
                    </div>
                    <div class="error-msg" id="email-error">Please enter a valid email address.</div>
                </div>

                <div class="form-group">
                    <label class="form-label" for="admin-password">Password</label>
                    <div class="input-wrap">
                        <i class="bi bi-lock input-icon"></i>
                        <input type="password" id="admin-password" name="password" class="form-input"
                            placeholder="••••••••" autocomplete="current-password" required>
                        <i class="bi bi-eye-slash pw-toggle" id="pw-toggle"></i>
                    </div>
                    <div class="error-msg" id="password-error">Password cannot be empty.</div>
                </div>

                <button type="submit" class="btn-login" id="login-btn">
                    <i class="bi bi-box-arrow-in-right me-2"></i>Access Dashboard
                </button>
            </form>

            <div class="back-link">
                <a href="../index.html">
                    <i class="bi bi-arrow-left"></i> Back to Store
                </a>
            </div>
        </div>
    </div>

    <script>
        // ─── Particles ───────────────────────────────────────
        (function () {
            const container = document.getElementById('bgParticles');
            const colors = ['#FFBA00', '#FF8F00', '#FFD54F', '#0C2D5E'];
            for (let i = 0; i < 20; i++) {
                const el = document.createElement('div');
                el.className = 'particle';
                const size = Math.random() * 60 + 20;
                el.style.cssText = `
                    width: ${size}px; height: ${size}px;
                    left: ${Math.random() * 100}%;
                    background: ${colors[Math.floor(Math.random() * colors.length)]};
                    animation-duration: ${Math.random() * 15 + 10}s;
                    animation-delay: ${Math.random() * -20}s;
                `;
                container.appendChild(el);
            }
        })();

        // ─── Password Toggle ─────────────────────────────────
        document.getElementById('pw-toggle').addEventListener('click', function () {
            const input = document.getElementById('admin-password');
            const isPassword = input.type === 'password';
            input.type = isPassword ? 'text' : 'password';
            this.classList.toggle('bi-eye-slash', !isPassword);
            this.classList.toggle('bi-eye', isPassword);
        });

        // ─── Alert Helper ────────────────────────────────────
        function showAlert(message, type) {
            const box = document.getElementById('alert-box');
            const icon = type === 'success' ? 'bi-check-circle-fill' : 'bi-exclamation-triangle-fill';
            box.className = `alert-box ${type}`;
            box.innerHTML = `<i class="bi ${icon}"></i> ${message}`;
            box.style.display = 'flex';
        }

        // ─── Form Submit ─────────────────────────────────────
        document.getElementById('admin-login-form').addEventListener('submit', function (e) {
            e.preventDefault();

            const email    = document.getElementById('admin-email');
            const password = document.getElementById('admin-password');
            let valid = true;

            // Simple validation
            document.querySelectorAll('.error-msg').forEach(el => el.style.display = 'none');
            document.querySelectorAll('.form-input').forEach(el => el.style.borderColor = '');

            if (!email.value || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)) {
                document.getElementById('email-error').style.display = 'block';
                email.style.borderColor = '#ff6b6b';
                valid = false;
            }
            if (!password.value) {
                document.getElementById('password-error').style.display = 'block';
                password.style.borderColor = '#ff6b6b';
                valid = false;
            }
            if (!valid) return;

            const btn = document.getElementById('login-btn');
            btn.disabled = true;
            btn.innerHTML = '<span style="display:inline-block;width:16px;height:16px;border:2px solid #061A3A;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:8px;"></span>Authenticating...';

            if (!document.getElementById('spin-style')) {
                const s = document.createElement('style');
                s.id = 'spin-style';
                s.innerHTML = '@keyframes spin{to{transform:rotate(360deg)}}';
                document.head.appendChild(s);
            }

            $.ajax({
                url: 'auth.php',
                type: 'POST',
                data: { email: email.value, password: password.value },
                dataType: 'json',
                success: function (res) {
                    btn.disabled = false;
                    btn.innerHTML = '<i class="bi bi-box-arrow-in-right me-2"></i>Access Dashboard';

                    if (res.status === 'success') {
                        showAlert(res.message, 'success');
                        setTimeout(() => { window.location.href = 'index.php'; }, 1200);
                    } else {
                        showAlert(res.message || 'Invalid credentials. Please try again.', 'error');
                    }
                },
                error: function () {
                    btn.disabled = false;
                    btn.innerHTML = '<i class="bi bi-box-arrow-in-right me-2"></i>Access Dashboard';
                    showAlert('Server error. Please try again.', 'error');
                }
            });
        });
    </script>
</body>
</html>
