<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TSGJ - Registro de Usuario</title>

    <!-- Icono de Página -->
    <link rel="icon" href="../../Modelo/Archivos_Media/Color_LogoTipo.png" type="image/png">

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

    <!-- Alertas -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.12/dist/sweetalert2.all.min.js"></script>
</head>
<body>

<div class="container my-5">
    <a href="Adm_Gestion_Usuarios.php" class="btn btn-outline-primary mb-4">
        <i class="bi bi-arrow-left"></i> Volver a gestión de usuarios
    </a>

    <div class="card shadow">
        <div class="card-header bg-primary text-white text-center">
            <h4>Registro de Usuarios</h4>
        </div>

        <div class="card-body">
            <form action="../../Controlador/Ctrl_Administrador/MySQL_Registro_Usuario.php" method="POST" id="Form_Registro" novalidate>
                <div class="row g-3">

                    <div class="col-md-6">
                        <label for="usuario" class="form-label">Usuario</label>
                        <input type="text" class="form-control" id="usuario" name="usuario" onkeyup="convertirAMayusculas(this)">
                    </div>

                    <div class="col-md-6">
                        <label for="contrasena" class="form-label">Contraseña</label>
                        <input type="password" class="form-control" id="contrasena" name="contrasena">
                    </div>

                    <div class="col-md-6">
                        <label for="nombre" class="form-label">Nombre del Usuario</label>
                        <input type="text" class="form-control" id="nombre" name="nombre" onkeyup="convertirAMayusculas(this)">
                    </div>

                    <div class="col-md-6">
                        <label for="apellido" class="form-label">Apellido del Usuario</label>
                        <input type="text" class="form-control" id="apellido" name="apellido" onkeyup="convertirAMayusculas(this)">
                    </div>

                    <div class="col-md-6">
                        <label for="correo" class="form-label">Correo electrónico</label>
                        <input type="email" class="form-control" id="correo" name="correo" onkeyup="convertirAMayusculas(this)">
                    </div>

                    <div class="col-md-6">
                        <label for="telefono" class="form-label">Teléfono</label>
                        <input type="number" class="form-control" id="telefono" name="telefono" oninput="limitarDigitos(this, 9)">
                    </div>

                    <div class="col-md-12">
                        <label for="rolusuario" class="form-label">Rol por establecer al Usuario:</label>
                        <p>(1) Administrador <strong>/</strong> (2) Supervisor</p>
                        <input type="number" class="form-control" id="rolusuario" name="rolusuario" oninput="limitarDigitos(this, 1)">
                    </div>

                    <div class="col-12 text-center mt-4">
                        <div class="d-flex justify-content-center gap-3">
                            <button type="submit" class="btn btn-success px-4">Registrarse</button>
                            <button type="reset" class="btn btn-outline-danger px-4">Borrar Registro</button>
                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>
</div>

<!-- JS Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../Modelo/Archivos_JS/Validacion_Agregar_Usuario.js"></script>
<script src="../../Modelo/Archivos_JS/Validacion_Escribir.js"></script>

</body>
<?php
if (isset($_GET['mensaje'])) {
    echo '<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.12/dist/sweetalert2.all.min.js"></script>';
    echo '<script>';
    switch ($_GET['mensaje']) {
        case 'UsuarioDuplicado':
            echo "Swal.fire({
                icon: 'warning',
                title: 'Usuario ya existe',
                text: 'El nombre de usuario ingresado ya está registrado. Usa uno diferente.',
                confirmButtonColor: '#3085d6'
            });";
            break;
        case 'RegistroExitoso':
            echo "Swal.fire({
                icon: 'success',
                title: 'Registro exitoso',
                text: 'El usuario fue registrado correctamente.',
                confirmButtonColor: '#28a745'
            });";
            break;
        case 'RegistroErroneo':
            echo "Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'No se pudo registrar el usuario. Intenta nuevamente.',
                confirmButtonColor: '#d33'
            });";
            break;
    }
    echo '</script>';
}
?>

</html>
