{% extends "layouts/base.html" %}
{% load static %}
{% block title %}Cart - SavvyGT{% endblock %}
{% include 'partials/header.html' %}

{% block content %}

<!-- Wrapper start -->
<div id="wrapper" class="wrap">
    <div class="breadcrumbs panel z-1 py-2 bg-primary-50 text-dark">
        <div class="container max-w-xl">
            <ul class="breadcrumb nav-x justify-center gap-1 fs-7 sm:fs-6 fw-medium m-0">
                <li><a href="{% url 'products' %}">Home</a></li>
                <li><i class="unicon-chevron-right"></i></li>
                <li><span class="opacity-60">Cart</span></li>
            </ul>
        </div>
    </div>

    <div class="section py-4 lg:py-6 xl:py-8">
        <div class="container max-w-lg">
            <div class="panel vstack gap-4 lg:gap-6 xl:gap-8"
                data-anime="onview: -100; targets: >*; translateY: [48, 0]; opacity: [0, 1]; easing: easeOutCubic; duration: 500; delay: anime.stagger(100, {start: 500});">
                <header class="shop-header panel vstack justify-center gap-2 lg:gap-4 text-center">
                    <div class="panel">
                        <h1 class="h3 lg:h1 m-0">Cart</h1>
                    </div>
                </header>
                <div class="panel cart-details">
                    {% if message %}
                    <div class="alert alert-info text-center">
                        {{ message }}
                    </div>
                    {% elif error %}
                    <div class="alert alert-danger text-center">
                        {{ error }}
                    </div>
                    {% else %}
                    <form class="panel max-h-sm overflow-auto border border-gray-50 rounded" action="?">
                        <table class="table align-middle overflow-auto m-0 fs-6">
                            <thead class="bg-gray-25 text-black sticky-top ft-secondary z-1">
                                <tr>
                                    <th class="w-100px"></th>
                                    <th class="w-100px"></th>
                                    <th class="w-1/3">Product</th>
                                    <th class="w-1/6">Price</th>
                                    <th class="w-1/6">QTY</th>
                                    <th class="w-1/6">Subtotal</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for product in products %}
                                <tr>
                                    <td>
                                        <a href="{% url 'cart' %}?remove={{ product.product.id }}"
                                            class="remove text-none"><i class="icon icon-1 unicon-close"></i></a>
                                    </td>
                                    <td>
                                        <div class="image panel w-48px lg:w-72px">
                                            <div class="ratio ratio-1x1 rounded uc-transition-toggle overflow-hidden">
                                                <img class="media-cover image uc-transition-scale-up uc-transition-opaque"
                                                    src="{% static 'assets/images/common/'|add:product.product.image|default:'/static/assets/images/common/default.jpg' %}"
                                                    alt="{{ product.product.name|default:'Deleted Product' }}">
                                                <a href="{% url 'product_details' product.product.id %}"
                                                    class="position-cover"
                                                    data-caption="{{ product.product.name|default:'Deleted Product' }}"></a>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <h5 class="title h6 m-0"><a
                                                href="{% url 'product_details' product.product.id %}"
                                                class="text-none">{{ product.product.name|default:'Deleted Product'}}</a></h5>
                                    </td>
                                    <td>
                                        <span class="price" data-price="{{ product.product.price }}">${{product.product.price }}</span>
                                    </td>
                                    <td>
                                        <input type="number"
                                            class="form-control form-control-xs w-64px lg:w-80px quantity-input"
                                            step="1" min="1" max="99" name="quantity" value="{{ product.quantity }}"
                                            title="Qty" autocomplete="off">
                                    </td>
                                    <td>
                                        <span class="subtotal">${{ product.subtotal|floatformat:2 }}</span>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="6" class="text-center">Your cart is empty.</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </form>
                    <div class="panel mt-4 md:mt-6 lg:mt-12">
                        <div class="row child-cols-12 lg:child-cols-6 gy-6 gx-4 xl:gx-8">
                            <div class="lg:order-1">
                                <div class="panel vstack gap-1 lg:gap-2">
                                    <h5 class="h5 sm:h4 mx-0">Cart totals</h5>
                                    <div class="max-h-sm overflow-auto border border-gray-50 rounded">
                                        <table class="table align-middle overflow-auto m-0 fs-6">
                                            <tbody>
                                                <tr>
                                                    <th class="ft-secondary bg-gray-25 text-black">Subtotal</th>
                                                    <td><span id="subtotal-amount">$0.00</span></td>
                                                </tr>
                                                <tr>
                                                    <th class="ft-secondary bg-gray-25 text-black">Total</th>
                                                    <td><span id="total-amount"
                                                            class="fw-bold fs-6 lg:fs-5">$0.00</span></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Wrapper end -->

<!-- Modal -->
<div class="modal fade" id="youtubeModal" tabindex="-1" aria-labelledby="youtubeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h5 class="modal-title" id="youtubeModalLabel">Product Demo</h5>
                <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-2">
                <div class="ratio ratio-16x9">
                    <iframe id="youtubeIframe" src="" title="YouTube video demo" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}