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

{% block title %}{{ product.name }} - Fursuit Shop{% endblock %}

{% block content %}
<div class="content-container">
    <div class="row">
        <!-- Produkt-Bilder -->
        <div class="col-lg-6 mb-4">
            <div class="furry-card">
                <!-- Hauptbild -->
                <div class="position-relative mb-4">
                    <img data-src="{{ product.image.url }}" 
                         alt="{{ product.name }}" 
                         class="img-fluid rounded-3 furry-lazy-image"
                         id="mainImage"
                         style="width: 100%; height: 500px; object-fit: cover;">
                    
                    {% if product.on_sale %}
                    <div class="position-absolute top-0 start-0 m-3 badge bg-danger p-2">
                        <i class="fas fa-tag me-1"></i> Sale!
                    </div>
                    {% endif %}
                </div>
                
                <!-- Thumbnail-Galerie -->
                {% if product.gallery.all %}
                <div class="row g-2">
                    <div class="col-3">
                        <img data-src="{{ product.image.url }}" 
                             alt="Hauptbild"
                             class="img-fluid rounded-3 thumbnail active furry-lazy-image"
                             onclick="changeMainImage(this.src)"
                             style="cursor: pointer; height: 100px; object-fit: cover;">
                    </div>
                    {% for image in product.gallery.all %}
                    <div class="col-3">
                        <img data-src="{{ image.image.url }}" 
                             alt="{{ image.alt_text }}"
                             class="img-fluid rounded-3 thumbnail furry-lazy-image"
                             onclick="changeMainImage(this.src)"
                             style="cursor: pointer; height: 100px; object-fit: cover;">
                    </div>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
        </div>
        
        <!-- Produkt-Informationen -->
        <div class="col-lg-6">
            <div class="furry-card h-100">
                <div class="card-body">
                    <h1 class="h2 mb-3">{{ product.name }}</h1>
                    
                    <!-- Preis -->
                    <div class="mb-4">
                        {% if product.on_sale %}
                            <div class="d-flex align-items-center gap-3">
                                <span class="h3 text-danger mb-0">{{ product.sale_price }} €</span>
                                <span class="text-muted text-decoration-line-through">{{ product.base_price }} €</span>
                                <span class="badge bg-danger">-{{ product.discount_percentage }}%</span>
                            </div>
                        {% else %}
                            <span class="h3 text-primary mb-0">{{ product.base_price }} €</span>
                        {% endif %}
                    </div>
                    
                    <!-- Produkt-Typ Badges -->
                    <div class="mb-4">
                        {% 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.is_custom_order %}
                            <span class="badge bg-info">
                                <i class="fas fa-magic me-1"></i> Custom Order
                            </span>
                        {% endif %}
                    </div>
                    
                    <!-- Beschreibung -->
                    <div class="mb-4">
                        <h5>Beschreibung</h5>
                        <p class="text-muted">{{ product.description }}</p>
                    </div>
                    
                    <!-- Verfügbarkeit -->
                    <div class="mb-4">
                        {% if product.stock > 0 %}
                            <div class="d-flex align-items-center text-success">
                                <i class="fas fa-check-circle me-2"></i>
                                <span>Verfügbar ({{ product.stock }} auf Lager)</span>
                            </div>
                        {% else %}
                            <div class="d-flex align-items-center text-danger">
                                <i class="fas fa-times-circle me-2"></i>
                                <span>Nicht verfügbar</span>
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- Aktionen -->
                    <div class="d-grid gap-2">
                        {% if product.stock > 0 %}
                            <button class="btn btn-primary btn-lg add-to-cart-btn"
                                    data-product-id="{{ product.id }}"
                                    onclick="addToCart({{ product.id }})">
                                <i class="fas fa-shopping-cart me-2"></i>
                                In den Warenkorb
                            </button>
                        {% else %}
                            <button class="btn btn-secondary btn-lg" disabled>
                                <i class="fas fa-times me-2"></i>
                                Nicht verfügbar
                            </button>
                        {% endif %}
                        
                        <div class="d-flex gap-2">
                            <button class="btn btn-outline-primary flex-fill"
                                    onclick="addToWishlist({{ product.id }})">
                                <i class="fas fa-heart me-2"></i>
                                Zur Wunschliste
                            </button>
                            <button class="btn btn-outline-info flex-fill"
                                    onclick="shareProduct()">
                                <i class="fas fa-share me-2"></i>
                                Teilen
                            </button>
                        </div>
                    </div>
                    
                    <!-- Zusätzliche Informationen -->
                    <div class="mt-4">
                        <div class="row text-center">
                            <div class="col-4">
                                <div class="info-item">
                                    <i class="fas fa-shipping-fast fa-2x text-primary mb-2"></i>
                                    <div class="info-label">Schneller Versand</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="info-item">
                                    <i class="fas fa-shield-alt fa-2x text-success mb-2"></i>
                                    <div class="info-label">Sichere Zahlung</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="info-item">
                                    <i class="fas fa-undo fa-2x text-info mb-2"></i>
                                    <div class="info-label">30 Tage Rückgabe</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Ähnliche Produkte -->
    {% if similar_products %}
    <div class="mt-5">
        <h3 class="mb-4">Ähnliche Produkte</h3>
        <div class="row g-4">
            {% for similar_product in similar_products %}
            <div class="col-md-3">
                <div class="furry-card h-100">
                    <div class="position-relative">
                        <img data-src="{{ similar_product.image.url }}" 
                             alt="{{ similar_product.name }}"
                             class="img-fluid rounded-3 furry-lazy-image"
                             style="width: 100%; height: 200px; object-fit: cover;">
                        {% if similar_product.on_sale %}
                        <div class="position-absolute top-0 start-0 m-2 badge bg-danger">
                            Sale!
                        </div>
                        {% endif %}
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">{{ similar_product.name }}</h5>
                        <p class="card-text text-muted">{{ similar_product.description|truncatewords:10 }}</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="h6 mb-0">
                                {% if similar_product.on_sale %}
                                    <span class="text-danger">{{ similar_product.sale_price }} €</span>
                                    <small class="text-muted text-decoration-line-through">{{ similar_product.base_price }} €</small>
                                {% else %}
                                    {{ similar_product.base_price }} €
                                {% endif %}
                            </span>
                            <button class="btn btn-sm btn-outline-primary"
                                    onclick="addToCart({{ similar_product.id }})">
                                <i class="fas fa-cart-plus"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>

