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

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

{% block extra_css %}
<style>
.quantity-input {
    width: 80px;
}

.product-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.cart-item {
    transition: all 0.3s ease;
}

.cart-item:hover {
    background-color: var(--light-bg);
    border-radius: 15px;
}

.remove-item {
    transition: transform 0.2s ease;
}

.remove-item:hover {
    transform: scale(1.1);
}

.quantity-controls {
    display: flex;
    align-items: center;
}

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

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

.quantity-display {
    font-weight: bold;
    min-width: 30px;
    text-align: center;
}

.cart-summary {
    background: linear-gradient(135deg, var(--light-bg), #f8f9fa);
}

.empty-cart {
    padding: 3rem;
}

.empty-cart i {
    opacity: 0.5;
}

.security-badges {
    margin-bottom: 0.5rem;
}

.security-badges i {
    font-size: 1.5rem;
}

@media (max-width: 768px) {
    .cart-item .row {
        text-align: center;
    }
    
    .quantity-controls {
        justify-content: center;
        margin-bottom: 1rem;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="content-container">
    <div class="row">
        <!-- Cart Items -->
        <div class="col-lg-8 mb-4">
            <div class="furry-card">
                <div class="card-header bg-transparent border-0">
                    <h2 class="h3 mb-0">
                        <i class="fas fa-shopping-cart me-2"></i>
                        {% trans "Shopping Cart" %}
                    </h2>
                </div>
                
                {% if cart_items %}
                    {% for item in cart_items %}
                    <div class="cart-item {% if not forloop.last %}border-bottom{% endif %} py-4">
                        <div class="row align-items-center">
                            <!-- Product Image -->
                            <div class="col-md-3 mb-3 mb-md-0">
                                <img data-src="{{ item.product.image.url }}" 
                                     alt="{{ item.product.name }}"
                                     class="img-fluid rounded-3 furry-lazy-image"
                                     style="width: 100%; height: 150px; object-fit: cover;">
                            </div>
                            
                            <!-- Product Details -->
                            <div class="col-md-6 mb-3 mb-md-0">
                                <h5 class="mb-2">{{ item.product.name }}</h5>
                                <p class="text-muted mb-2">{{ item.product.description|truncatewords:15 }}</p>
                                
                                <!-- Product Type Badge -->
                                {% if item.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 item.product.is_custom_order %}
                                    <span class="badge bg-info">
                                        <i class="fas fa-magic me-1"></i> Custom Order
                                    </span>
                                {% endif %}
                            </div>
                            
                            <!-- Quantity Controls -->
                            <div class="col-md-3">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="quantity-controls">
                                        <button class="btn btn-sm btn-outline-secondary quantity-btn"
                                                onclick="updateQuantity({{ item.id }}, -1)"
                                                {% if item.quantity <= 1 %}disabled{% endif %}>
                                            <i class="fas fa-minus"></i>
                                        </button>
                                        <span class="quantity-display mx-3">{{ item.quantity }}</span>
                                        <button class="btn btn-sm btn-outline-secondary quantity-btn"
                                                onclick="updateQuantity({{ item.id }}, 1)">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </div>
                                    
                                    <!-- Price -->
                                    <div class="text-end">
                                        <div class="h6 mb-1">
                                            {% if item.product.on_sale %}
                                                <span class="text-danger">{{ item.product.sale_price }} €</span>
                                                <small class="text-muted text-decoration-line-through">{{ item.product.base_price }} €</small>
                                            {% else %}
                                                {{ item.product.base_price }} €
                                            {% endif %}
                                        </div>
                                        <div class="text-muted">
                                            <small>Total: {{ item.total_price }} €</small>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Remove Button -->
                                <div class="mt-3 text-end">
                                    <button class="btn btn-sm btn-outline-danger"
                                            onclick="removeFromCart({{ item.id }})">
                                        <i class="fas fa-trash me-1"></i> {% trans "Remove" %}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                    
                    <!-- Cart Summary -->
                    <div class="cart-summary p-4 bg-light rounded-3">
                        <div class="row">
                            <div class="col-md-6">
                                <h6>{% trans "Cart Summary" %}</h6>
                                <div class="d-flex justify-content-between mb-2">
                                    <span>{% trans "Subtotal" %}:</span>
                                    <span>{{ cart_subtotal }} €</span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span>{% trans "Shipping" %}:</span>
                                    <span>{{ shipping_cost }} €</span>
                                </div>
                                {% if discount_amount %}
                                <div class="d-flex justify-content-between mb-2 text-success">
                                    <span>{% trans "Discount" %}:</span>
                                    <span>-{{ discount_amount }} €</span>
                                </div>
                                {% endif %}
                                <hr>
                                <div class="d-flex justify-content-between fw-bold">
                                    <span>{% trans "Total" %}:</span>
                                    <span class="h5 mb-0">{{ cart_total }} €</span>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <h6>{% trans "Shipping Options" %}</h6>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="shipping" id="standard" value="standard" checked>
                                    <label class="form-check-label" for="standard">
                                        {% trans "Standard Shipping" %} (3-5 days) - 5.99 €
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="shipping" id="express" value="express">
                                    <label class="form-check-label" for="express">
                                        {% trans "Express Shipping" %} (1-2 days) - 12.99 €
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="shipping" id="pickup" value="pickup">
                                    <label class="form-check-label" for="pickup">
                                        {% trans "Local Pickup" %} - Free
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                {% else %}
                    <!-- Empty Cart -->
                    <div class="text-center py-5">
                        <div class="empty-cart">
                            <i class="fas fa-shopping-cart fa-4x text-muted mb-4"></i>
                            <h3>{% trans "Your cart is empty" %}</h3>
                            <p class="text-muted mb-4">{% trans "Looks like you haven't added any items to your cart yet." %}</p>
                            <a href="{% url 'products:product_list' %}" class="btn btn-primary btn-lg">
                                <i class="fas fa-store me-2"></i> {% trans "Continue Shopping" %}
                            </a>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
        
        <!-- Checkout Sidebar -->
        <div class="col-lg-4">
            {% if cart_items %}
                <div class="furry-card sticky-top" style="top: 100px;">
                    <div class="card-body">
                        <h5 class="mb-4">{% trans "Order Summary" %}</h5>
                        
                        <!-- Order Items Preview -->
                        <div class="order-items mb-4">
                            {% for item in cart_items|slice:":3" %}
                            <div class="d-flex align-items-center mb-2">
                                <img data-src="{{ item.product.image.url }}" 
                                     alt="{{ item.product.name }}"
                                     class="rounded furry-lazy-image me-3"
                                     style="width: 50px; height: 50px; object-fit: cover;">
                                <div class="flex-grow-1">
                                    <div class="fw-bold">{{ item.product.name }}</div>
                                    <small class="text-muted">Qty: {{ item.quantity }}</small>
                                </div>
                                <div class="text-end">
                                    <div class="fw-bold">{{ item.total_price }} €</div>
                                </div>
                            </div>
                            {% endfor %}
                            
                            {% if cart_items|length > 3 %}
                            <div class="text-center">
                                <small class="text-muted">+{{ cart_items|length|add:"-3" }} more items</small>
                            </div>
                            {% endif %}
                        </div>
                        
                        <!-- Total -->
                        <div class="border-top pt-3 mb-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="h5 mb-0">{% trans "Total" %}</span>
                                <span class="h4 mb-0 text-primary">{{ cart_total }} €</span>
                            </div>
                        </div>
                        
                        <!-- Checkout Buttons -->
                        <div class="d-grid gap-2">
                            <a href="{% url 'shop:checkout' %}" class="btn btn-primary btn-lg">
                                <i class="fas fa-credit-card me-2"></i> {% trans "Proceed to Checkout" %}
                            </a>
                            <a href="{% url 'products:product_list' %}" class="btn btn-outline-primary">
                                <i class="fas fa-arrow-left me-2"></i> {% trans "Continue Shopping" %}
                            </a>
                        </div>
                        
                        <!-- Security Info -->
                        <div class="mt-4 text-center">
                            <div class="security-badges">
                                <i class="fas fa-shield-alt text-success me-2"></i>
                                <i class="fas fa-lock text-success me-2"></i>
                                <i class="fas fa-credit-card text-success me-2"></i>
                            </div>
                            <small class="text-muted">{% trans "Secure checkout with SSL encryption" %}</small>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
    
    <!-- Related Products -->
    {% if related_products %}
    <div class="mt-5">
        <h3 class="mb-4">{% trans "You might also like" %}</h3>
        <div class="row g-4">
            {% for product in related_products %}
            <div class="col-md-3">
                <div class="furry-card h-100">
                    <div class="position-relative">
                        <img data-src="{{ product.image.url }}" 
                             alt="{{ product.name }}"
                             class="img-fluid rounded-3 furry-lazy-image"
                             style="width: 100%; height: 200px; object-fit: cover;">
                        {% if 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">{{ product.name }}</h5>
                        <p class="card-text text-muted">{{ product.description|truncatewords:10 }}</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="h6 mb-0">
                                {% if product.on_sale %}
                                    <span class="text-danger">{{ product.sale_price }} €</span>
                                    <small class="text-muted text-decoration-line-through">{{ product.base_price }} €</small>
                                {% else %}
                                    {{ product.base_price }} €
                                {% endif %}
                            </span>
                            <button class="btn btn-sm btn-outline-primary"
                                    onclick="addToCart({{ product.id }})">
                                <i class="fas fa-cart-plus"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>

<!-- Toast Notifications -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="cartToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <i class="fas fa-shopping-cart me-2"></i>
            <strong class="me-auto">Warenkorb</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body" id="cartToastMessage">
            Warenkorb wurde aktualisiert!
        </div>
    </div>
</div>

<script>
function showToast(message) {
    const toast = new bootstrap.Toast(document.getElementById('cartToast'));
    document.getElementById('cartToastMessage').textContent = message;
    toast.show();
}

function updateQuantity(itemId, change) {
    fetch('/cart/update/', {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            item_id: itemId,
            change: change
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Seite neu laden für aktualisierte Preise
            window.location.reload();
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

function removeFromCart(itemId) {
    if (confirm('{% trans "Are you sure you want to remove this item from your cart?" %}')) {
        fetch('/cart/remove/', {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                item_id: itemId
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Animation und Reload
                const cartItem = event.target.closest('.cart-item');
                cartItem.style.transform = 'translateX(-100%)';
                cartItem.style.opacity = '0';
                
                setTimeout(() => {
                    window.location.reload();
                }, 300);
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
    }
}

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');
            // Cart-Counter aktualisieren
            updateCartCounter(data.cart_count);
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}
</script>
{% endblock %}