{% extends 'base.html' %}

{% block title %}Productos Artesanales - TallArt{% endblock %}

{% block search_bar %}
<!-- Buscador de productos -->
<div class="flex-1 max-w-md mx-4">
    <form action="{{ url_for('search.buscar') }}" method="GET" class="relative group">
        <input type="text" 
               name="q" 
               id="searchInput"
               placeholder="Buscar artesanías..." 
               class="w-full pl-10 pr-4 py-2 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition-all duration-300 bg-white hover:bg-gray-50 focus:bg-white shadow-sm hover:shadow-lg focus:shadow-xl text-sm group-hover:border-gray-300"
               autocomplete="off">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-gray-400 group-hover:text-blue-500 transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
        </div>
        <div id="searchResults" class="hidden absolute top-full mt-2 w-full bg-white rounded-xl shadow-2xl border border-gray-200 overflow-hidden animate-slide-in-up z-50 max-h-96 overflow-y-auto"></div>
    </form>
</div>
{% endblock %}

{% block extra_css %}
<style>
    body {
        background: #f5f5f5;
    }

    .productos-hero {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 60px 0 40px;
        text-align: center;
        margin-bottom: 40px;
    }

    .productos-hero h1 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .productos-hero p {
        font-size: 1.1rem;
        opacity: 0.9;
    }

    .filter-section {
        background: white;
        padding: 25px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        margin-bottom: 30px;
    }

    .filter-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .filter-tab {
        padding: 10px 24px;
        border: 2px solid #e0e0e0;
        border-radius: 20px;
        background: white;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: 600;
        color: #666;
        font-size: 0.9rem;
    }

    .filter-tab:hover {
        transform: translateY(-2px);
        border-color: #667eea;
        color: #667eea;
    }

    .filter-tab.active {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: transparent;
    }

    .productos-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 35px;
        margin: 30px 0;
        padding: 0 10px;
    }

    .producto-card {
        background: #2c3e50;
        border-radius: 16px;
        overflow: hidden;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
    }

    .producto-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.2);
    }

    .producto-badge {
        position: absolute;
        top: 12px;
        left: 12px;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        z-index: 10;
        background: #9b59b6;
        color: white;
    }

    .producto-image-container {
        width: 100%;
        height: 280px;
        background: #34495e;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
    }

    .producto-image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .producto-card:hover .producto-image-container img {
        transform: scale(1.08);
    }

    .producto-info {
        padding: 20px;
        background: #2c3e50;
    }

    .producto-nombre {
        font-size: 1.25rem;
        font-weight: 700;
        color: white;
        margin-bottom: 8px;
        line-height: 1.3;
    }

    .producto-descripcion {
        color: #95a5a6;
        font-size: 0.85rem;
        margin-bottom: 12px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .producto-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .producto-precio-container {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .producto-precio {
        font-size: 1.6rem;
        font-weight: 800;
        color: #9b59b6;
    }

    .producto-estrellas {
        display: flex;
        gap: 2px;
    }

    .producto-estrellas svg {
        width: 14px;
        height: 14px;
        fill: #f1c40f;
    }

    .producto-empresa {
        color: #95a5a6;
        font-size: 0.85rem;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .producto-empresa svg {
        width: 14px;
        height: 14px;
        fill: #95a5a6;
    }

    .producto-acciones {
        display: flex;
        gap: 8px;
    }

    .btn-action {
        width: 42px;
        height: 42px;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        color: white;
    }

    .btn-favorito {
        background: transparent;
        border: 2px solid rgba(255,255,255,0.3);
    }

    .btn-favorito:hover {
        background: #e74c3c;
        border-color: #e74c3c;
        transform: scale(1.1);
    }

    .btn-agregar {
        background: #d35400;
        font-size: 0.75rem;
        font-weight: 700;
        padding: 0 20px;
        width: auto;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .btn-agregar:hover {
        background: #e67e22;
        transform: translateY(-2px);
    }

    .producto-card:hover .hover-overlay {
        background-color: rgba(0, 0, 0, 0.6) !important;
    }

    .producto-card:hover .hover-overlay-btn {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    .btn-agregar svg {
        width: 16px;
        height: 16px;
        margin-right: 6px;
    }

    .empty-state {
        text-align: center;
        padding: 80px 20px;
        color: #999;
    }

    @media (max-width: 768px) {
        .productos-grid {
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .productos-hero h1 {
            font-size: 2rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="productos-hero">
    <div class="container">
        <h1>Productos Artesanales</h1>
        <p>Descubre obras únicas creadas con pasión y dedicación</p>
    </div>
</div>

<div class="container" style="max-width: 1400px; margin: 0 auto; padding: 0 20px;">
    <!-- Filter Section -->
    <div class="filter-section">
        <div class="filter-tabs">
            <button class="filter-tab active" data-categoria="todas" onclick="filtrarPorCategoria('todas', this)">
                Todas las Categorías
            </button>
            {% for categoria in categorias %}
            <button class="filter-tab" data-categoria="{{ categoria.CategoriaID }}" onclick="filtrarPorCategoria('{{ categoria.CategoriaID }}', this)">
                {{ categoria.Nombre }}
            </button>
            {% endfor %}
        </div>
    </div>

    <!-- Productos Grid -->
    <div id="productos-container">
        {% if productos_por_categoria %}
            {% for categoria_nombre, productos in productos_por_categoria.items() %}
            <div class="categoria-section" data-categoria="{{ productos[0].CategoriaID if productos else '' }}" data-nombre="{{ categoria_nombre }}">
                {% if productos %}
                    <div class="productos-grid">
                        {% for producto in productos %}
                        <div class="producto-card">
                            <span class="producto-badge">{{ producto.CategoriaNombre or 'Artesanía' }}</span>
                            
                            <div class="producto-image-container" style="position: relative;">
                                {% if producto.ImagenPrincipal %}
                                <img src="/static/{{ producto.ImagenPrincipal }}" 
                                     alt="{{ producto.Nombre }}"
                                     loading="lazy"
                                     onerror="this.src='{{ url_for('static', filename='graficos/Logo.png') }}'">
                                {% else %}
                                <img src="{{ url_for('static', filename='graficos/Logo.png') }}" 
                                     alt="{{ producto.Nombre }}"
                                     loading="lazy">
                                {% endif %}
                            </div>
                            
                            <div class="producto-info">
                                <h3 class="producto-nombre">{{ producto.Nombre }}</h3>
                                
                                <div class="producto-empresa">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                                        <path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z"/>
                                    </svg>
                                    {{ producto.EmpresaNombre or 'Artesano' }}
                                </div>
                                
                                <p class="producto-descripcion">{{ producto.Descripcion or 'Producto artesanal de alta calidad hecho a mano' }}</p>
                                
                                <div class="producto-footer">
                                    <div class="producto-precio-container">
                                        <div class="producto-precio">S/ {{ "%.2f"|format(producto.Precio) }}</div>
                                        <div class="producto-estrellas">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
                                        </div>
                                    </div>
                                    <div class="producto-acciones">
                                        <button class="btn-action btn-favorito" onclick="event.stopPropagation(); toggleFavorito({{ producto.ProductoID }})" title="Agregar a favoritos">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
                                                <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                                            </svg>
                                        </button>
                                        <button class="btn-action btn-agregar" onclick="event.stopPropagation(); agregarAlCarrito({{ producto.ProductoID }})" title="Agregar al carrito">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
                                                <path d="M9 5.5a.5.5 0 0 0-1 0V7H6.5a.5.5 0 0 0 0 1H8v1.5a.5.5 0 0 0 1 0V8h1.5a.5.5 0 0 0 0-1H9V5.5z"/>
                                                <path d="M.5 1a.5.5 0 0 0 0 1h1.11l.401 1.607 1.498 7.985A.5.5 0 0 0 4 12h1a2 2 0 1 0 0 4 2 2 0 0 0 0-4h7a2 2 0 1 0 0 4 2 2 0 0 0 0-4h1a.5.5 0 0 0 .491-.408l1.5-8A.5.5 0 0 0 14.5 3H2.89l-.405-1.621A.5.5 0 0 0 2 1H.5zm3.915 10L3.102 4h10.796l-1.313 7h-8.17zM6 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                                            </svg>
                                            AGREGAR
                                        </button>
                                        <button class="btn-action" style="background: #f97316;" onclick="verProducto({{ producto.ProductoID }})" title="Ver detalles">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
                                                <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                                                <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
            {% endfor %}
        {% else %}
        <div class="empty-state">
            <h3>No hay productos disponibles</h3>
            <p>Pronto agregaremos nuevos productos artesanales</p>
        </div>
        {% endif %}
    </div>
</div>

<script>
function filtrarPorCategoria(categoriaId, button) {
    // Actualizar tabs activos
    document.querySelectorAll('.filter-tab').forEach(tab => {
        tab.classList.remove('active');
    });
    button.classList.add('active');

    // Filtrar productos
    const sections = document.querySelectorAll('.categoria-section');
    if (categoriaId === 'todas') {
        sections.forEach(section => section.style.display = 'block');
    } else {
        sections.forEach(section => {
            const catId = section.dataset.categoria;
            section.style.display = catId == categoriaId ? 'block' : 'none';
        });
    }
}

function verProducto(productoId) {
    window.location.href = `/producto/${productoId}`;
}

function toggleFavorito(productoId) {
    fetch('/favoritos/toggle', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ producto_id: productoId })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const btn = event.currentTarget;
            btn.style.background = data.is_favorito ? '#e74c3c' : 'transparent';
            mostrarNotificacion(data.is_favorito ? '❤️ Agregado a favoritos' : '💔 Eliminado', 'success');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        mostrarNotificacion('❌ Error al actualizar favoritos', 'error');
    });
}

function agregarAlCarrito(productoId) {
    fetch('/carrito/agregar', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ 
            producto_id: productoId,
            cantidad: 1
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            mostrarNotificacion('✅ Producto agregado al carrito', 'success');
        } else {
            mostrarNotificacion('❌ ' + (data.message || 'Error al agregar'), 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        mostrarNotificacion('❌ Error al agregar al carrito', 'error');
    });
}

function mostrarNotificacion(mensaje, tipo) {
    const notif = document.createElement('div');
    notif.textContent = mensaje;
    notif.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: ${tipo === 'success' ? 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)' : 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'};
        color: white;
        padding: 20px 30px;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        z-index: 10000;
        animation: slideIn 0.3s ease;
        font-weight: 600;
    `;
    
    document.body.appendChild(notif);
    
    setTimeout(() => {
        notif.style.animation = 'slideOut 0.3s ease';
        setTimeout(() => notif.remove(), 300);
    }, 2000);
}

// Animaciones CSS
const style = document.createElement('style');
style.textContent = `
    @keyframes slideIn {
        from { transform: translateX(400px); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    @keyframes slideOut {
        from { transform: translateX(0); opacity: 1; }
        to { transform: translateX(400px); opacity: 0; }
    }
`;
document.head.appendChild(style);
</script>
{% endblock %}