<!DOCTYPE html>
<html>
<head>
    <title>Eventos por Fecha</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/eventsCalendarSystem/tablePage.css">
</head>
<body>
<header>
    <h1 class="text-center my-4">Eventos en una Fecha Específica</h1>
</header>
<main>
    <div class="container">

        <form method="GET" action="/eventos_por_fechacalendar" class="mb-4">
            <label for="fecha">Selecciona una fecha:</label>
            <input type="date" id="fecha" name="fecha" required>
            <input type="submit" value="Ver Eventos" class="btn btn-primary">
        </form>
        <a href="/calendar" class="btn btn-secondary">Volver</a>

        <% if (eventos && eventos.length > 0) { %>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Fecha</th>
                    <th>Descripción</th>
                    <th>Hora</th>
                    <th>Asistentes</th>
                    <th>Menú</th>
                    <th>Acomodo de Mobiliario</th>
                    <th>Cliente</th>
                    <th>Acciones</th>
                </tr>
                </thead>
                <tbody>
                <% eventos.forEach(function(evento) { %>
                    <tr>
                        <td><%= evento.id %></td>
                        <td><%= evento.date %></td>
                        <td><%= evento.description %></td>
                        <td><%= evento.hora %></td>
                        <td><%= evento.asistentes %></td>
                        <td><%= evento.menu %></td>
                        <td><%= evento.acomodoMobiliario %></td>
                        <td><%= evento.cliente %></td>
                        <td>
                            <a href="/leercalendar/<%= evento.id %>" class="btn btn-info btn-sm">Leer</a>
                        </td>
                    </tr>
                <% }); %>
                </tbody>
            </table>
        <% } else { %>
            <p>No hay eventos para la fecha seleccionada.</p>
        <% } %>
    </div>

</main>

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