<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario de Registro - Scuderia Ferrari Club México</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- FontAwesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="../assets/css/formulario-completo.css">
<!-- Ferrari Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body class="bg-dark">
<!-- Header Ferrari -->
<header class="navbar navbar-expand-lg navbar-dark bg-ferrari-red sticky-top">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="#">
<img src="../img/ferrari-logo.svg" alt="Ferrari" height="40" class="me-3">
<div>
<div class="fw-bold">SCUDERIA FERRARI</div>
<small class="text-light opacity-75">Club México</small>
</div>
</a>
<div class="navbar-nav ms-auto">
<span class="navbar-text text-light">
<i class="fas fa-user-circle me-2"></i>
<span id="miembro-nombre-navbar">Cargando...</span>
</span>
</div>
</div>
</header>
<!-- Alert Container -->
<div id="alert-container" class="container mt-3" style="display: none;">
<div id="alert-message" class="alert" role="alert"></div>
</div>
<!-- Loading Overlay -->
<div id="loading-overlay" class="loading-overlay" style="display: none;">
<div class="loading-content">
<div class="loading-spinner"></div>
<h5>Procesando formulario...</h5>
<p class="mb-0">Por favor espere mientras guardamos su información.</p>
</div>
</div>
<!-- Main Content -->
<main class="formulario-container" id="main-content">
<div class="container">
<div class="formulario-card">
<!-- Header del formulario -->
<div class="formulario-header">
<h1><i class="fas fa-user-edit me-3"></i>Registro Completo</h1>
<p class="subtitle">Complete su información para acceder a experiencias VIP</p>
</div>
<!-- Información del miembro -->
<div class="miembro-info">
<div class="card">
<div class="card-body">
<div class="row align-items-center">
<div class="col-md-6">
<h6 class="mb-1">Bienvenido(a)</h6>
<h5 class="mb-0" id="miembro-nombre">Cargando...</h5>
</div>
<div class="col-md-3 text-center">
<span class="badge" id="miembro-tipo">Membresía</span>
</div>
<div class="col-md-3 text-end">
<div id="info-pago" style="display: none;">
<small class="text-muted">Pagado:</small><br>
<strong id="monto-pagado" class="text-success">$0.00</strong>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Barra de progreso -->
<div class="progress-container">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress-text" id="progress-text">Paso 1 de 5</div>
</div>
<!-- Form Container -->
<form id="formulario-completo" novalidate>
<input type="hidden" id="token" name="token" value="">
<input type="hidden" id="registro_id" name="registro_id" value="">
<input type="hidden" id="tipo_formulario" name="tipo_formulario" value="">
<!-- PASO 1: Datos Personales -->
<div id="step-1" class="form-step">
<div class="step-title">
<span class="step-number">1</span>
Datos Personales
</div>
<p class="step-description">
Ingrese sus datos personales básicos. Esta información debe coincidir con sus documentos oficiales.
</p>
<div class="info-box">
<i class="fas fa-info-circle icon"></i>
<strong>Datos precargados:</strong> Los campos marcados ya contienen la información que proporcionó en el punto de venta. Puede modificarlos si es necesario.
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="nombre" class="form-label">Nombre(s) <span class="required">*</span></label>
<input type="text" class="form-control" id="nombre" name="nombre" required>
<div class="invalid-feedback"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="apellido_paterno" class="form-label">Apellido Paterno <span class="required">*</span></label>
<input type="text" class="form-control" id="apellido_paterno" name="apellido_paterno" required>
<div class="invalid-feedback"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="apellido_materno" class="form-label">Apellido Materno</label>
<input type="text" class="form-control" id="apellido_materno" name="apellido_materno">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="fecha_nacimiento" class="form-label">Fecha de Nacimiento <span class="required">*</span></label>
<input type="date" class="form-control" id="fecha_nacimiento" name="fecha_nacimiento" required>
<div class="invalid-feedback"></div>
<div class="form-text">
Edad calculada: <span id="edad-calculada" class="fw-bold text-ferrari">-</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="genero" class="form-label">Género <span class="required">*</span></label>
<select class="form-select" id="genero" name="genero" required>
<option value="">Seleccione...</option>
<option value="masculino">Masculino</option>
<option value="femenino">Femenino</option>
<option value="otro">Otro</option>
<option value="prefiero_no_decir">Prefiero no decir</option>
</select>
<div class="invalid-feedback"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group" id="estado-civil-field">
<label for="estado_civil" class="form-label">Estado Civil</label>
<select class="form-select" id="estado_civil" name="estado_civil">
<option value="">Seleccione...</option>
<option value="soltero">Soltero(a)</option>
<option value="casado">Casado(a)</option>
<option value="divorciado">Divorciado(a)</option>
<option value="viudo">Viudo(a)</option>
<option value="union_libre">Unión libre</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="nacionalidad" class="form-label">Nacionalidad <span class="required">*</span></label>
<select class="form-select" id="nacionalidad" name="nacionalidad" required>
<option value="">Seleccione...</option>
<option value="mexicana">Mexicana</option>
<option value="estadounidense">Estadounidense</option>
<option value="canadiense">Canadiense</option>
<option value="española">Española</option>
<option value="italiana">Italiana</option>
<option value="alemana">Alemana</option>
<option value="francesa">Francesa</option>
<option value="britanica">Británica</option>
<option value="argentina">Argentina</option>
<option value="brasileña">Brasileña</option>
<option value="otra">Otra</option>
</select>
<div class="invalid-feedback"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group" id="profesion-field">
<label for="profesion" class="form-label">Profesión/Ocupación</label>
<input type="text" class="form-control" id="profesion" name="profesion" placeholder="Ej: Ingeniero, Médico, Estudiante">
</div>
</div>
</div>
<hr class="section-divider">
<div class="row">
<div class="col-md-6">
<div class="form-group" id="curp-field">
<label for="curp" class="form-label">CURP</label>
<input type="text" class="form-control" id="curp" name="curp" maxlength="18" style="text-transform: uppercase;">
<div class="invalid-feedback"></div>
<div class="form-text">18 caracteres. Ej: ABCD123456HDFMNR08</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group" id="rfc-field">
<label for="rfc" class="form-label">RFC</label>
<input type="text" class="form-control" id="rfc" name="rfc" maxlength="13" style="text-transform: uppercase;">
<div class="invalid-feedback"></div>
<div class="form-text">13 caracteres para personas físicas</div>
</div>
</div>
</div>
<!-- Sección de tutor (solo para juniors) -->
<div id="tutor-section" class="tutor-section" style="display: none;">
<h5><i class="fas fa-user-shield me-2"></i>Información del Tutor/Responsable Legal</h5>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="tutor_nombre" class="form-label">Nombre Completo del Tutor <span class="required">*</span></label>
<input type="text" class="form-control" id="tutor_nombre" name="tutor_nombre">
<div class="invalid-feedback"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="tutor_parentesco" class="form-label">Parentesco <span class="required">*</span></label>
<select class="form-select" id="tutor_parentesco" name="tutor_parentesco">
<option value="">Seleccione...</option>
<option value="padre">Padre</option>
<option value="madre">Madre</option>
<option value="abuelo">Abuelo</option>
<option value="abuela">Abuela</option>
<option value="tio">Tío</option>
<option value="tia">Tía</option>
<option value="tutor_legal">Tutor Legal</option>
<option value="otro">Otro</option>
</select>
<div class="invalid-feedback"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="tutor_telefono" class="form-label">Teléfono del Tutor <span class="required">*</span></label>
<input type="tel" class="form-control" id="tutor_telefono" name="tutor_telefono">
<div class="invalid-feedback"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="tutor_email" class="form-label">Email del Tutor</label>
<input type="email" class="form-control" id="tutor_email" name="tutor_email">
<div class="invalid-feedback"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Navegación Paso 1 -->
<div class="navigation-buttons">
<div></div> <!-- Espacio vacío para el botón anterior -->
<button type="button" class="btn btn-ferrari btn-siguiente">
Siguiente <i class="fas fa-arrow-right ms-2"></i>
</button>
</div>
<!-- PASO 2: Contacto y Dirección -->
<div id="step-2" class="form-step" style="display: none;">
<div class="step-title">
<span class="step-number">2</span>
Contacto y Dirección
</div>
<p class="step-description">
Proporcione su información de contacto y dirección actual. Esta información será utilizada para comunicaciones oficiales del club.
</p>
<!-- Información de Contacto -->
<h6 class="text-ferrari fw-bold mb-3">
<i class="fas fa-phone me-2"></i>
Información de Contacto
</h6>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="telefono_movil" class="form-label">Teléfono Móvil <span class="required">*</span></label>
<input type="tel" class="form-control" id="telefono_movil" name="telefono_movil" required placeholder="+52 (55) 1234-5678">
<div class="invalid-feedback"></div>
<div class="form-text">Incluya código de país y área</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="telefono_casa" class="form-label">Teléfono de Casa</label>
<input type="tel" class="form-control" id="telefono_casa" name="telefono_casa" placeholder="(55) 1234-5678">
<div class="invalid-feedback"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="email_principal" class="form-label">Email Principal <span class="required">*</span></label>
<input type="email" class="form-control" id="email_principal" name="email_principal" required placeholder="ejemplo@correo.com">
<div class="invalid-feedback"></div>
<div class="form-text">Este será su email principal para comunicaciones</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="email_secundario" class="form-label">Email Secundario</label>
<input type="email" class="form-control" id="email_secundario" name="email_secundario" placeholder="alterno@correo.com">
<div class="invalid-feedback"></div>
</div>
</div>
</div>
<hr class="section-divider">
<!-- Dirección -->
<h6 class="text-ferrari fw-bold mb-3">
<i class="fas fa-map-marker-alt me-2"></i>
Dirección de Residencia
</h6>
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label for="calle" class="form-label">Calle y Número <span class="required">*</span></label>
<input type="text" class="form-control" id="calle" name="calle" required placeholder="Av. Reforma 123">
<div class="invalid-feedback"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="numero_interior" class="form-label">Número Interior</label>
<input type="text" class="form-control" id="numero_interior" name="numero_interior" placeholder="Depto. 4B">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="colonia" class="form-label">Colonia/Fraccionamiento <span class="required">*</span></label>
<input type="text" class="form-control" id="colonia" name="colonia" required placeholder="Del Valle">
<div class="invalid-feedback"></div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="codigo_postal" class="form-label">Código Postal <span class="required">*</span></label>
<input type="text" class="form-control" id="codigo_postal" name="codigo_postal" required maxlength="5" placeholder="03100">
<div class="invalid-feedback"></div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="delegacion_municipio" class="form-label">Delegación/Municipio <span class="required">*</span></label>
<input type="text" class="form-control" id="delegacion_municipio" name="delegacion_municipio" required placeholder="Benito Juárez">
<div class="invalid-feedback"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="estado" class="form-label">Estado <span class="required">*</span></label>
<select class="form-select" id="estado" name="estado" required>
<option value="">Seleccione estado...</option>
<option value="aguascalientes">Aguascalientes</option>
<option value="baja_california">Baja California</option>
<option value="baja_california_sur">Baja California Sur</option>
<option value="campeche">Campeche</option>
<option value="chiapas">Chiapas</option>
<option value="chihuahua">Chihuahua</option>
<option value="ciudad_de_mexico">Ciudad de México</option>
<option value="coahuila">Coahuila</option>
<option value="colima">Colima</option>
<option value="durango">Durango</option>
<option value="estado_de_mexico">Estado de México</option>
<option value="guanajuato">Guanajuato</option>
<option value="guerrero">Guerrero</option>
<option value="hidalgo">Hidalgo</option>
<option value="jalisco">Jalisco</option>
<option value="michoacan">Michoacán</option>
<option value="morelos">Morelos</option>
<option value="nayarit">Nayarit</option>
<option value="nuevo_leon">Nuevo León</option>
<option value="oaxaca">Oaxaca</option>
<option value="puebla">Puebla</option>
<option value="queretaro">Querétaro</option>
<option value="quintana_roo">Quintana Roo</option>
<option value="san_luis_potosi">San Luis Potosí</option>
<option value="sinaloa">Sinaloa</option>
<option value="sonora">Sonora</option>
<option value="tabasco">Tabasco</option>
<option value="tamaulipas">Tamaulipas</option>
<option value="tlaxcala">Tlaxcala</option>
<option value="veracruz">Veracruz</option>
<option value="yucatan">Yucatán</option>
<option value="zacatecas">Zacatecas</option>
</select>
<div class="invalid-feedback"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="pais" class="form-label">País <span class="required">*</span></label>
<select class="form-select" id="pais" name="pais" required>
<option value="">Seleccione país...</option>
<option value="mexico" selected>México</option>
<option value="estados_unidos">Estados Unidos</option>
<option value="canada">Canadá</option>
<option value="otro">Otro</option>
</select>
<div class="invalid-feedback"></div>
</div>
</div>
</div>
<!-- Información de Emergencia -->
<hr class="section-divider">
<h6 class="text-ferrari fw-bold mb-3">
<i class="fas fa-user-shield me-2"></i>
Contacto de Emergencia
</h6>
<div class="info-box">
<i class="fas fa-info-circle icon"></i>
<strong>Importante:</strong> Proporcione un contacto de emergencia que no viva en su misma dirección.
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="contacto_emergencia_nombre" class="form-label">Nombre Completo <span class="required">*</span></label>
<input type="text" class="form-control" id="contacto_emergencia_nombre" name="contacto_emergencia_nombre" required placeholder="Ej: María González López">
<div class="invalid-feedback"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="contacto_emergencia_parentesco" class="form-label">Parentesco <span class="required">*</span></label>
<select class="form-select" id="contacto_emergencia_parentesco" name="contacto_emergencia_parentesco" required>
<option value="">Seleccione...</option>
<option value="esposo">Esposo(a)</option>
<option value="padre">Padre</option>
<option value="madre">Madre</option>
<option value="hermano">Hermano(a)</option>
<option value="hijo">Hijo(a)</option>
<option value="primo">Primo(a)</option>
<option value="tio">Tío(a)</option>
<option value="abuelo">Abuelo(a)</option>
<option value="amigo">Amigo(a)</option>
<option value="otro">Otro</option>
</select>
<div class="invalid-feedback"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="contacto_emergencia_telefono" class="form-label">Teléfono <span class="required">*</span></label>
<input type="tel" class="form-control" id="contacto_emergencia_telefono" name="contacto_emergencia_telefono" required placeholder="+52 (55) 1234-5678">
<div class="invalid-feedback"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="contacto_emergencia_email" class="form-label">Email</label>
<input type="email" class="form-control" id="contacto_emergencia_email" name="contacto_emergencia_email" placeholder="contacto@correo.com">
<div class="invalid-feedback"></div>
</div>
</div>
</div>
</div>
<!-- Navegación Paso 2 -->
<div class="navigation-buttons">
<button type="button" class="btn btn-outline-ferrari btn-anterior">
<i class="fas fa-arrow-left me-2"></i> Anterior
</button>
<button type="button" class="btn btn-ferrari btn-siguiente">
Siguiente <i class="fas fa-arrow-right ms-2"></i>
</button>
</div>
<!-- PASO 3: Información Ferrari (Temporal) -->
<div id="step-3" class="form-step" style="display: none;">
<div class="step-title">
<span class="step-number">3</span>
Información Ferrari (En desarrollo)
</div>
<div class="step-description">Este paso está siendo desarrollado.</div>
<div class="alert alert-info">
<i class="fas fa-info-circle me-2"></i>
Los pasos 3, 4 y 5 serán completados en la siguiente iteración del desarrollo.
</div>
<!-- Navegación Paso 3 -->
<div class="navigation-buttons">
<button type="button" class="btn btn-outline-ferrari btn-anterior">
<i class="fas fa-arrow-left me-2"></i> Anterior
</button>
<button type="submit" class="btn btn-success">
<i class="fas fa-paper-plane me-2"></i> Enviar Formulario (Temporal)
</button>
</div>
</div>
</form>
<!-- Mensaje de éxito -->
<div id="success-message" class="success-container" style="display: none;">
<div class="success-icon">
<i class="fas fa-check-circle"></i>
</div>
<h2 class="success-title">¡Formulario Enviado Exitosamente!</h2>
<div class="success-message">
<p>Gracias por completar tu registro en el Scuderia Ferrari Club México.</p>
<p>Hemos recibido toda tu información. Nuestro equipo revisará tu solicitud y te contactaremos pronto.</p>
</div>
<div class="mt-4">
<a href="index.php" class="btn btn-ferrari btn-lg">
<i class="fas fa-home me-2"></i>
Volver al Portal
</a>
</div>
</div>
</main>
<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JavaScript -->
<script src="../assets/js/formulario-completo.js"></script>
</body>
</html>
<div class="row">
<div class="col-md-6 mb-3">
<label for="experiencia_automovilismo" class="form-label text-light">
Experiencia en Automovilismo
</label>
<select class="form-select bg-dark text-light border-secondary"
id="experiencia_automovilismo" name="experiencia_automovilismo">
<option value="ninguna">Ninguna</option>
<option value="basica">Básica (Fan/Espectador)</option>
<option value="intermedia">Intermedia (Track Days ocasionales)</option>
<option value="avanzada">Avanzada (Competencias/Racing)</option>
</select>
<div class="invalid-feedback"></div>
</div>
<div class="col-md-6 mb-3">
<label for="experiencia_karting" class="form-label text-light">
Experiencia en Karting
</label>
<select class="form-select bg-dark text-light border-secondary"
id="experiencia_karting" name="experiencia_karting">
<option value="ninguna">Ninguna</option>
<option value="basica">Básica (Ocasional/Recreativo)</option>
<option value="intermedia">Intermedia (Regular/Club)</option>
<option value="avanzada">Avanzada (Competitivo)</option>
</select>
<div class="invalid-feedback"></div>
</div>
</div>
<!-- Licencia de manejo -->
<div class="row">
<div class="col-md-6 mb-3">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox"
id="licencia_manejo" name="licencia_manejo">
<label class="form-check-label text-light" for="licencia_manejo">
Tengo licencia de manejo vigente
</label>
</div>
</div>
<div class="col-md-6 mb-3" id="tipo-licencia-container" style="display: none;">
<label for="tipo_licencia" class="form-label text-light">
Tipo de Licencia
</label>
<select class="form-select bg-dark text-light border-secondary"
id="tipo_licencia" name="tipo_licencia">
<option value="">Seleccionar...</option>
<option value="automovilista">Automovilista</option>
<option value="chofer">Chofer</option>
<option value="motociclista">Motociclista</option>
<option value="internacional">Internacional</option>
</select>
<div class="invalid-feedback"></div>
</div>
</div>
<!-- Vehículos -->
<h6 class="text-light mb-3 mt-4">
<i class="fas fa-car me-2"></i>
Información Vehicular
</h6>
<div class="mb-3">
<label for="vehiculo_principal" class="form-label text-light">
Vehículo Principal (Marca y Modelo)
</label>
<input type="text" class="form-control bg-dark text-light border-secondary"
id="vehiculo_principal" name="vehiculo_principal"
placeholder="ej. BMW 320i, Audi A4, Ferrari 488">
<div class="invalid-feedback"></div>
</div>
<!-- Vehículos Ferrari -->
<div class="mb-3">
<label class="form-label text-light">
<i class="fas fa-horse me-2"></i>
¿Posees algún vehículo Ferrari?
</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="tiene_ferrari"
id="tiene_ferrari_no" value="no" checked>
<label class="form-check-label text-light" for="tiene_ferrari_no">
No poseo vehículos Ferrari
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="tiene_ferrari"
id="tiene_ferrari_si" value="si">
<label class="form-check-label text-light" for="tiene_ferrari_si">
Sí poseo vehículos Ferrari
</label>
</div>
</div>
<div id="ferrari-vehicles-container" style="display: none;">
<div class="card bg-secondary border-0 mb-3">
<div class="card-body">
<h6 class="text-light mb-3">Mis Vehículos Ferrari</h6>
<div id="ferrari-vehicles-list">
<!-- Se llenará dinámicamente -->
</div>
<button type="button" class="btn btn-outline-light btn-sm"
onclick="addFerrariVehicle()">
<i class="fas fa-plus me-2"></i> Agregar Vehículo Ferrari
</button>
</div>
</div>
</div>
<!-- Preferencias F1 -->
<h6 class="text-light mb-3 mt-4">
<i class="fas fa-flag-checkered me-2"></i>
Preferencias de Fórmula 1
</h6>
<div class="row">
<div class="col-md-6 mb-3">
<label for="pilotos_favoritos" class="form-label text-light">
Pilotos Favoritos (Actuales o Históricos)
</label>
<textarea class="form-control bg-dark text-light border-secondary"
id="pilotos_favoritos" name="pilotos_favoritos" rows="3"
placeholder="ej. Charles Leclerc, Carlos Sainz, Michael Schumacher..."></textarea>
<div class="invalid-feedback"></div>
</div>
<div class="col-md-6 mb-3">
<label for="circuitos_favoritos" class="form-label text-light">
Circuitos Favoritos
</label>
<textarea class="form-control bg-dark text-light border-secondary"
id="circuitos_favoritos" name="circuitos_favoritos" rows="3"
placeholder="ej. Monza, Silverstone, Hermanos Rodríguez..."></textarea>
<div class="invalid-feedback"></div>
</div>
</div>
<!-- Intereses del Club -->
<h6 class="text-light mb-3 mt-4">
<i class="fas fa-heart me-2"></i>
Intereses en el Club
</h6>
<div class="row">
<div class="col-md-6 mb-3">
<label class="form-label text-light">
¿Qué actividades te interesan más? (Selecciona todas las que apliquen)
</label>
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="intereses_carreras_f1" name="intereses_club[]" value="carreras_f1">
<label class="form-check-label text-light" for="intereses_carreras_f1">
Ver carreras de F1 en grupo
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="intereses_eventos_sociales" name="intereses_club[]" value="eventos_sociales">
<label class="form-check-label text-light" for="intereses_eventos_sociales">
Eventos sociales y cenas
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="intereses_track_days" name="intereses_club[]" value="track_days">
<label class="form-check-label text-light" for="intereses_track_days">
Track Days en autódromos
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="intereses_viajes" name="intereses_club[]" value="viajes">
<label class="form-check-label text-light" for="intereses_viajes">
Viajes a Italia y otros destinos
</label>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="intereses_karting" name="intereses_club[]" value="karting">
<label class="form-check-label text-light" for="intereses_karting">
Competencias de karting
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="intereses_coleccionismo" name="intereses_club[]" value="coleccionismo">
<label class="form-check-label text-light" for="intereses_coleccionismo">
Coleccionismo Ferrari
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="intereses_networking" name="intereses_club[]" value="networking">
<label class="form-check-label text-light" for="intereses_networking">
Networking profesional
</label>
</div>
</div>
</div>
<!-- Disponibilidad -->
<div class="mb-3">
<label class="form-label text-light">
Disponibilidad para eventos
</label>
<div class="row">
<div class="col-md-3">
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="disponibilidad_entre_semana" name="disponibilidad_eventos[]" value="entre_semana">
<label class="form-check-label text-light" for="disponibilidad_entre_semana">
Entre semana
</label>
</div>
</div>
<div class="col-md-3">
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="disponibilidad_fines_semana" name="disponibilidad_eventos[]" value="fines_semana">
<label class="form-check-label text-light" for="disponibilidad_fines_semana">
Fines de semana
</label>
</div>
</div>
<div class="col-md-3">
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="disponibilidad_vacaciones" name="disponibilidad_eventos[]" value="vacaciones">
<label class="form-check-label text-light" for="disponibilidad_vacaciones">
Vacaciones
</label>
</div>
</div>
<div class="col-md-3">
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="disponibilidad_cualquier_momento" name="disponibilidad_eventos[]" value="cualquier_momento">
<label class="form-check-label text-light" for="disponibilidad_cualquier_momento">
Cualquier momento
</label>
</div>
</div>
</div>
</div>
<!-- Comentarios adicionales -->
<div class="mb-3">
<label for="comentarios_adicionales" class="form-label text-light">
Comentarios Adicionales
</label>
<textarea class="form-control bg-dark text-light border-secondary"
id="comentarios_adicionales" name="comentarios_adicionales" rows="4"
placeholder="Cuéntanos algo más sobre ti, tus expectativas del club, o cualquier información relevante..."></textarea>
<div class="invalid-feedback"></div>
</div>
</div>
<div class="card-footer bg-transparent">
<div class="d-flex justify-content-between">
<button type="button" class="btn btn-outline-light" onclick="prevStep(2)">
<i class="fas fa-arrow-left me-2"></i> Anterior
</button>
<button type="button" class="btn btn-ferrari-red" onclick="nextStep(4)">
Siguiente <i class="fas fa-arrow-right ms-2"></i>
</button>
</div>
</div>
</div>
</div>
<!-- PASO 4: Documentos -->
<div class="form-step" id="step-4">
<div class="card bg-dark border-secondary">
<div class="card-header bg-ferrari-red">
<h4 class="mb-0 text-white">
<i class="fas fa-file-upload me-2"></i>
Documentos Requeridos
</h4>
</div>
<div class="card-body">
<div class="alert alert-info mb-4">
<i class="fas fa-info-circle me-2"></i>
<strong>Instrucciones:</strong>
<ul class="mb-0 mt-2">
<li>Los archivos deben estar en formato PDF, JPG o PNG</li>
<li>Tamaño máximo por archivo: 5MB</li>
<li>Asegúrate de que los documentos sean legibles y estén completos</li>
<li>Los documentos marcados con <span class="text-danger">*</span> son obligatorios</li>
</ul>
</div>
<!-- Documentos para Ordinarios -->
<div id="documentos-ordinario" class="documentos-tipo">
<h6 class="text-light mb-3">
<i class="fas fa-id-card me-2"></i>
Documentos Requeridos - Miembro Ordinario
</h6>
<div class="row">
<div class="col-md-6 mb-4">
<div class="document-upload-card">
<label class="form-label text-light">
Identificación Oficial <span class="text-danger">*</span>
</label>
<p class="text-muted small">INE, Pasaporte o Cédula Profesional</p>
<div class="upload-area" onclick="triggerFileInput('identificacion_oficial')">
<i class="fas fa-cloud-upload-alt fa-2x text-muted mb-2"></i>
<p class="text-muted mb-0">Click para subir archivo</p>
</div>
<input type="file" id="identificacion_oficial" name="documentos[identificacion_oficial]"
accept=".pdf,.jpg,.jpeg,.png" style="display: none;"
onchange="handleFileUpload(this, 'identificacion_oficial')">
<div class="file-info mt-2" id="identificacion_oficial_info" style="display: none;">
<small class="text-success">
<i class="fas fa-check-circle me-1"></i>
<span class="filename"></span>
</small>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="document-upload-card">
<label class="form-label text-light">
Comprobante de Domicilio <span class="text-danger">*</span>
</label>
<p class="text-muted small">No mayor a 3 meses de antigüedad</p>
<div class="upload-area" onclick="triggerFileInput('comprobante_domicilio')">
<i class="fas fa-cloud-upload-alt fa-2x text-muted mb-2"></i>
<p class="text-muted mb-0">Click para subir archivo</p>
</div>
<input type="file" id="comprobante_domicilio" name="documentos[comprobante_domicilio]"
accept=".pdf,.jpg,.jpeg,.png" style="display: none;"
onchange="handleFileUpload(this, 'comprobante_domicilio')">
<div class="file-info mt-2" id="comprobante_domicilio_info" style="display: none;">
<small class="text-success">
<i class="fas fa-check-circle me-1"></i>
<span class="filename"></span>
</small>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="document-upload-card">
<label class="form-label text-light">
Fotografía de Rostro <span class="text-danger">*</span>
</label>
<p class="text-muted small">Tipo credencial, fondo blanco</p>
<div class="upload-area" onclick="triggerFileInput('foto_rostro')">
<i class="fas fa-camera fa-2x text-muted mb-2"></i>
<p class="text-muted mb-0">Click para subir foto</p>
</div>
<input type="file" id="foto_rostro" name="documentos[foto_rostro]"
accept=".jpg,.jpeg,.png" style="display: none;"
onchange="handleFileUpload(this, 'foto_rostro')">
<div class="file-info mt-2" id="foto_rostro_info" style="display: none;">
<small class="text-success">
<i class="fas fa-check-circle me-1"></i>
<span class="filename"></span>
</small>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="document-upload-card">
<label class="form-label text-light">
Comprobante de Ingresos
</label>
<p class="text-muted small">Opcional - Estado de cuenta o recibo</p>
<div class="upload-area" onclick="triggerFileInput('comprobante_ingresos')">
<i class="fas fa-file-invoice-dollar fa-2x text-muted mb-2"></i>
<p class="text-muted mb-0">Click para subir archivo</p>
</div>
<input type="file" id="comprobante_ingresos" name="documentos[comprobante_ingresos]"
accept=".pdf,.jpg,.jpeg,.png" style="display: none;"
onchange="handleFileUpload(this, 'comprobante_ingresos')">
<div class="file-info mt-2" id="comprobante_ingresos_info" style="display: none;">
<small class="text-success">
<i class="fas fa-check-circle me-1"></i>
<span class="filename"></span>
</small>
</div>
</div>
</div>
</div>
</div>
<!-- Documentos para Juniors -->
<div id="documentos-junior" class="documentos-tipo" style="display: none;">
<h6 class="text-light mb-3">
<i class="fas fa-graduation-cap me-2"></i>
Documentos Requeridos - Miembro Junior
</h6>
<div class="row">
<div class="col-md-6 mb-4">
<div class="document-upload-card">
<label class="form-label text-light">
Acta de Nacimiento <span class="text-danger">*</span>
</label>
<p class="text-muted small">Copia certificada reciente</p>
<div class="upload-area" onclick="triggerFileInput('acta_nacimiento')">
<i class="fas fa-certificate fa-2x text-muted mb-2"></i>
<p class="text-muted mb-0">Click para subir archivo</p>
</div>
<input type="file" id="acta_nacimiento" name="documentos[acta_nacimiento]"
accept=".pdf,.jpg,.jpeg,.png" style="display: none;"
onchange="handleFileUpload(this, 'acta_nacimiento')">
<div class="file-info mt-2" id="acta_nacimiento_info" style="display: none;">
<small class="text-success">
<i class="fas fa-check-circle me-1"></i>
<span class="filename"></span>
</small>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="document-upload-card">
<label class="form-label text-light">
Fotografía de Rostro <span class="text-danger">*</span>
</label>
<p class="text-muted small">Tipo credencial, fondo blanco</p>
<div class="upload-area" onclick="triggerFileInput('foto_rostro_junior')">
<i class="fas fa-camera fa-2x text-muted mb-2"></i>
<p class="text-muted mb-0">Click para subir foto</p>
</div>
<input type="file" id="foto_rostro_junior" name="documentos[foto_rostro]"
accept=".jpg,.jpeg,.png" style="display: none;"
onchange="handleFileUpload(this, 'foto_rostro_junior')">
<div class="file-info mt-2" id="foto_rostro_junior_info" style="display: none;">
<small class="text-success">
<i class="fas fa-check-circle me-1"></i>
<span class="filename"></span>
</small>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 mb-4">
<div class="document-upload-card">
<label class="form-label text-light">
Autorización de Padres/Tutores <span class="text-danger">*</span>
</label>
<p class="text-muted small">Carta firmada por padres o tutores legales</p>
<div class="upload-area" onclick="triggerFileInput('autorizacion_padres_doc')">
<i class="fas fa-file-signature fa-2x text-muted mb-2"></i>
<p class="text-muted mb-0">Click para subir archivo</p>
</div>
<input type="file" id="autorizacion_padres_doc" name="documentos[autorizacion_padres]"
accept=".pdf,.jpg,.jpeg,.png" style="display: none;"
onchange="handleFileUpload(this, 'autorizacion_padres_doc')">
<div class="file-info mt-2" id="autorizacion_padres_doc_info" style="display: none;">
<small class="text-success">
<i class="fas fa-check-circle me-1"></i>
<span class="filename"></span>
</small>
</div>
</div>
</div>
</div>
</div>
<!-- Progress de documentos -->
<div class="mt-4">
<div class="card bg-secondary border-0">
<div class="card-body">
<h6 class="text-light mb-3">
<i class="fas fa-tasks me-2"></i>
Progreso de Documentos
</h6>
<div class="progress mb-2" style="height: 20px;">
<div class="progress-bar bg-success" role="progressbar"
id="documentos-progress" style="width: 0%">
<span id="documentos-progress-text">0%</span>
</div>
</div>
<small class="text-muted" id="documentos-status">
No has subido ningún documento requerido
</small>
</div>
</div>
</div>
</div>
<div class="card-footer bg-transparent">
<div class="d-flex justify-content-between">
<button type="button" class="btn btn-outline-light" onclick="prevStep(3)">
<i class="fas fa-arrow-left me-2"></i> Anterior
</button>
<button type="button" class="btn btn-ferrari-red" onclick="nextStep(5)"
id="btn-next-documentos">
Siguiente <i class="fas fa-arrow-right ms-2"></i>
</button>
</div>
</div>
</div>
</div>
<!-- PASO 5: Confirmación -->
<div class="form-step" id="step-5">
<div class="card bg-dark border-secondary">
<div class="card-header bg-ferrari-red">
<h4 class="mb-0 text-white">
<i class="fas fa-check-circle me-2"></i>
Confirmación y Envío
</h4>
</div>
<div class="card-body">
<!-- Resumen de información -->
<div class="alert alert-success mb-4">
<i class="fas fa-check-circle me-2"></i>
<strong>¡Felicidades!</strong> Has completado todos los pasos del formulario.
Revisa la información antes de enviar.
</div>
<!-- Resumen por secciones -->
<div class="accordion" id="resumen-accordion">
<!-- Resumen Datos Personales -->
<div class="accordion-item bg-dark border-secondary">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-dark text-light border-secondary"
type="button" data-bs-toggle="collapse" data-bs-target="#resumen-personales">
<i class="fas fa-user me-2"></i>
Datos Personales
</button>
</h2>
<div id="resumen-personales" class="accordion-collapse collapse"
data-bs-parent="#resumen-accordion">
<div class="accordion-body bg-dark text-light" id="resumen-personales-content">
<!-- Se llenará con JavaScript -->
</div>
</div>
</div>
<!-- Resumen Contacto -->
<div class="accordion-item bg-dark border-secondary">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-dark text-light border-secondary"
type="button" data-bs-toggle="collapse" data-bs-target="#resumen-contacto">
<i class="fas fa-address-book me-2"></i>
Contacto y Dirección
</button>
</h2>
<div id="resumen-contacto" class="accordion-collapse collapse"
data-bs-parent="#resumen-accordion">
<div class="accordion-body bg-dark text-light" id="resumen-contacto-content">
<!-- Se llenará con JavaScript -->
</div>
</div>
</div>
<!-- Resumen Ferrari -->
<div class="accordion-item bg-dark border-secondary">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-dark text-light border-secondary"
type="button" data-bs-toggle="collapse" data-bs-target="#resumen-ferrari">
<i class="fas fa-car-side me-2"></i>
Información Ferrari
</button>
</h2>
<div id="resumen-ferrari" class="accordion-collapse collapse"
data-bs-parent="#resumen-accordion">
<div class="accordion-body bg-dark text-light" id="resumen-ferrari-content">
<!-- Se llenará con JavaScript -->
</div>
</div>
</div>
<!-- Resumen Documentos -->
<div class="accordion-item bg-dark border-secondary">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-dark text-light border-secondary"
type="button" data-bs-toggle="collapse" data-bs-target="#resumen-documentos">
<i class="fas fa-file-upload me-2"></i>
Documentos Subidos
</button>
</h2>
<div id="resumen-documentos" class="accordion-collapse collapse"
data-bs-parent="#resumen-accordion">
<div class="accordion-body bg-dark text-light" id="resumen-documentos-content">
<!-- Se llenará con JavaScript -->
</div>
</div>
</div>
</div>
<!-- Términos y Condiciones -->
<div class="mt-4">
<h6 class="text-light mb-3">
<i class="fas fa-file-contract me-2"></i>
Términos y Condiciones
</h6>
<div class="card bg-secondary border-0 mb-3">
<div class="card-body">
<h6 class="text-light">Condiciones de Membresía - Scuderia Ferrari Club México</h6>
<div class="text-muted small" style="max-height: 200px; overflow-y: auto;">
<p><strong>1. Membresía y Beneficios:</strong></p>
<ul>
<li>Al completar el registro, tendrás acceso a eventos exclusivos del club</li>
<li>Podrás comprar boletos preferenciales para el GP de México</li>
<li>Tendrás descuentos especiales en viajes a Italia y experiencias Ferrari</li>
<li>Participación en track days y eventos automovilísticos</li>
</ul>
<p><strong>2. Responsabilidades del Miembro:</strong></p>
<ul>
<li>Mantener actualizada la información de contacto</li>
<li>Respetar el código de conducta en eventos</li>
<li>Cumplir con las políticas de pago de eventos adicionales</li>
</ul>
<p><strong>3. Experiencias VIP:</strong></p>
<ul>
<li>Solo miembros activos pueden acceder a las experiencias VIP</li>
<li>Los precios preferenciales aplicarán automáticamente</li>
<li>Las reservas están sujetas a disponibilidad</li>
</ul>
<p><strong>4. Privacidad:</strong></p>
<ul>
<li>Tus datos serán utilizados únicamente para actividades del club</li>
<li>No compartiremos información con terceros sin tu consentimiento</li>
</ul>
</div>
</div>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox"
id="acepta_terminos" name="acepta_terminos" required>
<label class="form-check-label text-light" for="acepta_terminos">
<span class="text-danger">*</span> He leído y acepto los términos y condiciones de membresía
</label>
<div class="invalid-feedback"></div>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox"
id="acepta_comunicaciones" name="acepta_comunicaciones">
<label class="form-check-label text-light" for="acepta_comunicaciones">
Acepto recibir comunicaciones sobre eventos y actividades del club
</label>
</div>
</div>
<!-- Estado final -->
<div class="alert alert-info">
<i class="fas fa-info-circle me-2"></i>
<strong>Proceso de Validación:</strong><br>
Una vez enviado el formulario, tu información será revisada por nuestro equipo administrativo.
Recibirás una confirmación por email y WhatsApp cuando tu membresía sea activada.
</div>
</div>
<div class="card-footer bg-transparent">
<div class="d-flex justify-content-between">
<button type="button" class="btn btn-outline-light" onclick="prevStep(4)">
<i class="fas fa-arrow-left me-2"></i> Anterior
</button>
<button type="submit" class="btn btn-success btn-lg" id="btn-submit-formulario">
<i class="fas fa-paper-plane me-2"></i>
Enviar Formulario
</button>
</div>
</div>
</div>
</div>
<!-- Los pasos 3, 4 y 5 continuarán en el siguiente archivo... -->
</form>
<!-- Mensaje de éxito -->
<div id="success-message" class="success-container" style="display: none;">
<div class="success-icon">
<i class="fas fa-check-circle"></i>
</div>
<h2 class="success-title">¡Formulario Enviado Exitosamente!</h2>
<div class="success-message">
<p>Gracias por completar tu registro en el Scuderia Ferrari Club México.</p>
<p>Hemos recibido toda tu información y documentos. Nuestro equipo revisará tu solicitud y te contactaremos pronto.</p>
<p><strong>¿Qué sigue?</strong></p>
<ul class="text-start d-inline-block">
<li>Recibirás una confirmación por correo electrónico</li>
<li>Te contactaremos por WhatsApp en las próximas 24-48 horas</li>
<li>Te informaremos sobre los próximos eventos y experiencias VIP</li>
</ul>
</div>
<div class="mt-4">
<a href="index.php" class="btn btn-ferrari btn-lg">
<i class="fas fa-home me-2"></i>
Volver al Portal
</a>
</div>
</div>
</main>
<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JavaScript -->
<script src="../assets/js/formulario-completo.js"></script>
</body>
</html>