<?php
require_once __DIR__ . '/app/helpers/auth.php';

session_start();

if (empty($_SESSION['user_id'])) {
    header('Location: login.php');
    exit;
}

$userName = $_SESSION['user_name'] ?? 'User';

if ($_SERVER['REQUEST_METHOD'] === 'POST' && ($_POST['action'] ?? '') === 'logout') {
    logoutUser();
    header('Location: login.php?logged_out=1');
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Logout</title>
    <link rel="preload" as="image" href="assets/img/logo_landing-hero-fleet.png">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        :root {
            --brand-ink: #102033;
            --brand-muted: #667085;
            --brand-line: #dce3ed;
            --brand-surface: #f5f8fb;
            --brand-navy: #071629;
            --brand-blue: #ff4a0a;
            --brand-green: #11875d;
        }

        body {
            min-height: 100vh;
            margin: 0;
            background:
                linear-gradient(90deg, rgba(7, 22, 41, 0.97) 0%, rgba(7, 22, 41, 0.84) 46%, rgba(7, 22, 41, 0.32) 100%),
                url("assets/img/logo_landing-hero-fleet.png");
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }

        .logout-card {
            width: 100%;
            max-width: 520px;
            border: 1px solid rgba(255, 255, 255, 0.68);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 24px 70px rgba(7, 22, 41, 0.34);
        }

        .logout-hero {
            padding: 28px 28px 8px;
            background: linear-gradient(180deg, rgba(255,255,255,0.98), #ffffff 100%);
        }

        .logout-icon {
            width: 68px;
            height: 68px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #fff0e8;
            color: var(--brand-blue);
            font-size: 30px;
            margin-bottom: 18px;
        }

        .logout-body {
            padding: 0 28px 28px;
            background: #ffffff;
        }

        .logout-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            border-radius: 8px;
            background: #fff0e8;
            color: var(--brand-blue);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .logout-actions .btn {
            min-height: 48px;
            border-radius: 8px;
            font-weight: 700;
        }

        .logout-note {
            background: var(--brand-surface);
            border: 1px solid var(--brand-line);
            border-radius: 8px;
            padding: 16px;
            color: var(--brand-muted);
            font-size: 14px;
        }

        .btn-outline-primary {
            color: var(--brand-blue);
            border-color: var(--brand-blue);
        }

        .btn-outline-primary:hover {
            color: #ffffff;
            background: var(--brand-blue);
            border-color: var(--brand-blue);
        }
    </style>
</head>
<body>
    <div class="card logout-card">
        <div class="logout-hero">
            <span class="logout-chip"><i class="bi bi-shield-lock"></i> Secure Exit</span>
        </div>

        <div class="logout-body">
            <div class="logout-icon">
                <i class="bi bi-box-arrow-right"></i>
            </div>

            <h1 class="h3 fw-semibold mb-2">Sign out of FleetOps?</h1>
            <p class="text-muted mb-4">You are signed in as <strong><?= htmlspecialchars((string)$userName, ENT_QUOTES, 'UTF-8') ?></strong>. You can sign out now or return to your workspace.</p>

            <div class="logout-note mb-4">
                Signing out will end this browser session and require you to log in again before accessing vehicles, drivers, compliance, or reports.
            </div>

            <div class="d-grid gap-3 logout-actions">
                <form method="post" class="m-0">
                    <input type="hidden" name="action" value="logout">
                    <button type="submit" class="btn btn-danger w-100">
                        <i class="bi bi-box-arrow-right me-2"></i>Sign Out
                    </button>
                </form>

                <a href="dashboard.php" class="btn btn-outline-primary w-100">
                    <i class="bi bi-arrow-left me-2"></i>Back to Dashboard
                </a>
            </div>
        </div>
    </div>
</body>
</html>
