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

{% block title %}Warenkorb{% endblock %}

{% block content %}
<h2>Warenkorb</h2>
{% if cart.items %}
<div class="cart-list">
    {% for item in cart.items %}
    <div class="cart-item-card">
        <img src="{{ item.product.image.url }}" alt="{{ item.product.name }}" class="cart-item-image">
        <div class="cart-item-info">
            <h3>{{ item.product.name }}</h3>
            <p class="cart-item-price">{{ item.product.price }} €</p>
            <div class="cart-item-qty">
                <form method="post" action="{% url 'products:cart_update' item.product.pk %}">
                    {% csrf_token %}
                    <input type="number" name="quantity" value="{{ item.quantity }}" min="1" class="cart-qty-input">
                    <button type="submit" class="btn furry-btn-outline">Menge ändern</button>
                </form>
                <form method="post" action="{% url 'products:cart_remove' item.product.pk %}" style="display:inline;">
                    {% csrf_token %}
                    <button type="submit" class="btn furry-btn-secondary">Entfernen</button>
                </form>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
<div class="cart-summary">
    <span>Gesamtsumme:</span>
    <span class="cart-total">{{ cart.total_price }} €</span>
    <a href="{% url 'products:checkout' %}" class="btn furry-btn">Weiter zur Kasse</a>
</div>
{% else %}
<p>Dein Warenkorb ist leer.</p>
{% endif %}

<!-- Related Products -->
{% if related_products %}
<div class="furry-card" style="margin-top: 2rem;">
    <div class="furry-card-header">
        <h2 class="furry-card-title">💡 Das könnte dir auch gefallen</h2>
        <p class="furry-card-subtitle">Weitere Fursuits in deinem Stil</p>
    </div>
    
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem;">
        {% for product in related_products %}
        <div class="furry-card furry-product-card">
            {% if product.image %}
            <img src="{{ product.image.url }}" alt="{{ product.name }}" class="furry-card-image">
            {% else %}
            <div class="furry-card-image" style="background: linear-gradient(45deg, var(--furry-primary), var(--furry-secondary)); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem;">
                🐾
            </div>
            {% endif %}
            
            <div class="furry-card-header">
                <div>
                    <h3 class="furry-card-title">{{ product.name }}</h3>
                    <p class="furry-card-subtitle">{{ product.get_fursuit_type_display }}</p>
                </div>
            </div>
            
            <div class="furry-card-content">
                <p>{{ product.description|truncatewords:10 }}</p>
                <div class="furry-product-price">{{ product.price }}€</div>
            </div>
            
            <div class="furry-card-footer">
                <a href="{% url 'products:product_detail' product.id %}" class="furry-btn furry-btn-primary furry-btn-sm">
                    👁️ Details
                </a>
                <button class="furry-btn furry-btn-outline furry-btn-sm" onclick="addToCart({{ product.id }})">
                    🛒 Hinzufügen
                </button>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<script>
function updateQuantity(itemId, change) {
    fetch(`/update-cart-item/${itemId}/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            change: change
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

function removeItem(itemId) {
    if (confirm('Möchtest du dieses Produkt wirklich aus dem Warenkorb entfernen?')) {
        fetch(`/remove-cart-item/${itemId}/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
    }
}

function clearCart() {
    if (confirm('Möchtest du wirklich den gesamten Warenkorb leeren?')) {
        fetch('/clear-cart/', {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
    }
}

function addToCart(productId) {
    fetch(`/add-to-cart/${productId}/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const alert = document.createElement('div');
            alert.className = 'furry-alert furry-alert-success';
            alert.innerHTML = `
                <div class="furry-alert-icon">✅</div>
                <div class="furry-alert-content">
                    <div class="furry-alert-title">Erfolg</div>
                    <div class="furry-alert-message">Produkt wurde zum Warenkorb hinzugefügt!</div>
                </div>
            `;
            document.querySelector('main').insertBefore(alert, document.querySelector('main').firstChild);
            setTimeout(() => alert.remove(), 3000);
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}
</script>
{% endblock %}