<% layout('layouts/boilerplate.ejs') %>
<link rel="stylesheet" href="/stylesheets/stars.css" />
<div class="row m-5">
  <div class="col-6">
    <div class="card">
      <div class="card-header">
        <div class="h1"><%= hotel.title %></div>
      </div>
      <div
        id="carouselExampleIndicators"
        class="carousel slide"
        data-bs-ride="carousel"
      >
        <div class="carousel-inner">
          <% hotel.images.forEach((img,i) => {%>
          <div class="carousel-item <%= i===0?'active':'' %>">
            <img src="<%=img.url%>" class="d-block w-100" alt="..." />
          </div>
          <% }) %>
        </div>
        <% if(hotel.images.length > 1) {%>
        <button
          class="carousel-control-prev"
          type="button"
          data-bs-target="#carouselExampleIndicators"
          data-bs-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button
          class="carousel-control-next"
          type="button"
          data-bs-target="#carouselExampleIndicators"
          data-bs-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
        <% } %>
      </div>
      <div class="card-body mt-2">
        <div class="d-flex align-middle">
          <i class="fas fa-user-circle" style="font-size: 34px"></i>
          <span class="text-dark card-title h4 ms-2"
            ><%= hotel.author.username %></span
          >
        </div>
      </div>
      <div class="card-body">
        <span class="text-primary card-title h4">Description : </span>
        <span class="text-dark card-text fs-5"><%= hotel.description %></span>
      </div>
      <div class="card-body">
        <a
          href="https://www.google.com/maps/place/<%= hotel.location %>"
          target="_blank"
          class="text-muted text-decoration-none card-text fs-4 fw-bolder"
          ><%= hotel.location %></a
        >
      </div>
      <div class="d-flex justify-content-center px-4">
        <div
          style="height: 1px; background-color: lightgray"
          class="w-100"
        ></div>
      </div>
      <div class="card-body">
        <span class="text-dark card-title h4">Price : </span>
        <span class="text-success card-text h2">â‚¹ <%= hotel.price %></span>
      </div>
      <div class="card-footer">
        <div class="flex">
          <form action="/hotel/<%= hotel._id %>?_method=delete" method="post">
            <a href="/hotel" class="btn btn-dark text-decoration-none">Back</a>
            <% if(currentUser && currentUser._id.equals(hotel.author._id)) {%>
            <a
              href="/hotel/<%= hotel._id %>/edit"
              class="btn btn-success text-decoration-none"
              >Edit</a
            >
            <button class="btn btn-danger">Delete</button>
            <% } %>
          </form>
        </div>
      </div>
    </div>
    <% if(currentUser){ %>
    <div class="card my-3">
      <div class="card-header">
        <h1>Leave Your Review</h1>
      </div>
      <div class="card-body">
        <form
          action="/hotel/<%= hotel._id %>/reviews"
          method="post"
          class="validated-form"
          novalidate
        >
          <div class="form-group">
            <label class="form-label h5" for="rating">Rating</label>

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

            <div class="valid-feedback">Looks good!</div>
            <div class="form-group">
              <label class="form-label h5" for="review">Review</label>
              <textarea
                name="review[body]"
                id="review"
                cols="30"
                rows="5"
                class="form-control"
                required
              ></textarea>
              <div class="valid-feedback">Looks good!</div>
            </div>
            <button class="btn btn-success mt-2">Submit</button>
          </div>
        </form>
      </div>
    </div>
    <% } %>
  </div>
  <div class="col-6">
    <div class="card-shadow bg-secondary text-white">
      <div class="card-header text-center">
        <div class="h2 p-2">Locate On Map :</div>
      </div>
      <div id="map" class="mb-4"></div>
    </div>
    <% if(hotel.reviews.length){ %>
    <div class="card">
      <div class="card-header">
        <h1>Reviews</h1>
      </div>
      <div class="card-body">
        <% for(let review of hotel.reviews){ %>
        <div class="card mb-3">
          <div class="card-body">
            <div class="mb-2 d-flex align-bottom">
              <i class="fas fa-user-circle" style="font-size: 32px"></i>
              <span class="text-dark card-title h4 ms-2"
                ><%= review.author.username %></span
              >
            </div>
            <div class="d-flex">
              <div class="d-flex justify-content-start mt-2">
                <div class="h4 text-muted me-3 mt-1">Ratings :</div>
                <div>
                  <p
                    class="starability-result"
                    data-rating="<%=review.rating %>"
                  >
                    Rated: <%= review.rating %> stars
                  </p>
                </div>
              </div>
              <% if(review.rating > 3) {%>
              <div class="ms-4 text-success">
                <h1><%= review.rating %>.0</h1>
              </div>
              <% } else if(review.rating === 3){%>
              <div class="ms-4 text-warning">
                <h1><%= review.rating %>.0</h1>
              </div>
              <% } else{%>
              <div class="ms-4 text-danger">
                <h1><%= review.rating %>.0</h1>
              </div>
              <% } %>
            </div>
            <div>
              <span class="text-success h4">Review : </span>
              <span class="text-primary fs-5"><%= review.body %></span>
            </div>
            <% if(currentUser && currentUser._id.equals(review.author._id)){ %>
            <form
              action="/hotel/<%= hotel._id %>/reviews/<%= review._id %>/?_method=delete"
              method="post"
            >
              <button class="btn btn-danger mt-3">Delete</button>
            </form>
            <% } %>
          </div>
        </div>
        <% } %>
      </div>
    </div>
  </div>
  <% } %>
</div>
<script>
  const mapToken = '<%-process.env.MAPBOX_TOKEN %>';
  const hotel = <%-JSON.stringify(hotel) %>;
</script>

<script src="/javascripts/showMap.js"></script>
