<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title><?= htmlspecialchars($event->title) ?> - Ghana Anaesthesiologists Society</title>
    <link href="<?= $baseUrl ?>/vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
    <link href="<?= $baseUrl ?>/css/sb-admin-2.min.css" rel="stylesheet">
    <link href="<?= $baseUrl ?>/css/glass.css" rel="stylesheet">
    <style>
        body { background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); font-family: 'Nunito', sans-serif; min-height: 100vh; }
        .navbar-glass { background: rgba(33, 65, 122, 0.95) !important; backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.1); }
        .page-header { padding: 120px 0 60px; }
        .glass-card { background: rgba(255,255,255,0.06); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 2rem; }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark navbar-glass fixed-top">
    <div class="container">
        <a class="navbar-brand font-weight-bold" href="<?= $baseUrl ?>"><i class="fas fa-stethoscope mr-2" style="color: #4e73df;"></i>GAS</a>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto align-items-lg-center">
                <li class="nav-item"><a class="nav-link" href="<?= $baseUrl ?>">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="<?= $baseUrl ?>/announcements">Announcements</a></li>
                <li class="nav-item"><a class="nav-link" href="<?= $baseUrl ?>/events">Events</a></li>
                <li class="nav-item ml-lg-2"><a class="glass-btn px-4 py-2" href="<?= $baseUrl ?>/login"><i class="fas fa-sign-in-alt mr-1"></i>Login</a></li>
            </ul>
        </div>
    </div>
</nav>
<section class="page-header">
    <div class="container">
        <a href="<?= $baseUrl ?>/events" class="glass-btn btn-sm mb-3" style="display:inline-block;padding:0.5rem 1.2rem;border-radius:50px;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.08);color:#fff;text-decoration:none;"><i class="fas fa-arrow-left mr-1"></i>Back to Events</a>
        <div class="glass-card">
            <?php if ($event->cover_image): ?>
            <div class="mb-4" style="border-radius:12px;overflow:hidden;max-height:300px;">
                <img src="<?= $baseUrl ?>/<?= $event->cover_image ?>" class="w-100" style="object-fit:cover;" alt="<?= htmlspecialchars($event->title) ?>">
            </div>
            <?php endif; ?>
            <h1 class="text-white font-weight-bold"><?= htmlspecialchars($event->title) ?></h1>
            <div class="d-flex flex-wrap gap-3 mb-3">
                <span class="glass-badge"><?= htmlspecialchars($event->event_type) ?></span>
                <span class="glass-badge"><?= htmlspecialchars($event->status) ?></span>
            </div>
            <div class="row mb-4">
                <div class="col-md-6">
                    <p style="color:rgba(255,255,255,0.7);"><i class="fas fa-calendar mr-2" style="color:#4e73df;"></i><?= date('F d, Y', strtotime($event->start_datetime)) ?> at <?= date('h:i A', strtotime($event->start_datetime)) ?></p>
                </div>
                <div class="col-md-6">
                    <p style="color:rgba(255,255,255,0.7);"><i class="fas fa-map-marker-alt mr-2" style="color:#4e73df;"></i><?= htmlspecialchars($event->venue ?: 'Online') ?></p>
                </div>
            </div>
            <hr style="border-color:rgba(255,255,255,0.1);">
            <div style="color:rgba(255,255,255,0.8);"><?= nl2br(htmlspecialchars($event->description ?? '')) ?></div>
            <div class="mt-4 text-center">
                <a href="<?= $baseUrl ?>/login?redirect=events/<?= $event->id ?>" class="glass-btn glass-btn-primary" style="display:inline-block;padding:0.8rem 2rem;border-radius:50px;border:1px solid transparent;background:linear-gradient(135deg,#4e73df 0%,#224abe 100%);color:#fff;text-decoration:none;font-weight:600;">
                    <i class="fas fa-sign-in-alt mr-2"></i>Login to Register
                </a>
            </div>
        </div>
    </div>
</section>
<script src="<?= $baseUrl ?>/vendor/jquery/jquery.min.js"></script>
<script src="<?= $baseUrl ?>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
