<?php
session_start();

// অ্যাডমিন ইতিমধ্যে লগইন করা থাকলে (সেশনে admin_id থাকলে) সরাসরি ড্যাশবোর্ডে রিডাইরেক্ট করা
if (isset($_SESSION['admin_id'])) {
    header("Location: dashboard.php");
    exit();
}

// কোনো ভুল পাসওয়ার্ড বা এরর থাকলে তা সেশন থেকে নিয়ে দেখানোর জন্য
$error = '';
if (isset($_SESSION['login_error'])) {
    $error = $_SESSION['login_error'];
    unset($_SESSION['login_error']); 
}
?>
<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Login | ShopVista</title>
    <!-- Font Awesome (আইকনের জন্য) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Hind Siliguri এবং Inter ফন্ট -->
    <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary-color: #4e73df;
            --primary-hover: #2e59d9;
            --bg-color: #f8f9fc;
            --text-color: #333333;
            --text-muted: #858796;
            --border-color: #d1d3e2;
            --card-bg: #ffffff;
            --error-color: #e74a3b;
        }

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

        body {
            font-family: 'Inter', 'Hind Siliguri', sans-serif;
            background-color: var(--bg-color);
            background-image: radial-gradient(circle at 10% 20%, rgba(78, 115, 223, 0.05) 0%, transparent 90%);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            color: var(--text-color);
            padding: 20px;
        }

        .login-container {
            width: 100%;
            max-width: 420px;
            perspective: 1000px;
        }

        .login-box {
            background: var(--card-bg);
            padding: 40px 30px;
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(78, 115, 223, 0.1);
            border: 1px solid rgba(78, 115, 223, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .login-box:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(78, 115, 223, 0.15);
        }

        .brand-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .brand-logo {
            background: var(--primary-color);
            color: white;
            width: 60px;
            height: 60px;
            border-radius: 15px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            margin-bottom: 15px;
            box-shadow: 0 8px 16px rgba(78, 115, 223, 0.3);
        }

        .brand-header h2 {
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--text-color);
            margin-bottom: 5px;
        }

        .brand-header p {
            font-size: 0.9rem;
            color: var(--text-muted);
        }

        .error-message {
            background-color: rgba(231, 74, 59, 0.1);
            color: var(--error-color);
            padding: 12px 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 10px;
            border-left: 4px solid var(--error-color);
            animation: shake 0.5s ease;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-6px); }
            75% { transform: translateX(6px); }
        }

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

        .form-group i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            font-size: 1rem;
            transition: color 0.3s;
        }

        .form-group input {
            width: 100%;
            padding: 14px 15px 14px 45px;
            border: 1.5px solid var(--border-color);
            border-radius: 12px;
            font-size: 0.95rem;
            color: var(--text-color);
            outline: none;
            transition: all 0.3s;
            background: #fafafa;
        }

        .form-group input:focus {
            border-color: var(--primary-color);
            background: #fff;
            box-shadow: 0 0 0 4px rgba(78, 115, 223, 0.15);
        }

        .form-group input:focus + i {
            color: var(--primary-color);
        }

        .btn-login {
            width: 100%;
            padding: 14px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: 0 8px 20px rgba(78, 115, 223, 0.2);
        }

        .btn-login:hover {
            background: var(--primary-hover);
            transform: translateY(-1px);
            box-shadow: 0 10px 25px rgba(78, 115, 223, 0.3);
        }

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

        .footer-text {
            text-align: center;
            margin-top: 25px;
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        /* মোবাইল স্ক্রিনের জন্য অপ্টিমাইজেশন */
        @media (max-width: 480px) {
            .login-box {
                padding: 30px 20px;
                border-radius: 15px;
            }
            .brand-logo {
                width: 50px;
                height: 50px;
                font-size: 1.5rem;
            }
            .brand-header h2 {
                font-size: 1.4rem;
            }
        }
    </style>
</head>
<body>

<div class="login-container">
    <div class="login-box">
        <div class="brand-header">
            <div class="brand-logo">
                <i class="fa-solid fa-user-shield"></i>
            </div>
            <h2>অ্যাডমিন লগইন</h2>
            <p>আপনার অ্যাকাউন্ট অ্যাক্সেস করতে লগইন করুন</p>
        </div>

        <!-- ভুল ক্রেডেনশিয়াল দিলে এই এরর মেসেজটি দেখাবে -->
        <?php if (!empty($error)): ?>
            <div class="error-message">
                <i class="fa-solid fa-circle-exclamation"></i>
                <span><?php echo htmlspecialchars($error); ?></span>
            </div>
        <?php endif; ?>

        <form action="auth.php" method="POST">
            <div class="form-group">
                <input type="text" name="username" placeholder="ইউজারনেম" required autocomplete="username">
                <i class="fa-solid fa-user"></i>
            </div>
            
            <div class="form-group">
                <input type="password" name="password" placeholder="পাসওয়ার্ড" required autocomplete="current-password">
                <i class="fa-solid fa-lock"></i>
            </div>
            
            <button type="submit" name="login" class="btn-login">
                লগইন করুন <i class="fa-solid fa-right-to-bracket"></i>
            </button>
        </form>

        <div class="footer-text">
            &copy; <?php echo date('Y'); ?> Naithe Soft. সর্বস্বত্ব সংরক্ষিত।
        </div>
    </div>
</div>

</body>
</html>