<%- include('partials/html-start.ejs') %>
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css">

<header>
    <div class="header">

      <div class="header-right">
        <p style="height: 20px; margin-right: 800px">Record your Hotel Experience!</p>
        <a href="https://github.com/Jean-alien/maple-leaves-quebec">QUEBEC Source Code</a>
        <a href="https://github.com/Jean-alien">My GitHub</a>
        <a href="https://gist.github.com/barrycumbie/021e297110eff53965d40d400d308ee2" target="_blank">Guideline</a>
      </div> 
    </div>
  </header>

<h3>Hotel Review Page</h3>
<div class ="add_hotel">
<form method="POST" action="/addHotel">
    <label for="name">Hotel Name: </label>
    <input name="name" placeholder="Name of a hotel">
    <br><br>
    <label for="room_type">Room Type: </label>
    <input name="room_type" placeholder="Room Type">
    <br><br>
    <label for="price">Price per night: $</label>
    <input name="price" placeholder="Price per night">
    <br><br>
    <label for="rating">Rating: </label>
    <input name="rating" placeholder="/5">
    <br><br>
    <label for="note">note: </label> <!-- Changed name attribute to "note" -->
    <input name="note" placeholder="any comments...?"> <!-- Changed name attribute to "note" -->
    <br><br>
    <button type="submit">Add Hotel Experiences</button>
    </form>
    </div>
<br><br>


    <h4>
        <%= hotelData.length %> Hotel records
    </h4>
    <div class="categories">
        <div class="criteria">
            Name
        </div>
        <div style="margin-left: 165px">
            Room Type
        </div>
        <div style="margin-left: 120px">
            Price per night
        </div>
        <div style="margin-left: 70px">
            Rating
        </div>
        <div style="margin-left: 150px">
            Notes
        </div>
    </div>

<% for (var i=0; i < hotelData.length; i++) { %>

    <div class="hotel_records">
        <form method="POST" action="/updateHotel">
            <input type="hidden" name="id" value="<%= hotelData[i]._id %>">
            <input type="text" name="name" value="<%= hotelData[i].name %>">
            <input type="text" name="room_type" value="<%= hotelData[i].room_type %>">
            <input type="text" name="price" value="<%= hotelData[i].price %>">
            <input type="text" name="rating" value="<%= hotelData[i].rating %>">
            <input type="text" name="note" value="<%= hotelData[i].note %>">
            <button type="submit" style="margin-left: 14px; background-color: rgb(111, 150, 223)">Update</button>
        </form>
        <form method="POST" action="/deleteHotel">
            <input type="hidden" name="id" value="<%= hotelData[i]._id %>">
            <button type="submit" style="margin-left: 10px; background-color: rgb(245, 45, 31)">Delete</button>
        </form>
    </div>
<% } %>

<footer> Connected from my Mongodb ðŸ“Ÿ
    <a href="/send">send </a> |
    <a href="https://github.com/Jean-alien/maple-leaves-quebec" target="_blank"> Source Repo</a>
</footer>

<%- include('partials/html-end.ejs') %>