<!DOCTYPE html>
<html>
<head>
    <title>Bebidas - Tacos Nava</title>
    <style>
        /* Estilos generales */
        body {
            font-family: 'Roboto', sans-serif; /* O la fuente que uses */
            /* ... (resto del CSS de cocina.html) ... */
        }

        .container {
            flex: 1;
            width: 90%;
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
        }

        /* Estilos para la cabecera */
        h1 {
            text-align: center;
            color: #343a40; /* Gris oscuro */
            margin-bottom: 30px;
        }

        /* Estilos para la lista de pedidos */
        #orderList {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
             gap: 20px;
         }

        .order-item {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra más suave */
            padding: 20px;
            position: relative;
        }


        .order-title {
            font-size: 1.6em;
            color: #28a745; /* Verde */
            margin-bottom: 15px;
            border-bottom: 2px solid #28a745; /* Línea verde debajo */
            padding-bottom: 5px;
        }

        .order-details ul, .order-details li {
            list-style: none;
            padding: 0;
            margin: 5px 0; /* Espacio entre elementos de la lista */
        }

        .order-details li {
            font-size: 1.1em;
            color: #495057;
        }

        /* Estilos para el botón "Listo" */
        .ready-button {
            background-color: #ff9800; /* Naranja */
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 20px; /* Bordes más redondeados */
            font-size: 1.2em;
            cursor: pointer;
            transition: background-color 0.3s; /* Transición suave */
            margin-top: 10px;
            display: block;
        }

        .ready-button:hover {
            background-color: #f57c00; /* Naranja más oscuro al pasar el ratón */
        }

        /* Estilos para el footer */
        .footer {
            text-align: center;
            font-size: 0.9em;
            padding: 15px;
            background-color: #343a40; /* Gris oscuro */
            color: white;
            margin-top: auto; /* Para que se quede abajo */
        }

        .no-orders { /* Adapta el estilo para "No hay bebidas" */
            text-align: center;
            font-style: italic;
            color: #777; 
            font-size: 1.2em;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Bebidas en Preparación</h1>
        <div id="bebidasList"></div>
    </div>
    <div class="footer">
        <p>INOVAT TECH GROUP - Software Alx, Versión 1.0</p>
    </div>

    <script>
       function updateBebidasList() {
    const bebidasList = document.getElementById('bebidasList');
    bebidasList.innerHTML = ''; // Limpiar la lista

    const storedOrders = JSON.parse(localStorage.getItem('orders')) || [];

    if (!storedOrders || storedOrders.length === 0) {
        const noBebidasMessage = document.createElement('p');
        noBebidasMessage.textContent = 'No hay bebidas pendientes.';
        bebidasList.appendChild(noBebidasMessage);
        return;
    }

    storedOrders.forEach((order, orderIndex) => {
        const bebidasOrderDiv = document.createElement('div');  // Contenedor para las bebidas de un pedido
        bebidasOrderDiv.className = 'order-item';

        let hasBebidas = false; // Bandera para saber si el pedido tiene bebidas

        const bebidasTitle = document.createElement('h2');
        bebidasTitle.textContent = `Pedido ${orderIndex + 1}`;
        bebidasOrderDiv.appendChild(bebidasTitle);
        const bebidasDetailsList = document.createElement('ul');



        order.forEach(plate => {
            Object.entries(plate.items).forEach(([itemName, details]) => {
                //Aquí filtramos por bebidas.  Ajusta las categorías según tu menú.
                if (itemName.startsWith('Aguas Frescas') || itemName.startsWith('Refrescos') || itemName.startsWith("Licuados") || itemName.startsWith("Café") || itemName.startsWith("Aguas")) {
                    const listItem = document.createElement('li');
                    listItem.textContent = `${itemName} x ${details.quantity}`;
                    bebidasDetailsList.appendChild(listItem);
                    hasBebidas = true; // Marcar que este pedido tiene bebidas
                }
            });

        });

        if (hasBebidas) {
            bebidasOrderDiv.appendChild(bebidasDetailsList);
            bebidasList.appendChild(bebidasOrderDiv);
        }
    });
}


window.onload = updateBebidasList;
setInterval(updateBebidasList, 5000); // Actualizar cada 5 segundos

    </script>

</body>
</html>

