<?php
require_once __DIR__ . '/config.php';

// Fetch all parks
try {
$stmt = $pdo->query("
    SELECT 
        p.id,
        p.name,
        p.slug,
        p.location,
        p.image_path,
        poh.opens_at,
        poh.closes_at,
        poh.status AS opening_status
    FROM parks p
    LEFT JOIN park_opening_hours poh
        ON poh.park_id = p.id
        AND poh.opening_date = CURDATE()
    ORDER BY p.name ASC
");
    $parks = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $parks = [];
}

$extra_head = '<link rel="stylesheet" href="/styles/park.css">';
require_once __DIR__ . '/includes/header.php';
?>

<main class="news-page">
    <section class="hero-news">
        <div class="hero-text">
            <h1 class="title-alt">Parks</h1>
        </div>
    </section>

    <section class="container py-5">

        <div class="row g-4">

            <!-- Static Universal UK card -->
            <div class="col-md-3 col-sm-6">
                <a href="/park/universal-uk" class="text-decoration-none text-dark">
                    <div class="card h-100 shadow-sm">
                        <img src="/assets/universal-uk-logo.jpg"
                             class="card-img-top-logo park-img"
                             alt="Universal UK">
                        <div class="card-body text-center">
                            <h5 class="card-title mb-1" style="color:#000 !important;">
                                Universal UK
                            </h5>
                            <span class="badge mt-2" style="background:#262541; color:#fff!important; border-radius:5px; font-weight:600;">
                                In Development
                            </span>
                        </div>
                    </div>
                </a>
            </div>

            <?php if (!empty($parks)): ?>
                <?php foreach ($parks as $park): ?>
                    <div class="col-md-3 col-sm-6">
                        <a href="/park/<?= urlencode($park['slug']) ?>" class="text-decoration-none text-dark">
                            <div class="card h-100 shadow-sm">
                                <img src="/<?= htmlspecialchars($park['image_path'] ?? '/assets/default.jpg') ?>"
                                     class="card-img-top-logo park-img"
                                     alt="<?= htmlspecialchars($park['name']) ?>">
                                <div class="card-body text-center">
                                    <h5 class="card-title mb-1" style="color:#000 !important;">
                                        <?= htmlspecialchars($park['name']) ?>
                                    </h5>

<?php if (!empty($park['opening_status'])): ?>
    <?php
        if ($park['opening_status'] === 'closed') {
            $parkOpeningText = 'Closed today';
            $parkOpeningClass = 'closed';
        } else {
            $parkOpeningText =
                date('g:ia', strtotime($park['opens_at'])) .
                ' - ' .
                date('g:ia', strtotime($park['closes_at']));
            $parkOpeningClass = 'open';
        }
    ?>

    <span class="park-card-hours <?= htmlspecialchars($parkOpeningClass) ?>">
        <span class="material-icons">schedule</span>
        <?= htmlspecialchars($parkOpeningText) ?>
    </span>
<?php endif; ?>
                                </div>
                            </div>
                        </a>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>

        </div>

        <?php if (empty($parks)): ?>
            <p class="mt-4">No parks found.</p>
        <?php endif; ?>

    </section>
</main>

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