{% extends 'base.html' %}


{% block content %}
{% load cart %}
{% load custom_filter %}
<div class="container">
   <div class="border rounded p-4 m-4">
        <p class="display-4 pl-4 ml-4 btn btn-success rounded-pill">Your Cart</p>
        <hr>
        <table class="table">
            <thead>
                <tr>
                    <th>Sno.</th>
                    <th>Image</th>
                    <th>Product</th>
                    <th>Price</th>
                    <th>Quantity</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                
                {% for product in products %}
                <tr>
                    <td>{{forloop.counter}}</td>
                    <td><img style="height: 80px;" class="rounded-circle" src="{{product.image.url}}" alt=""></td>
                    <td>{{product.name}}</td>
                    <td>{{product.price|currency}}</td>
                    <td>{{product|cart_quantity:request.session.cart}}</td>
                    <td>{{product|price_total:request.session.cart|currency}}</td>
                </tr>

                {% endfor %}
               
            </tbody>

            <tfoot>
                <tr>
                    <th colspan="4"></th>
                    <th class="" colspan="">Total</th>
                    <th>{{products|total_cart_price:request.session.cart|currency}}</th>
                </tr>
            </tfoot>
        </table>
        <hr>
        <div class="m-3 p-3">
            <a href="#" data-toggle="modal" data-target="#exampleModal" class="btn btn-outline-success border rounded  col-lg-3 float-right">Check out</a>
        </div>
   </div>
</div>


<!-- modal -->

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">
              Check Out Form
          </h5>
          <hr>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="m-2 p-3">
            <form action="/check-out" method="POST">
                {% csrf_token %}
                <div class="form-group">
                  <label for="">Address</label>
                  <input type="text" name="address" id="" class="form-control" placeholder="" aria-describedby="helpId">
                  
                </div>
                <div class="form-group">
                    <label for="">Phone</label>
                    <input type="text" name="phone" id="" class="form-control" placeholder="" aria-describedby="helpId">
                  </div>

                  <input type="submit" class="btn float-right btn-outline-success col-lg-6" value="Check out">
            </form>
          </div>
        </div>
        
      </div>
    </div>
  </div>



{% endblock %}