<?php 
    include_once "include/default-values.php";

    $events = [];
    // Using try catch to prevent the site from not responding when there's a error
    try {
        // Gets all the events from this date ordered by EDate to get the closest events to this date
        $sql = "SELECT * FROM events WHERE EDate >= NOW()";
        if(isset($_GET['cat']) && $_GET['cat'] !== "Alle") $sql .= " AND ECategory = '{$_GET['cat']}'"; // if the user has clicked on a category it only shows that category
        $sql .= " ORDER BY EDate ASC"; // Orders the result by date
        if($_GET['show'] !== "all") $sql .= " LIMIT 5"; // Add a limit of 5 to the query if the user has not clicked show more
        $res = $db_con->query($sql); // Executes the query
        // Runs while res is able to fetch the next row from the result
        while($row = $res->fetch_assoc()){
            // Puts the row in the back of the events array
            $events[] = $row;
        }
        
    } catch (\Throwable $th) {
        echo $th;
    }
    

?>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="<?=$siteroot?>css/bootstrap.min.css">
    <link rel="stylesheet" href="<?=$siteroot?>css/style.css" type="text/css">
    <meta name="description" content="Starup UIF arrangements kalender. Opret nye arrangementer - tilmeld dig arrangementer. Et godt sted at starte et aktivt og interessant fritidsliv.">
    <title>Starup UIF arrangementer</title>
</head>

<body>

    <?php include_once "include/navbar.php"?>

    <header>
        <img src="<?=$siteroot?>img/header-img-lg.jpg" class="img-fluid">
    </header>

    <main class="container mb-5">
        <h1 class="mt-5 mb-5">Kommende arrangementer i Starup UIF</h1>
        <section>
            <!-- Categori dropdown -->
            <div class="dropdown">
                <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown">Vælg kategori:</button>
                <div class="dropdown-menu" aria-labelledby="categoryChooser">
                    <a class="dropdown-item" href="index.php?cat=Alle">Alle</a>
                    <a class="dropdown-item" href="index.php?cat=Musik">Musik</a>
                    <a class="dropdown-item" href="index.php?cat=Foredrag">Foredrag</a>
                    <a class="dropdown-item" href="index.php?cat=Sport">Sport/idræt</a>
                    <a class="dropdown-item" href="index.php?cat=Natur">Natur</a>
                    <a class="dropdown-item" href="index.php?cat=Mad">Madlavning</a>
                    <a class="dropdown-item" href="index.php?cat=Andet">Andet</a>
                </div>
            </div>

            <article class="showEvents mt-5">

                <?php 
                // Bruger php tag escaping til at kunne skrive normalt html -
                // og stadig være inde i foreach loopet.
                foreach ($events as $event) {
                    ?>
                    <div class='card mb-5'>
                        <div class='row flex-column flex-lg-row'>
                            <div class='col object-fit-cover'>
                                <!-- Bruger forskælden på "" og '' til at kunne tilgå EImage placeringen i eventet -->
                                <img src="<?=$siteroot?>img/<?=$event['EImage']?>" class='card-img object-fit-cover h-100 w-100'>
                            </div>
                            <div class='col'>
                                <div class='card-body'>
                                    <h4 class='card-title'>
                                        <?=$event['EName']?>
                                    </h4>
                                    <p class='card-subtitle mt-3'>
                                        Kategori: <?=$event['ECategory']?>
                                    </p>
                                    <p class='card-text mt-3'>
                                        <?=$event['EDescription']?>
                                    </p>
                                    <p class='card-text mt-3'>
                                        Dato: <?=date("d-m-Y", strtotime($event['EDate']))?>
                                    </p>
                                    <a class='btn btn-success' href="<?=$siteroot?>visArrangement.php?EID=<?=$event['EID']?>">Læs mere</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php
                }
                ?>
                <!-- Uses ternary operators to determine what button to show.-->
                <?=isset($_GET['show']) ?
                "<a href='{$siteroot}index.php' class='btn btn-success'>Vis færre arrangementer</a>" :
                "<a href='{$siteroot}index.php?show=all' class='btn btn-success'>Vis alle arrangementer</a>" ?>               
                
            </article>
        </section>
    </main>

    <?php include_once "include/footer.php"?>    
    
    <script src="<?=$siteroot?>js/bootstrap.bundle.min.js"></script>
</body>
</html>