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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menú de Platillos</title>
    <link rel="icon" href="/img/icon/logo<%= systemTag %>.webp" type="image/x-icon">
    <link rel="stylesheet" href="/css/general/reset.css">
    <link rel="stylesheet" href="/css/menuSystem/menuStyles.css">
    <link rel="stylesheet" href="/css/general/footer.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body>
<header>
    <h1 id="encabezado">
        <a href="/menu/<%= systemTag %>/section1" class="logo">
            <img src="/img/icon/logo<%= systemTag %>.webp" alt="<%= systemTag %>> Icon">
            <%=bussinesType%> <%=title%>
        </a>
    </h1>
    <nav>
        <ul>
            <li><a href="/">Principal</a></li>
            <li><a href="/principal">Conocenos</a></li>
            <li><a href="/principal">Contacto</a></li>
        </ul>
    </nav>
</header>



<main>
    <section class="promoted-product-bebidas">
        <div class="product-content">
            <h1 class="product-title">Prueba</h1>
            <p class="product-description">
                Descubra los irresistibles sabores de nuestra nueva seleccion de carnes.
            </p>
            <a href="#bebidas" class="order-button">Ordene ahora</a>
        </div>
    </section>
    <section>
        <div class="menu-container">
            <div class="menu-header">Menu</div>
            <ul class="menu-list">
                <% for (let categoria in platillosPorCategoria) { %>
                    <li onclick="scrollToCategoria('<%= categoria %>')">
                        <%= categoria %>
                    </li>
                <% } %>
            </ul>
        </div>
    </section>

    <!--Categorias-->
    <% if (Object.keys(platillosPorCategoria).length> 0) { %>
        <% for (let categoria in platillosPorCategoria) { %>
            <section id="<%= categoria %>" class="categoria">
                <h2 id=<%=categoria.toLowerCase() %>><%= categoria %>
                </h2>
                <img src="/img/categorias/<%= categoria.toLowerCase() %>.webp" alt="<%= categoria %>"
                     class="categoria-imagen">
                <ul class="platillos-lista">
                    <% platillosPorCategoria[categoria].forEach(platillo=> { %>
                        <li class="platillo-item">
                            <h3>
                                <%= platillo.nombre %>
                            </h3>
                            <p>
                                <%= platillo.descripcion %>
                            </p>
                            <p>Precio botella: $<%= platillo.preciobotella %>
                            </p>
                            <p>Precio copa: $<%= platillo.preciocopa %></p>
                        </li>
                    <% }) %>
                </ul>
            </section>
        <% } %>
    <% } else { %>
        <p>No hay platillos disponibles en este momento.</p>
    <% } %>
</main>


<footer>
    <p>© 2024 Jorge Melgarejo</p>
</footer>

<div class="bottom-menu" id="bottomMenu">
    <a href="/menu/<%= systemTag %>/section1">
        <img src="/img/icon/croosSpoon.webp" alt="Alimentos">
        <span>Alimentos</span>
    </a>
    <a href="/menu/<%= systemTag %>/section2">
        <img src="/img/icon/cracketCup.webp" alt="Bebidas">
        <span>Bebidas</span>
    </a>
    <a href="/menu/<%= systemTag %>/section3">
        <img src="/img/icon/<%= section3 %>.webp" alt=<%= section3 %>>
        <span><%= section3 %></span>
    </a>
    <a href="/menu/<%= systemTag %>/section4">
        <img src="/img/icon/<%= section4 %>.webp" alt=<%= section4 %>>
        <span><%= section4 %></span>
    </a>
</div>


<!-- Botón flotante -->
<button id="boton-arriba" class="boton-flotante" onclick="scrollToTop()">↑</button>
<div id="floating-cart-button" class="boton-flotante hidden">
    <i class="fas fa-shopping-cart"></i>
</div>

<script>
    // Función para desplazarse a una categoría específica
    function scrollToCategoria(categoriaId) {
        const categoriaSection = document.getElementById(categoriaId);
        if (categoriaSection) {
            categoriaSection.scrollIntoView({ behavior: 'smooth' });
        }
    }

    // Función para desplazarse al carrusel
    function scrollToTop() {
        const carrusel = document.querySelector('.menu-container');
        if (encabezado) {
            carrusel.scrollIntoView({ behavior: 'smooth' });
        }
    }

    // Mostrar/ocultar el botón flotante según la posición de desplazamiento
    window.addEventListener('scroll', () => {
        const boton = document.getElementById('boton-arriba');
        if (window.scrollY > 180) {
            boton.style.display = 'block'; // Mostrar botón
        } else {
            boton.style.display = 'none'; // Ocultar botón
        }
    });
</script>

</body>

</html>