<?php
require_once __DIR__ . '/../../config/database.php';
require_once __DIR__ . '/../../app/Utils.php';
require_once __DIR__ . '/../../app/Models/Admin.php';

// Check if already logged in BEFORE including header
if (isset($_SESSION['admin_id'])) {
    Utils::redirect('/routex/admin/dashboard');
}

$error = '';
$admin_model = new Admin($pdo);

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = $_POST['username'] ?? '';
    $password = $_POST['password'] ?? '';

    if (empty($username) || empty($password)) {
        $error = 'Please enter both username and password.';
    } else {
        $admin = $admin_model->login($username, $password);
        if ($admin) {
            $_SESSION['admin_id'] = $admin['id'];
            $_SESSION['admin_username'] = $admin['username'];
            Utils::redirect('/routex/admin/dashboard');
        } else {
            $error = 'Invalid username or password.';
        }
    }
}

$page_title = 'Admin Login - RoutexShipping';
require_once __DIR__ . '/../../includes/trackheader.php';
?>

<section class="min-h-screen bg-gray-100 flex items-center justify-center py-12 px-4">
    <div class="w-full max-w-md">
        <!-- Logo -->
        <div class="text-center mb-8">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-100 mb-4">
                <i class="fas fa-box text-blue-600 text-2xl"></i>
            </div>
            <h1 class="text-3xl font-bold text-gray-900">RoutexShipping</h1>
            <p class="text-gray-500 mt-2">Admin Panel</p>
        </div>

        <!-- Login Card -->
        <div class="bg-white rounded-sm shadow-lg p-8 border-t-4 border-blue-600">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">Sign In</h2>

            <?php if ($error): ?>
            <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded mb-6">
                <p class="text-red-700"><?php echo htmlspecialchars($error); ?></p>
            </div>
            <?php endif; ?>

            <form method="POST" class="space-y-6">
                <div>
                    <label class="block text-gray-700 font-medium mb-2">Username</label>
                    <input 
                        type="text" 
                        name="username" 
                        class="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
                        placeholder="Enter your username"
                        required
                    >
                </div>

                <div>
                    <label class="block text-gray-700 font-medium mb-2">Password</label>
                    <div class="relative">
                        <input 
                            type="password" 
                            name="password" 
                            id="password"
                            class="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition pr-10"
                            placeholder="Enter your password"
                            required
                        >
                        <button type="button" onclick="togglePassword('password', 'toggleIcon')" class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-500 hover:text-gray-700 focus:outline-none">
                            <i id="toggleIcon" class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>

                <button type="submit" class="w-full bg-blue-600 text-white font-bold py-3 rounded hover:bg-blue-700 transition duration-300">
                    <i class="fas fa-sign-in-alt mr-2"></i>Sign In
                </button>
            </form>

            <!-- <div class="mt-6 p-4 bg-gray-50 rounded border border-gray-200">
                <p class="text-sm text-gray-600">
                    <strong>Demo Credentials:</strong><br>
                    Username: <code class="text-red-500 font-bold">admin</code><br>
                    Password: <code class="text-red-500 font-bold">admin123</code>
                </p>
            </div>
        </div> -->

        <!-- Footer -->
        <div class="text-center mt-8">
            <a href="/routex/" class="text-gray-600 hover:text-blue-600 transition">
                <i class="fas fa-arrow-left mr-2"></i>Back to Home
            </a>
        </div>
    </div>
</section>

<script>
function togglePassword(inputId, iconId) {
    const input = document.getElementById(inputId);
    const icon = document.getElementById(iconId);
    if (input.type === "password") {
        input.type = "text";
        icon.classList.remove("fa-eye");
        icon.classList.add("fa-eye-slash");
    } else {
        input.type = "password";
        icon.classList.remove("fa-eye-slash");
        icon.classList.add("fa-eye");
    }
}
</script>

<?php require_once __DIR__ . '/../../includes/adminfooter.php'; ?>