<style>
.thumbnail {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.thumbnail:hover {
    transform: scale(1.05);
    border-color: var(--primary-color);
}

.thumbnail.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-color);
}

.info-item {
    padding: 1rem;
    border-radius: 15px;
    background: var(--light-bg);
    transition: transform 0.3s ease;
}

.info-item:hover {
    transform: translateY(-2px);
}

.info-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
}

.add-to-cart-btn {
    transition: all 0.3s ease;
}

.add-to-cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
}

@media (max-width: 768px) {
    #mainImage {
        height: 300px !important;
    }
    
    .thumbnail {
        height: 80px !important;
    }
}
</style>

<script>
function changeMainImage(src) {
    const mainImage = document.getElementById('mainImage');
    mainImage.src = src;
    
    // Thumbnail-Aktivität aktualisieren
    document.querySelectorAll('.thumbnail').forEach(thumb => {
        thumb.classList.remove('active');
    });
    event.target.classList.add('active');
}

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) {
            // Animation
            const btn = event.target.closest('.add-to-cart-btn');
            btn.innerHTML = '<i class="fas fa-check me-2"></i>Hinzugefügt!';
            btn.classList.add('btn-success');
            
            setTimeout(() => {
                btn.innerHTML = '<i class="fas fa-shopping-cart me-2"></i>In den Warenkorb';
                btn.classList.remove('btn-success');
            }, 2000);
            
            // Cart-Counter aktualisieren
            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 shareProduct() {
    if (navigator.share) {
        navigator.share({
            title: '{{ product.name }}',
            text: '{{ product.description|truncatewords:20 }}',
            url: window.location.href
        });
    } else {
        // Fallback: URL kopieren
        navigator.clipboard.writeText(window.location.href);
        showNotification('Link kopiert!', 'info');
    }
}
</script>
{% endblock %}