<?php
// Start the session
session_start();

// Check if user is logged in
if (!isset($_SESSION['AccID'])) {
    // Redirect to login page if not logged in
    header('Location: login.html');
    exit();
}

// Include the database connection file
include("connection.php");

// Get the user ID from the session
$AccID = $_SESSION['AccID'];

// Fetch the user's name from the database
$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>
<head>
    <title>Rent | UITM BAZAAR</title>
    <!-- Link to external CSS file -->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style2.css">
    <!-- Link to Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-image: url(pic/back.jpg);
            color: #fff;
            position: relative;
            min-height: 100vh;
            margin: 0;
            padding: 0;
        }
        input {
            background-color: transparent;
            color: white;
            text-align: center;
            width: 35px;
            font-size: 30px;
            margin-right: 10px;
        }
        #confirm-button {
            display: block;
            margin: -170px auto;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            text-align: center;
            border: none;
        }
        .back-button {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: #007BFF;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .floating-image img {
            margin-left: 140px;
            position: absolute;
            top: 55%;
            left: 20px;
            transform: translateY(-50%);
            width: 300px;
            height: auto;
        }
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin-left: 20%;
        }
        .tapak-selector {
            margin-bottom: 170px;
            display: flex;
            flex-direction: column;
            gap: 100px;
        }
        .row {
            display: flex;
            gap: 40px;
        }
        .tapak {
            width: 70px;
            height: 40px;
            background-color: #ccc;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        .tapak.selected {
            background-color: purple;
        }
        .tapak.disabled {
            background-color: red;
            cursor: not-allowed;
        }
        .tapak-message {
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            margin-top: 50px;
        }
        .footer {
            margin-top: 300px;
        }
    </style>
</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>

    <form method="post" action="proof.php">    
        <div class="tapak-message">
            <br><br>
            Please select your place / tapak
            <div class="container">
                <div class="tapak-selector">
                    <div class="row">
                        <div class="tapak" data-place="1">1</div>
                        <div class="tapak" data-place="2">2</div>
                        <div class="tapak" data-place="3">3</div>
                        <div class="tapak" data-place="4">4</div>
                        <div class="tapak" data-place="5">5</div>
                    </div>
                    <div class="row">
                        <div class="tapak" data-place="6">6</div>
                        <div class="tapak" data-place="7">7</div>
                        <div class="tapak" data-place="8">8</div>
                        <div class="tapak" data-place="9">9</div>
                        <div class="tapak" data-place="10">10</div>
                    </div>
                    <div class="row">
                        <div class="tapak" data-place="11">11</div>
                        <div class="tapak" data-place="12">12</div>
                        <div class="tapak" data-place="13">13</div>
                        <div class="tapak" data-place="14">14</div>
                        <div class="tapak" data-place="15">15</div>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" name="place" id="selected-place" value="">
        <button id="confirm-button" name="submit">Confirm</button>
        <div class="floating-image"><img src="pic/plan.jpeg"></div>
    </form>

    <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>
    <script>
        const tapaks = document.querySelectorAll('.tapak');
        let selectedTapak = null;
        const selectedPlaceInput = document.getElementById('selected-place');
        const confirmButton = document.getElementById('confirm-button');

        tapaks.forEach(tapak => {
            tapak.addEventListener('click', () => {
                if (tapak.classList.contains('disabled')) {
                    return;
                }

                if (selectedTapak) {
                    selectedTapak.classList.remove('selected');
                }

                tapak.classList.add('selected');
                selectedTapak = tapak;
                selectedPlaceInput.value = tapak.getAttribute('data-place');
            });
        });

        confirmButton.addEventListener('click', (e) => {
            if (!selectedTapak) {
                e.preventDefault(); // Prevent form submission
                alert('Please select a place/tapak before proceeding.');
            }
        });
    </script>
</body>
</html>
