<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
    <link rel="stylesheet" href="/css/experiences.css"/>
    <title>Experience Browser</title>
</head>
<body>
<header>
            <!-- Including the navbar partial -->
            <%- include('partials/navbar.ejs') %>
</header>
        <div class="jumbotron jumbotron-fluid bg-primary text-white">
            <div class="container">
                <h1 class="display-4">Discover Experiences</h1>
                <p class="lead">Find and book the best experiences around the world.</p>
            </div>
        </div>
        <section class="hero text-center my-5">
            <h2 class="display-4">Experience Browser</h2>
            <input type="text" id="searchRegion" placeholder="Search by region">
            <input type="text" id="searchCountry" placeholder="Search by country">
            <button onclick="search()">Search</button>
        </section>      
<div class="table-container">
<table class="table table-bordered table-striped table-hover">
    <thead class="thead-dark">
        <tr>            
            <th scope="col">Name</th>
            <th scope="col">Type</th>
            <th scope="col">Country</th>
            <th scope="col">Region</th>            
            <th scope="col">Map</th>
            <th scope="col">Description</th>
            <th scope="col">Bookings</th>
            <th scope="col" class="text-end">Actions</th> 
           
        </tr>
    </thead>

    <tbody>
        <% activities.forEach((activity) => { %>
        <tr>
            <td><%= activity.exp_name %></td>
            <td><%= activity.exp_type %></td>
            <td><%= activity.country %></td>
            <td><%= activity.region %></td>            
            <td><a href="#" class="showMap" data-lon="<%= activity.lon %>" data-lat="<%= activity.lat %>" data-name="<%= activity.exp_name %>" data-img_url="<%= activity.img_url %>">Show On Map</a></td>    
            <td><%= activity.exp_description %></td>
            <td><%= activity.bookings %></td>
            <td>
                <form id="bookForm" data-activity-id="<%= activity.id %>">
                    <button type="button" class="btn-primary" 
                        data-activity-id="<%= activity.id %>" 
                        data-exp-name="<%= activity.exp_name %>"
                        data-exp-type="<%= activity.exp_type %>"
                        data-country="<%= activity.country %>"
                        data-region="<%= activity.region %>"
                        data-exp-description="<%= activity.exp_description %>"
                        data-img_url="<%= activity.img_url %>"                        
                        onclick="bookingActivity(event, this)">Book</button>
                </form>
            </td>
        </tr>
        <% }); %>
    </tbody>
</table>
</div>
<!-- Map Modal -->
<div class="modal fade" id="mapModal" tabindex="-1" role="dialog" aria-labelledby="mapModalLabel" aria-hidden="true">
    <div class="modal-dialog custom-width">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="mapModalLabel">Experience </h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" id="mapModalBody">
            <div id="map" style="width: 100%; height: 768px; "></div>
        </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 src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
 <script src="/js/experiences.js"></script>
 <script src="/js/modalMapHandler.js"></script>
 <script src="/js/map-script.js"></script>

</body>
</html>