<?php
session_start();
include($_SERVER['DOCUMENT_ROOT']."/SEAT/config/db.php");

if(!isset($_SESSION['id']) || $_SESSION['role']!="admin"){
    die("No access");
}

$BASE="/SEAT";

/* ================= GET ORGANIZERS ================= */
$orgs = $conn->query("SELECT id, club_name FROM organizers");

/* ================= GET EVENTS ================= */
$events = $conn->query("
SELECT 
    e.*, 
    o.club_name
FROM events e
LEFT JOIN organizers o ON e.organizer_id = o.id
ORDER BY e.event_date DESC
");
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin - Events</title>

<link rel="stylesheet" href="<?= $BASE ?>/assets/css/admin/viewEvent.css">
</head>

<body>

<?php 
include("../../../templates/header.php");
include("../../../templates/sidebar.php"); 
?>

<div class="content">

<!-- ================= PAGE TITLE ================= -->
<div class="pageHeader">
    <h1 class="pageTitle">Organizer Events</h1>
</div>

<!-- ================= FILTER ================= -->
<div class="filters">

    <div class="filter-group">
        <label>Search</label>
        <input type="text" id="searchInput" placeholder="Search event, club, venue..." onkeyup="filterEvent()">
    </div>

    <div class="filter-group">
        <label>Status</label>
        <select id="statusFilter" onchange="filterEvent()">
            <option value="">All Status</option>
            <option value="upcoming">Upcoming</option>
            <option value="completed">Completed</option>
            <option value="cancelled">Cancelled</option>
        </select>
    </div>

    <div class="filter-group">
        <label>Organizer</label>
        <select id="organizerFilter" onchange="filterEvent()">
            <option value="">All Organizer</option>
            <?php while($o=$orgs->fetch_assoc()){ ?>
                <option value="<?= $o['id'] ?>">
                    <?= htmlspecialchars($o['club_name']) ?>
                </option>
            <?php } ?>
        </select>
    </div>

    <div class="filter-group">
        <label>&nbsp;</label>
        <button type="button" class="btn resetBtn" onclick="resetFilter()">Reset</button>
    </div>

</div>

<!-- ================= EVENT GRID ================= -->
<div class="grid" id="eventGrid">

<?php while($e = $events->fetch_assoc()){ 

    $mode = strtolower(trim($e['mode']));
    $venue = trim($e['venue']);

    // FINAL VENUE DISPLAY RULE
    if($mode === "online" || $venue === ""){
        $venueDisplay = "-";
    } else {
        $venueDisplay = $venue;
    }
?>

    <div class="card eventCard"

        data-title="<?= strtolower($e['title']) ?>"
        data-club="<?= strtolower($e['club_name']) ?>"
        data-venue="<?= strtolower($venueDisplay) ?>"
        data-status="<?= strtolower($e['status']) ?>"
        data-organizer="<?= $e['organizer_id'] ?>"
        data-mode="<?= $mode ?>"
    >

        <span class="tag <?= strtolower($e['status']) ?>">
            <?= strtoupper($e['status']) ?>
        </span>

        <h3><?= htmlspecialchars($e['title']) ?></h3>

        <div class="eventInfo">

            <div class="infoRow">
                <span>🏢</span>
                <span><?= htmlspecialchars($e['club_name']) ?></span>
            </div>

            <div class="infoRow">
                <span>📅</span>
                <span><?= date("D, d M Y", strtotime($e['event_date'])) ?></span>
            </div>

            <div class="infoRow">
                <span>⏰</span>
                <span>
                    <?= date("H:i",strtotime($e['start_time'])) ?>
                    -
                    <?= date("H:i",strtotime($e['end_time'])) ?>
                </span>
            </div>

            <div class="infoRow">
                <span>🌐</span>
                <span><?= ucfirst($mode) ?></span>
            </div>

            <div class="infoRow">
                <span>📍</span>
                <span><?= htmlspecialchars($venueDisplay) ?></span>
            </div>

        </div>

    </div>

<?php } ?>

</div>

<p id="noResult" class="noResult" style="display:none;">
    No event found
</p>

</div>

<!-- ================= JAVASCRIPT FILTER ================= -->
<script>

function filterEvent(){

    let search = document.getElementById("searchInput").value.toLowerCase();
    let status = document.getElementById("statusFilter").value.toLowerCase();
    let organizer = document.getElementById("organizerFilter").value;

    let cards = document.querySelectorAll(".eventCard");
    let found = 0;

    cards.forEach(card => {

        let title = card.getAttribute("data-title");
        let club = card.getAttribute("data-club");
        let venue = card.getAttribute("data-venue");
        let cardStatus = card.getAttribute("data-status");
        let cardOrg = card.getAttribute("data-organizer");

        let matchSearch =
            title.includes(search) ||
            club.includes(search) ||
            venue.includes(search);

        let matchStatus =
            status === "" || cardStatus === status;

        let matchOrganizer =
            organizer === "" || cardOrg === organizer;

        if(matchSearch && matchStatus && matchOrganizer){
            card.style.display = "block";
            found++;
        } else {
            card.style.display = "none";
        }

    });

    document.getElementById("noResult").style.display =
        found === 0 ? "block" : "none";
}

/* ================= RESET FILTER ================= */
function resetFilter(){

    document.getElementById("searchInput").value = "";
    document.getElementById("statusFilter").value = "";
    document.getElementById("organizerFilter").value = "";

    filterEvent();
}

</script>

</body>
</html>