{% extends 'main/header.html' %}
{% load static %}

{% block content %}
<div class="main-content">
    <main class="content-area">
        <div class="page-header">
            <h1 class="lists-main-title">Твоите Омилени</h1>
            <div class="header-decoration"></div>
            <p class="page-subtitle">Твоите омилени производи, на едно место.</p>
        </div>

        <div class="lists-grid">
            {% for favorite in favorites %}
            <div class="product-card">
                <a href="{% url 'product_detail' favorite.product.id %}" class="product-card-link">
                    <div class="product-image-container">
                        {% if favorite.product.image_url %}
                            <img src="{{ favorite.product.image_url }}" alt="{{ favorite.product.name }}" class="product-image" loading="lazy">
                        {% else %}
                            <div class="no-image-placeholder">
                                <i class="fas fa-image"></i>
                            </div>
                        {% endif %}
                        <button class="favorite-btn" onclick="event.preventDefault(); toggleFavorite(this, {{ favorite.product.id }});">
                            <i class="fas fa-heart"></i>
                        </button>
                        {% if favorite.product.popust %}
                        <div class="discount-badge">Попуст!</div>
                        {% endif %}
                    </div>
                    <div class="product-info">
                        <h3 class="product-name">{{ favorite.product.name }}</h3>
                        <div class="product-price">
                            {% if favorite.product.popust %}
                                <span class="original-price">{{ favorite.product.price }} ден.</span>
                                <span class="discounted-price">{{ favorite.product.actual_price }} ден.</span>
                            {% else %}
                                <span class="regular-price">{{ favorite.product.price }} ден.</span>
                            {% endif %}
                        </div>
                        <div class="product-store">
                            {% if favorite.product.store == 'Vero' %}
                                <img src="{% static 'images/vero_logo1.png' %}" alt="Vero" class="store-logo">
                            {% elif favorite.product.store == 'Ramstore' %}
                                <img src="{% static 'images/ramstore_logo.png' %}" alt="Ramstore" class="store-logo">
                            {% elif favorite.product.store == 'Reptil' %}
                                <img src="{% static 'images/reptil_logo.jpg' %}" alt="Reptil" class="store-logo">
                            {% elif favorite.product.store == 'Zito' %}
                                <img src="{% static 'images/zito_logo.png' %}" alt="Zito" class="store-logo">
                            {% endif %}
                        </div>
                    </div>
                </a>
            </div>
            {% empty %}
            <div class="empty-lists-message">
                <div class="empty-icon">
                    <i class="fas fa-heart-broken"></i>
                </div>
                <h3>Сеуште немаш омилени продукти</h3>
                <p>Додади продукти во твојата листа на омилени за да ги имаш секогаш при рака</p>
                <a href="{% url 'product_list' %}" class="action-button">Пребарај продукти</a>
            </div>
            {% endfor %}
        </div>
    </main>
</div>

<script>
function toggleFavorite(button, productId) {
    const icon = button.querySelector('i');
    const productCard = button.closest('.product-card');

    fetch('/toggle-favorite/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': '{{ csrf_token }}'
        },
        body: JSON.stringify({
            product_id: productId
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            if (data.is_favorite) {
                // Animation when adding to favorites
                icon.classList.add('active');
                button.classList.add('pulse');
                setTimeout(() => button.classList.remove('pulse'), 600);
            } else {
                // Animation when removing from favorites
                productCard.classList.add('fade-out');
                setTimeout(() => {
                    productCard.remove();
                    // If last item, show empty state
                    if (document.querySelectorAll('.product-card').length === 0) {
                        document.querySelector('.lists-grid').innerHTML = `
                            <div class="empty-lists-message">
                                <div class="empty-icon">
                                    <i class="fas fa-heart-broken"></i>
                                </div>
                                <h3>Сеуште немаш омилени продукти</h3>
                                <p>Додади продукти во твојата листа на омилени за да ги имаш секогаш при рака</p>
                                <a href="{% url 'product_list' %}" class="action-button">Пребарај продукти</a>
                            </div>
                        `;
                    }
                }, 300);
            }
        }
    });
}
</script>

