<!DOCTYPE html> <!-- Declara que el documento está escrito en HTML5 -->
<html lang="es"> <!-- Establece el idioma principal del documento como español -->

<head>
    <meta charset="UTF-8"> <!-- Define la codificación de caracteres para admitir acentos y caracteres especiales -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Hace que la página sea responsive en móviles -->
    <title>CRUD de Reservaciones</title> <!-- Título que aparece en la pestaña del navegador -->
    <link rel="stylesheet" href="styles.css"> <!-- Vincula la hoja de estilos CSS externa -->
</head>

<body>
    <div class="container"> <!-- Contenedor principal que agrupa todo el contenido central -->

        <a class="button-inicio" href="../admin.php" class="boton-admin">Inicio</a> <!-- Botón para volver al panel de administración -->

        <h2>Crear Nueva Reservación</h2> <!-- Encabezado del formulario de creación -->

        <form action="create.php" method="POST" onsubmit="return validarFormulario()"> <!-- Formulario que envía los datos al script PHP create.php -->
            <input type="text" name="nombre" placeholder="Nombre" required> <!-- Campo para nombre del cliente -->
            <input type="text" name="apellido" placeholder="Apellido" required> <!-- Campo para apellido -->
            <input type="text" name="telefono" placeholder="Teléfono" required> <!-- Campo para teléfono de contacto -->
            <input type="text" name="habitacion" placeholder="Habitación" required> <!-- Campo para número o tipo de habitación -->
            <input type="date" name="fecha_entrada" required> <!-- Campo de selección de fecha de entrada -->
            <input type="date" name="fecha_salida" required> <!-- Campo de selección de fecha de salida -->
            <input type="number" name="precio" placeholder="Precio en COP" step="0.01" required> <!-- Precio con decimales permitido -->
            <button type="submit">Cargar</button> <!-- Botón para enviar el formulario -->
        </form>

        <div id="status-message" style="margin-top: 20px; text-align: center;"> <!-- Mensaje de estado con color según éxito o error -->
            <?php
            if (isset($_GET['status']) && isset($_GET['message'])) { // Verifica si existen parámetros GET de estado y mensaje
                $status = htmlspecialchars($_GET['status']); // Sanitiza el parámetro 'status'
                $message = htmlspecialchars($_GET['message']); // Sanitiza el parámetro 'message'
                if ($status == 'success') {
                    echo "<p style='color: green;'>$message</p>"; // Muestra el mensaje en verde si es exitoso
                } else {
                    echo "<p style='color: red;'>$message</p>"; // Muestra el mensaje en rojo si es un error
                }
            }
            ?>
        </div>

        <div id="formActualizar"></div> <!-- Contenedor dinámico para mostrar el formulario de actualización -->

        <h2>Reservaciones Existentes</h2> <!-- Encabezado de la tabla de datos -->

        <table> <!-- Tabla HTML para mostrar las reservaciones -->
            <tr> <!-- Fila de encabezados -->
                <th>NO.</th>
                <th>Nombre</th>
                <th>Apellido</th>
                <th>Teléfono</th>
                <th>Habitación</th>
                <th>Fecha de Entrada</th>
                <th>Fecha de Salida</th>
                <th>Precio</th>
                <th>Acciones</th> <!-- Columna para botones como eliminar o actualizar -->
            </tr>
            <?php include 'read.php'; ?> <!-- Inserta dinámicamente las filas generadas desde el script read.php -->
        </table>
    </div>

    <script src="script.js"></script> <!-- Enlace al archivo JavaScript con funciones como validarFormulario() o mostrarFormularioActualizar() -->
</body>

</html>
