booking.ejs

  
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Book a Tour</title>
    <link rel="stylesheet" href="/css/booking.css">
</head>
<body>
    <div class="container">
        <h1>Tour Booking</h1>

        <!-- แสดงรายการทัวร์ -->
        <div class="tour-list">
            <h2>Available Tours</h2>
            <ul>
                <% tours.forEach(function(tour) { %>
                    <li>
                        <strong><%= tour.name %></strong><br>
                        <%= tour.description %><br>
                        Price: <%= tour.price %> USD<br>
                        Duration: <%= tour.duration %> days<br>
                    </li>
                <% }); %>
            </ul>
        </div>

        <!-- ช่องกรอกข้อมูลจอง -->
        <div class="booking-form">
            <h2>Book a Tour</h2>
            <form action="/create-booking" method="POST">
                <label for="tour_id">Select Tour</label>
                <select id="tour_id" name="tour_id" required>
                    <option value="" disabled selected>Select a Tour</option>
                    <% tours.forEach(function(tour) { %>
                        <option value="<%= tour.id %>"><%= tour.name %></option>
                    <% }); %>
                </select>

                <button type="submit">Book Now</button>
            </form>
        </div>
    </div>

</body>
</html>