<?php

// Configuración de la base de datos
include 'db.php';

try {
    // Conexión a la base de datos
    $conn = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // Obtener el ID de la categoría seleccionada (si existe) y el término de búsqueda
    $categoriaSeleccionada = isset($_GET['categoria']) ? (int) $_GET['categoria'] : null;
    $searchTerm = isset($_GET['buscar']) ? '%' . $_GET['buscar'] . '%' : '%%';

    // Consultar productos según la categoría seleccionada y términos de búsqueda
    $query = "SELECT p.id, p.nombre, p.descripcion, p.precio, p.stock, p.imagen, c.nombre AS categoria 
              FROM productos p 
              INNER JOIN categorias c ON p.id_categoria = c.id
              WHERE p.nombre LIKE :buscar";

    if ($categoriaSeleccionada) {
        $query .= " AND c.id = :id_categoria";
    }

    $stmtProductos = $conn->prepare($query);
    $stmtProductos->bindParam(':buscar', $searchTerm, PDO::PARAM_STR);
    if ($categoriaSeleccionada) {
        $stmtProductos->bindParam(':id_categoria', $categoriaSeleccionada, PDO::PARAM_INT);
    }
    $stmtProductos->execute();
    $productos = $stmtProductos->fetchAll(PDO::FETCH_ASSOC);

    // Consultar categorías
    $stmtCategorias = $conn->prepare("SELECT id, nombre FROM categorias");
    $stmtCategorias->execute();
    $categorias = $stmtCategorias->fetchAll(PDO::FETCH_ASSOC);

    // Consultar ofertas
    $stmtOfertas = $conn->prepare("SELECT id, nombre, precio, imagen FROM productos WHERE oferta = 1 LIMIT 5");
    $stmtOfertas->execute();
    $ofertas = $stmtOfertas->fetchAll(PDO::FETCH_ASSOC);

    // Consultar los productos más vendidos
    $stmtProductosVendidos = $conn->prepare("
        SELECT p.id, p.nombre, p.descripcion, p.precio, p.stock, p.imagen, c.nombre AS categoria 
        FROM productos p 
        INNER JOIN categorias c ON p.id_categoria = c.id
        INNER JOIN (
            SELECT id, SUM(total) AS total_vendido
            FROM ventas
            GROUP BY id
            ORDER BY total_vendido DESC
            LIMIT 5
        ) AS v ON p.id = v.id;
    ");
    $stmtProductosVendidos->execute();
    $productosVendidos = $stmtProductosVendidos->fetchAll(PDO::FETCH_ASSOC);

} catch (PDOException $e) {
    echo "Error de conexión: " . $e->getMessage();
    die();
}

?>

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tienda Virtual</title>
    <style>
    /* Reset general */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: Arial, sans-serif;
        background-color: #f7f7f7;
    }

    /* Menú de navegación */
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 30px;
        background-color: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 100;
    }

    .navbar .logo {
        display: flex;
        align-items: center;
        font-size: 24px;
        font-weight: bold;
        color: #3498db;
    }

    .menu-toggle {
        display: none;
        font-size: 24px;
        cursor: pointer;
    }

    .navbar .menu {
        display: flex;
        gap: 20px;
        align-items: center;
    }

    .navbar .menu a {
        text-decoration: none;
        color: #4A4A4A;
        font-weight: 500;
        transition: color 0.3s;
    }

    .navbar .menu a:hover {
        color: #3498db;
    }

    /* Dropdown menu */
    .dropdown {
        position: relative;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 10px 15px;
        border-radius: 5px;
        z-index: 999;
    }

    .dropdown:hover .dropdown-content,
    .dropdown-content:hover {
        display: block;
    }

    .dropdown-content a {
        display: block;
        text-decoration: none;
        color: #4A4A4A;
        font-size: 14px;
        margin: 5px 0;
    }

    .dropdown-content a:hover {
        color: #3498db;
    }

    /* Responsividad */
    @media (max-width: 768px) {
        .menu-toggle {
            display: block;
        }

        .navbar .menu {
            display: none;
            flex-direction: column;
            gap: 10px;
            position: absolute;
            top: 60px;
            left: 0;
            background: white;
            width: 100%;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 10px;
        }

        .navbar .menu.show {
            display: flex;
        }
    }

    /* Contenedor y productos */
    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 20px;
    }

    .product-card {
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        margin: 10px;
        padding: 15px;
        width: 300px;
        text-align: center;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeIn 1s forwards;
        transition: transform 0.3s, box-shadow 0.3s;
    }

    @keyframes fadeIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    .offer-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    .product-card img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
    }

    .product-name {
        font-size: 18px;
        margin: 10px 0;
    }

    .product-category {
        color: #888;
        font-size: 14px;
    }

    .product-price {
        font-size: 20px;
        color: #2ecc71;
        margin: 10px 0;
    }

    .add-to-cart {
        background-color: #3498db;
        color: white;
        padding: 10px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    .add-to-cart:hover {
        background-color: #2980b9;
    }

    /* Estilos para el banner */
    .banner {
        width: 100%;
        height: 250px;
        background-color: #2980b9;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        perspective: 1000px;
        transition: transform 0.5s;
    }

    .banner:hover {
        transform: rotateY(20deg);
    }

    .banner h2 {
        font-size: 24px;
        margin-bottom: 10px;
        animation: fadeInText 2s infinite alternate;
    }

    .banner p {
        font-size: 16px;
        margin-bottom: 20px;
        animation: slideInText 3s infinite alternate;
    }

    .banner a {
        display: inline-block;
        background-color: #f1c40f;
        color: #2980b9;
        text-decoration: none;
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 14px;
        font-weight: bold;
        transition: transform 0.3s;
    }

    .banner a:hover {
        transform: scale(1.05);
    }

    @keyframes fadeInText {
        0% {
            opacity: 0.5;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes slideInText {
        0% {
            transform: translateX(-20px);
        }

        100% {
            transform: translateX(0);
        }
    }

    /* Estilos para los filtros de precios */
    .price-filter {
        margin-top: 20px;
        text-align: center;
        perspective: 1000px;
    }

    .price-filter label {
        margin-right: 10px;
    }

    .price-filter input {
        margin: 0 5px;
        padding: 5px;
        border: none;
        border-radius: 5px;
        background-color: #f1f1f1;
        transition: transform 0.3s;
    }

    .price-filter input:focus {
        outline: none;
        transform: translateZ(20px);
    }

    .price-filter button {
        background-color: #3498db;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: transform 0.3s;
    }

    .price-filter button:hover {
        transform: translateZ(10px);
    }

    /* Sección de productos más vendidos */
    .best-sellers-section {
        padding: 20px;
        text-align: center;
    }

    .slider-container {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .best-sellers-slider {
        display: flex;
        overflow: hidden;
        width: 80%;
        scroll-snap-type: x mandatory;
    }

    .best-sellers-slider .product-card {
        flex: 0 0 200px;
        margin: 10px;
        text-align: center;
        scroll-snap-align: center;
    }

    .product-card img {
        max-width: 100%;
        height: auto;
        margin-bottom: 10px;
    }

    .slider-btn {
        background-color: #3498db;
        color: white;
        border: none;
        padding: 10px 15px;
        cursor: pointer;
        font-size: 18px;
        border-radius: 5px;
        margin: 0 10px;
    }

    .slider-btn:hover {
        background-color: #2980b9;
    }
    </style>
    <script>
    // Mostrar/ocultar menú responsivo
    function toggleMenu() {
        const menu = document.querySelector('.menu');
        menu.classList.toggle('show');
    }

    function filterProducts() {
    const minPrecio = parseFloat(document.getElementById('minPrecio').value) || 0;
    const maxPrecio = parseFloat(document.getElementById('maxPrecio').value) || Infinity;

    // Filtrar productos normales
    const productCards = document.querySelectorAll('.product-card');
    productCards.forEach(card => {
        const precioText = card.querySelector('.product-price').textContent
            .replace('₡', '')
            .replace(/,/g, '')
            .replace('.', '');

        const precio = parseFloat(precioText) / 100;

        if (precio >= minPrecio && precio <= maxPrecio) {
            card.style.display = 'block';
        } else {
            card.style.display = 'none';
        }
    });

    // Filtrar ofertas especiales
    const offerCards = document.querySelectorAll('.offer-card');
    offerCards.forEach(card => {
        const precioText = card.querySelector('.offer-price').textContent
            .replace('₡', '')
            .replace(/,/g, '')
            .replace('.', '');

        const precio = parseFloat(precioText) / 100;

        if (precio >= minPrecio && precio <= maxPrecio) {
            card.style.display = 'block';
        } else {
            card.style.display = 'none';
        }
    });
}


    document.addEventListener("DOMContentLoaded", () => {
        const slider = document.querySelector('.best-sellers-slider');
        const prevBtn = document.querySelector('.prev-btn');
        const nextBtn = document.querySelector('.next-btn');

        // Botón "Anterior"
        prevBtn.addEventListener('click', () => {
            slider.scrollBy({
                left: -300, // Mueve 300px hacia la izquierda
                behavior: 'smooth'
            });
        });

        // Botón "Siguiente"
        nextBtn.addEventListener('click', () => {
            slider.scrollBy({
                left: 300, // Mueve 300px hacia la derecha
                behavior: 'smooth'
            });
        });
    });

    function moveSlider(direction) {
        const slider = document.querySelector('.best-sellers-slider');
        const scrollAmount = 220; // Ajusta el desplazamiento según el ancho de las tarjetas
        slider.scrollBy({
            left: direction * scrollAmount,
            behavior: 'smooth'
        });
    }
    </script>
</head>

<body>

    <!-- Menú de navegación -->
    <nav class="navbar">
        <div class="logo">
            <img src="https://webticocr.com/assets/images/logo-logo-shorter-80x77.png" alt="Logo"
                style="height: 30px; margin-right: 10px;">
            Tienda WebticoCR
        </div>
        <div class="menu-toggle" onclick="toggleMenu()">☰</div>
        <div class="menu">
            <a href="index.php">Inicio</a>
            <div class="dropdown">
                Categorías
                <div class="dropdown-content">
                    <?php foreach ($categorias as $categoria): ?>
                    <a href="?categoria=<?php echo $categoria['id']; ?>"><?php echo $categoria['nombre']; ?></a>
                    <?php endforeach; ?>
                </div>
            </div>
            <a href="#">Ofertas</a>
            <a href="#" class="btn-login">Mi Cuenta</a>
            <a href="admin_dashboard.php" class="btn-login">Administrador</a>
        </div>
    </nav>

    <!-- Banner publicitario -->
    <div class="banner">
        <h2>¡Bienvenido a WebticoCR Store!</h2>
        <p>Descubre nuestra amplia selección de productos de calidad a precios increíbles.</p>
        <a href="#offers-section">Ir a las ofertas</a>
    </div>

    <!-- Filtros de productos -->
    <div class="price-filter">
        <label for="minPrecio">Precio Mínimo:</label>
        <input type="number" id="minPrecio" name="minPrecio" placeholder="₡0"
            value="<?php echo isset($_GET['minPrecio']) ? htmlspecialchars($_GET['minPrecio']) : ''; ?>"
            onchange="filterProducts()">

        <label for="maxPrecio">Precio Máximo:</label>
        <input type="number" id="maxPrecio" name="maxPrecio" placeholder="₡100000"
            value="<?php echo isset($_GET['maxPrecio']) ? htmlspecialchars($_GET['maxPrecio']) : ''; ?>"
            onchange="filterProducts()">

        <button type="button" onclick="filterProducts()">Filtrar</button>
    </div>

    <!-- Contenedor de productos -->
    <div class="container">
        <?php if (empty($productos)): ?>
        <p>No hay productos disponibles para esta categoría.</p>
        <?php else: ?>
        <?php foreach ($productos as $producto): ?>
        <div class="product-card" style="display: block;">
            <a href="ver_producto.php?id=<?php echo $producto['id']; ?>">
                <img src="imagenes/<?php echo $producto['imagen']; ?>" alt="<?php echo $producto['nombre']; ?>">
            </a>
            <div class="product-name"><?php echo $producto['nombre']; ?></div>
            <div class="product-category"><?php echo $producto['categoria']; ?></div>
            <div class="product-price">₡<?php echo number_format($producto['precio'], 2); ?></div>
            <button class="add-to-cart">Agregar al carrito</button>
        </div>
        <?php endforeach; ?>
        <?php endif; ?>
    </div>

    <!-- Sección de ofertas especiales -->
    <div class="offers-section" id="offers-section" style="text-align: center; margin: 30px 0;">
        <h2 style="font-size: 24px; color: #3498db; margin-bottom: 20px;">Ofertas Especiales</h2>
        <div class="offers-container" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;">
            <?php if (empty($ofertas)): ?>
            <p style="font-size: 16px; color: #888;">No hay ofertas disponibles en este momento.</p>
            <?php else: ?>
            <?php foreach ($ofertas as $oferta): ?>
            <div class="offer-card"
                style="background: white; border: 1px solid #ddd; border-radius: 8px; width: 250px; padding: 15px; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s;">
                <a href="ver_producto.php?id=<?php echo $oferta['id']; ?>"
                    style="text-decoration: none; color: inherit;">
                    <img src="imagenes/<?php echo $oferta['imagen']; ?>" alt="<?php echo $oferta['nombre']; ?>"
                        style="max-width: 100%; border-radius: 8px; margin-bottom: 15px;">
                    <div class="offer-name" style="font-size: 18px; font-weight: bold; margin-bottom: 10px;">
                        <?php echo $oferta['nombre']; ?></div>
                    <div class="offer-price" style="font-size: 20px; color: #2ecc71; margin-bottom: 15px;">
                        ₡<?php echo number_format($oferta['precio'], 2); ?></div>
                    <button class="add-to-cart"
                        style="background-color: #3498db; color: white; padding: 10px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s;">Agregar
                        al carrito</button>
                </a>
            </div>
            <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>


    <!-- Sección de productos más vendidos -->
    <div class="best-sellers-section">
        <h2 style="font-size: 24px; color: #3498db; margin-bottom: 20px;">Productos más vendidos</h2>
        <div class="slider-container">
            <button class="slider-btn prev-btn" onclick="moveSlider(-1)">←</button>
            <div class="best-sellers-slider">
                <?php if (empty($productosVendidos)): ?>
                <p>No hay productos vendidos disponibles.</p>
                <?php else: ?>
                <?php foreach ($productosVendidos as $producto): ?>
                <div class="product-card">
                    <a href="ver_producto.php?id=<?php echo $producto['id']; ?>">
                        <img src="imagenes/<?php echo $producto['imagen']; ?>" alt="<?php echo $producto['nombre']; ?>">
                    </a>
                    <div class="product-name"><?php echo $producto['nombre']; ?></div>
                    <div class="product-price">₡<?php echo number_format($producto['precio'], 2); ?></div>
                </div>
                <?php endforeach; ?>
                <?php endif; ?>
            </div>
            <button class="slider-btn next-btn" onclick="moveSlider(1)">→</button>
        </div>
    </div>


</body>

</html>