Files
MVE/views/registro/form.php

412 lines
19 KiB
PHP

<?php
require_once __DIR__ . '/../../config/database.php';
$conn = getConnection();
// Consultar configuración del sistema
$sql = "SELECT TOP 1 * FROM configuracion_sistema";
$stmt = sqlsrv_query($conn, $sql);
$config = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
// Variables con valores por defecto
$nombre = $config['nombre_plataforma'] ?? 'Sistema Integral para Importadores de Hidrocarburos';
$siglas = $config['siglas'] ?? 'SIIH';
$logo = $config['logo_url'] ?? 'assets/img/logo_siih.png';
$color1 = explode(',', $config['colores_primarios'] ?? '#003366,#0055A5')[0];
$color2 = explode(',', $config['colores_primarios'] ?? '#003366,#0055A5')[1];
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title><?= htmlspecialchars($siglas) ?> | Registro de Importador</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Google reCAPTCHA v2 -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<style>
body { background-color: #f4f6f9; font-family: 'Segoe UI', sans-serif; }
.navbar { background-color: #fff; }
.navbar .nav-link,
.navbar-brand { color: <?= $color1 ?> !important; font-weight: 500; }
.navbar .nav-link.active { background-color: #F9F9F9; border-radius: 5px; }
.card-form { max-width: 900px; margin: 50px auto; padding: 40px; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }
.form-label { font-weight: 500; }
.form-control,
.form-select { border-radius: 6px; }
footer { background-color: #e9ecef; padding: 20px; text-align: center; font-size: 14px; color: #666; }
.recaptcha { margin-top: 20px; }
.logo-siih { height: 90px; margin-right: 10px; }
.form-toggle { margin-bottom: 2rem; text-align: center; }
.form-toggle .btn { margin: 0 0.5rem; min-width: 150px; }
.form-container { display: none; }
.form-container.active { display: block; }
.form-title { text-align: center; margin-bottom: 2rem; color: #333; }
.transition-fade { transition: opacity 0.3s ease-in-out; }
</style>
</head>
<body>
<!-- Navbar institucional -->
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand d-flex align-items-center text-dark" href="#">
<img src="/IMPORTADORES/public/<?= htmlspecialchars($logo) ?>" alt="Logo" class="logo-siih">
| Registro de Importador
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/IMPORTADORES/">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/IMPORTADORES/registro">Registro</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/IMPORTADORES/login">Inicio sesión</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Contenedor de formularios -->
<div class="container">
<div class="card-form">
<!-- Botón para alternar entre formularios -->
<div class="form-toggle">
<button type="button" class="btn btn-white" id="btnToggle" onclick="alternarFormulario()">🔄 Registro de Agencia Aduanal</button>
</div>
<!-- Formulario de Importador -->
<div id="formImportadorContainer" class="form-container active transition-fade">
<h3 class="form-title">Registro de Importador</h3>
<form action="/IMPORTADORES/registro/enviarSoliImportador" method="POST" enctype="multipart/form-data" id="formRegistro">
<div class="row g-3">
<div class="col-md-6">
<label for="company_name" class="form-label">Nombre de la empresa *</label>
<input type="text" class="form-control" name="company_name" id="company_name" required>
</div>
<div class="col-md-6">
<label for="rfc" class="form-label">RFC *</label>
<input type="text" class="form-control" name="rfc" maxlength="13" id="rfc" required>
</div>
<div class="col-md-6">
<label for="email" class="form-label">Correo electrónico *</label>
<input type="email" class="form-control" name="email" id="email" required>
</div>
<div class="col-md-6">
<label for="phone" class="form-label">Teléfono *</label>
<input type="text" class="form-control" name="phone" id="phone" required>
</div>
<div class="col-md-12">
<label for="opinion_file" class="form-label">Padrón de importadores o encargo conferido (PDF) *</label>
<input type="file" class="form-control" name="opinion_file" id="opinion_file" accept=".pdf" required>
</div>
<div class="col-md-12 text-center recaptcha">
<div class="g-recaptcha" data-sitekey="6LfkMB8rAAAAAH-BEC1cMYij1HEhw4sTaEOl-UCA"></div>
</div>
<div class="col-md-12 text-end mt-4">
<button type="submit" class="btn btn-primary px-4 py-2">Enviar solicitud</button>
</div>
</div>
</form>
</div>
<!-- Formulario de Agencia Aduanal -->
<div id="formAgenciaContainer" class="form-container transition-fade">
<h3 class="form-title">Registro de Agencia Aduanal</h3>
<form action="/IMPORTADORES/registro/enviarSoliAgencia" method="POST" enctype="multipart/form-data" id="formRegistroAgencia">
<div class="row g-3">
<div class="col-md-6">
<label for="nombre_agencia" class="form-label">Nombre de la agencia *</label>
<input type="text" class="form-control" name="nombre_agencia" id="nombre_agencia" required>
</div>
<div class="col-md-6">
<label for="rfc_agencia" class="form-label">RFC *</label>
<input type="text" class="form-control" name="rfc_agencia" maxlength="13" id="rfc_agencia" required>
</div>
<div class="col-md-6">
<label for="correo" class="form-label">Correo electrónico *</label>
<input type="email" class="form-control" name="correo" id="correo" required>
</div>
<div class="col-md-6">
<label for="telefono" class="form-label">Teléfono *</label>
<input type="text" class="form-control" name="telefono" maxlength="11" id="telefono" required>
</div>
<div class="col-md-12">
<label for="direccion" class="form-label">Dirección *</label>
<input type="text" class="form-control" name="direccion" id="direccion"
placeholder="Ej: Calle, num.externo, num.interno, colonia, municipio, código postal, estado" required>
</div>
<div class="col-md-12">
<label for="opinion_file" class="form-label">Padrón de importadores o encargo conferido (PDF) *</label>
<input type="file" class="form-control" name="opinion_file" id="opinion_file" accept=".pdf" required>
</div><hr>
<p><strong>Administrador de la Agencia</strong></p>
<div class="col-md-6">
<label for="nombre_admin" class="form-label">Nombre *</label>
<input type="text" class="form-control" name="nombre_admin" id="nombre_admin" required>
</div>
<div class="col-md-6">
<label for="correo_admin" class="form-label">Correo Administrador *</label>
<input type="email" class="form-control" name="correo_admin" id="correo_admin" required>
</div>
<div class="col-md-12 text-center recaptcha">
<div class="g-recaptcha" data-sitekey="6LfkMB8rAAAAAH-BEC1cMYij1HEhw4sTaEOl-UCA"></div>
</div>
<div class="col-md-12 text-end mt-4">
<button type="submit" class="btn btn-primary px-4 py-2">Enviar solicitud</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="container ">
<div class="alert alert-warning" role="alert">
Una vez que envíes tu solicitud, será revisada manualmente por la agencia aduanal.
Recibirás una notificación por correo electrónico cuando tu registro sea aprobado, junto con las instrucciones para activar tu cuenta e iniciar sesión en la plataforma.
</div>
</div>
<!-- FOOTER -->
<footer class="fixed-bottom">
&copy; <?= date('Y') ?> <?= htmlspecialchars($siglas) ?> · <?= htmlspecialchars($nombre) ?>
</footer>
<!-- Validación JS -->
<script>
let formularioActual = 'importador';
function alternarFormulario() {
const formImportador = document.getElementById('formImportadorContainer');
const formAgencia = document.getElementById('formAgenciaContainer');
const btnToggle = document.getElementById('btnToggle');
if (formularioActual === 'importador') {
// Cambiar a formulario de agencia
formImportador.classList.remove('active');
formAgencia.classList.add('active');
btnToggle.textContent = '🔄 Registro de Importador';
btnToggle.classList.remove('btn-white');
btnToggle.classList.add('btn-white');
formularioActual = 'agencia';
} else {
// Cambiar a formulario de importador
formAgencia.classList.remove('active');
formImportador.classList.add('active');
btnToggle.textContent = '🔄 Registro de Agencia Aduanal';
btnToggle.classList.remove('btn-white');
btnToggle.classList.add('btn-white');
formularioActual = 'importador';
}
// Resetear reCAPTCHA si está disponible
if (typeof grecaptcha !== 'undefined') {
grecaptcha.reset();
}
}
// Inicializar al cargar la página
document.addEventListener('DOMContentLoaded', function() {
// Por defecto mostrar el formulario de importador
const formImportador = document.getElementById('formImportadorContainer');
formImportador.classList.add('active');
});
// Registro de Importador
document.getElementById('formRegistro').addEventListener('submit', function(e) {
e.preventDefault();
const nombre = document.getElementById('company_name').value.trim();
const rfc = document.getElementById('rfc').value.trim().toUpperCase();
const email = document.getElementById('email').value.trim();
const phone = document.getElementById('phone').value.trim();
const archivo = document.getElementById('opinion_file').files[0];
const recaptcha = grecaptcha.getResponse();
// Expresiones regulares
const emailRegex = /^[a-zA-Z0-9._+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
const rfcRegex = /^[A-ZÑ&]{3,4}\d{6}[A-Z0-9]{3}$/;
const phoneRegex = /^\d{3}\s\d{7}$/;
// Validación de nombre
if (!nombre) {
Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El nombre es obligatorio.', confirmButtonColor: '#dc3545' });
document.getElementById('company_name').focus();
return;
}
// Validación de correo
if (!email) {
Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El correo es obligatorio.', confirmButtonColor: '#dc3545' });
document.getElementById('email').focus();
return;
}
if (!emailRegex.test(email)) {
Swal.fire({ icon: 'error', title: 'Correo inválido', text: 'No es una dirección de correo válida.', confirmButtonColor: '#dc3545' });
document.getElementById('email').focus();
return;
}
// Validación de RFC
if (!rfc) {
Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El RFC es obligatorio.', confirmButtonColor: '#dc3545' });
document.getElementById('rfc').focus();
return;
}
if (!rfcRegex.test(rfc)) {
Swal.fire({ icon: 'error', title: 'RFC inválido', text: 'El RFC debe tener 12 o 13 caracteres con el formato correcto (ej. ABC123456XYZ).', confirmButtonColor: '#dc3545' });
document.getElementById('rfc').focus();
return;
}
// Validación de teléfono
if (!phone) {
Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El teléfono es obligatorio.', confirmButtonColor: '#dc3545' });
document.getElementById('phone').focus();
return;
}
if (!phoneRegex.test(phone)) {
Swal.fire({ icon: 'error', title: 'Teléfono inválido', text: 'Debe tener 10 dígitos en el formato: 3 dígitos (LADA), espacio, y 7 dígitos. Ejemplo: 123 4567890', confirmButtonColor: '#dc3545' });
document.getElementById('phone').focus();
return;
}
// Validación de archivo PDF
if (!archivo) {
Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El padrón de importadores es obligatorio.', confirmButtonColor: '#dc3545' });
document.getElementById('opinion_file').focus();
return;
}
if (!archivo || archivo.type !== 'application/pdf') {
Swal.fire({ icon: 'error', title: 'Formato de documento inválido', text: 'Solo se permite subir archivos PDF.', confirmButtonColor: '#dc3545' });
return; }
// Validación de reCAPTCHA
if (recaptcha.length === 0) {
Swal.fire({ icon: 'warning', title: 'Verificación requerida', text: 'Por favor completa el reCAPTCHA.', confirmButtonColor: '#dc3545' });
return;
}
// Si todas las validaciones pasan, el formulario se envía.
this.submit();
});
// Registro de Agencia
document.getElementById('formRegistroAgencia').addEventListener('submit', function(e) {
e.preventDefault();
const nombre = document.getElementById('nombre_agencia').value.trim();
const rfc_agencia = document.getElementById('rfc_agencia').value.trim().toUpperCase();
const correo = document.getElementById('correo').value.trim();
const telefono = document.getElementById('telefono').value.trim();
const direccion = document.getElementById('direccion').value.trim();
const archivo = document.getElementById('opinion_file').files[0];
const nombre_admin = document.getElementById('nombre_admin').value.trim();
const correo_admin = document.getElementById('correo_admin').value.trim();
const recaptcha = grecaptcha.getResponse();
// Expresiones regulares
const correoRegex = /^[a-zA-Z0-9._+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
const rfcRegex = /^[A-ZÑ&]{3,4}\d{6}[A-Z0-9]{3}$/;
const telefonoRegex = /^\d{3}\s\d{7}$/;
// Validación de nombre
if (!nombre) {
Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El nombre es obligatorio.', confirmButtonColor: '#dc3545' });
document.getElementById('nombre_agencia').focus();
return;
}
// Validación de correo
if (!correo) {
Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El correo es obligatorio.', confirmButtonColor: '#dc3545' });
document.getElementById('correo').focus();
return;
}
if (!correoRegex.test(correo)) {
Swal.fire({ icon: 'error', title: 'Correo inválido', text: 'No es una dirección de correo válida.', confirmButtonColor: '#dc3545' });
document.getElementById('correo').focus();
return;
}
// Validación de RFC
if (!rfc_agencia) {
Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El RFC es obligatorio.', confirmButtonColor: '#dc3545' });
document.getElementById('rfc_agencia').focus();
return;
}
if (!rfcRegex.test(rfc_agencia)) {
Swal.fire({ icon: 'error', title: 'RFC inválido', text: 'El RFC debe tener 12 o 13 caracteres con el formato correcto (ej. ABC123456XYZ).', confirmButtonColor: '#dc3545' });
document.getElementById('rfc_agencia').focus();
return;
}
// Validación de teléfono
if (!telefono) {
Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El teléfono es obligatorio.', confirmButtonColor: '#dc3545' });
document.getElementById('telefono').focus();
return;
}
if (!telefonoRegex.test(telefono)) {
Swal.fire({ icon: 'error', title: 'Teléfono inválido', text: 'Debe tener 10 dígitos en el formato: 3 dígitos (LADA), espacio, y 7 dígitos (ej. 123 4567890).', confirmButtonColor: '#dc3545' });
document.getElementById('telefono').focus();
return;
}
// Validación de dirección
if (!direccion) {
Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'La dirección es obligatoria.', confirmButtonColor: '#dc3545' });
document.getElementById('direccion').focus();
return;
}
// Validación de archivo PDF
if (!archivo) {
Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El padrón de importadores es obligatorio.', confirmButtonColor: '#dc3545' });
document.getElementById('opinion_file').focus();
return;
}
if (!archivo || archivo.type !== 'application/pdf') {
Swal.fire({ icon: 'error', title: 'Formato de documento inválido', text: 'Solo se permite subir archivos PDF.', confirmButtonColor: '#dc3545' });
return; }
// Validación de administrador
if (!nombre_admin) {
Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El nombre del administrador es obligatorio.', confirmButtonColor: '#dc3545' });
document.getElementById('nombre_admin').focus();
return;
}
// Validación de correo de administrador
if (!correo_admin) {
Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El correo de administrador es obligatorio.', confirmButtonColor: '#dc3545' });
document.getElementById('correo_admin').focus();
return;
}
if (!correoRegex.test(correo_admin)) {
Swal.fire({ icon: 'error', title: 'Correo inválido', text: 'No es una dirección de correo válida.', confirmButtonColor: '#dc3545' });
document.getElementById('correo_admin').focus();
return;
}
// Validación de reCAPTCHA
if (recaptcha.length === 0) {
Swal.fire({ icon: 'warning', title: 'Verificación requerida', text: 'Por favor completa el reCAPTCHA.', confirmButtonColor: '#dc3545' });
return;
}
// Si todas las validaciones pasan, el formulario se envía.
this.submit();
});
</script>
</body>
</html>