{% extends 'shop/base.html' %}
{% load static %}
{% load i18n %}

{% block title %}{% trans "Shop" %} - Fursuit Shop{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/products.css' %}">
{% endblock %}

{% block content %}
<div class="content-container">
    <!-- Header -->
    <div class="text-center mb-5">
        <h1 class="display-5 fw-bold mb-4">{% trans "Fursuit Shop" %}</h1>
        <p class="lead">{% trans "Discover our handcrafted fursuits and accessories" %}</p>
    </div>

    <!-- Filter Section -->
    <div class="furry-card mb-4" style="background: linear-gradient(135deg, var(--gradient-start), var(--gradient-middle));">
        <form method="get" class="row g-3 align-items-end">
            <div class="col-md-3">
                <label for="category" class="form-label text-white">{% trans "Category" %}</label>
                <select name="category" id="category" class="form-select border-0">
                    <option value="">{% trans "All Categories" %}</option>
                    {% for category in categories %}
                    <option value="{{ category.slug }}" {% if selected_category == category.slug %}selected{% endif %}>
                        {{ category.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="col-md-3">
                <label for="fursuit_type" class="form-label text-white">{% trans "Fursuit Type" %}</label>
                <select name="fursuit_type" id="fursuit_type" class="form-select border-0">
                    <option value="">{% trans "All Types" %}</option>
                    <option value="fullsuit" {% if selected_type == 'fullsuit' %}selected{% endif %}>
                        {% trans "Fullsuit" %}
                    </option>
                    <option value="partial" {% if selected_type == 'partial' %}selected{% endif %}>
                        {% trans "Partial Suit" %}
                    </option>
                    <option value="head_only" {% if selected_type == 'head_only' %}selected{% endif %}>
                        {% trans "Head Only" %}
                    </option>
                </select>
            </div>
            
            <div class="col-md-3">
                <label for="sort" class="form-label text-white">{% trans "Sort By" %}</label>
                <select name="sort" id="sort" class="form-select border-0">
                    <option value="newest" {% if sort == 'newest' %}selected{% endif %}>
                        {% trans "Newest First" %}
                    </option>
                    <option value="price_low" {% if sort == 'price_low' %}selected{% endif %}>
                        {% trans "Price: Low to High" %}
                    </option>
                    <option value="price_high" {% if sort == 'price_high' %}selected{% endif %}>
                        {% trans "Price: High to Low" %}
                    </option>
                    <option value="name" {% if sort == 'name' %}selected{% endif %}>
                        {% trans "Name A-Z" %}
                    </option>
                </select>
            </div>
            
            <div class="col-md-3">
                <button type="submit" class="btn btn-light w-100">
                    <i class="fas fa-filter me-2"></i> {% trans "Apply Filters" %}
                </button>
            </div>
        </form>
    </div>

    <!-- Product Grid -->
    {% if products %}
        <div class="row g-4" id="product-grid">
            {% for product in products %}
            <div class="col-md-6 col-lg-4">
                <div class="furry-card product-card h-100">
                    <div class="position-relative">
                        <!-- Product Image -->
                        {% if product.image %}
                        <img data-src="{{ product.image.url }}" 
                             alt="{{ product.name }}"
                             class="img-fluid rounded-3 furry-lazy-image"
                             style="width: 100%; height: 250px; object-fit: cover;">
                        {% else %}
                        <img data-src="{% static 'images/placeholder.png' %}" 
                             alt="Placeholder"
                             class="img-fluid rounded-3 furry-lazy-image"
                             style="width: 100%; height: 250px; object-fit: cover;">
                        {% endif %}
                        
                        <!-- Badges -->
                        <div class="position-absolute top-0 start-0 m-3">
                            {% if product.on_sale %}
                            <span class="badge bg-danger">
                                <i class="fas fa-tag me-1"></i> Sale!
                            </span>
                            {% endif %}
                            
                            {% if product.is_custom_order %}
                            <span class="badge bg-info ms-1">
                                <i class="fas fa-magic me-1"></i> Custom
                            </span>
                            {% endif %}
                        </div>
                        
                        <!-- Quick Actions Overlay -->
                        <div class="product-overlay">
                            <div class="overlay-actions">
                                <button class="btn btn-light btn-sm" onclick="quickView({{ product.id }})">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="btn btn-primary btn-sm" onclick="addToCart({{ product.id }})">
                                    <i class="fas fa-cart-plus"></i>
                                </button>
                                <button class="btn btn-outline-danger btn-sm" onclick="addToWishlist({{ product.id }})">
                                    <i class="fas fa-heart"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card-body">
                        <h5 class="card-title">{{ product.name }}</h5>
                        <p class="card-text text-muted">{{ product.description|truncatewords:15 }}</p>
                        
                        <!-- Product Type Badge -->
                        <div class="mb-3">
                            {% if product.product_type == 'fursuit' %}
                                <span class="badge bg-primary me-2">
                                    <i class="fas fa-paw me-1"></i> Fursuit
                                </span>
                            {% else %}
                                <span class="badge bg-success me-2">
                                    <i class="fas fa-print me-1"></i> Printed Item
                                </span>
                            {% endif %}
                            
                            {% if product.fursuit_type %}
                                <span class="badge bg-info">
                                    {{ product.get_fursuit_type_display }}
                                </span>
                            {% endif %}
                        </div>
                        
                        <!-- Price -->
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                {% if product.on_sale %}
                                    <span class="h5 text-danger mb-0">{{ product.sale_price }} €</span>
                                    <small class="text-muted text-decoration-line-through">{{ product.base_price }} €</small>
                                {% else %}
                                    <span class="h5 text-primary mb-0">{{ product.base_price }} €</span>
                                {% endif %}
                            </div>
                            
                            <div class="product-actions">
                                <button class="btn btn-sm btn-outline-primary"
                                        onclick="addToCart({{ product.id }})">
                                    <i class="fas fa-cart-plus me-1"></i> {% trans "Add to Cart" %}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        
        <!-- Pagination -->
        {% if products.has_other_pages %}
            <nav aria-label="Product pagination" class="mt-5">
                <ul class="pagination justify-content-center">
                    {% if products.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ products.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                                <i class="fas fa-chevron-left"></i>
                            </a>
                        </li>
                    {% endif %}
                    
                    {% for num in products.paginator.page_range %}
                        {% if products.number == num %}
                            <li class="page-item active">
                                <span class="page-link">{{ num }}</span>
                            </li>
                        {% elif num > products.number|add:'-3' and num < products.number|add:'3' %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">{{ num }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}
                    
                    {% if products.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ products.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                                <i class="fas fa-chevron-right"></i>
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </nav>
        {% endif %}
    {% else %}
        <!-- Empty State -->
        <div class="text-center py-5">
            <div class="empty-state">
                <i class="fas fa-store fa-4x text-muted mb-4"></i>
                <h3>{% trans "No products found" %}</h3>
                <p class="text-muted">{% trans "Try adjusting your filters or check back later for new products." %}</p>
                <a href="{% url 'products:product_list' %}" class="btn btn-primary">
                    <i class="fas fa-refresh me-2"></i> {% trans "Clear Filters" %}
                </a>
            </div>
        </div>
    {% endif %}
</div>

<!-- Quick View Modal -->
<div class="modal fade" id="quickViewModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 rounded-4">
            <div class="modal-header border-0">
                <h5 class="modal-title">{% trans "Quick View" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="quickViewContent">
                <!-- Content will be loaded here -->
            </div>
        </div>
    </div>
</div>

<style>
.product-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(139, 92, 246, 0.2);
}

.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 15px 15px 0 0;
}

.product-card:hover .product-overlay {
    opacity: 1;
}

.overlay-actions {
    display: flex;
    gap: 0.5rem;
}

.overlay-actions .btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.overlay-actions .btn:hover {
    transform: scale(1.1);
}

.product-actions {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-card:hover .product-actions {
    opacity: 1;
}

.empty-state {
    padding: 3rem;
}

.empty-state i {
    opacity: 0.5;
}

@media (max-width: 768px) {
    .product-card img {
        height: 200px !important;
    }
    
    .product-overlay {
        opacity: 1;
        background: rgba(0, 0, 0, 0.3);
    }
}
</style>

<script>
function addToCart(productId) {
    fetch('/cart/add/', {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            product_id: productId,
            quantity: 1
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showNotification('Produkt zum Warenkorb hinzugefügt!', 'success');
            updateCartCounter(data.cart_count);
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

function addToWishlist(productId) {
    fetch('/wishlist/add/', {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            product_id: productId
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showNotification('Zur Wunschliste hinzugefügt!', 'success');
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

function quickView(productId) {
    fetch(`/products/${productId}/quick-view/`, {
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.text())
    .then(html => {
        document.getElementById('quickViewContent').innerHTML = html;
        new bootstrap.Modal(document.getElementById('quickViewModal')).show();
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

// Filter-Handling mit AJAX
document.addEventListener('DOMContentLoaded', function() {
    const filterForm = document.querySelector('form');
    const filterSelects = document.querySelectorAll('select');
    
    filterSelects.forEach(select => {
        select.addEventListener('change', function() {
            const formData = new FormData(filterForm);
            const params = new URLSearchParams(formData);
            
            // URL aktualisieren ohne Reload
            const newUrl = `${window.location.pathname}?${params.toString()}`;
            window.history.pushState({}, '', newUrl);
            
            // AJAX Request für neue Ergebnisse
            fetch(`${window.location.pathname}?${params.toString()}`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.text())
            .then(html => {
                // Nur den Product-Grid aktualisieren
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                const newGrid = doc.querySelector('#product-grid');
                const currentGrid = document.querySelector('#product-grid');
                
                if (newGrid && currentGrid) {
                    currentGrid.innerHTML = newGrid.innerHTML;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                // Fallback: Seite neu laden
                window.location.reload();
            });
        });
    });
});
</script>
{% endblock %}