<!DOCTYPE html>
<html lang="es">
<head>
    <!-- Configuración del encabezado -->
    <meta charset="UTF-8"> <!-- Establece la codificación de caracteres -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Asegura que la página sea responsive en dispositivos móviles -->
    <title>CRUD de Clientes</title> <!-- Título de 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 para organizar el contenido -->

    <!-- Botón de regreso a la página de administración -->
    <a class="button-inicio" href="../admin.php" class="boton-admin">Inicio</a>
    
    <!-- Formulario para registrar nuevos clientes -->
    <h2>Registrar Nuevo Cliente</h2>
    <form action="create.php" method="POST" onsubmit="return validarFormularioCliente()"> <!-- Envío a create.php al enviar -->
        <input type="text" name="nombre" placeholder="Nombre" required> <!-- Campo para el nombre -->
        <input type="text" name="apellido" placeholder="Apellido" required> <!-- Campo para el apellido -->
        <input type="text" name="telefono" placeholder="Teléfono" required> <!-- Campo para el teléfono -->
        <input type="email" name="correo" placeholder="Correo Electrónico" required> <!-- Campo para el correo -->
        <button type="submit">Registrar</button> <!-- Botón para enviar el formulario -->
    </form>

    <!-- Tabla para mostrar clientes registrados -->
    <h2>Clientes Registrados</h2>
    <table>
        <tr> <!-- Fila del encabezado de la tabla -->
            <th>ID</th>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>Teléfono</th>
            <th>Correo</th>
            <th>Acciones</th> <!-- Aquí podrías incluir botones para editar o eliminar -->
        </tr>
        <?php include 'read.php'; ?> <!-- Importa los registros de clientes desde un archivo PHP -->
    </table>
</div>

<!-- Enlace al archivo JavaScript para validaciones u otras funciones -->
<script src="script.js"></script>
</body>
</html>
