{% extends 'app/base.html' %}
{% load static %}
{% block title %}Cart{% endblock title %}
{% block content %}
<div class="container my-5">
    <div class="row">

        <h1 class="text-center mb-5">Shopping Cart</h1>
        <div class="col-sm-8">
            <div class="card">
                <div class="card-body">
                    <h3>Cart</h3>
                    
                    {% for item in cart reversed%}
                    <div class="row">
                        <div class="col-sm-3 text-center align-self-center">
                            <img src="{{item.product.product_image.url}}" alt="" srcset="" class="img-fluid img-thumbnail shadow-sm" height="149", width="149">
                        </div>
                        <div class="col-sm-9">
                            <div>
                                <h5>{{item.product.title}}</h5>
                                <p class="m-2 text-muted small">{{item.product.description}}</p>
                                <div class="my-3">
                                    <label for="quantity">Quantity:</label>
                                    <a class="minus-cart btn" pid={{item.product.id}}>➖</a>
                                    <span id="quantity">{{item.quantity}}</span>
                                    <a pid={{item.product.id}} class="plus-cart btn">➕</a>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <a class="remove-cart btn btn-sm btn-secondary mr-3" pid={{item.product.id}} >Remove item</a>
                                    <p class="mb-0"><span><strong>Rs. {{item.product.selling_price}}</strong></span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr class="text-muted">
                    {% empty %}
                    <h1 class="text-center mb-5">Cart is Empty</h1>
                    {% endfor %}
                </div>
            </div>
        </div>
{% if cart %}
        <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 id="amount">Rs. {{amount}}</li>
                        <li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0">Shipping <span>Rs 60</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 GST)</small>
                            </div>
                            <strong><span id="totalAmount">Rs. {{totalAmount}}</span></strong>
                        </li>
                    </ul>
                    <div class="d-grid">
                        {% if request.user.is_authenticated %}
                        <a href="{% url 'check' %}" class="btn btn-primary">Place Order</a>
                        {% else %}
                        <a href="{% url 'SessionCheckout' %}" class="btn btn-primary">Place Order</a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
{% endif %}
    </div>
</div>
{% endblock content %}