<!DOCTYPE html> <!-- Define que el documento es HTML5 -->
<html lang="es"> <!-- Establece el idioma principal como español -->

<head>
    <meta charset="UTF-8"> <!-- Codificación de caracteres para permitir acentos y caracteres especiales -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Ajuste para diseño responsive en móviles -->
    <title>CRUD de Reservaciones</title> <!-- Título de la pestaña del navegador -->
    <link rel="stylesheet" href="styles.css"> <!-- Vincula la hoja de estilos externa -->
</head>

<body>
    <div class="container"> <!-- Contenedor principal centrado -->
        <a href="../index.php" class="salida">Inicio</a> <!-- Botón/enlace para volver al menú principal -->

        <h2>Crear Nueva Reservación</h2> <!-- Encabezado de sección -->

        <!-- Área para mostrar mensajes dinámicos en la parte superior del formulario -->
        <div id="status-message" style="margin-top: 15px; margin-bottom: 15px; text-align: center;">
            <?php
            if (isset($_GET['mensaje'])) { // Verifica si se recibió un mensaje por URL
                $mensaje = htmlspecialchars($_GET['mensaje']); // Sanitiza el mensaje para evitar XSS

                // Si contiene la palabra "error" o "incompleto", lo pinta en rojo, de lo contrario en verde
                if (stripos($mensaje, 'error') !== false || stripos($mensaje, 'incompleto') !== false) {
                    echo "<p style='color: red; font-weight: bold;'>$mensaje</p>";
                } else {
                    echo "<p style='color: green; font-weight: bold;'>$mensaje</p>";
                }
            }
            ?>
        </div>

        <!-- Formulario para registrar una reservación -->
        <form action="create.php" method="POST" onsubmit="return validarFormulario()"> <!-- Envia datos a create.php -->
            <input type="text" name="nombre" placeholder="Nombre" required> <!-- Campo nombre -->
            <input type="text" name="apellido" placeholder="Apellido" required> <!-- Campo apellido -->
            <input type="text" name="telefono" placeholder="Teléfono" required> <!-- Campo teléfono -->
            <input type="text" name="habitacion" placeholder="Habitación" required> <!-- Campo habitación -->
            <input type="date" id="reservation_date" name="fecha_entrada" required> <!-- Fecha de entrada -->
            <input type="date" name="fecha_salida" required> <!-- Fecha de salida -->
            <input type="number" name="precio" placeholder="Precio en COP" required> <!-- Precio -->
            <button type="submit">Pagar</button> <!-- Botón para enviar el formulario -->
        </form>

        <?php
        // Segunda opción para mostrar mensajes de estado desde URL con parámetros 'status' y 'message'
        if (isset($_GET['status']) && isset($_GET['message'])) {
            $status = htmlspecialchars($_GET['status']); // Sanitiza el estado
            $message = htmlspecialchars($_GET['message']); // Sanitiza el mensaje

            echo "<div style='margin-top: 20px; text-align: center;'>";
            if ($status === 'success') {
                echo "<p style='color: green; font-weight: bold;'>$message</p>"; // Éxito en verde
            } else {
                echo "<p style='color: red; font-weight: bold;'>$message</p>"; // Error en rojo
            }
            echo "</div>";
        }
        ?>
    </div>

    <script src="script.js"></script> <!-- Enlace al script que contiene validaciones con JS -->
</body>

</html>
