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

{% block content %}
<div class="container my-5">
    <!-- ❤️ Wishlist Header -->
    <div class="text-center mb-5">
        <h1 class="fw-bold display-5 wishlist-header">
            <span class="text-danger"><i class="fas fa-heart"></i></span> 
            <span class="wishlist-title">My Wishlist</span>
        </h1>
        <p class="wishlist-subtext">Save your favorite products for later.</p>
    </div>

    {% if wishlist_items %}
        <div class="row g-3">
            {% for item in wishlist_items %}
            <div class="col-md-6 col-lg-4">
                <div class="card wishlist-card shadow-lg border-0">
                    <div class="row g-0 align-items-center">
                        <!-- Product Image -->
                        <div class="col-md-4">
                            <img src="{{ item.product.image.url }}" class="wishlist-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 wishlist-product-name">{{ item.product.name }}</h5>
                                <p class="wishlist-product-price">Price: <strong>${{ item.product.price }}</strong></p>

                                <!-- Action Buttons -->
                                <div class="d-flex justify-content-between">
                                    <a href="{% url 'add_to_cart' item.product.id %}" class="btn btn-sm btn-outline-success wishlist-add-btn">
                                        <i class="fas fa-cart-plus"></i> Add
                                    </a>
                                    <a href="{% url 'remove_from_wishlist' item.product.id %}" class="btn btn-sm btn-outline-danger wishlist-remove-btn">
                                        <i class="fas fa-trash-alt"></i> Remove
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- Wishlist Summary Box -->
        <div class="wishlist-summary-box mt-4 p-4 rounded-4 shadow-lg">
            <h4 class="fw-bold wishlist-summary-text">
                Total Saved Items: <span class="text-success">{{ wishlist_items|length }}</span>
            </h4>

            <div class="d-flex justify-content-end gap-3 mt-3">
                <a href="{% url 'shop' %}" class="btn btn-outline-secondary wishlist-btn shadow-sm">
                    <i class="fas fa-store"></i> Continue Shopping
                </a>
            </div>
        </div>

    {% else %}
        <div class="alert wishlist-empty-alert text-center mt-4">
            <h5 class="fw-bold wishlist-empty-text">Your wishlist is empty! 💖</h5>
            <p class="wishlist-empty-subtext">Start saving your favorite products.</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 for Dark Mode & Button Adjustments -->
<style>
/* 🌟 General Wishlist Styles */
.wishlist-header, .wishlist-title {
    color: #212529; /* Default text color for light mode */
}

.wishlist-subtext {
    color: #6c757d; /* Muted text in light mode */
}

/* 📦 Wishlist Product Image */
.wishlist-product-img {
    max-width: 100px;
    height: auto;
    border-radius: 8px;
}

/* 💖 Wishlist Summary Box */
.wishlist-summary-box {
    background-color: #f8f9fa;
    border: 2px solid green;
    text-align: right;
}

/* ✅ Buttons Adjustments */
.wishlist-add-btn {
    border: 2px solid #28a745 !important;
    color: #28a745 !important;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}

.wishlist-add-btn:hover {
    background-color: #28a745 !important;
    color: white !important;
}

.wishlist-remove-btn {
    border: 2px solid #dc3545 !important;
    color: #dc3545 !important;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}

.wishlist-remove-btn:hover {
    background-color: #dc3545 !important;
    color: white !important;
}

/* 🌟 Dark Mode Wishlist Styling */
.dark-mode .wishlist-header, 
.dark-mode .wishlist-title {
    color: #00e676; /* Green header in dark mode */
}

.dark-mode .wishlist-subtext, 
.dark-mode .wishlist-product-price {
    color: #bbb; /* Light gray text */
}

.dark-mode .wishlist-card {
    background: #2b2b2b;
    color: white;
    border: 1px solid #444;
}

.dark-mode .wishlist-summary-box {
    background: #333;
    color: white;
    border: 2px solid #00e676;
}

/* ✅ Dark Mode Add & Remove Buttons */
.dark-mode .wishlist-add-btn {
    border: 2px solid #00e676 !important;
    color: #00e676 !important;
}

.dark-mode .wishlist-add-btn:hover {
    background-color: #00e676 !important;
    color: black !important;
}

.dark-mode .wishlist-remove-btn {
    border: 2px solid #ff4444 !important;
    color: #ff4444 !important;
}

.dark-mode .wishlist-remove-btn:hover {
    background-color: #ff4444 !important;
    color: black !important;
}

/* ⚠ Empty Wishlist Alert */
.dark-mode .wishlist-empty-alert {
    background: #2b2b2b;
    color: white;
}

.dark-mode .wishlist-empty-text {
    color: #00e676;
}

.dark-mode .wishlist-empty-subtext {
    color: #bbb;
}
</style>

<!-- FontAwesome for Icons -->
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

{% endblock %}