<!DOCTYPE html> <!-- Indica que el documento está escrito en HTML5 -->
<html lang="es"> <!-- Define el idioma principal como español -->
<head>
    <meta charset="UTF-8"> <!-- Codificación de caracteres para permitir acentos y ñ -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Hace que el diseño sea responsive en dispositivos móviles -->
    <title>CRUD de Reservaciones</title> <!-- Título que aparece en la pestaña del navegador -->
    <link rel="stylesheet" href="styles.css"> <!-- Enlace a la hoja de estilos externa -->
</head>
<body>
<div class="container"> <!-- Contenedor principal que agrupa todo el contenido -->

    <a class="button-inicio" href="../admin.php" class="boton-admin">Inicio</a> <!-- Botón de regreso a la página principal del administrador -->
    
    <h2>Crear Nueva Reservación</h2> <!-- Encabezado del formulario de registro -->

    <form action="create.php" method="POST" onsubmit="return validarFormulario()"> <!-- Formulario que se envía al archivo create.php con método POST -->
        <input type="text" name="nombre" placeholder="Nombre" required> <!-- Campo para el nombre del cliente -->
        <input type="text" name="apellido" placeholder="Apellido" required> <!-- Campo para el apellido del cliente -->
        <input type="text" name="telefono" placeholder="Teléfono" required> <!-- Campo para el número de teléfono -->
        <input type="text" name="habitacion" placeholder="Habitación" required> <!-- Campo para el número o tipo de habitación -->
        <input type="date" name="fecha_entrada" required> <!-- Campo para la fecha de entrada -->
        <input type="date" name="fecha_salida" required> <!-- Campo para la fecha de salida -->
        <input type="number" name="precio" placeholder="Precio en COP" required> <!-- Campo numérico para el precio en pesos colombianos -->
        <button type="submit">Cargar</button> <!-- Botón para enviar el formulario -->
    </form>

    <h2>Reservaciones Existentes</h2> <!-- Encabezado de la sección de lista de reservaciones -->

    <table> <!-- Tabla donde se muestran las reservaciones registradas -->
        <tr> <!-- Fila de encabezados -->
            <th>ID</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 editar/eliminar -->
        </tr>
        <?php include 'read.php'; ?> <!-- Inserta dinámicamente las filas con datos desde el archivo read.php -->
    </table>
</div>
<script src="script.js"></script> <!-- Enlace al archivo JavaScript que contiene funciones como validarFormulario() -->
</body>
</html>
