<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Schedule for <%= course %></title>
    <link rel="stylesheet" href="/css/scheduleStyle.css">
</head>


<div class="topnav">
    <!--  nav bar  -->
      <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <a>
            <img src="https://www.una.edu/brand/images/logo/round/UNA-roundLionPurpleW.png.pagespeed.ce.sooHu-qo8w.png" onclick="location.href = 'https:/una.edu/'" alt="buttonpng" height = "30" width = "30" background-color="black" />
            </a>
                <a class="nav-link" onclick="location.href='/index'">Home</a>
                <a class="nav-link" onclick="location.href='/login'">Login</a>
                <a class="nav-link" onclick="location.href='/register'">Register</a>
                <a class="nav-link" onclick="location.href='/manage-bookings'" class="manage-bookings-btn">Manage My Bookings</a>
                <a class="nav-link" href="https://github.com/LoganBeckman21/congenial-barnacle-Group4/blob/main/README.md">About</a>
                
        </div>

<body>
    <div class="schedule-container">
        <h1>Schedule for <%= course %></h1>
        <% if(classTimes.length > 0) { %>
            <div class="time-slots">
                <% classTimes.forEach(function(time) {
                    let isBooked = bookedTimes.includes(time.day + ' at ' + time.time); %>
                    <button type="button" class="time-slot<%= isBooked ? ' booked' : '' %>"
                        data-day="<%= time.day %>" data-time="<%= time.time %>"
                        <%= isBooked ? 'disabled' : '' %>>
                        <%= time.day %> at <%= time.time %>
                    </button>
                <% }); %>
            </div>

            <!-- User Input Form -->
            <form action="/submit-booking" method="post" class="booking-form">
                <div class="input-row">
                    <input type="text" name="name" placeholder="Your Name" required>
                    <label for="reasoning" >Choose a reason for booking: </label>
                    <select name="reasoning" id="reason">
                      <option value="meeting">Meeting</option>
                      <option value="assignment">Assignment</option>
                      <option value="advising">Advising</option>
                    </select>
                    <input type="text" name="selectedTime" placeholder="Selected Time" readonly required>
                    <input type="hidden" name="course" value="<%= course %>">
                </div>
                <div class="form-buttons">
                    <button type="submit" class="submit-btn">Submit</button>
                    <button type="button" onclick="window.location.href='/'" class="go-back-btn">Go Back</button>
                </div>
                
            </form>
        <% } else { %>
            <p>No schedule available for the selected course.</p>
        <% } %>
    </div>


    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const timeSlotButtons = document.querySelectorAll('.time-slot:not(.booked)');
            const selectedTimeInput = document.querySelector('input[name="selectedTime"]');

            timeSlotButtons.forEach(button => {
                button.addEventListener('click', function() {
                    selectedTimeInput.value = this.dataset.day + ' at ' + this.dataset.time;
                    timeSlotButtons.forEach(btn => btn.classList.remove('selected'));
                    this.classList.add('selected');
                });
            });
        });
    </script>




</body>


</html>