<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Productos - SolarCityEc</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="icon" href="img/logo.ico" type="image/x-icon">
    <style>
    body {
        background: url('img/fondo.jpg') no-repeat center center fixed;
        background-size: cover;
        background-attachment: fixed;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        line-height: 1.6;
        overflow-x: hidden;
    }

    /* Header con logo */
    .header {
        position: absolute;
        top: 20px;
        left: 150px;
        z-index: 1000;
    }

    .logo-container img {
        height: 100px;
        width: auto;
        display: block;
    }

    /* Navegación */
    .navigation {
        position: absolute;
        top: 40px;
        right: 120px;
        z-index: 1000;
    }

    .nav-menu {
        display: flex;
        list-style: none;
        gap: 50px;
        margin: 0;
        padding: 0;
    }

    .nav-menu li a {
        color: #ffffff;
        text-decoration: none;
        font-weight: 600;
        font-size: 18px;
        transition: all 0.3s ease;
        padding: 12px 0;
        position: relative;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    }

    .nav-menu li a:hover {
        color: #007bff;
    }

    .nav-menu li a::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: #007bff;
        transition: width 0.3s ease;
    }

    .nav-menu li a:hover::after {
        width: 100%;
    }

    .nav-menu li a.active {
        color: #ffffff;
    }

    .nav-menu li a.active::after {
        width: 100%;
    }

    /* Hero section */
    .hero-section {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(10px);
        min-height: 20vh;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 160px;
        border-radius: 15px;
        margin-left: 20px;
        margin-right: 20px;
        padding: 40px 20px;
    }

    .hero-section h1 {
        color: #1a1a1a;
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .hero-section .lead {
        font-size: 1.5rem;
        color: #333;
        margin-bottom: 0;
    }

    /* Contenido principal */
    .main-content {
        margin-top: 30px;
    }

    .breadcrumb-section {
        background: rgba(255,255,255,0.95);
        border-radius: 15px;
        padding: 15px 20px;
        margin-bottom: 30px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        backdrop-filter: blur(10px);
    }

    .breadcrumb-item a {
        color: #007bff;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .breadcrumb-item a:hover {
        color: #0056b3;
    }

    /* Sidebar de categorías */
    .categories-sidebar {
        background: rgba(255,255,255,0.95);
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        backdrop-filter: blur(10px);
        height: fit-content;
        position: sticky;
        top: 100px;
    }

    .category-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 15px;
        margin: 5px 0;
        border-radius: 10px;
        transition: all 0.3s ease;
        cursor: pointer;
        border: 1px solid transparent;
    }

    .category-item:hover {
        background: linear-gradient(135deg, #007bff, #0056b3);
        color: white;
        transform: translateX(5px);
        box-shadow: 0 4px 12px rgba(0,123,255,0.3);
    }

    .category-item.active {
        background: linear-gradient(135deg, #007bff, #0056b3);
        color: white;
        border-color: #007bff;
    }

    .category-item i {
        margin-right: 10px;
        font-size: 1.1rem;
    }

    .category-item .arrow {
        transition: transform 0.3s ease;
    }

    .category-item:hover .arrow {
        transform: translateX(3px);
    }

    /* Controles de productos */
    .product-controls {
        background: rgba(255,255,255,0.95);
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 30px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        backdrop-filter: blur(10px);
    }

    .view-controls {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .view-btn {
        padding: 8px 12px;
        border: 2px solid #007bff;
        background: transparent;
        color: #007bff;
        border-radius: 8px;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .view-btn.active {
        background: #007bff;
        color: white;
    }

    .view-btn:hover {
        background: #007bff;
        color: white;
        transform: translateY(-2px);
    }

    /* Tarjetas de productos */
    .producto-card {
        transition: transform 0.25s cubic-bezier(.4,2,.6,1), box-shadow 0.25s cubic-bezier(.4,2,.6,1), background 0.25s;
        cursor: pointer;
        background: rgba(255,255,255,0.95);
        border-radius: 18px;
        border: none;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        overflow: hidden;
        backdrop-filter: blur(10px);
        height: 100%;
    }

    .producto-card:hover {
        transform: scale(1.05) translateY(-8px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.2), 0 5px 15px rgba(0,123,255,0.2);
        background: rgba(255,255,255,0.98);
        z-index: 2;
    }

    .producto-card:hover .card-img-top {
        transform: scale(1.1);
        transition: transform 0.3s ease;
    }

    .producto-card .card-img-top {
        transition: transform 0.3s ease;
        height: 200px;
        object-fit: cover;
    }

    .producto-card .card-body {
        padding: 20px;
    }

    .producto-card .card-title {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 10px;
        color: #3c3879;
    }

    .producto-card .card-text {
        color: #3c3879;
        font-size: 0.9rem;
        margin-bottom: 15px;
    }

    .producto-card .destacado-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(255,193,7,0.9);
        color: #333;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
    }

    /* Filtros */
    .filter-select {
        border: 2px solid #007bff;
        border-radius: 8px;
        padding: 8px 12px;
        background: white;
        transition: all 0.3s ease;
    }

    .filter-select:focus {
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
        border-color: #0056b3;
    }

    /* Estilos para el footer */
    footer.bg-dark {
        background: rgba(0,0,0,0.8) !important;
        color: #ffffff !important;
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(255,255,255,0.2);
    }

    footer h5, footer a, footer p, footer small {
        color: #ffffff !important;
    }

    footer a {
        text-decoration: none;
        transition: color 0.2s;
        color: #ffffff !important;
    }

    footer a:hover {
        color: #007bff !important;
        text-decoration: underline;
    }

    .social-links a {
        color: #ffffff !important;
        font-size: 1.5rem;
        margin-right: 0.7rem;
        transition: color 0.2s, transform 0.2s;
    }

    .social-links a:hover {
        color: #007bff !important;
        transform: scale(1.2);
    }

    footer .list-unstyled a {
        color: #ffffff !important;
    }

    footer .list-unstyled a:hover {
        color: #007bff !important;
        text-decoration: underline;
    }

    /* Loading */
    .loading {
        text-align: center;
        padding: 50px;
    }

    .spinner-border {
        width: 3rem;
        height: 3rem;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .header {
            top: 15px;
            left: 80px;
        }

        .navigation {
            top: 25px;
            right: 30px;
        }

        .logo-container img {
            height: 65px;
        }

        .nav-menu {
            flex-direction: column;
            gap: 15px;
            background: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(10px);
            padding: 20px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .nav-menu li a {
            font-size: 16px;
            padding: 8px 0;
        }

        .categories-sidebar {
            position: static;
            margin-bottom: 20px;
        }
        
        .product-controls {
            flex-direction: column;
            gap: 15px;
        }
        
        .view-controls {
            justify-content: center;
        }
    }

    @media (max-width: 480px) {
        .logo-container img {
            height: 60px;
        }
    }
    </style>
</head>
<body>
    <!-- Header con logo -->
    <header class="header">
        <div class="logo-container">
            <img src="img/logo.png" alt="SolarCityEc Logo">
        </div>
    </header>

    <!-- Navegación -->
    <nav class="navigation">
        <ul class="nav-menu">
            <li><a href="index.html">Inicio</a></li>
            <li><a href="nosotros.html">Nosotros</a></li>
            <li><a href="productos.html" class="active">Productos</a></li>
            <li><a href="soluciones.html">Soluciones</a></li>
            <li><a href="calculadora.html">Calculadora</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="contacto.php">Contacto</a></li>
            <li><a href="sistema-login.php" target="_blank" title="Sistema de Vendedores"><i class="fas fa-user-tie"></i></a></li>
        </ul>
    </nav>

    <!-- Hero Productos -->
    <section class="hero-section">
        <div class="container text-center">
            <h1 class="display-4 fw-bold mb-4">Productos Solares</h1>
            <p class="lead mb-4">Tecnología de vanguardia para cada necesidad energética</p>
        </div>
    </section>

    <!-- Contenido Principal -->
    <section class="main-content">
        <div class="container">
            <!-- Breadcrumbs -->
            <div class="breadcrumb-section">
                <div class="d-flex justify-content-between align-items-center">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item">
                                <a href="web/admin/" title="Panel Administrativo" style="text-decoration: none; color: #007bff;" target="_blank" rel="noopener noreferrer">
                                    <i class="fas fa-cog me-1"></i>
                                </a>
                                <a href="index.html">Inicio</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Productos</li>
                        </ol>
                    </nav>
                </div>
            </div>

            <div class="row">
                <!-- Sidebar de Categorías -->
                <div class="col-lg-3 col-md-4 mb-4">
                    <div class="categories-sidebar">
                        <h5 class="fw-bold mb-3 text-primary">
                            <i class="fas fa-th-large me-2"></i>Categorías
                        </h5>
                        <div id="categorias-container">
                            <div class="loading">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Cargando...</span>
                                </div>
                                <p class="mt-2 text-muted">Cargando categorías...</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Contenido Principal -->
                <div class="col-lg-9 col-md-8">
                    <!-- Controles de Productos -->
                    <div class="product-controls">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <h5 class="mb-0 fw-bold text-primary">Productos Solares</h5>
                                <small class="text-muted">
                                    Mostrando <span id="productos-mostrados">0</span> 
                                    de <span id="total-productos">0</span> resultados
                                    <span id="destacados-info" style="display: none;">
                                        • <span class="text-warning"><i class="fas fa-star"></i> <span id="destacados-count">0</span> destacados</span>
                                    </span>
                                </small>
                            </div>
                            <div class="col-md-6">
                                <div class="d-flex justify-content-md-end align-items-center gap-3">
                                    <div class="view-controls">
                                        <button class="view-btn active" data-view="grid" title="Vista de cuadrícula">
                                            <i class="fas fa-th"></i>
                                        </button>
                                        <button class="view-btn" data-view="list" title="Vista de lista">
                                            <i class="fas fa-list"></i>
                                        </button>
                                    </div>
                                    <select class="filter-select" id="sort-select">
                                        <option value="default">Orden predeterminado</option>
                                        <option value="name-asc">Nombre: A-Z</option>
                                        <option value="name-desc">Nombre: Z-A</option>
                                        <option value="destacado">Destacados primero</option>
                                        <option value="reciente">Más recientes</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Grid de Productos -->
                    <div class="row g-4" id="productos-grid">
                        <div class="col-12">
                            <div class="loading">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Cargando...</span>
                                </div>
                                <p class="mt-2 text-muted">Cargando productos...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-dark text-light py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5>Contacto</h5>
                    <p>Email: jzambrano@solarcityec.com<br>
                    Tel: (593) 99 9508464</p>
                </div>
                <div class="col-md-6">
                    <h5>Enlaces Rápidos</h5>
                    <ul class="list-unstyled">
                        <li><a href="index.html" class="text-light">Inicio</a></li>
                        <li><a href="nosotros.html" class="text-light">Nosotros</a></li>
                        <li><a href="productos.html" class="text-light">Productos</a></li>
                        <li><a href="soluciones.html" class="text-light">Soluciones</a></li>
                        <li><a href="calculadora.html" class="text-light">Calculadora</a></li>
                        <li><a href="blog.html" class="text-light">Blog</a></li>
                        <li><a href="contacto.php" class="text-light">Contacto</a></li>
                    </ul>
                </div>
            </div>
            <div class="text-center mt-4">
                <small>SolarCityEc © 2025 - Energizando el Futuro de Ecuador</small>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Variables globales
        let categorias = [];
        let productos = [];
        let categoriaActiva = 'todos';

        // Cargar datos al iniciar la página
        document.addEventListener('DOMContentLoaded', function() {
            cargarCategorias();
            cargarProductos();
        });

        // Función para cargar categorías
        async function cargarCategorias() {
            try {
                const response = await fetch('web/api/cargar_categorias.php');
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const data = await response.json();
                
                if (data.success) {
                    categorias = data.categorias;
                    console.log('Categorías cargadas:', categorias);
                    mostrarCategorias();
                } else {
                    mostrarErrorCategorias(data.message);
                }
            } catch (error) {
                console.error('Error cargando categorías:', error);
                mostrarErrorCategorias('No se pueden cargar las categorías. Verifica que el servidor web esté funcionando y la base de datos esté configurada.');
            }
        }

        // Función para cargar productos
        async function cargarProductos() {
            try {
                console.log('Iniciando carga de productos...');
                const response = await fetch('web/api/cargar_productos.php');
                console.log('Respuesta del servidor:', response.status, response.statusText);
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const data = await response.json();
                console.log('Datos recibidos:', data);
                
                if (data.success) {
                    productos = data.productos;
                    console.log('Productos cargados exitosamente:', productos.length);
                    mostrarProductos();
                    actualizarEstadisticas();
                } else {
                    console.error('Error en la respuesta:', data.message);
                    mostrarErrorProductos(data.message);
                }
            } catch (error) {
                console.error('Error cargando productos:', error);
                mostrarErrorProductos('No se pueden cargar los productos. Verifica que el servidor web esté funcionando y la base de datos esté configurada.');
            }
        }

        // Función para mostrar categorías
        function mostrarCategorias() {
            const container = document.getElementById('categorias-container');
            let html = '';
            
            // Agregar la opción "Todos los Productos" al inicio
            html += `
                <div class="category-item active" data-category="todos">
                    <span>
                        <i class="fas fa-th-large"></i>
                        TODOS LOS PRODUCTOS
                    </span>
                    <i class="fas fa-chevron-right arrow"></i>
                </div>
            `;
            
            // Agregar las categorías de la base de datos (excluyendo cualquier categoría que contenga "todos" o "TODOS")
            categorias.forEach(categoria => {
                const nombreLower = categoria.nombre.toLowerCase();
                const slugLower = categoria.slug.toLowerCase();
                
                if (!nombreLower.includes('todos') && !slugLower.includes('todos') && 
                    !nombreLower.includes('all') && !slugLower.includes('all')) {
                    html += `
                        <div class="category-item" data-category="${categoria.slug}">
                            <span>
                                <i class="${categoria.icono}"></i>
                                ${categoria.nombre}
                            </span>
                            <i class="fas fa-chevron-right arrow"></i>
                        </div>
                    `;
                }
            });
            
            container.innerHTML = html;
            
            // Agregar event listeners
            document.querySelectorAll('.category-item').forEach(item => {
                item.addEventListener('click', function() {
                    document.querySelectorAll('.category-item').forEach(cat => cat.classList.remove('active'));
                    this.classList.add('active');
                    
                    categoriaActiva = this.getAttribute('data-category');
                    console.log('Categoría seleccionada:', categoriaActiva);
                    filtrarProductos();
                });
            });
        }

        // Función para mostrar productos (todos los productos)
        function mostrarProductos() {
            const container = document.getElementById('productos-grid');
            
            console.log('Mostrando productos iniciales. Total:', productos.length);
            
            if (productos.length === 0) {
                container.innerHTML = `
                    <div class="col-12 text-center py-5">
                        <i class="fas fa-box-open fa-3x text-muted mb-3"></i>
                        <h4 class="text-muted">No hay productos disponibles</h4>
                        <p class="text-muted">Los productos se mostrarán aquí cuando sean agregados al catálogo.</p>
                    </div>
                `;
                return;
            }
            
            // Mostrar TODOS los productos
            let html = '';
            productos.forEach(producto => {
                const destacadoBadge = producto.destacado ? 
                    '<div class="destacado-badge"><i class="fas fa-star"></i> Destacado</div>' : '';
                
                const imagen = producto.imagen_principal ? 
                    `web/uploads/productos/${producto.imagen_principal}` : 
                    'img/producto-default.jpg';
                
                const caracteristicas = producto.caracteristicas ? 
                    JSON.parse(producto.caracteristicas).slice(0, 3).map(car => 
                        `<span class="badge bg-light text-dark me-1 mb-1">${car}</span>`
                    ).join('') : '';
                
                html += `
                    <div class="col-lg-4 col-md-6 producto-item" data-category="${producto.categoria_slug}">
                        <div class="card producto-card">
                            ${destacadoBadge}
                            <img src="${imagen}" class="card-img-top" alt="${producto.nombre}">
                            <div class="card-body text-center">
                                <h5 class="card-title">${producto.nombre}</h5>
                                <p class="card-text">${producto.descripcion_corta}</p>
                                ${caracteristicas ? `<div class="mb-3">${caracteristicas}</div>` : ''}
                                <button class="btn btn-outline-primary btn-sm w-100" onclick="verDetalles(${producto.id})">
                                    <i class="fas fa-eye me-2"></i>Ver Detalles
                                </button>
                            </div>
                        </div>
                    </div>
                `;
            });
            
            container.innerHTML = html;
            actualizarContador(productos.length);
        }

        // Función para filtrar productos
        function filtrarProductos() {
            console.log('Filtrando productos para categoría:', categoriaActiva);
            console.log('Total de productos disponibles:', productos.length);
            
            if (categoriaActiva === 'todos') {
                // Si es "Todos los Productos", mostrar TODOS los productos
                console.log('Mostrando todos los productos:', productos.length);
                mostrarProductosFiltrados(productos);
            } else {
                // Si es una categoría específica, mostrar todos los productos de esa categoría
                const productosFiltrados = productos.filter(p => p.categoria_slug === categoriaActiva);
                console.log('Productos filtrados para categoría', categoriaActiva, ':', productosFiltrados.length);
                mostrarProductosFiltrados(productosFiltrados);
            }
        }

        // Función para mostrar productos filtrados (todos los de la categoría)
        function mostrarProductosFiltrados(productosFiltrados) {
            const container = document.getElementById('productos-grid');
            
            if (productosFiltrados.length === 0) {
                container.innerHTML = `
                    <div class="col-12 text-center py-5">
                        <i class="fas fa-search fa-3x text-muted mb-3"></i>
                        <h4 class="text-muted">No hay productos en esta categoría</h4>
                        <p class="text-muted">Intenta seleccionar otra categoría o agregar productos.</p>
                    </div>
                `;
                actualizarContador(0);
                return;
            }
            
            let html = '';
            productosFiltrados.forEach(producto => {
                const destacadoBadge = producto.destacado ? 
                    '<div class="destacado-badge"><i class="fas fa-star"></i> Destacado</div>' : '';
                
                const imagen = producto.imagen_principal ? 
                    `web/uploads/productos/${producto.imagen_principal}` : 
                    'img/producto-default.jpg';
                
                const caracteristicas = producto.caracteristicas ? 
                    JSON.parse(producto.caracteristicas).slice(0, 3).map(car => 
                        `<span class="badge bg-light text-dark me-1 mb-1">${car}</span>`
                    ).join('') : '';
                
                html += `
                    <div class="col-lg-4 col-md-6 producto-item" data-category="${producto.categoria_slug}">
                        <div class="card producto-card">
                            ${destacadoBadge}
                            <img src="${imagen}" class="card-img-top" alt="${producto.nombre}">
                            <div class="card-body text-center">
                                <h5 class="card-title">${producto.nombre}</h5>
                                <p class="card-text">${producto.descripcion_corta}</p>
                                ${caracteristicas ? `<div class="mb-3">${caracteristicas}</div>` : ''}
                                <button class="btn btn-outline-primary btn-sm w-100" onclick="verDetalles(${producto.id})">
                                    <i class="fas fa-eye me-2"></i>Ver Detalles
                                </button>
                            </div>
                        </div>
                    </div>
                `;
            });
            
            container.innerHTML = html;
            actualizarContador(productosFiltrados.length);
        }

        // Función para actualizar estadísticas
        function actualizarEstadisticas() {
            const totalProductos = productos.length;
            const productosDestacados = productos.filter(p => p.destacado).length;
            
            document.getElementById('total-productos').textContent = totalProductos;
            document.getElementById('productos-mostrados').textContent = totalProductos;
            
            if (productosDestacados > 0) {
                document.getElementById('destacados-count').textContent = productosDestacados;
                document.getElementById('destacados-info').style.display = 'inline';
            }
        }

        // Función para actualizar contador
        function actualizarContador(cantidad) {
            document.getElementById('productos-mostrados').textContent = cantidad;
        }

        // Función para mostrar errores
        function mostrarErrorCategorias(mensaje) {
            document.getElementById('categorias-container').innerHTML = `
                <div class="alert alert-warning" role="alert">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>Error de Conexión:</strong><br>
                    ${mensaje}<br><br>
                    <small class="text-muted">
                        <i class="fas fa-info-circle me-1"></i>
                        Asegúrate de que estés accediendo a través de un servidor web (http://localhost) y no como archivo local.
                    </small>
                </div>
            `;
        }

        function mostrarErrorProductos(mensaje) {
            document.getElementById('productos-grid').innerHTML = `
                <div class="col-12">
                    <div class="alert alert-warning" role="alert">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Error de Conexión:</strong><br>
                        ${mensaje}<br><br>
                        <small class="text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            Asegúrate de que estés accediendo a través de un servidor web (http://localhost) y no como archivo local.
                        </small>
                    </div>
                </div>
            `;
        }

        // Funcionalidad de vista (grid/list)
        document.addEventListener('DOMContentLoaded', function() {
            const viewBtns = document.querySelectorAll('.view-btn');
            const sortSelect = document.getElementById('sort-select');

            viewBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    viewBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');

                    const viewType = this.getAttribute('data-view');
                    const productGrid = document.getElementById('productos-grid');

                    if (viewType === 'list') {
                        productGrid.classList.add('list-view');
                        document.querySelectorAll('.producto-item').forEach(item => {
                            item.classList.add('col-12');
                            item.classList.remove('col-lg-4', 'col-md-6');
                        });
                    } else {
                        productGrid.classList.remove('list-view');
                        document.querySelectorAll('.producto-item').forEach(item => {
                            item.classList.remove('col-12');
                            item.classList.add('col-lg-4', 'col-md-6');
                        });
                    }
                });
            });

            // Ordenamiento
            sortSelect.addEventListener('change', function() {
                const sortType = this.value;
                const productosActuales = categoriaActiva === 'todos' ? productos : productos.filter(p => p.categoria_slug === categoriaActiva);
                
                productosActuales.sort((a, b) => {
                    const nameA = a.nombre.toLowerCase();
                    const nameB = b.nombre.toLowerCase();
                    const destacadoA = a.destacado;
                    const destacadoB = b.destacado;

                    switch(sortType) {
                        case 'name-asc':
                            return nameA.localeCompare(nameB);
                        case 'name-desc':
                            return nameB.localeCompare(nameA);
                        case 'destacado':
                            if (destacadoA && !destacadoB) return -1;
                            if (!destacadoA && destacadoB) return 1;
                            return nameA.localeCompare(nameB);
                        case 'reciente':
                            return new Date(b.fecha_creacion) - new Date(a.fecha_creacion);
                        default:
                            return 0;
                    }
                });

                mostrarProductosFiltrados(productosActuales);
            });
        });

        // Función para ver detalles del producto
        function verDetalles(productoId) {
            cargarDetalleProducto(productoId);
        }

        // Función para cargar detalles del producto en el modal
        async function cargarDetalleProducto(id) {
            try {
                const response = await fetch(`web/api/cargar_producto_detalle.php?id=${id}`);
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const data = await response.json();
                
                if (data.success) {
                    mostrarModalDetalle(data.producto);
                } else {
                    alert('Error al cargar los detalles del producto: ' + data.message);
                }
            } catch (error) {
                console.error('Error cargando producto:', error);
                alert('No se pueden cargar los detalles del producto. Verifica que el servidor web esté funcionando.');
            }
        }

        // Función para mostrar modal con detalles
        function mostrarModalDetalle(producto) {
            console.log('Datos del producto recibidos:', producto);
            
            const imagen = producto.imagen_principal ? 
                `web/uploads/productos/${producto.imagen_principal}` : 
                'img/producto-default.jpg';
            
            const caracteristicas = producto.caracteristicas ? 
                JSON.parse(producto.caracteristicas).map(car => 
                    `<li class="mb-2"><i class="fas fa-check text-success me-2"></i>${car}</li>`
                ).join('') : '';
            
            const destacadoBadge = producto.destacado ? 
                '<span class="badge bg-warning text-dark ms-2"><i class="fas fa-star"></i> Destacado</span>' : '';
            
            const modalContent = `
                <div class="modal fade" id="productoModal" tabindex="-1" aria-labelledby="productoModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="productoModalLabel">
                                    <span class="badge bg-primary me-2">${producto.categoria_nombre}</span>
                                    ${producto.nombre}
                                    ${destacadoBadge}
                                </h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <img src="${imagen}" class="img-fluid rounded" alt="${producto.nombre}" style="max-height: 300px; object-fit: cover;">
                                    </div>
                                                                         <div class="col-md-6">
                                         <h6 class="text-muted mb-2">Descripción Corta:</h6>
                                         <p class="mb-3">${producto.descripcion_corta || 'No disponible'}</p>
                                         
                                         <h6 class="text-muted mb-2">Descripción Completa:</h6>
                                         <p class="mb-3">${producto.descripcion || 'No disponible'}</p>
                                         
                                         ${caracteristicas ? `
                                             <h6 class="text-muted mb-2">Características:</h6>
                                             <ul class="list-unstyled">
                                                 ${caracteristicas}
                                             </ul>
                                         ` : ''}
                                     </div>
                                </div>
                            </div>
                                                         <div class="modal-footer">
                                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                             </div>
                        </div>
                    </div>
                </div>
            `;
            
            // Remover modal anterior si existe
            const modalAnterior = document.getElementById('productoModal');
            if (modalAnterior) {
                modalAnterior.remove();
            }
            
            // Agregar nuevo modal al body
            document.body.insertAdjacentHTML('beforeend', modalContent);
            
            // Mostrar el modal
            const modal = new bootstrap.Modal(document.getElementById('productoModal'));
            modal.show();
        }

        
    </script>
</body>
</html>