<% layout('layouts/boilerplate.ejs') %>

<div class="row m-5">
  <div class="col-6 offset-3">
    <div class="card">
      <div class="card-header">
        <div class="h1">Edit Hotel</div>
      </div>
      <div class="card-body">
        <form
          action="/hotel/<%= hotel._id %>?_method=put"
          method="post"
          class="validated-form"
          enctype="multipart/form-data"
          novalidate
        >
          <div class="mb-3">
            <label for="title" class="form-label h6">Title : </label>
            <input
              type="text"
              name="hotel[title]"
              id="title"
              class="form-control"
              value="<%= hotel.title %>"
              placeholder="Enter hotel title"
              required
            />
            <div class="valid-feedback">Looks good!</div>
          </div>

          <div class="mb-3">
            <label for="price" class="form-label h6">Price : </label>
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text px-4">â‚¹</span>
              </div>
              <input
                type="number"
                name="hotel[price]"
                id="price"
                class="form-control"
                value="<%= hotel.price %>"
                placeholder="Enter hotel price"
                required
              />
            </div>
            <div class="valid-feedback">Looks good!</div>
          </div>
          <div class="mb-3">
            <label for="description" class="form-label h6">Description : </label>
            <textarea
              name="hotel[description]"
              id="description"
              class="form-control"
              placeholder="Write few lines about hotel"
              required
            >
<%= hotel.description %></textarea
            >

            <div class="valid-feedback">Looks good!</div>
          </div>
          <div class="mb-3">
            <label for="location" class="form-label h6">Location : </label>
            <input
              type="text"
              name="hotel[location]"
              id="location"
              class="form-control"
              value="<%= hotel.location %>"
              placeholder="Enter hotel location"
              required
            />

            <div class="valid-feedback">Looks good!</div>
          </div>
          <div class="mb-4">
            <label for="image" class="form-label h6">Add Images : </label>
            <input
              type="file"
              name="image"
              id="image"
              class="form-control"
              placeholder="Add images"
              multiple
            />
            <div class="valid-feedback">Looks good!</div>
          </div>
          <div class="mb-2 d-flex">
            <% hotel.images.forEach(function(img,i){%>
            <div>
              <img src="<%= img.thumbnail%>" class="img-thumbnail" alt="" />
              <div class="form-check-inline ms-1">
                <input
                  type="checkbox"
                  id="image-<%=i%>"
                  class="form-check-input"
                  name="deleteImages[]"
                  value="<%=img.filename  %>"
                />
                <label for="image-<%=i%>" class="form-label h6">Delete?</label>
              </div>
            </div>
            <% }) %>
          </div>
          <div class="mb-3">
            <button class="btn btn-primary mt-3">Update</button>
            <a href="/hotel/<%= hotel._id %>" class="btn btn-danger mt-3"
              >Back</a
            >
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