<style>
    /* Common Styles */
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        {#background-color: #f5f5f5;#}
        background-color: rgba(46,101,46,0.85);
    }

    /* Main Content */
    .main-content {
        max-width: 1200px;
        margin: 20px auto;
        padding: 0 15px;
        flex-grow: 1;
    }

    .content-area {
        background-color: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .page-header {
        text-align: center;
        margin-bottom: 20px;
    }

    .lists-main-title {
        font-size: 1.5rem;
        font-weight: 600;
        color: #2e652e;
        margin-bottom: 10px;
    }

    .page-subtitle {
        color: #666;
        font-size: 1rem;
        margin-top: 5px;
    }

    .header-decoration {
        height: 4px;
        width: 80px;
        background: linear-gradient(to right, #2e652e, #4caf50);
        margin: 10px auto;
        border-radius: 2px;
    }

    .lists-grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 20px;
    }

    .product-card {
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
    }

    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .product-card-link {
        text-decoration: none;
        color: inherit;
        display: block;
        height: 100%;
    }

    .product-image-container {
        height: 200px;
        background-color: #f9f9f9;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

    .product-image {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .no-image-placeholder {
        color: #ddd;
        font-size: 3rem;
    }

    .favorite-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(255, 255, 255, 0.9);
        border: none;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 2;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
    }

    .favorite-btn:hover {
        background: white;
        transform: scale(1.1);
    }

    .favorite-btn i {
        color: #e74c3c;
        font-size: 18px;
        transition: all 0.3s ease;
    }

    .favorite-btn i.active {
        color: #e74c3c;
    }

    .discount-badge {
        position: absolute;
        top: 10px;
        left: 10px;
        background-color: #e74c3c;
        color: white;
        padding: 3px 8px;
        border-radius: 3px;
        font-size: 0.8rem;
        font-weight: bold;
    }

    .product-info {
        padding: 15px;
    }

    .product-name {
        font-weight: 500;
        margin: 0 0 10px 0;
        color: #333;
        font-size: 0.95rem;
        line-height: 1.4;
        height: 2.8em;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .product-price {
        margin: 15px 0;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .regular-price, .discounted-price {
        font-size: 1.1rem;
        color: #2e652e;
        font-weight: bold;
    }

    .original-price {
        font-size: 0.9rem;
        color: #666;
        text-decoration: line-through;
    }

    .product-store {
        margin-top: 15px;
    }

    .store-logo {
        height: 35px;
        max-width: 100%;
        object-fit: contain;
    }

    .empty-lists-message {
        grid-column: 1 / -1;
        text-align: center;
        padding: 40px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .empty-icon {
        font-size: 2.5rem;
        margin-bottom: 15px;
        color: #e74c3c;
    }

    .empty-lists-message h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
        color: #2e652e;
    }

    .empty-lists-message p {
        font-size: 0.9rem;
        color: #666;
        margin-bottom: 20px;
    }

    .action-button {
        padding: 10px 25px;
        font-size: 1rem;
        background-color: #2e652e;
        color: white;
        border: none;
        border-radius: 30px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
    }

    .action-button:hover {
        background-color: #1f3f1f;
        transform: translateY(-2px);
    }

    /* Animations */
    @keyframes pulseHeart {
        0% { transform: scale(1); }
        50% { transform: scale(1.3); }
        100% { transform: scale(1); }
    }

    @keyframes fadeOut {
        from { opacity: 1; transform: scale(1); }
        to { opacity: 0; transform: scale(0.95); }
    }

    .pulse {
        animation: pulseHeart 0.6s ease;
    }

    .fade-out {
        animation: fadeOut 0.3s ease forwards;
    }

    /* Responsiveness */
    @media (max-width: 1024px) {
        .lists-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (max-width: 768px) {
        .content-area {
            padding: 15px;
            border-radius: 15px;
        }

        .lists-main-title {
            font-size: 1.2rem;
        }

        .lists-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .product-card {
            border-radius: 15px;
        }

        .product-image-container {
            height: 180px;
        }

        .action-button {
            width: 100%;
            justify-content: center;
            padding: 12px;
            border-radius: 25px;
        }

        .empty-lists-message {
            padding: 30px 20px;
        }
    }

    @media (max-width: 480px) {
        .lists-main-title {
            font-size: 1rem;
        }

        .lists-grid {
            grid-template-columns: 1fr;
        }

        .empty-icon {
            font-size: 2rem;
        }

        .empty-lists-message h3 {
            font-size: 1rem;
        }

        .empty-lists-message p {
            font-size: 0.8rem;
        }
    }
</style>
{% endblock %}