<?php
session_start();
if (!isset($_SESSION['AccID'])) {
    header('Location: login.html');
    exit();
}

include("connection.php");
$AccID = $_SESSION['AccID'];

// Fetching the user's name
$sql = "SELECT Renter_Name FROM renter WHERE Renter_ID = '$AccID'";
$result = mysqli_query($conn, $sql);
$user = mysqli_fetch_assoc($result);
$userName = $user['Renter_Name'];
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Events | UITM BAZAAR</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Available Events</title>
    <link rel="stylesheet" href="event.css" type="text/css">
    <link rel="stylesheet" href="style2.css">
    <link rel="stylesheet" href="style.css" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
    <aside class="sidebar">
      <div class="logo">
        <img src="pic/profiles.png" alt="logo">
        <h2><?php echo $userName; ?>'s</h2>
      </div>
      <ul class="links">
        <h4>Main Menu</h4>
        <li>
          <span class="material-symbols-outlined"><img src="pic/home.png"></span>
          <a href="rentermenu.php">Main Menu</a>
        </li>
        <hr>
        <h4>Advanced</h4>
        <li>
          <span class="material-symbols-outlined"><img src="pic/receipt.png"></span>
          <a href="selectReceipt.php">Receipt</a>
        </li>
        <hr>
        <h4>Account</h4>
        <li>
          <span class="material-symbols-outlined"><img src="pic/profile2.png"></span>
          <a href="renterProfile.php">Profile</a>
        </li>
        <hr>
        <h4>Sign Out</h4>
        <li class="logout-link">
          <span class="material-symbols-outlined"><i class="fa-solid fa-right-from-bracket"></i></span>
          <a href="logout.php">Logout</a>
        </li>
      </ul>
    </aside>
    <header class = "header">
        <a href= "rentermenu.php" class = "logo">Welcome
        <span><?php echo $userName; ?>'s</span></a>

        <i class="fa-solid fa-bars" id="menu-icon"></i>

        <nav class="navbar">
            <a href="rentPlace.php">Rent Place</a>
            <a href="sawEvents.php">Event</a>
            <a href="payment.php">Payment</a>
            <a href="sentFeedback.php">Sent Feedback</a>    
            </nav>      
    </header>
    <section>
        <div class="leftBox">
            <div class="content">
                <h1>Upcoming Events</h1>
                <p>Check out the upcoming events:</p>
            </div>
        </div>

        <div class="events">
            <ul>
                <?php
                $sql = "SELECT * FROM event";
                $data = mysqli_query($conn, $sql);
                $check_event = mysqli_num_rows($data) > 0;

                // Fetch events and sort by date
                $events = [];
                if ($check_event) {
                    while ($row = mysqli_fetch_assoc($data)) {
                        $events[] = $row;
                    }

                    // Custom sort function to sort events by date
                    usort($events, function($a, $b) {
                        $dateA = strtotime($a['Dates']);
                        $dateB = strtotime($b['Dates']);
                        return $dateA - $dateB;
                    });

                    foreach ($events as $event) {
                ?>
                    <li>
                        <div class="time"> 
                            <h2><?php echo $event['Dates']; ?></h2>
                        </div>
                        <div class="details">
                            <h3><?php echo $event['Location']; ?></h3>
                            <p><?php echo $event['Description']; ?></p>
                        </div>
                    </li>
                <?php
                    }
                } else {
                    echo "<li>No upcoming events.</li>";
                }
                ?>
            </ul>
        </div>
    </section>
    <footer class="footer" id="footer">
        <div class="social">
            <a onclick="showPopup()"><i class="fa-solid fa-phone"></i></a>
            <a onclick="showPopup2()"><i class="fa-solid fa-envelope"></i></a>
        </div>
        <div id="popup" class="popup">
                <h2>This is Our No Phone!</h2><br>
                <p>016-430 6562</p>
                <button class = btns onclick="closePopup()">Close</button>
        </div>

        <div id="popup2" class="popup">
                <h2>This is Our Email!</h2><br>
                <p>uitm@student.uitm.edu.my</p>
                <button class = btns onclick="closePopup2()">Close</button>
        </div>
        <ul class="list">
            <li>
                <a href="sentFeedback.php">Rate Us</a>
            </li>

            <li>
                <a href="sawEvents.php">Event</a>
            </li>

            <li>
                <a href="renterProfile.php">Profile</a>
            </li>

            <li>
                <a href="https://bendahari.uitm.edu.my/index.php/component/contact/category/55-cawangan-negeri-perak-kampus-tapah">Website</a>
            </li>
        </ul>
        <p class="copyright">
            © NextGen Techne | All Rights Reserved
        </p>
    </footer>
    <script src="script.js"></script>
</body>
</html>