{% extends 'common/base.html' %}
{% load static %}
{% block content %}
<!-- ======= Breadcrumbs ======= -->
<div class="breadcrumbs" data-aos="fade-in">
    <div class="container">
      <h2>Cart Details</h2>
    </div>
  </div><!-- End Breadcrumbs -->
<div class="container my-3">
    <div class="row">
        <h3 class="text-center mb-3">Shopping Cart</h3>
        <div class="col-sm-8">
            <div class="card">
                <div class="card-body">
                    <h4 small class="text-primary">{{totalitem}} course in cart</h4><hr>
                    {% for cart in carts %}
                    <div class="row my-3">
                        <div class="col-sm-3 text-center align-self-center"><img
                                src="{{cart.product.prod_img.url}}" alt="" srcset=""
                                class="img-fluid img-thumbnail shadow-sm" height="150" width="150"> </div>
                        <div class="col-sm-9">
                            <div>
                                <h5>{{cart.product.course_name}}</h5>
                                <h6><small class="text-muted">{{cart.product.teachers.name}}</small></h6><br>
                                <blockquote class="blockquote text-justify">
                                    <footer class="blockquote-footer">{{cart.product.description}}</footer>
                                  </blockquote>
                                <div class="my-3">
                                    <label for="quantity">Quantity:</label>
                                    <a class="minus-cart btn" pid="{{cart.product.id}}"><i class="fas fa-minus-square fa-lg"></i></a>
                                    <span id="quantity">{{cart.quantity}}</span>
                                    <a class="plus-cart btn" pid="{{cart.product.id}}"><i class="fas fa-plus-square fa-lg"></i></a>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <a href="#" class="btn btn-sm btn-info bg-white  text-dark mr-3 remove-cart" pid="{{cart.product.id}}">Remove item </a>
                                    <p class="mb-0"><span><strong>Tk. {{cart.product.price}}</strong></span></p>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    <hr class="text-muted">
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="col-sm-4">
            <div class="card">
                <div class="card-body">
                    <h3>The Total Amount of</h3>
                    <ul class="list-group">
                        <li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 pb-0">
                            Amount<span> Tk.<span id="amount"></span> {{amount}}</span></span></li>
                        <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                            Shipping<span>Tk. 100.00</span></li>
                        <li
                            class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
                            <div>
                                <strong>Total</strong> <small>(including VAT)</small>
                            </div>
                            <span><strong>Tk. <strong id="totalamount">{{totalamount}}</strong></strong> </span>
                        </li>
                    </ul>
                    <div class="d-grid">
                        <p class="text-center mb-3">
                            <img src="{% static 'assets/img/payments.png' %}" height="26">
                        </p>
                        <a href="{% url 'checkout' %}" class="btn btn-primary">Place Order</a>
                    </div>
                </div>
            </div>
        </div>

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