{% extends 'shop/base.html' %}
{% block title %}Shopping Cart - Nana Tradings{% endblock %}

{% block content %}
<div class="container my-5">

    <!-- Cart Reminder for Guest Users (Placed Here at the Top) -->
    {% if not user.is_authenticated %}
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            let savedCart = document.cookie.split('; ').find(row => row.startsWith('saved_cart='));
            if (savedCart) {
                document.getElementById("cart-reminder").style.display = "block";
            }
        });
    </script>

    <div id="cart-reminder" class="alert alert-warning text-center fw-bold shadow-sm" style="display: none;">
        🛒 You have items in your cart! <a href="{% url 'cart_summary' %}" class="text-success">View Cart</a>
    </div>
    {% endif %}

    <!-- 🛒 Shopping Cart Heading -->
    <div class="text-center mb-5">
        <h1 class="fw-bold display-5 cart-heading">
            <span class="text-success"><i class="fas fa-shopping-cart"></i></span> 
            <span class="cart-text">Your Shopping Cart</span>
        </h1>
        <p class="cart-subtext">Review your selected items and proceed to checkout.</p>
    </div>

    {% if cart_items %}
        <div class="row g-3">
            {% for item in cart_items %}
            <div class="col-md-6 col-lg-4">
                <div class="card shadow-lg border-0 cart-item">
                    <div class="row g-0 align-items-center">
                        <!-- Product Image -->
                        <div class="col-md-4">
                            <img src="{{ item.product.image.url }}" class="cart-product-img img-fluid rounded-start" alt="{{ item.product.name }}">
                        </div>

                        <!-- Product Details -->
                        <div class="col-md-8">
                            <div class="card-body">
                                <h5 class="card-title">{{ item.product.name }}</h5>
                                <p class="text-muted">Price: <strong>${{ item.product.price }}</strong></p>
                                <p class="text-muted">Quantity: <strong>{{ item.quantity }}</strong></p>
                                <p class="text-success fw-bold">Total: ${{ item.total }}</p>
                                <!-- Add & Remove Buttons -->
                                <div class="d-flex justify-content-between">
                                    <a href="{% url 'add_to_cart_at_basket' product_id=item.product.id %}" class="btn btn-sm cart-btn cart-btn-add">
                                        <i class="fas fa-plus"></i> Add
                                    </a>
                                    <a href="{% url 'remove_from_cart' product_id=item.product.id %}" class="btn btn-sm cart-btn cart-btn-remove">
                                        <i class="fas fa-minus"></i> Remove
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        <div class="cart-summary-box mt-4 p-4 rounded-4 shadow-lg">
            <h4 class="fw-bold">
                Total: <span class="text-success">${{ total_price }}</span>
            </h4>
            <div class="d-flex justify-content-end gap-3 mt-3">
                {% if not user.is_authenticated %}
                    <a href="{% url 'login' %}?next={% url 'checkout' %}" class="btn btn-warning shadow-sm">
                        <i class="fas fa-sign-in-alt"></i> Login to Checkout
                    </a>
                {% else %}
                    <a href="{% url 'checkout' %}" class="btn btn-success shadow-sm">
                        <i class="fas fa-shopping-bag"></i> Proceed to Checkout
                    </a>
                {% endif %}
                <a href="{% url 'shop' %}" class="btn btn-outline-secondary shadow-sm">
                    <i class="fas fa-store"></i> Continue Shopping
                </a>
                <a href="{% url 'clear_cart' %}" class="btn btn-danger shadow-sm">
                    <i class="fas fa-trash-alt"></i> Empty Cart
                </a>
            </div>

        </div>

    {% else %}
        <div class="alert alert-info text-center mt-4 empty-cart-box">
            <h5 class="fw-bold empty-cart-heading">Your cart is empty! 🛍️</h5>
            <p class="empty-cart-text">Start adding items to your cart now.</p>
            <a href="{% url 'shop' %}" class="btn shop-btn mt-3">
                <i class="fas fa-store me-2"></i> Browse Our Shop
            </a>
        </div>
    {% endif %}
</div>


<!-- 💎 Custom Styling with Dark Mode Fixes -->
<style>
/* 📦 Cart Product Image */
.cart-product-img {
    max-width: 100px;
    height: auto;
    border-radius: 8px;
}

/* 🛍️ Cart Summary Box */
.cart-summary-box {
    background-color: #f8f9fa;
    border: 2px solid #148818;
    text-align: right;
    border-radius: 10px;
}

/* 🌙 Dark Mode Styles */
.dark-mode .cart-summary-box {
    background-color: #333;
    border-color: #00c853;
    color: white;
}

.dark-mode .cart-summary-box h4 {
    color: white;
}

.dark-mode .cart-summary-box .text-success {
    color: #00e676 !important;
}

/* 🌙 Dark Mode for Cart Items */
.cart-item {
    background-color: #fff;
    transition: all 0.3s ease-in-out;
    border-radius: 12px;
    overflow: hidden;
}

.dark-mode .cart-item {
    background-color: #2b2b2b;
    color: white;
}

.dark-mode .cart-item .card-title {
    color: #00e676;
}

.dark-mode .cart-item .text-muted {
    color: #bbb !important;
}

/* 🌙 Dark Mode for Headings & Subtext */
.cart-heading {
    color: #148818;
}

.dark-mode .cart-heading {
    color: #00e676;
}

.cart-text {
    color: #333;
}

.dark-mode .cart-text {
    color: white;
}

.cart-subtext {
    color: #666;
}

.dark-mode .cart-subtext {
    color: #bbb;
}

/* 🌙 Dark Mode for Empty Cart Section */
.empty-cart-box {
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
}

.dark-mode .empty-cart-box {
    background-color: #2b2b2b;
    color: white;
}

.dark-mode .empty-cart-heading {
    color: #00e676;
}

.dark-mode .empty-cart-text {
    color: #ccc;
}

/* ✅ Fixed Add & Remove Buttons (Visible in Light & Dark Mode) */
.cart-btn {
    transition: all 0.3s ease-in-out;
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 6px;
}

.cart-btn-add {
    background-color: #28a745;
    color: white;
    border: none;
}

.cart-btn-add:hover {
    background-color: #218838;
}

.cart-btn-remove {
    background-color: #dc3545;
    color: white;
    border: none;
}

.cart-btn-remove:hover {
    background-color: #c82333;
}

/* 🌙 Dark Mode for Buttons */
.dark-mode .cart-btn-add {
    background-color: #00e676;
    color: black;
}

.dark-mode .cart-btn-add:hover {
    background-color: #00c853;
    color: white;
}

.dark-mode .cart-btn-remove {
    background-color: #ff5252;
    color: white;
}

.dark-mode .cart-btn-remove:hover {
    background-color: #ff1744;
}

/* 🌙 Dark Mode for Continue Shopping Button */
.dark-mode .btn-outline-secondary {
    border-color: white;
    color: white;
}

.dark-mode .btn-outline-secondary:hover {
    background-color: white;
    color: black;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .cart-product-img {
        max-width: 80px;
    }
    .cart-item {
        text-align: center;
    }
    .cart-summary-box {
        text-align: center;
    }
}

/* ✅ Cart Reminder Message */
#cart-reminder {
    font-size: 1rem;
    background-color: #ff9800; /* Orange */
    color: white;
    padding: 12px;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}

/* 🌙 Dark Mode */
.dark-mode #cart-reminder {
    background-color: #ffcc80; /* Lighter Orange */
    color: black;
}

</style>
{% endblock %}