<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Booking Experience</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/booking.css"/>
</head>
<body>
    <header>
        <!-- Including the navbar partial -->
        <%- include('partials/navbar.ejs') %>
    </header>

    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <h2 class="display-4">Booking for <%= expName %></h2>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-md-6 text-center">
                <img src="http://localhost:3001/<%= img_url %>" alt="<%= expName %>" class="img-fluid rounded">
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="booking-summary text-left">
                    <form id="bookingForm" action="/confirmBooking" method="POST">
                        <input type="hidden" name="activityId" value="<%= activityId %>">
                        
                        <p><strong>Type:</strong> <%= expType %></p>
                        <p><strong>Country:</strong> <%= country %></p>
                        <p><strong>Region:</strong> <%= region %></p>
                        <p><strong>Description:</strong> <%= expDescription %></p>
                        <div class="form-inline">
                            <label for="people" class="mr-3"><strong>Number of People:</strong></label>
                            <input type="number" id="people" name="people" class="form-control form-control-sm" min="1" max="100" required>
                        </div>                        
                        <div class="form-group text-center">
                            <button type="submit" class="btn btn-primary">Book Now</button>
                            <div id="success-message" class="alert alert-success mt-3" style="display:none;"> 
                                Booking successful!
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Including the footer partial -->
    <%- include('partials/footer.ejs') %>
    
    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
    $("#bookingForm").submit(function(event) {
        event.preventDefault(); // Prevent default form submission

        var formData = $(this).serialize(); // Get form data

        // AJAX POST request
        $.post("/confirmBooking", formData, function(response) {
            if (response.message === "Booking successful.") {
                // Show success message
                $("#success-message").fadeIn();
            } else {
                // Handle failure (You can also add a failure message)
                console.log("Failed to book");
            }
        });
    });
});
</script>
</body>
</html>
