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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nueva Operación</title>
    <link rel="stylesheet" href="/styles.css"> <!-- Asegúrate de que la ruta sea correcta -->
</head>

<body>
    <h1>Agregar Nueva Operación</h1>

    <form action="/operaciones/nueva" method="POST">
        <label for="date">Fecha:</label>
        <input type="date" name="date" required>

        <label for="descripcion">Descripción:</label>
        <input type="text" id="descripcion" name="description" required>

        <label for="cantidad">Cantidad:</label>
        <input type="number" name="cantidad" required>

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

        <label for="tipo">Tipo:</label>
        <select name="tipo" required>
            <option value="ingreso">Ingreso</option>
            <option value="gasto">Gasto</option>
        </select>

        <h2>Selecciona una imagen para la descripción:</h2>
        <div id="image-gallery">
            <div class="clickable-image">
                <img src="/img/cfe.png" alt="cfe" data-description="CFE">
            </div>
            <div class="clickable-image">
                <img src="/img/total.png" alt="total" data-description="TotalPlay">
            </div>
            <div class="clickable-image">
                <img src="/img/compostela.png" alt="compostela" data-description="Compostela">
            </div>
            <div class="clickable-image">
                <img src="/img/mesones.png" alt="mesones" data-description="Mesones">
            </div>
            <div class="clickable-image">
                <img src="/img/comandas.png" alt="Comandas" data-description="Comandas">
            </div>
            <div class="clickable-image">
                <img src="/img/habitacion.png" alt="Habitaciones" data-description="Habitaciones">
            </div>
            <div class="clickable-image">
                <img src="/img/eventos.png" alt="Eventos" data-description="Eventos">
            </div>
            <!-- Agrega más imágenes según sea necesario -->
        </div>

        <button type="submit">Agregar Operación</button>
    </form>

    <script>
        // Script para manejar el clic en las imágenes
        const images = document.querySelectorAll('.clickable-image img');
        images.forEach(image => {
            image.addEventListener('click', function () {
                const descriptionInput = document.getElementById('descripcion');
                descriptionInput.value = this.getAttribute('data-description');
            });
        });
    </script>
     <footer>
        <p>&copy; 2024 Jorge Melgarejo</p>
    </footer>
</body>

</html>