{% 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 , quantity in zipped_data %}
            
                    <div class="row">
                        <div class="col-sm-3 text-center align-self-center">
                            <img src="{{item.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.title}}</h5>
                                <p class="m-2 text-muted small">{{item.description}}</p>
                                <div class="my-3">
                                    <label for="quantity">Quantity:</label>
                                    <a class="btn" href="{% url 'decrease_quantity' item.id %}">➖</a>
                                    <span id="quantity">{{quantity}}</span>
                                    <a class="btn" href="{% url 'increase_quantity' item.id %}">➕</a>
                                    
                                </div>
                                <div class="d-flex justify-content-between">
                                    <a class="btn btn-sm btn-secondary mr-3" href="{% url 'remove_product' item.id %}">Remove item</a>
                                    <p class="mb-0"><span><strong>Rs. {{item.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 products %}
        <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 %}