{% extends 'base/base.html' %}
{% load staticfiles %}
{% block content %}
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-8 col-md-offset-2">
    <div class="p-3 card card-outline-secondary">
    <center>
      <div class="page-header" >
          <!-- Display all the details about the users reservation before confirmation-->
          <h2>Hotel Booking: <small>Make a Booking</small></h2>
      </div>
    </center>
      <center>
          <h3>{{hotel.Name}}</h3>
          <small>{{hotel.Address}},{{hotel.City}},{{hotel.Country}}</small>
      </center>
      <br />
      <center>
          <h4><u>Summary</u></h4>
      </center>
      <br />

      <center>

          <h5>Hotel Booking:</h5><p><b>{{checkin}} </b></p>


      </center>



      <center>

          <h5>Check-out:</h5><p><b>{{checkout}}  </b></p>


      </center>
      <center>

          <h5>Stay:</h5><p>{{stayduration}} Nights.</p>  </center>

      <hr />
      <center>

          <h2><u>Your Room: {{room.RoomType}}</u></h2>
     </center>

      <center>
           <b>Max Occupents:</b><p>{{room.Capacity}} people. </p>
           <b>Beds Provided:</b><p> {{room.BedOption}}.</p>
           <b>Room View:</b><p> {{room.View}}.</p>
           <b>Price Per Night:</b><p> ${{room.Price}}.</p>

           <p> ${{room.Price}} x {{stayduration}} Nights </p>
           <b class="lead">Total Price: <u>$ {{totalcost}}</u></b>
      </center>

      <br />
      <hr />

    <!-- after reviewing the Reservation details the user enters their First and Last name to make a booking -->
      <form method="POST"  action="{% url 'Reservations:newbooking' room.id hotel.id checkin checkout totalcost  %}">
          {% csrf_token %}
        <center>
          <div class="form-group row">
              <div class="col-xs-6">
                  <label for="first">Guest First Name:</label>
                  <input class="form-control pull-left" name="firstname" id="first" type="text" required="First Name" />
              </div>
              <div class="col-xs-6">
                  <label for="first">Guest Last Name:</label>
                  <input class="form-control pull-right" name="lastname" id="last" type="text" required="Last Name" />
              </div>
          </div>

          <hr />
          <button type="submit" class="btn btn-success">Book Now!</button>
       </center>

     </form>


  </div>
</div>
</div>
</div>
{% endblock %}