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

{% block title %}Inicio - Perfúmance{% endblock %}

{% block content %}

<!-- ============================= -->
<!-- HERO PRINCIPAL SIMPLE -->
<!-- ============================= -->
<section class="hero-section">
    <div class="hero-overlay"></div>
</section>

<!-- ============================= -->
<!-- RECOMENDACIONES -->
<!-- ============================= -->
<section class="seccion recomendaciones">
    <h2 class="seccion-titulo">✨ Recomendaciones para Ti</h2>
    
    {% if productos %}
    <div class="productos-grid">
        {% for producto in productos %}
        <div class="producto-card">
            <div class="producto-imagen">
                <img src="{{ producto.imagen_url }}" alt="{{ producto.marca }}" onerror="this.src='/static/img/perfume_default.jpg'">
            </div>
            <div class="producto-info">
                <h3 class="producto-marca">{{ producto.marca }}</h3>
                <p class="producto-detalles">{{ producto.presentacion }} - {{ producto.talla }}</p>
                <p class="producto-precio">${{ producto.precio }}</p>
                <div class="producto-acciones">
                    <a href="{% url 'catalogo:detalle_perfume' producto.id %}" class="btn-detalles">
                        Ver Detalles
                    </a>
                    <button class="btn-carrito" onclick="abrirCarrito({{ producto.id }})">
                        🛒 Agregar
                    </button>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <p style="text-align: center; color: #999;">No hay productos disponibles en este momento.</p>
    {% endif %}
</section>

{% endblock %}

{% block extra_js %}
<script>
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

function abrirCarrito(idPerfume) {
    // Mostrar modal o formulario para seleccionar cantidad
    const cantidad = prompt('¿Cuántas unidades deseas agregar?', '1');
    
    if (cantidad === null || cantidad === '') {
        return;
    }

    agregarAlCarritoDirecto(idPerfume, parseInt(cantidad));
}

async function agregarAlCarritoDirecto(idPerfume, cantidad) {
    if (cantidad <= 0) {
        alert('Por favor ingresa una cantidad válida');
        return;
    }

    try {
        const response = await fetch('/carrito/api/agregar/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken')
            },
            body: JSON.stringify({
                id_perfume: idPerfume,
                cantidad: cantidad
            })
        });

        const data = await response.json();

        if (response.ok) {
            alert(`✓ Se agregaron ${cantidad} unidad(es) al carrito`);
            actualizarContadorCarrito();
        } else {
            alert(`Error: ${data.error || 'No se pudo agregar al carrito'}`);
        }
    } catch (error) {
        console.error('Error:', error);
        alert('Error al agregar al carrito');
    }
}

function actualizarContadorCarrito() {
    fetch('/carrito/api/ver/')
        .then(r => r.json())
        .then(data => {
            const contador = document.getElementById('carrito-contador');
            if (contador) {
                contador.textContent = data.carrito.length;
            }
        })
        .catch(e => console.log('No se pudo actualizar contador'));
}
</script>
{% endblock %}