<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Administración de Platillos y Bebidas</title>
    <link rel="stylesheet" href="/styles.css">
    <link rel="stylesheet" href="/operaciones.css">
    <link rel="stylesheet" href="/css/general/footer.css">
</head>
<body>
<header>
    <a href="/menu/<%= systemTag %>/section1">
        <img src="/img/logos/<%= systemTag %>.webp" alt="Logo de <%= systemTag %>">
    </a>

    <nav>
        <a href="/menu/<%= systemTag %>/add">Agregar platillo</a> |
        <a href="/menu/<%= systemTag%>/addbebida">Agregar bebida</a> |
        <a href="/logout">Cerrar sesión</a>
    </nav>
</header>
<main>

    <h2>Platillos</h2>
    <div class="table-responsive">
        <table class="operaciones-table">
            <thead>
            <tr>
                <th>Categoria</th>
                <th>Nombre</th>
                <th>Precio</th>
                <th>Disponibilidad</th>
                <th class="acciones">Acciones</th>
            </tr>
            </thead>
            <tbody>

            <% platillos.platillos.forEach(platillo => { %>
                <tr>
                    <td data-label="Categoria"><%= platillo.categoria %></td>
                    <td data-label="Nombre"><%= platillo.nombre %></td>
                    <td data-label="Precio">$<%= platillo.precio %></td>
                    <td data-label="Disponibilidad" class="<%= platillo.disponibilidad ? 'disponible' : 'no-disponible' %>">
                        <%= platillo.disponibilidad ? 'Disponible' : 'No Disponible' %>
                    </td>
                    <td class="acciones" data-label="Acciones">
                        <a href="/menu/<%= systemTag %>/edit/<%= platillo.id %>"><button>Editar</button></a>
                    </td>
                </tr>
            <% }) %>

            </tbody>
        </table>
    </div>

    <h2>Bebidas</h2>
    <div class="table-responsive">
        <table class="operaciones-table">
            <thead>
            <tr>
                <th>Categoria</th>
                <th>Nombre</th>
                <th>Precio copa</th>
                <th>Precio botella</th>
                <th>Disponibilidad</th>
                <th class="acciones">Acciones</th>
            </tr>
            </thead>
            <tbody>

            <% platillos.bebidas.forEach(bebida => { %>
                <tr>
                    <td data-label="Categoria"><%= bebida.categoria %></td>
                    <td data-label="Nombre"><%= bebida.nombre %></td>
                    <td data-label="Precio">$<%= bebida.preciocopa %></td>
                    <td data-label="Precio">$<%= bebida.preciobotella %></td>
                    <td data-label="Disponibilidad" class="<%= bebida.disponibilidad ? 'disponible' : 'no-disponible' %>">
                        <%= bebida.disponibilidad ? 'Disponible' : 'No Disponible' %>
                    </td>
                    <td class="acciones" data-label="Acciones">
                        <a href="/menu/<%= systemTag %>/editbebida/<%= bebida.id %>"><button>Editar</button></a>
                    </td>
                </tr>
            <% }) %>

            </tbody>
        </table>
    </div>

</main>

<footer>
    <p>&copy; 2024 Jorge Melgarejo</p>
</footer>
</body>
</html>