<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Operaciones</title>
    <link rel="stylesheet" href="/styles.css">
    <link rel="stylesheet" href="/operaciones.css">
</head>
<body>
<div class="operaciones-container">
    <h1>Operaciones</h1>

    <!-- Formulario de Filtro -->
    <form class="filtro-form" action="/operaciones" method="GET">
        <label for="tipo">Tipo:</label>
        <select id="tipo" name="tipo">
            <option value="">Todos</option>
            <option value="ingreso">Ingreso</option>
            <option value="gasto">Gasto</option>
        </select>

        <label for="sucursal">Sucursal:</label>
        <select id="sucursal" name="sucursal">
            <option value="">Todas</option>
            <option value="Mandarin">Mandarin</option>
            <option value="Fantasy">Fantasy</option>
            <option value="Paris">Paris</option>
            <option value="Villas">Villas</option>
        </select>

        <label for="fechaInicio">Fecha Inicio:</label>
        <input type="date" id="fechaInicio" name="fechaInicio">

        <label for="fechaFin">Fecha Fin:</label>
        <input type="date" id="fechaFin" name="fechaFin">

        <button type="submit" class="btn btn-primary">Filtrar</button>
    </form>

    <!-- Tabla de Operaciones -->
    <div class="table-responsive">
        <table class="operaciones-table">
            <thead>
            <tr>
                <th>Fecha</th>
                <th>Descripción</th>
                <th>Cantidad</th>
                <th>Sucursal</th>
                <t>Sucursal</th>
                    <th>Tipo</th>
                    <th class="acciones">Acciones</th>
            </tr>
            </thead>
            <tbody>
            <% transacciones.forEach(transaccion => { %>
                <tr>
                    <td><%= transaccion.date %></td>
                    <td><%= transaccion.description %></td>
                    <td><%= transaccion.cantidad %></td>
                    <td><%= transaccion.sucursal %></td>
                    <td><%= transaccion.tipo %></td>
                    <td class="acciones">
                        <!-- Botón de Editar -->
                        <a href="/operaciones/editar/<%= transaccion.id %>"><button>editar</button></a>
                    </td>
                </tr>
            <% }) %>
            </tbody>
        </table>
    </div>

    <!-- Botón para Agregar Nueva Operación -->
    <div style="text-align: center; margin-top: 20px;">
        <a href="/operaciones/nueva" class="btn btn-primary">Agregar Nueva Operación</a>
    </div>
</div>
<a href="/generarreporte"><button class="btn">Generar Reporte</button></a>
<footer>
    <p>&copy; 2024 Jorge Melgarejo</p>
</footer>
</body>
</html>