{% extends 'base.html' %}

{% block title %}Your Cart - ShinaStore{% endblock %}

{% block content %}
<div class="container py-5">
    <h1 class="display-5 fw-bold text-slate mb-5" style="font-family: 'Montserrat', sans-serif;">Your Shopping Cart</h1>

    {% if cart %}
    <div class="row g-5">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm" style="border-radius: 20px;">
                <div class="table-responsive p-4">
                    <table class="table table-borderless align-middle">
                        <thead>
                            <tr class="text-muted small text-uppercase">
                                <th scope="col">Product</th>
                                <th scope="col">Price</th>
                                <th scope="col">Quantity</th>
                                <th scope="col">Subtotal</th>
                                <th scope="col"></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for product_id, item in cart.items %}
                            <tr class="border-bottom">
                                <td class="py-4">
                                    <div class="d-flex align-items-center">
                                        <img src="{{ item.image_url }}" alt="{{ item.title }}" class="rounded me-3" style="width: 80px; height: 80px; object-fit: cover;">
                                        <div>
                                            <h6 class="fw-bold mb-0">{{ item.title }}</h6>
                                        </div>
                                    </div>
                                </td>
                                <td>${{ item.price }}</td>
                                <td>
                                    <span class="badge bg-light text-dark px-3 py-2 border">{{ item.quantity }}</span>
                                </td>
                                <td class="fw-bold">${{ item.price }}</td>
                                <td class="text-end">
                                    <a href="{% url 'remove_from_cart' product_id %}" class="btn btn-outline-danger btn-sm border-0">
                                        <i class="bi bi-trash"></i> Remove
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm p-4" style="border-radius: 20px; background-color: #F8FAFC;">
                <h4 class="fw-bold mb-4">Order Summary</h4>
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Subtotal</span>
                    <span>${{ total|stringformat:".2f" }}</span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Shipping</span>
                    <span class="text-success">Free</span>
                </div>
                <hr>
                <div class="d-flex justify-content-between mb-4">
                    <span class="fw-bold">Total</span>
                    <span class="h4 fw-bold text-rose">${{ total|stringformat:".2f" }}</span>
                </div>
                
                {% if user.is_authenticated %}
                    <a href="{% url 'checkout' %}" class="btn btn-dark btn-lg w-100 py-3 fw-bold" style="border-radius: 12px;">
                        Proceed to Checkout
                    </a>
                {% else %}
                    <div class="alert alert-info small" style="border-radius: 12px;">
                        Please <a href="/admin/login/?next={{ request.path }}" class="fw-bold">login</a> to place an order.
                    </div>
                    <button class="btn btn-dark btn-lg w-100 py-3 fw-bold" disabled style="border-radius: 12px;">
                        Proceed to Checkout
                    </button>
                {% endif %}
                
                <div class="mt-4 text-center">
                    <a href="{% url 'index' %}" class="text-decoration-none text-muted small">
                        <i class="bi bi-arrow-left"></i> Continue Shopping
                    </a>
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <div class="text-center py-5">
        <div class="mb-4">
            <i class="bi bi-cart-x display-1 text-muted"></i>
        </div>
        <h3>Your cart is empty</h3>
        <p class="text-muted">Looks like you haven't added anything to your cart yet.</p>
        <a href="{% url 'index' %}" class="btn btn-rose btn-lg px-5 py-3 mt-3 text-white fw-bold" style="background-color: #F43F5E; border-radius: 12px;">
            Start Shopping
        </a>
    </div>
    {% endif %}
</div>

<style>
    .text-rose { color: #F43F5E; }
    .btn-rose:hover { background-color: #E11D48 !important; }
</style>
{% endblock %}
