@extends('layouts.master')

@section('title')
    @lang('translation.registro-alumnos')
@endsection

@section('css')
    <link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            @lang('translation.control-escolar')
        @endslot
        @slot('title')
            @lang('translation.registro-alumnos')
        @endslot
    @endcomponent

    <div class="row">
        <div class="col-12">
            <p class="text-muted mb-3">
                @lang('translation.instruccion-registro-alumnos')
            </p>

            <!-- Pestañas -->
            <ul class="nav nav-tabs nav-tabs-custom nav-primary mb-3" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#tab-info-alumno" role="tab">
                        @lang('translation.tab-info-alumno')
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#tab-info-familiar" role="tab">
                        @lang('translation.tab-info-familiar')
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#tab-inscripcion-admin" role="tab">
                        @lang('translation.tab-inscripcion-admin')
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#tab-info-admin" role="tab">
                        @lang('translation.tab-info-admin')
                    </a>
                </li>
            </ul>

            <div class="tab-content">
                <!-- Pestaña 1: Información del Alumno -->
                <div class="tab-pane fade show active" id="tab-info-alumno" role="tabpanel">
                    <div class="card">
                        <div class="card-body">
                            <p class="text-muted mb-4">
                                @lang('translation.subtitulo-info-alumno')
                            </p>

                            <form id="formInfoAlumno" class="needs-validation" novalidate>
                                <div class="row g-3">
                                    <!-- Fila 1: Fecha de registro (solo primera columna) -->
                                    <div class="col-12 col-md-4">
                                        <label for="fechaRegistro" class="form-label">* @lang('translation.fecha-registro')</label>
                                        <input type="text" class="form-control" id="fechaRegistro" value="{{ date('d/m/Y') }}" readonly>
                                    </div>
                                    <div class="col-12 col-md-4 d-none d-md-block"></div>
                                    <div class="col-12 col-md-4 d-none d-md-block"></div>

                                    <!-- Fila 2: Nombre | Apellido paterno | Apellido materno (con lupa) -->
                                    <div class="col-12 col-md-4">
                                        <label for="nombreAlumno" class="form-label">* @lang('translation.nombre')</label>
                                        <input type="text" class="form-control" id="nombreAlumno" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="apellidoPaterno" class="form-label">* @lang('translation.apellido-paterno')</label>
                                        <input type="text" class="form-control" id="apellidoPaterno" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="apellidoMaterno" class="form-label">@lang('translation.apellido-materno')</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="apellidoMaterno" placeholder="">
                                            <button type="button" class="btn btn-outline-secondary" title="Buscar">
                                                <i class="ri-search-line"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <!-- Fila 3: Sexo | Nacionalidad | Entidad federativa -->
                                    <div class="col-12 col-md-4">
                                        <label for="sexoAlumno" class="form-label">* @lang('translation.sexo')</label>
                                        <select class="form-select" id="sexoAlumno">
                                            <option value="Femenino">@lang('translation.femenino')</option>
                                            <option value="Masculino">@lang('translation.masculino')</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="nacionalidadAlumno" class="form-label">* @lang('translation.nacionalidad')</label>
                                        <select class="form-select" id="nacionalidadAlumno">
                                            <option value="">-- @lang('translation.seleccione') --</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="entidadFederativaAlumno" class="form-label">* @lang('translation.entidad-federativa')</label>
                                        <select class="form-select" id="entidadFederativaAlumno">
                                            <option value="">-- @lang('translation.seleccione') --</option>
                                        </select>
                                    </div>

                                    <!-- Fila 4: Lugar de nacimiento | (vacío) | Fecha de nacimiento -->
                                    <div class="col-12 col-md-4">
                                        <label for="lugarNacimientoAlumno" class="form-label">@lang('translation.lugar-nacimiento')</label>
                                        <input type="text" class="form-control" id="lugarNacimientoAlumno" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-4 d-none d-md-block"></div>
                                    <div class="col-12 col-md-4">
                                        <label for="fechaNacimiento" class="form-label">* @lang('translation.fecha-nacimiento')</label>
                                        <input type="date" class="form-control" id="fechaNacimiento" placeholder="dd/mm/aaaa">
                                    </div>

                                    <!-- Fila 5: CURP/ID (con engranaje) | Escuela de procedencia (con +) -->
                                    <div class="col-12 col-md-6">
                                        <label for="curpAlumno" class="form-label">* @lang('translation.curp-id')</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="curpAlumno" placeholder="" maxlength="18">
                                            <button type="button" class="btn btn-outline-secondary" id="btnGenerarCurp" title="Generar CURP">
                                                <i class="ri-settings-3-line"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <label for="escuelaProcedencia" class="form-label">@lang('translation.escuela-procedencia')</label>
                                        <div class="input-group">
                                            <select class="form-select" id="escuelaProcedencia">
                                                <option value="">- @lang('translation.ninguna') -</option>
                                            </select>
                                            <button type="button" class="btn btn-outline-primary" id="btnNuevaEscuela" title="Nueva escuela">
                                                <i class="ri-add-line"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <!-- Fila 6: Teléfono de casa | Teléfono celular (ambos con ¿Podemos comunicarnos?) -->
                                    <div class="col-12 col-md-6">
                                        <label for="telefonoCasa" class="form-label">@lang('translation.telefono-casa')</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="telefonoCasa" placeholder="">
                                            <button type="button" class="btn btn-outline-secondary btn-comunicacion" data-campo="telefonoCasa" title="@lang('translation.podemos-comunicarnos')">
                                                <i class="ri-close-line icon-comunicacion" data-estado="no"></i>
                                                <span class="ms-1 d-none d-sm-inline">@lang('translation.podemos-comunicarnos')</span>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <label for="telefonoCelular" class="form-label">@lang('translation.telefono-celular')</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="telefonoCelular" placeholder="">
                                            <button type="button" class="btn btn-outline-secondary btn-comunicacion" data-campo="telefonoCelular" title="@lang('translation.podemos-comunicarnos')">
                                                <i class="ri-close-line icon-comunicacion" data-estado="no"></i>
                                                <span class="ms-1 d-none d-sm-inline">@lang('translation.podemos-comunicarnos')</span>
                                            </button>
                                        </div>
                                    </div>

                                    <!-- Fila 7: Email | Mensajería (Skype, otros) -->
                                    <div class="col-12 col-md-6">
                                        <label for="emailAlumno" class="form-label">* @lang('translation.email')</label>
                                        <div class="input-group">
                                            <input type="email" class="form-control" id="emailAlumno" placeholder="">
                                            <button type="button" class="btn btn-outline-secondary btn-comunicacion" data-campo="emailAlumno" title="@lang('translation.podemos-comunicarnos')">
                                                <i class="ri-close-line icon-comunicacion" data-estado="no"></i>
                                                <span class="ms-1 d-none d-sm-inline">@lang('translation.podemos-comunicarnos')</span>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <label for="mensajeriaAlumno" class="form-label">@lang('translation.mensajeria')</label>
                                        <input type="text" class="form-control" id="mensajeriaAlumno" placeholder="">
                                    </div>
                                </div>

                                <p class="text-muted mt-3 mb-2 small">@lang('translation.nota-campos-obligatorios')</p>
                                <div class="d-flex gap-2 justify-content-end mt-3">
                                    <a href="{{ url('alumnos') }}" class="btn btn-secondary">@lang('translation.cancelar')</a>
                                    <button type="submit" class="btn btn-primary">@lang('translation.continuar')</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Pestaña 2: Información Familiar -->
                <div class="tab-pane fade" id="tab-info-familiar" role="tabpanel">
                    <div class="card">
                        <div class="card-body">
                            <p class="text-muted mb-4">
                                Ingresa los datos familiares del alumno y presiona el botón del <strong>SIGUIENTE PASO</strong> para continuar con el formulario.
                            </p>

                            <form id="formInfoFamiliar" class="needs-validation" novalidate>
                                <!-- Jerarquía del alumno dentro de la familia -->
                                <div class="row g-3 mb-4">
                                    <div class="col-12 col-md-6">
                                        <label for="jerarquiaAlumnoFamilia" class="form-label">* Jerarquía del alumno dentro de la familia</label>
                                        <select class="form-select" id="jerarquiaAlumnoFamilia">
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <label for="familiaRegistrada" class="form-label">¿Ya se ha registrado la familia en el sistema?</label>
                                        <select class="form-select" id="familiaRegistrada">
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- Información de la familia -->
                                <h6 class="text-primary mb-2">Información de la familia</h6>
                                <div class="row g-3 mb-4">
                                    <div class="col-12 col-md-4">
                                        <label for="claveFamilia" class="form-label">Clave de familia</label>
                                        <input type="text" class="form-control" id="claveFamilia" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="nombreFamilia" class="form-label">* Nombre de la Familia</label>
                                        <input type="text" class="form-control" id="nombreFamilia" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="fechaRegistroFamilia" class="form-label">* Fecha de registro</label>
                                        <input type="text" class="form-control" id="fechaRegistroFamilia" value="{{ date('d/m/Y') }}" readonly>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="tipoProcesoFamilia" class="form-label">* Tipo de proceso</label>
                                        <select class="form-select" id="tipoProcesoFamilia">
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="origenContactoFamilia" class="form-label">* Origen de contacto</label>
                                        <select class="form-select" id="origenContactoFamilia">
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="solicitoInformesFamilia" class="form-label">* Solicitó informes anteriormente</label>
                                        <select class="form-select" id="solicitoInformesFamilia">
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="plantelRegistraFamilia" class="form-label">* Plantel que registra</label>
                                        <select class="form-select" id="plantelRegistraFamilia">
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- Domicilio -->
                                <h6 class="text-primary mb-2 d-flex justify-content-between align-items-center flex-wrap gap-2">
                                    <span>Domicilio</span>
                                </h6>
                                <div class="row g-3 mb-4">
                                    <div class="col-12">
                                        <label for="calleNumeroFamilia" class="form-label">Calle y No.</label>
                                        <input type="text" class="form-control" id="calleNumeroFamilia" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <label for="entreCalleFamilia" class="form-label">Entre calle</label>
                                        <input type="text" class="form-control" id="entreCalleFamilia" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <label for="yCalleFamilia" class="form-label">Y calle</label>
                                        <input type="text" class="form-control" id="yCalleFamilia" placeholder="">
                                    </div>
                                    <div class="col-12">
                                        <label for="otraReferenciaFamilia" class="form-label">Otra referencia</label>
                                        <input type="text" class="form-control" id="otraReferenciaFamilia" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <label for="paisFamilia" class="form-label">País</label>
                                        <select class="form-select" id="paisFamilia">
                                            <option value="México">México</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <label for="codigoPostalFamilia" class="form-label">Código postal</label>
                                        <input type="text" class="form-control" id="codigoPostalFamilia" placeholder="Ej: 20000" maxlength="5">
                                    </div>
                                    <div class="col-12">
                                        <label for="localidadFamilia" class="form-label">Localidad</label>
                                        <select class="form-select" id="localidadFamilia">
                                            <option value="">Selecciona una opción...</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- Información del tutor -->
                                <h6 class="text-primary mb-2">Información del tutor</h6>
                                <p class="text-muted small mb-3">Selecciona el tipo de familiar al que corresponde el tutor y completa la información requerida.</p>
                                <div class="row g-3 mb-3">
                                    <div class="col-12 col-md-4">
                                        <label for="tipoPersonaTutor" class="form-label">* Tipo de persona</label>
                                        <select class="form-select" id="tipoPersonaTutor">
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="jerarquiaFamiliarTutor" class="form-label">* Jerarquía familiar</label>
                                        <select class="form-select" id="jerarquiaFamiliarTutor">
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="nombramientoTutor" class="form-label">* Nombramiento</label>
                                        <select class="form-select" id="nombramientoTutor">
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label class="form-label">* Sexo</label>
                                        <div class="d-flex gap-3 pt-2">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="sexoTutor" id="sexoTutorM" value="Masculino">
                                                <label class="form-check-label" for="sexoTutorM">Masculino</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="sexoTutor" id="sexoTutorF" value="Femenino">
                                                <label class="form-check-label" for="sexoTutorF">Femenino</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="nombreTutor" class="form-label">* Nombre</label>
                                        <input type="text" class="form-control" id="nombreTutor" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="apellidoPaternoTutor" class="form-label">Apellido paterno</label>
                                        <input type="text" class="form-control" id="apellidoPaternoTutor" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="apellidoMaternoTutor" class="form-label">Apellido materno</label>
                                        <input type="text" class="form-control" id="apellidoMaternoTutor" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="lugarNacimientoTutor" class="form-label">Lugar de nacimiento</label>
                                        <input type="text" class="form-control" id="lugarNacimientoTutor" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="fechaNacimientoTutor" class="form-label">Fecha de nacimiento</label>
                                        <input type="date" class="form-control" id="fechaNacimientoTutor" placeholder="dd/mm/aaaa">
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="estadoCivilTutor" class="form-label">Estado Civil</label>
                                        <select class="form-select" id="estadoCivilTutor">
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="ocupacionTutor" class="form-label">Ocupación</label>
                                        <input type="text" class="form-control" id="ocupacionTutor" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="empresaTutor" class="form-label">Empresa</label>
                                        <input type="text" class="form-control" id="empresaTutor" placeholder="">
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label for="cargoTutor" class="form-label">Cargo</label>
                                        <input type="text" class="form-control" id="cargoTutor" placeholder="">
                                    </div>
                                </div>
                                <div class="row g-3 mb-3">
                                    <div class="col-12 col-md-6">
                                        <label for="telefonoCasaTutor" class="form-label">Teléfono de casa</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="telefonoCasaTutor" placeholder="">
                                            <button type="button" class="btn btn-outline-secondary btn-comunicacion" data-campo="telefonoCasaTutor" title="¿Podemos comunicarnos?">
                                                <i class="ri-close-line icon-comunicacion" data-estado="no"></i>
                                                <span class="ms-1 d-none d-sm-inline">¿Podemos comunicarnos?</span>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <label for="telefonoOficinaTutor" class="form-label">Teléfono de oficina</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="telefonoOficinaTutor" placeholder="">
                                            <button type="button" class="btn btn-outline-secondary btn-comunicacion" data-campo="telefonoOficinaTutor" title="¿Podemos comunicarnos?">
                                                <i class="ri-close-line icon-comunicacion" data-estado="no"></i>
                                                <span class="ms-1 d-none d-sm-inline">¿Podemos comunicarnos?</span>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <label for="telefonoCelularTutor" class="form-label">Teléfono celular</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="telefonoCelularTutor" placeholder="">
                                            <button type="button" class="btn btn-outline-secondary btn-comunicacion" data-campo="telefonoCelularTutor" title="¿Podemos comunicarnos?">
                                                <i class="ri-close-line icon-comunicacion" data-estado="no"></i>
                                                <span class="ms-1 d-none d-sm-inline">¿Podemos comunicarnos?</span>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <label for="emailTutor" class="form-label">* Email</label>
                                        <div class="input-group">
                                            <input type="email" class="form-control" id="emailTutor" placeholder="">
                                            <button type="button" class="btn btn-outline-secondary btn-comunicacion" data-campo="emailTutor" title="¿Podemos comunicarnos?">
                                                <i class="ri-close-line icon-comunicacion" data-estado="no"></i>
                                                <span class="ms-1 d-none d-sm-inline">¿Podemos comunicarnos?</span>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <label for="observacionesTutor" class="form-label">Observaciones</label>
                                        <textarea class="form-control" id="observacionesTutor" rows="3" maxlength="300" placeholder="(300 caracteres restantes)"></textarea>
                                        <small class="text-muted"><span id="contadorObservacionesTutor">300</span> caracteres restantes</small>
                                    </div>
                                </div>

                                <p class="text-muted mt-3 mb-2 small">Nota: Campos obligatorios (*).</p>
                                <div class="d-flex gap-2 justify-content-between mt-3">
                                    <button type="button" class="btn btn-secondary" id="btnRegresarFamiliar">Regresar</button>
                                    <button type="submit" class="btn btn-primary">Continuar</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Pestaña 3: Inscripción Administrativa -->
                <div class="tab-pane fade" id="tab-inscripcion-admin" role="tabpanel">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="text-primary mb-2">Inscripción Administrativa</h6>
                            <p class="text-muted mb-4">
                                Ingresa la información de la inscripción administrativa del alumno, así como la campaña de seguimiento y el departamento a los que está asignado. Una vez finalizado, presiona el botón del <strong>CONTINUAR</strong> para terminar con el registro del alumno.
                            </p>

                            <form id="formInscripcionAdmin" class="needs-validation" novalidate>
                                <div class="row g-3 mb-3">
                                    <div class="col-12 col-md-6 col-lg-3">
                                        <label for="plantelInscripcion" class="form-label">* Plantel</label>
                                        <select class="form-select" id="plantelInscripcion">
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-3">
                                        <label for="ofertaEducativaInscripcion" class="form-label">* Oferta educativa</label>
                                        <select class="form-select" id="ofertaEducativaInscripcion">
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-3">
                                        <label for="planEstudiosInscripcion" class="form-label">Plan de estudios actual</label>
                                        <select class="form-select" id="planEstudiosInscripcion">
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                        <small class="text-muted">Nota: Al actualizar este campo se mostrará solo la información referente a este plan de estudios.</small>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-3">
                                        <label for="turnoInscripcion" class="form-label">* Turno</label>
                                        <select class="form-select" id="turnoInscripcion">
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row g-3 mb-3">
                                    <div class="col-12 col-md-6 col-lg-3">
                                        <label for="gradoInscripcion" class="form-label">* Grado</label>
                                        <select class="form-select" id="gradoInscripcion">
                                            <option value="">-- Seleccione --</option>
                                            @for ($g = 1; $g <= 9; $g++)
                                                <option value="{{ $g }}">{{ $g }}°</option>
                                            @endfor
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-3">
                                        <label for="grupoInscripcion" class="form-label">* Grupo</label>
                                        <select class="form-select" id="grupoInscripcion">
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-3">
                                        <label for="periodoInscripcion" class="form-label">* Periodo</label>
                                        <div class="input-group">
                                            <button type="button" class="btn btn-outline-secondary" id="btnBuscarPeriodo" title="Seleccionar periodo">
                                                <i class="ri-search-line"></i>
                                            </button>
                                            <input type="text" class="form-control" id="periodoInscripcion" placeholder="Selecciona un periodo" readonly>
                                            <input type="hidden" id="cicloIdInscripcion">
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-3">
                                        <label class="form-label">Indicador de ocupación</label>
                                        <div class="d-flex align-items-center gap-2">
                                            <span id="indicadorOcupacionTexto" class="text-muted">Esperando parámetros</span>
                                            <span id="indicadorOcupacionSpinner" class="spinner-border spinner-border-sm text-secondary" role="status" style="display: none;">
                                                <span class="visually-hidden">Cargando...</span>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-3">
                                        <label for="matriculaOpcionalInscripcion" class="form-label">Matrícula opcional</label>
                                        <input type="text" class="form-control" id="matriculaOpcionalInscripcion" placeholder="">
                                        <small class="text-muted">Aplica para alumnos de bachillerato o matrículas asignadas por la SEP.</small>
                                    </div>
                                </div>
                                <div class="row g-3 mb-3">
                                    <div class="col-12 col-md-6 col-lg-3">
                                        <label for="fechaInscripcion" class="form-label">* Fecha de inscripción</label>
                                        <input type="text" class="form-control" id="fechaInscripcion" value="{{ date('d/m/Y') }}" readonly>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-3">
                                        <label for="matriculaInscripcion" class="form-label">* Matrícula</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="matriculaInscripcion" value="Se generará al concluir el registro" readonly>
                                            <button type="button" class="btn btn-outline-secondary" title="Opciones">
                                                <i class="ri-settings-3-line"></i>
                                            </button>
                                            <button type="button" class="btn btn-outline-secondary" title="Información">
                                                <i class="ri-user-line"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <p class="text-muted mt-3 mb-2 small">Nota: Campos obligatorios (*).</p>
                                <div class="d-flex gap-2 justify-content-between mt-3">
                                    <button type="button" class="btn btn-secondary" id="btnRegresarInscripcion">Regresar</button>
                                    <button type="submit" class="btn btn-primary">Continuar</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Pestaña 4: Información Administrativa -->
                <div class="tab-pane fade" id="tab-info-admin" role="tabpanel">
                    <div class="card">
                        <div class="card-body">
                            <p class="text-muted mb-3">
                                Selecciona los documentos que deseas añadir al expediente digital.
                            </p>
                            <form id="formInfoAdmin">
                                <div class="row g-3 mb-3">
                                    <div class="col-12 col-md-4">
                                        <label for="fechaRecepcionDoc" class="form-label">Fecha de recepción</label>
                                        <input type="date" class="form-control" id="fechaRecepcionDoc" value="{{ date('Y-m-d') }}">
                                    </div>
                                    <div class="col-12 col-md-8">
                                        <label for="observacionesDoc" class="form-label">Observaciones</label>
                                        <textarea class="form-control" id="observacionesDoc" rows="2" placeholder="Observaciones generales del expediente"></textarea>
                                    </div>
                                </div>
                                <p class="text-muted small mb-2">
                                    A continuación selecciona los documento(s) a conservar en el proceso de CONVERSIÓN. Visualiza, carga y reemplaza los documentos que necesites.
                                </p>
                                <div class="table-responsive mb-4">
                                    <table class="table table-bordered table-sm">
                                        <thead class="table-primary">
                                            <tr>
                                                <th>Documento</th>
                                                <th class="text-center">Estatus</th>
                                                <th class="text-center">Original</th>
                                                <th class="text-center">Copia</th>
                                                <th class="text-center">Opciones</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tablaDocumentosRegistroBody">
                                            <tr data-tipo="ACTA_NACIMIENTO">
                                                <td>ACTA DE NACIMIENTO</td>
                                                <td class="text-center"><span class="badge bg-secondary doc-estatus">Pendiente</span></td>
                                                <td class="text-center doc-original">—</td>
                                                <td class="text-center doc-copia">—</td>
                                                <td class="text-center"><button type="button" class="btn btn-sm btn-outline-primary btnSubirDocRegistro" data-tipo="ACTA_NACIMIENTO" data-nombre="ACTA DE NACIMIENTO" title="Subir documento"><i class="ri-file-upload-line"></i></button></td>
                                            </tr>
                                            <tr data-tipo="ANTECEDENTE_ACADEMICO">
                                                <td>ANTECEDENTE ACADÉMICO</td>
                                                <td class="text-center"><span class="badge bg-secondary doc-estatus">Pendiente</span></td>
                                                <td class="text-center doc-original">—</td>
                                                <td class="text-center doc-copia">—</td>
                                                <td class="text-center"><button type="button" class="btn btn-sm btn-outline-primary btnSubirDocRegistro" data-tipo="ANTECEDENTE_ACADEMICO" data-nombre="ANTECEDENTE ACADÉMICO" title="Subir documento"><i class="ri-file-upload-line"></i></button></td>
                                            </tr>
                                            <tr data-tipo="COMPROBANTE_DOMICILIO">
                                                <td>COMPROBANTE DE DOMICILIO</td>
                                                <td class="text-center"><span class="badge bg-secondary doc-estatus">Pendiente</span></td>
                                                <td class="text-center doc-original">—</td>
                                                <td class="text-center doc-copia">—</td>
                                                <td class="text-center"><button type="button" class="btn btn-sm btn-outline-primary btnSubirDocRegistro" data-tipo="COMPROBANTE_DOMICILIO" data-nombre="COMPROBANTE DE DOMICILIO" title="Subir documento"><i class="ri-file-upload-line"></i></button></td>
                                            </tr>
                                            <tr data-tipo="CURP">
                                                <td>CURP</td>
                                                <td class="text-center"><span class="badge bg-secondary doc-estatus">Pendiente</span></td>
                                                <td class="text-center doc-original">—</td>
                                                <td class="text-center doc-copia">—</td>
                                                <td class="text-center"><button type="button" class="btn btn-sm btn-outline-primary btnSubirDocRegistro" data-tipo="CURP" data-nombre="CURP" title="Subir documento"><i class="ri-file-upload-line"></i></button></td>
                                            </tr>
                                            <tr data-tipo="IDENTIFICACION_OFICIAL">
                                                <td>IDENTIFICACIÓN OFICIAL</td>
                                                <td class="text-center"><span class="badge bg-secondary doc-estatus">Pendiente</span></td>
                                                <td class="text-center doc-original">—</td>
                                                <td class="text-center doc-copia">—</td>
                                                <td class="text-center"><button type="button" class="btn btn-sm btn-outline-primary btnSubirDocRegistro" data-tipo="IDENTIFICACION_OFICIAL" data-nombre="IDENTIFICACIÓN OFICIAL" title="Subir documento"><i class="ri-file-upload-line"></i></button></td>
                                            </tr>
                                            <tr data-tipo="VALIDACION_DOCUMENTOS">
                                                <td>VALIDACIÓN DE DOCUMENTOS</td>
                                                <td class="text-center"><span class="badge bg-secondary doc-estatus">Pendiente</span></td>
                                                <td class="text-center doc-original">—</td>
                                                <td class="text-center doc-copia">—</td>
                                                <td class="text-center"><button type="button" class="btn btn-sm btn-outline-primary btnSubirDocRegistro" data-tipo="VALIDACION_DOCUMENTOS" data-nombre="VALIDACIÓN DE DOCUMENTOS" title="Subir documento"><i class="ri-file-upload-line"></i></button></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <h6 class="text-primary mb-2">Planes de pago</h6>
                                <p class="text-muted small mb-3">De la siguiente lista selecciona el plan de pagos que será asignado a la inscripción del alumno.</p>
                                <div class="row g-3 mb-4">
                                    <div class="col-12 col-md-6 col-lg-4">
                                        <label for="planPagoInscripcion" class="form-label">Plan</label>
                                        <select class="form-select" id="planPagoInscripcion">
                                            <option value="">Definir más tarde</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="d-flex gap-2 justify-content-end mt-3">
                                    <button type="button" class="btn btn-secondary" id="btnRegresarInfoAdmin">Regresar</button>
                                    <button type="submit" class="btn btn-success" id="btnGuardarRegistro"><i class="ri-save-line me-1"></i>Guardar</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Nueva escuela -->
    <div class="modal fade" id="modalNuevaEscuela" tabindex="-1" aria-labelledby="modalNuevaEscuelaLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="modalNuevaEscuelaLabel">@lang('translation.nueva-escuela')</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="text-muted mb-3">@lang('translation.instruccion-nueva-escuela')</p>

                    <form id="formNuevaEscuela">
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label for="nombreEscuela" class="form-label">* @lang('translation.nombre-escuela')</label>
                                <input type="text" class="form-control" id="nombreEscuela" required>
                            </div>
                            <div class="col-md-6">
                                <label for="contactoEscuela" class="form-label">@lang('translation.contacto')</label>
                                <input type="text" class="form-control" id="contactoEscuela">
                            </div>
                            <div class="col-md-6">
                                <label for="telefonosEscuela" class="form-label">@lang('translation.telefonos')</label>
                                <input type="text" class="form-control" id="telefonosEscuela">
                            </div>
                            <div class="col-md-6">
                                <label for="emailEscuela" class="form-label">@lang('translation.correo-electronico')</label>
                                <input type="email" class="form-control" id="emailEscuela">
                            </div>
                            <div class="col-md-6">
                                <label for="nacionalidadEscuela" class="form-label">* @lang('translation.nacionalidad')</label>
                                <select class="form-select" id="nacionalidadEscuela">
                                    <option value="Mexicana">@lang('translation.mexico')</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="entidadFederativaEscuela" class="form-label">* @lang('translation.entidad-federativa')</label>
                                <select class="form-select" id="entidadFederativaEscuela">
                                    <option value="">-- @lang('translation.seleccione') --</option>
                                </select>
                            </div>
                        </div>

                        <h6 class="text-primary mb-2">@lang('translation.domicilio')</h6>
                        <div class="row g-3 mb-3">
                            <div class="col-12">
                                <label for="calleNumeroEscuela" class="form-label">@lang('translation.calle-numero')</label>
                                <input type="text" class="form-control" id="calleNumeroEscuela">
                            </div>
                            <div class="col-md-6">
                                <label for="entreCalleEscuela" class="form-label">@lang('translation.entre-calle')</label>
                                <input type="text" class="form-control" id="entreCalleEscuela">
                            </div>
                            <div class="col-md-6">
                                <label for="yCalleEscuela" class="form-label">@lang('translation.y-calle')</label>
                                <input type="text" class="form-control" id="yCalleEscuela">
                            </div>
                            <div class="col-12">
                                <label for="otraReferenciaEscuela" class="form-label">@lang('translation.otra-referencia')</label>
                                <textarea class="form-control" id="otraReferenciaEscuela" rows="2"></textarea>
                            </div>
                            <div class="col-md-6">
                                <label for="paisEscuela" class="form-label">@lang('translation.pais')</label>
                                <select class="form-select" id="paisEscuela">
                                    <option value="México">@lang('translation.mexico')</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="codigoPostalEscuela" class="form-label">@lang('translation.codigo-postal')</label>
                                <input type="text" class="form-control" id="codigoPostalEscuela" placeholder="Ej: 20000">
                            </div>
                            <div class="col-md-6">
                                <label for="regionEscuela" class="form-label">@lang('translation.region')</label>
                                <select class="form-select" id="regionEscuela">
                                    <option value="">-- @lang('translation.seleccione') --</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="localidadEscuela" class="form-label">@lang('translation.localidad')</label>
                                <select class="form-select" id="localidadEscuela">
                                    <option value="">-- @lang('translation.seleccione') --</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="coloniaEscuela" class="form-label">@lang('translation.colonia')</label>
                                <input type="text" class="form-control" id="coloniaEscuela" placeholder="@lang('translation.colonia')">
                            </div>
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="escuelaActiva" checked>
                            <label class="form-check-label" for="escuelaActiva">@lang('translation.escuela-activa')</label>
                        </div>
                        <p class="text-muted small">@lang('translation.nota-campos-obligatorios')</p>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">@lang('translation.cancelar')</button>
                    <button type="button" class="btn btn-success" id="btnGuardarEscuela">@lang('translation.registrar')</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Seleccionar periodo -->
    <div class="modal fade" id="modalSeleccionarPeriodo" tabindex="-1" aria-labelledby="modalSeleccionarPeriodoLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="modalSeleccionarPeriodoLabel">Seleccionar periodo</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body">
                    <p class="text-muted small mb-3">Seleccione el periodo (ciclo) para la inscripción.</p>
                    <div class="mb-0">
                        <label class="form-label">Periodos disponibles</label>
                        <div id="listaPeriodosDisponibles" class="list-group">
                            <p class="text-muted small">Cargando...</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Subir documento (expediente en pestaña 4) -->
    <div class="modal fade" id="modalSubirDocumentoRegistro" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">Subir documento</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="text-muted small mb-3">A continuación selecciona el documento correspondiente con el botón <strong>Seleccionar archivo</strong> y la información, para finalizar la carga presiona en el botón <strong>Guardar</strong>.</p>
                    <input type="hidden" id="subirDocTipo" value="">
                    <input type="hidden" id="subirDocNombre" value="">
                    <div class="mb-3">
                        <label class="form-label">* Documento</label>
                        <div class="input-group">
                            <input type="file" class="form-control" id="subirDocArchivo" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png">
                            <label class="input-group-text" for="subirDocArchivo">Seleccionar archivo</label>
                        </div>
                        <small class="text-muted" id="subirDocNombreArchivo"></small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label d-block">Tipo de documento</label>
                        <div class="d-flex gap-3">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="subirDocEsOriginal" id="subirDocOriginal" value="1" checked>
                                <label class="form-check-label" for="subirDocOriginal">Original</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="subirDocEsOriginal" id="subirDocCopia" value="0">
                                <label class="form-check-label" for="subirDocCopia">Copia</label>
                            </div>
                        </div>
                    </div>
                    <p class="small text-muted mb-0">Nota: Campos obligatorios (*).</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-success" id="btnGuardarDocumentoRegistro"><i class="ri-save-line me-1"></i>Guardar</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ URL::asset('js/datos-registro.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var baseUrlRegistro = '{{ url("") }}';
            const formInfoAlumno = document.getElementById('formInfoAlumno');
            const btnGenerarCurp = document.getElementById('btnGenerarCurp');
            const curpAlumno = document.getElementById('curpAlumno');
            const nacionalidadAlumno = document.getElementById('nacionalidadAlumno');
            const entidadFederativaAlumno = document.getElementById('entidadFederativaAlumno');
            const btnNuevaEscuela = document.getElementById('btnNuevaEscuela');
            const escuelaProcedencia = document.getElementById('escuelaProcedencia');
            const formNuevaEscuela = document.getElementById('formNuevaEscuela');
            const btnGuardarEscuela = document.getElementById('btnGuardarEscuela');
            const codigoPostalEscuela = document.getElementById('codigoPostalEscuela');
            const regionEscuela = document.getElementById('regionEscuela');
            const localidadEscuela = document.getElementById('localidadEscuela');
            const coloniaEscuela = document.getElementById('coloniaEscuela');
            const paisEscuela = document.getElementById('paisEscuela');

            // Poblar nacionalidades (formulario alumno)
            NACIONALIDADES.forEach(function(n) {
                const opt = document.createElement('option');
                opt.value = n;
                opt.textContent = n;
                nacionalidadAlumno.appendChild(opt);
            });

            // Entidad federativa según nacionalidad (todas las nacionalidades con sus estados/provincias)
            function actualizarEntidadesFederativas() {
                const nac = nacionalidadAlumno.value || '';
                entidadFederativaAlumno.innerHTML = '<option value="">-- Seleccione --</option>';
                const entidades = obtenerEntidadesPorNacionalidad(nac);
                (entidades || []).forEach(function(e) {
                    const opt = document.createElement('option');
                    opt.value = e;
                    opt.textContent = e;
                    entidadFederativaAlumno.appendChild(opt);
                });
            }
            nacionalidadAlumno.addEventListener('change', actualizarEntidadesFederativas);
            actualizarEntidadesFederativas();

            // Generar CURP
            btnGenerarCurp.addEventListener('click', function() {
                const nombre = document.getElementById('nombreAlumno').value.trim();
                const apellidoPaterno = document.getElementById('apellidoPaterno').value.trim();
                const apellidoMaterno = document.getElementById('apellidoMaterno').value.trim();
                const fechaNacimiento = document.getElementById('fechaNacimiento').value.trim();
                const sexo = document.getElementById('sexoAlumno').value;
                const entidad = entidadFederativaAlumno.value;

                if (!nombre || !apellidoPaterno || !fechaNacimiento || !sexo || !entidad) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Campos requeridos',
                        text: 'Debe llenar correctamente los siguientes campos para generar la CURP: Nombre, Apellido paterno, Apellido materno, Fecha de nacimiento, Sexo y Entidad federativa.',
                        confirmButtonColor: '#3085d6'
                    });
                    return;
                }
                // generarCURP espera fecha en dd/mm/yyyy o yyyy-mm-dd (no yyyymmdd)
                const curp = typeof generarCURP === 'function' ? generarCURP(apellidoPaterno, apellidoMaterno, nombre, fechaNacimiento, sexo, entidad) : '';
                curpAlumno.value = curp || '';
                Swal.fire({
                    icon: 'success',
                    title: 'CURP generada',
                    text: 'CURP generada correctamente.',
                    confirmButtonColor: '#3085d6',
                    timer: 2000
                });
            });

            // Toggle ¿Podemos comunicarnos?
            document.querySelectorAll('.btn-comunicacion').forEach(function(btn) {
                btn.addEventListener('click', function() {
                    const icon = this.querySelector('.icon-comunicacion');
                    const estado = icon.getAttribute('data-estado');
                    if (estado === 'no') {
                        icon.classList.remove('ri-close-line');
                        icon.classList.add('ri-check-line', 'text-success');
                        icon.setAttribute('data-estado', 'si');
                    } else {
                        icon.classList.remove('ri-check-line', 'text-success');
                        icon.classList.add('ri-close-line');
                        icon.setAttribute('data-estado', 'no');
                    }
                });
            });

            // Cargar escuelas de procedencia (solo las de la tabla escuelas_procedencia, no planteles)
            function cargarEscuelas() {
                fetch('{{ url("api/escuelas-procedencia") }}', {
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
                })
                .then(r => r.json())
                .then(data => {
                    escuelaProcedencia.innerHTML = '<option value="">- Ninguna -</option>';
                    (data || []).forEach(function(e) {
                        const opt = document.createElement('option');
                        opt.value = e.id;
                        opt.textContent = e.nombre;
                        escuelaProcedencia.appendChild(opt);
                    });
                })
                .catch(() => {
                    escuelaProcedencia.innerHTML = '<option value="">- Ninguna -</option>';
                });
            }
            cargarEscuelas();

            // Modal Nueva escuela
            const modalNuevaEscuela = new bootstrap.Modal(document.getElementById('modalNuevaEscuela'));
            function actualizarEntidadesModalEscuela() {
                const nac = document.getElementById('nacionalidadEscuela').value || '';
                const entidades = obtenerEntidadesPorNacionalidad(nac);
                regionEscuela.innerHTML = '<option value="">-- Seleccione --</option>';
                document.getElementById('entidadFederativaEscuela').innerHTML = '<option value="">-- Seleccione --</option>';
                localidadEscuela.innerHTML = '<option value="">-- Seleccione --</option>';
                (entidades || []).forEach(function(e) {
                    const opt = document.createElement('option');
                    opt.value = e;
                    opt.textContent = e;
                    regionEscuela.appendChild(opt);
                    const opt2 = document.createElement('option');
                    opt2.value = e;
                    opt2.textContent = e;
                    document.getElementById('entidadFederativaEscuela').appendChild(opt2);
                });
            }
            function actualizarLocalidadesModalEscuela() {
                const pais = paisEscuela.value || '';
                const region = regionEscuela.value || '';
                localidadEscuela.innerHTML = '<option value="">-- Seleccione --</option>';
                const localidades = obtenerLocalidadesPorPaisYRegion(pais, region);
                (localidades || []).forEach(function(l) {
                    const opt = document.createElement('option');
                    opt.value = l;
                    opt.textContent = l;
                    localidadEscuela.appendChild(opt);
                });
            }
            poblarSelect('paisEscuela', PAISES, false);
            document.getElementById('paisEscuela').value = 'México';

            btnNuevaEscuela.addEventListener('click', function() {
                formNuevaEscuela.reset();
                document.getElementById('escuelaActiva').checked = true;
                document.getElementById('paisEscuela').value = 'México';
                document.getElementById('nacionalidadEscuela').innerHTML = '<option value="Mexicana">México</option>';
                NACIONALIDADES.forEach(function(n) {
                    if (n !== 'Mexicana') {
                        const opt = document.createElement('option');
                        opt.value = n;
                        opt.textContent = n;
                        document.getElementById('nacionalidadEscuela').appendChild(opt);
                    }
                });
                localidadEscuela.innerHTML = '<option value="">-- Seleccione --</option>';
                actualizarEntidadesModalEscuela();
                modalNuevaEscuela.show();
            });
            document.getElementById('nacionalidadEscuela').addEventListener('change', function() {
                actualizarEntidadesModalEscuela();
            });
            regionEscuela.addEventListener('change', function() {
                actualizarLocalidadesModalEscuela();
            });

            // Auto-completar Región (Estado), Localidad (Municipio) y Colonia al ingresar código postal (México) vía API Laravel
            var timeoutCodigoPostal = null;
            function buscarPorCodigoPostal() {
                const cp = (codigoPostalEscuela.value || '').replace(/\D/g, '');
                if (cp.length !== 5) return;
                if ((paisEscuela.value || '').toLowerCase().indexOf('méxico') === -1) return;
                fetch('{{ url("api/codigo-postal") }}/' + cp, {
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
                })
                    .then(function(r) { return r.json(); })
                    .then(function(data) {
                        if (!data || data.success !== true) return;
                        const estado = (data.estado || '').toString().trim();
                        const municipio = (data.municipio || '').toString().trim();
                        const asentamiento = (data.asentamiento || '').toString().trim();
                        if (estado) {
                            regionEscuela.value = estado;
                            document.getElementById('entidadFederativaEscuela').value = estado;
                            actualizarLocalidadesModalEscuela();
                            if (municipio) {
                                var optLocalidad = Array.from(localidadEscuela.options).find(function(o) {
                                    return (o.value || '').toLowerCase() === municipio.toLowerCase();
                                });
                                if (optLocalidad) localidadEscuela.value = optLocalidad.value;
                                else {
                                    var newOpt = document.createElement('option');
                                    newOpt.value = municipio;
                                    newOpt.textContent = municipio;
                                    localidadEscuela.appendChild(newOpt);
                                    localidadEscuela.value = municipio;
                                }
                            }
                        }
                        if (asentamiento) coloniaEscuela.value = asentamiento;
                    })
                    .catch(function() {});
            }
            codigoPostalEscuela.addEventListener('input', function() {
                clearTimeout(timeoutCodigoPostal);
                var cp = (codigoPostalEscuela.value || '').replace(/\D/g, '');
                if (cp.length === 5) {
                    timeoutCodigoPostal = setTimeout(buscarPorCodigoPostal, 400);
                } else {
                    if (cp.length > 5) codigoPostalEscuela.value = cp.slice(0, 5);
                }
            });
            codigoPostalEscuela.addEventListener('blur', function() {
                if ((codigoPostalEscuela.value || '').replace(/\D/g, '').length === 5) buscarPorCodigoPostal();
            });

            // Guardar escuela
            btnGuardarEscuela.addEventListener('click', function() {
                var nombre = document.getElementById('nombreEscuela').value.trim();
                var nacionalidad = document.getElementById('nacionalidadEscuela').value;
                var entidad = document.getElementById('entidadFederativaEscuela').value;
                if (!nombre) {
                    Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El nombre de la escuela es obligatorio.', confirmButtonColor: '#3085d6' });
                    return;
                }
                if (!nacionalidad) {
                    Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'La nacionalidad es obligatoria.', confirmButtonColor: '#3085d6' });
                    return;
                }
                if (!entidad) {
                    Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'La entidad federativa es obligatoria.', confirmButtonColor: '#3085d6' });
                    return;
                }
                const payload = {
                    nombre: nombre,
                    contacto: document.getElementById('contactoEscuela').value.trim(),
                    telefono: document.getElementById('telefonosEscuela').value.trim(),
                    email: document.getElementById('emailEscuela').value.trim(),
                    nacionalidad: document.getElementById('nacionalidadEscuela').value,
                    entidad_federativa: document.getElementById('entidadFederativaEscuela').value,
                    calle_numero: document.getElementById('calleNumeroEscuela').value.trim(),
                    entre_calle: document.getElementById('entreCalleEscuela').value.trim(),
                    y_calle: document.getElementById('yCalleEscuela').value.trim(),
                    otra_referencia: document.getElementById('otraReferenciaEscuela').value.trim(),
                    pais: document.getElementById('paisEscuela').value,
                    region: regionEscuela.value,
                    localidad: localidadEscuela.value,
                    colonia: (coloniaEscuela.value || '').trim(),
                    codigo_postal: codigoPostalEscuela.value.trim(),
                    activa: document.getElementById('escuelaActiva').checked ? 1 : 0,
                    _token: '{{ csrf_token() }}'
                };
                fetch('{{ url("api/escuelas-procedencia") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify(payload)
                })
                .then(r => r.json())
                .then(data => {
                    if (data.success) {
                        const opt = document.createElement('option');
                        opt.value = data.escuela.id;
                        opt.textContent = data.escuela.nombre;
                        escuelaProcedencia.appendChild(opt);
                        escuelaProcedencia.value = data.escuela.id;
                        modalNuevaEscuela.hide();
                        Swal.fire({ icon: 'success', title: 'Guardado', text: 'Escuela registrada correctamente.', confirmButtonColor: '#3085d6' });
                    } else {
                        Swal.fire({ icon: 'error', title: 'Error', text: (data.errors && Object.values(data.errors).flat().join(' ')) || 'No se pudo guardar.', confirmButtonColor: '#3085d6' });
                    }
                })
                .catch(() => {
                    Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudo guardar la escuela.', confirmButtonColor: '#3085d6' });
                });
            });

            // Formulario info alumno: validar y Continuar
            formInfoAlumno.addEventListener('submit', function(e) {
                e.preventDefault();
                var nombre = document.getElementById('nombreAlumno').value.trim();
                var apellidoPaterno = document.getElementById('apellidoPaterno').value.trim();
                var fechaNac = document.getElementById('fechaNacimiento').value.trim();
                var sexo = document.getElementById('sexoAlumno').value;
                var nacionalidad = document.getElementById('nacionalidadAlumno').value;
                var entidad = document.getElementById('entidadFederativaAlumno').value;
                var curp = document.getElementById('curpAlumno').value.trim();
                var email = document.getElementById('emailAlumno').value.trim();
                var faltantes = [];
                if (!nombre) faltantes.push('Nombre');
                if (!apellidoPaterno) faltantes.push('Apellido paterno');
                if (!fechaNac) faltantes.push('Fecha de nacimiento');
                if (!sexo) faltantes.push('Sexo');
                if (!nacionalidad) faltantes.push('Nacionalidad');
                if (!entidad) faltantes.push('Entidad federativa');
                if (!curp) faltantes.push('CURP/ID');
                if (!email) faltantes.push('Email');
                if (faltantes.length > 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Campos obligatorios',
                        text: 'Complete los siguientes campos antes de continuar: ' + faltantes.join(', ') + '.',
                        confirmButtonColor: '#3085d6'
                    });
                    return;
                }
                document.querySelector('a[href="#tab-info-familiar"]').click();
            });

            // --- Pestaña 2: Información Familiar ---
            function poblarSelect(id, opciones, primeraOpcion) {
                var sel = document.getElementById(id);
                if (!sel) return;
                sel.innerHTML = (primeraOpcion !== false) ? '<option value="">' + (primeraOpcion || '-- Seleccione --') + '</option>' : '';
                (opciones || []).forEach(function(v) {
                    var opt = document.createElement('option');
                    opt.value = v;
                    opt.textContent = v;
                    sel.appendChild(opt);
                });
            }
            poblarSelect('jerarquiaAlumnoFamilia', JERARQUIA_FAMILIA);
            poblarSelect('familiaRegistrada', FAMILIA_REGISTRADA);
            poblarSelect('tipoProcesoFamilia', TIPO_PROCESO);
            (function cargarPlantelesFamilia() {
                var sel = document.getElementById('plantelRegistraFamilia');
                if (!sel) return;
                sel.innerHTML = '<option value="">-- Seleccione --</option>';
                fetch(baseUrlRegistro + '/api/escuelas', { headers: { 'Accept': 'application/json' } })
                    .then(function(r) { return r.json(); })
                    .then(function(data) {
                        (Array.isArray(data) ? data : []).forEach(function(p) {
                            var opt = document.createElement('option');
                            opt.value = p.id;
                            opt.textContent = p.nombre || '';
                            sel.appendChild(opt);
                        });
                    })
                    .catch(function() {});
            })();
            poblarSelect('origenContactoFamilia', ORIGEN_CONTACTO);
            poblarSelect('solicitoInformesFamilia', SOLICITO_INFORMES);
            poblarSelect('tipoPersonaTutor', TIPO_PERSONA_TUTOR);
            poblarSelect('jerarquiaFamiliarTutor', JERARQUIA_FAMILIAR_TUTOR);
            poblarSelect('nombramientoTutor', NOMBRAMIENTO_TUTOR);
            poblarSelect('estadoCivilTutor', ESTADO_CIVIL_TUTOR);
            poblarSelect('paisFamilia', PAISES, false);
            document.getElementById('paisFamilia').value = 'México';

            // Código postal Domicilio (familia): rellenar Localidad con "Colonia, Municipio, Estado"
            var codigoPostalFamilia = document.getElementById('codigoPostalFamilia');
            var localidadFamilia = document.getElementById('localidadFamilia');
            var paisFamilia = document.getElementById('paisFamilia');
            var timeoutCPFamilia = null;
            function buscarCPFamilia() {
                var cp = (codigoPostalFamilia.value || '').replace(/\D/g, '');
                if (cp.length !== 5) return;
                if ((paisFamilia.value || '').toLowerCase().indexOf('méxico') === -1) return;
                fetch('{{ url("api/codigo-postal") }}/' + cp, {
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
                })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    if (!data || data.success !== true) return;
                    var estado = (data.estado || '').toString().trim();
                    var municipio = (data.municipio || '').toString().trim();
                    var asentamiento = (data.asentamiento || '').toString().trim();
                    var texto = [asentamiento, municipio, estado].filter(Boolean).join(', ');
                    if (!texto) return;
                    localidadFamilia.innerHTML = '';
                    var opt = document.createElement('option');
                    opt.value = texto;
                    opt.textContent = texto;
                    localidadFamilia.appendChild(opt);
                    localidadFamilia.value = texto;
                })
                .catch(function() {});
            }
            if (codigoPostalFamilia) {
                codigoPostalFamilia.addEventListener('input', function() {
                    clearTimeout(timeoutCPFamilia);
                    var cp = (codigoPostalFamilia.value || '').replace(/\D/g, '');
                    if (cp.length === 5) timeoutCPFamilia = setTimeout(buscarCPFamilia, 400);
                    else if (cp.length > 5) codigoPostalFamilia.value = cp.slice(0, 5);
                });
                codigoPostalFamilia.addEventListener('blur', function() {
                    if ((codigoPostalFamilia.value || '').replace(/\D/g, '').length === 5) buscarCPFamilia();
                });
            }

            // Contador observaciones tutor (300 caracteres)
            var observacionesTutor = document.getElementById('observacionesTutor');
            var contadorObservacionesTutor = document.getElementById('contadorObservacionesTutor');
            if (observacionesTutor && contadorObservacionesTutor) {
                function actualizarContadorObservaciones() {
                    var restantes = 300 - (observacionesTutor.value || '').length;
                    contadorObservacionesTutor.textContent = restantes >= 0 ? restantes : 0;
                }
                observacionesTutor.addEventListener('input', actualizarContadorObservaciones);
                actualizarContadorObservaciones();
            }

            // Regresar (pestaña 2 -> pestaña 1)
            document.getElementById('btnRegresarFamiliar').addEventListener('click', function() {
                document.querySelector('a[href="#tab-info-alumno"]').click();
            });

            // Continuar (pestaña 2): validar y ir a pestaña 3
            document.getElementById('formInfoFamiliar').addEventListener('submit', function(e) {
                e.preventDefault();
                var jerarquia = document.getElementById('jerarquiaAlumnoFamilia').value;
                var familiaReg = document.getElementById('familiaRegistrada').value;
                var nombreFamilia = document.getElementById('nombreFamilia').value.trim();
                var fechaReg = document.getElementById('fechaRegistroFamilia').value;
                var tipoProc = document.getElementById('tipoProcesoFamilia').value;
                var origenContacto = document.getElementById('origenContactoFamilia').value;
                var solicitoInf = document.getElementById('solicitoInformesFamilia').value;
                var plantelReg = document.getElementById('plantelRegistraFamilia').value;
                var tipoPersona = document.getElementById('tipoPersonaTutor').value;
                var jerarquiaTutor = document.getElementById('jerarquiaFamiliarTutor').value;
                var nombramiento = document.getElementById('nombramientoTutor').value;
                var nombreTutor = document.getElementById('nombreTutor').value.trim();
                var emailTutor = document.getElementById('emailTutor').value.trim();
                var faltantes = [];
                if (!jerarquia) faltantes.push('Jerarquía del alumno dentro de la familia');
                if (!familiaReg) faltantes.push('¿Ya se ha registrado la familia?');
                if (!nombreFamilia) faltantes.push('Nombre de la Familia');
                if (!fechaReg) faltantes.push('Fecha de registro');
                if (!tipoProc) faltantes.push('Tipo de proceso');
                if (!origenContacto) faltantes.push('Origen de contacto');
                if (!solicitoInf) faltantes.push('Solicitó informes anteriormente');
                if (!plantelReg) faltantes.push('Plantel que registra');
                if (!tipoPersona) faltantes.push('Tipo de persona (tutor)');
                if (!jerarquiaTutor) faltantes.push('Jerarquía familiar (tutor)');
                if (!nombramiento) faltantes.push('Nombramiento (tutor)');
                if (!nombreTutor) faltantes.push('Nombre del tutor');
                if (!emailTutor) faltantes.push('Email del tutor');
                if (faltantes.length > 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Campos obligatorios',
                        text: 'Complete los siguientes campos antes de continuar: ' + faltantes.join(', ') + '.',
                        confirmButtonColor: '#3085d6'
                    });
                    return;
                }
                document.querySelector('a[href="#tab-inscripcion-admin"]').click();
            });

            // --- Pestaña 3: Inscripción Administrativa ---
            var plantelInscripcion = document.getElementById('plantelInscripcion');
            var ofertaEducativaInscripcion = document.getElementById('ofertaEducativaInscripcion');
            var planEstudiosInscripcion = document.getElementById('planEstudiosInscripcion');
            var turnoInscripcion = document.getElementById('turnoInscripcion');
            var gradoInscripcion = document.getElementById('gradoInscripcion');
            var grupoInscripcion = document.getElementById('grupoInscripcion');
            var cicloIdInscripcion = document.getElementById('cicloIdInscripcion');

            function cargarPlantelesInscripcion() {
                fetch(baseUrlRegistro + '/api/escuelas', { headers: { 'Accept': 'application/json' } })
                    .then(function(r) { return r.json(); })
                    .then(function(data) {
                        plantelInscripcion.innerHTML = '<option value="">-- Seleccione --</option>';
                        (Array.isArray(data) ? data : []).forEach(function(p) {
                            var opt = document.createElement('option');
                            opt.value = p.id;
                            opt.textContent = p.nombre || '';
                            plantelInscripcion.appendChild(opt);
                        });
                    }).catch(function() { plantelInscripcion.innerHTML = '<option value="">-- Seleccione --</option>'; });
            }
            function cargarOfertasInscripcion() {
                fetch(baseUrlRegistro + '/api/ofertas-educativas/list', { headers: { 'Accept': 'application/json' } })
                    .then(function(r) { return r.json(); })
                    .then(function(data) {
                        ofertaEducativaInscripcion.innerHTML = '<option value="">-- Seleccione --</option>';
                        (Array.isArray(data) ? data : []).forEach(function(o) {
                            var opt = document.createElement('option');
                            opt.value = o.id;
                            opt.textContent = o.nombre || '';
                            ofertaEducativaInscripcion.appendChild(opt);
                        });
                    }).catch(function() { ofertaEducativaInscripcion.innerHTML = '<option value="">-- Seleccione --</option>'; });
            }
            function cargarPlanesInscripcion() {
                fetch(baseUrlRegistro + '/api/configuracion-grupos/planes', { headers: { 'Accept': 'application/json' } })
                    .then(function(r) { return r.json(); })
                    .then(function(data) {
                        planEstudiosInscripcion.innerHTML = '<option value="">-- Seleccione --</option>';
                        (Array.isArray(data) ? data : []).forEach(function(p) {
                            var opt = document.createElement('option');
                            opt.value = p.id;
                            opt.textContent = p.nombre || '';
                            planEstudiosInscripcion.appendChild(opt);
                        });
                    }).catch(function() { planEstudiosInscripcion.innerHTML = '<option value="">-- Seleccione --</option>'; });
            }
            function cargarTurnosInscripcion() {
                fetch(baseUrlRegistro + '/api/configuracion-grupos/turnos', { headers: { 'Accept': 'application/json' } })
                    .then(function(r) { return r.json(); })
                    .then(function(data) {
                        turnoInscripcion.innerHTML = '<option value="">-- Seleccione --</option>';
                        (Array.isArray(data) ? data : []).forEach(function(t) {
                            var opt = document.createElement('option');
                            opt.value = t.id;
                            opt.textContent = t.nombre || '';
                            turnoInscripcion.appendChild(opt);
                        });
                    }).catch(function() { turnoInscripcion.innerHTML = '<option value="">-- Seleccione --</option>'; });
            }
            cargarPlantelesInscripcion();
            cargarOfertasInscripcion();
            cargarPlanesInscripcion();
            cargarTurnosInscripcion();

            function cargarGruposInscripcion() {
                var plantelId = plantelInscripcion.value;
                var planId = planEstudiosInscripcion.value;
                var cicloId = cicloIdInscripcion ? cicloIdInscripcion.value : '';
                var gradoVal = gradoInscripcion.value;
                grupoInscripcion.innerHTML = '<option value="">-- Seleccione --</option>';
                if (!cicloId && !plantelId) {
                    fetch(baseUrlRegistro + '/api/inscripciones-individuales/grupos', { headers: { 'Accept': 'application/json' } })
                        .then(function(r) { return r.json(); })
                        .then(function(data) {
                            (Array.isArray(data) ? data : []).forEach(function(g) {
                                var opt = document.createElement('option');
                                opt.value = g.id;
                                opt.textContent = g.clave || '';
                                grupoInscripcion.appendChild(opt);
                            });
                        }).catch(function() {});
                    return;
                }
                var params = new URLSearchParams();
                if (cicloId) params.set('ciclo_id', cicloId);
                if (plantelId) params.set('escuela_id', plantelId);
                if (planId) params.set('plan_estudio_id', planId);
                if (gradoVal) params.set('grado', gradoVal);
                fetch(baseUrlRegistro + '/api/inscripciones-individuales/grupos?' + params.toString(), { headers: { 'Accept': 'application/json' } })
                    .then(function(r) { return r.json(); })
                    .then(function(data) {
                        (Array.isArray(data) ? data : []).forEach(function(g) {
                            var opt = document.createElement('option');
                            opt.value = g.id;
                            opt.textContent = g.clave || '';
                            grupoInscripcion.appendChild(opt);
                        });
                    }).catch(function() {});
            }
            if (plantelInscripcion) plantelInscripcion.addEventListener('change', cargarGruposInscripcion);
            if (planEstudiosInscripcion) planEstudiosInscripcion.addEventListener('change', cargarGruposInscripcion);
            if (gradoInscripcion) gradoInscripcion.addEventListener('change', cargarGruposInscripcion);
            cargarGruposInscripcion();

            // Modal Seleccionar periodo
            var modalSeleccionarPeriodo = document.getElementById('modalSeleccionarPeriodo');
            var anioInicioPeriodo = document.getElementById('anioInicioPeriodo');
            var listaPeriodosDisponibles = document.getElementById('listaPeriodosDisponibles');
            var periodoInscripcion = document.getElementById('periodoInscripcion');
            var indicadorOcupacionTexto = document.getElementById('indicadorOcupacionTexto');
            var indicadorOcupacionSpinner = document.getElementById('indicadorOcupacionSpinner');
            var periodoSeleccionadoData = null;

            function cargarCiclosEnModalPeriodo() {
                listaPeriodosDisponibles.innerHTML = '<p class="text-muted small mb-0">Cargando...</p>';
                fetch(baseUrlRegistro + '/api/ciclos/list', { headers: { 'Accept': 'application/json' } })
                    .then(function(r) { return r.json(); })
                    .then(function(data) {
                        listaPeriodosDisponibles.innerHTML = '';
                        var listado = Array.isArray(data) ? data : [];
                        if (listado.length === 0) {
                            listaPeriodosDisponibles.innerHTML = '<p class="text-muted small mb-0">No hay periodos disponibles.</p>';
                            return;
                        }
                        listado.forEach(function(c) {
                            var btn = document.createElement('button');
                            btn.type = 'button';
                            btn.className = 'list-group-item list-group-item-action';
                            btn.textContent = c.nombre || ('Ciclo ' + c.id);
                            btn.dataset.id = c.id;
                            btn.dataset.nombre = c.nombre || '';
                            btn.addEventListener('click', function() {
                                var id = this.dataset.id;
                                var nom = this.dataset.nombre;
                                if (periodoInscripcion) periodoInscripcion.value = nom;
                                if (cicloIdInscripcion) {
                                    cicloIdInscripcion.value = id;
                                    cargarGruposInscripcion();
                                }
                                periodoSeleccionadoData = { id: id, nombre: nom };
                                if (indicadorOcupacionTexto) {
                                    indicadorOcupacionTexto.textContent = 'Disponible';
                                    indicadorOcupacionTexto.classList.remove('text-muted');
                                    indicadorOcupacionTexto.classList.add('text-success');
                                }
                                if (indicadorOcupacionSpinner) indicadorOcupacionSpinner.style.display = 'none';
                                bootstrap.Modal.getInstance(modalSeleccionarPeriodo).hide();
                            });
                            listaPeriodosDisponibles.appendChild(btn);
                        });
                    })
                    .catch(function() {
                        listaPeriodosDisponibles.innerHTML = '<p class="text-muted small mb-0">Error al cargar periodos.</p>';
                    });
            }

            document.getElementById('btnBuscarPeriodo').addEventListener('click', function() {
                periodoSeleccionadoData = null;
                if (indicadorOcupacionTexto) {
                    indicadorOcupacionTexto.textContent = 'Esperando parámetros';
                    indicadorOcupacionTexto.classList.remove('text-success');
                    indicadorOcupacionTexto.classList.add('text-muted');
                }
                if (cicloIdInscripcion) cicloIdInscripcion.value = '';
                cargarCiclosEnModalPeriodo();
                var modal = new bootstrap.Modal(modalSeleccionarPeriodo);
                modal.show();
            });

            document.getElementById('btnRegresarInscripcion').addEventListener('click', function() {
                document.querySelector('a[href="#tab-info-familiar"]').click();
            });
            document.getElementById('formInscripcionAdmin').addEventListener('submit', function(e) {
                e.preventDefault();
                var plantel = document.getElementById('plantelInscripcion').value;
                var oferta = document.getElementById('ofertaEducativaInscripcion').value;
                var turno = document.getElementById('turnoInscripcion').value;
                var grado = document.getElementById('gradoInscripcion').value;
                var grupo = document.getElementById('grupoInscripcion').value;
                var periodo = document.getElementById('periodoInscripcion').value;
                var fechaIns = document.getElementById('fechaInscripcion').value;
                var faltantes = [];
                if (!plantel) faltantes.push('Plantel');
                if (!oferta) faltantes.push('Oferta educativa');
                if (!turno) faltantes.push('Turno');
                if (!grado) faltantes.push('Grado');
                if (!grupo) faltantes.push('Grupo');
                if (!periodo) faltantes.push('Periodo');
                if (!fechaIns) faltantes.push('Fecha de inscripción');
                if (faltantes.length > 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Campos obligatorios',
                        text: 'Complete los siguientes campos antes de continuar: ' + faltantes.join(', ') + '.',
                        confirmButtonColor: '#3085d6'
                    });
                    return;
                }
                document.querySelector('a[href="#tab-info-admin"]').click();
            });

            // --- Pestaña 4: Información Administrativa ---
            var planPagoInscripcion = document.getElementById('planPagoInscripcion');
            if (planPagoInscripcion) {
                var planesPago = [
                    'COLEGIATURA MENSUAL LICENCIATURA Mayo',
                    'COLEGIATURA MENSUAL LICENCIATURA Junio',
                    'COLEGIATURA MENSUAL BACHILLERATO Mayo'
                ];
                planesPago.forEach(function(p) {
                    var opt = document.createElement('option');
                    opt.value = p;
                    opt.textContent = p;
                    planPagoInscripcion.appendChild(opt);
                });
            }

            document.getElementById('btnRegresarInfoAdmin').addEventListener('click', function() {
                document.querySelector('a[href="#tab-inscripcion-admin"]').click();
            });

            // Pestaña 4: documentos pendientes de subir al final del registro
            var pendingDocumentosRegistro = [];
            var modalSubirDocRegistro = document.getElementById('modalSubirDocumentoRegistro');
            var subirDocArchivo = document.getElementById('subirDocArchivo');

            function actualizarFilaDocumento(tipo) {
                var tr = document.querySelector('#tablaDocumentosRegistroBody tr[data-tipo="' + tipo + '"]');
                if (!tr) return;
                var items = pendingDocumentosRegistro.filter(function(p) { return p.tipo === tipo; });
                var tieneOriginal = items.some(function(p) { return p.es_original; });
                var tieneCopia = items.some(function(p) { return !p.es_original; });
                tr.querySelector('.doc-estatus').textContent = items.length ? 'Pendiente de guardar' : 'Pendiente';
                tr.querySelector('.doc-estatus').className = 'badge ' + (items.length ? 'bg-info' : 'bg-secondary') + ' doc-estatus';
                tr.querySelector('.doc-original').innerHTML = tieneOriginal ? '<i class="ri-checkbox-circle-fill text-success"></i>' : '—';
                tr.querySelector('.doc-copia').innerHTML = tieneCopia ? '<i class="ri-checkbox-circle-fill text-success"></i>' : '—';
            }

            document.querySelectorAll('.btnSubirDocRegistro').forEach(function(btn) {
                btn.addEventListener('click', function() {
                    document.getElementById('subirDocTipo').value = this.getAttribute('data-tipo');
                    document.getElementById('subirDocNombre').value = this.getAttribute('data-nombre') || '';
                    document.getElementById('subirDocNombreArchivo').textContent = '';
                    subirDocArchivo.value = '';
                    document.getElementById('subirDocOriginal').checked = true;
                    if (modalSubirDocRegistro) new bootstrap.Modal(modalSubirDocRegistro).show();
                });
            });
            if (subirDocArchivo) {
                subirDocArchivo.addEventListener('change', function() {
                    var nombre = this.files && this.files[0] ? this.files[0].name : '';
                    document.getElementById('subirDocNombreArchivo').textContent = nombre;
                });
            }
            document.getElementById('btnGuardarDocumentoRegistro') && document.getElementById('btnGuardarDocumentoRegistro').addEventListener('click', function() {
                var fileInput = document.getElementById('subirDocArchivo');
                var tipo = document.getElementById('subirDocTipo').value;
                var nombre = document.getElementById('subirDocNombre').value;
                if (!fileInput || !fileInput.files || !fileInput.files[0]) {
                    Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'Selecciona un archivo.', confirmButtonColor: '#3085d6' });
                    return;
                }
                var esOriginal = document.getElementById('subirDocOriginal').checked;
                pendingDocumentosRegistro.push({
                    tipo: tipo,
                    nombre: nombre,
                    file: fileInput.files[0],
                    es_original: esOriginal
                });
                actualizarFilaDocumento(tipo);
                bootstrap.Modal.getInstance(modalSubirDocRegistro).hide();
                fileInput.value = '';
                document.getElementById('subirDocNombreArchivo').textContent = '';
                Swal.fire({ icon: 'success', title: 'Agregado', text: 'El documento se subirá al completar el registro.', confirmButtonColor: '#3085d6', timer: 2000 });
            });

            document.getElementById('formInfoAdmin').addEventListener('submit', function(e) {
                e.preventDefault();

                function getComunicacion(campoId) {
                    var btn = document.querySelector('.btn-comunicacion[data-campo="' + campoId + '"]');
                    if (!btn) return false;
                    var icon = btn.querySelector('.icon-comunicacion');
                    return icon && icon.getAttribute('data-estado') === 'si';
                }

                var tab1 = {
                    fecha_registro: document.getElementById('fechaRegistro').value,
                    nombre: document.getElementById('nombreAlumno').value.trim(),
                    apellido_paterno: document.getElementById('apellidoPaterno').value.trim(),
                    apellido_materno: document.getElementById('apellidoMaterno').value.trim(),
                    sexo: document.getElementById('sexoAlumno').value,
                    nacionalidad: document.getElementById('nacionalidadAlumno').value,
                    entidad_federativa: document.getElementById('entidadFederativaAlumno').value,
                    fecha_nacimiento: document.getElementById('fechaNacimiento').value,
                    lugar_nacimiento: document.getElementById('lugarNacimientoAlumno').value.trim() || null,
                    curp: document.getElementById('curpAlumno').value.trim(),
                    escuela_procedencia_id: document.getElementById('escuelaProcedencia').value || null,
                    telefono_casa: document.getElementById('telefonoCasa').value.trim() || null,
                    telefono_celular: document.getElementById('telefonoCelular').value.trim() || null,
                    email: document.getElementById('emailAlumno').value.trim(),
                    mensajeria: document.getElementById('mensajeriaAlumno').value.trim() || null,
                    comunicacion_casa: getComunicacion('telefonoCasa'),
                    comunicacion_celular: getComunicacion('telefonoCelular'),
                    comunicacion_email: getComunicacion('emailAlumno')
                };

                var tab2 = {
                    jerarquia_alumno: document.getElementById('jerarquiaAlumnoFamilia').value,
                    familia_registrada: document.getElementById('familiaRegistrada').value,
                    clave_familia: document.getElementById('claveFamilia').value.trim() || null,
                    nombre_familia: document.getElementById('nombreFamilia').value.trim(),
                    fecha_registro: document.getElementById('fechaRegistroFamilia').value,
                    tipo_proceso: document.getElementById('tipoProcesoFamilia').value,
                    origen_contacto: document.getElementById('origenContactoFamilia').value,
                    solicito_informes: document.getElementById('solicitoInformesFamilia').value,
                    plantel: (function() {
                        var sel = document.getElementById('plantelRegistraFamilia');
                        return sel && sel.options[sel.selectedIndex] ? sel.options[sel.selectedIndex].text : (sel ? sel.value : null);
                    })(),
                    calle_numero: document.getElementById('calleNumeroFamilia').value.trim() || null,
                    entre_calle: document.getElementById('entreCalleFamilia').value.trim() || null,
                    y_calle: document.getElementById('yCalleFamilia').value.trim() || null,
                    otra_referencia: document.getElementById('otraReferenciaFamilia').value.trim() || null,
                    pais: document.getElementById('paisFamilia').value,
                    codigo_postal: document.getElementById('codigoPostalFamilia').value.trim() || null,
                    localidad: document.getElementById('localidadFamilia').value || null,
                    tutor_tipo_persona: document.getElementById('tipoPersonaTutor').value,
                    tutor_jerarquia: document.getElementById('jerarquiaFamiliarTutor').value,
                    tutor_nombramiento: document.getElementById('nombramientoTutor').value,
                    tutor_sexo: document.querySelector('input[name="sexoTutor"]:checked') ? document.querySelector('input[name="sexoTutor"]:checked').value : null,
                    tutor_nombre: document.getElementById('nombreTutor').value.trim() || null,
                    tutor_apellido_paterno: document.getElementById('apellidoPaternoTutor').value.trim() || null,
                    tutor_apellido_materno: document.getElementById('apellidoMaternoTutor').value.trim() || null,
                    tutor_lugar_nacimiento: document.getElementById('lugarNacimientoTutor').value.trim() || null,
                    tutor_fecha_nacimiento: document.getElementById('fechaNacimientoTutor').value || null,
                    tutor_estado_civil: document.getElementById('estadoCivilTutor').value || null,
                    tutor_ocupacion: document.getElementById('ocupacionTutor').value.trim() || null,
                    tutor_empresa: document.getElementById('empresaTutor').value.trim() || null,
                    tutor_cargo: document.getElementById('cargoTutor').value.trim() || null,
                    tutor_telefono_casa: document.getElementById('telefonoCasaTutor').value.trim() || null,
                    tutor_telefono_oficina: document.getElementById('telefonoOficinaTutor').value.trim() || null,
                    tutor_telefono_celular: document.getElementById('telefonoCelularTutor').value.trim() || null,
                    tutor_email: document.getElementById('emailTutor').value.trim() || null,
                    tutor_observaciones: document.getElementById('observacionesTutor').value.trim() || null,
                    tutor_comunicacion_casa: getComunicacion('telefonoCasaTutor'),
                    tutor_comunicacion_oficina: getComunicacion('telefonoOficinaTutor'),
                    tutor_comunicacion_celular: getComunicacion('telefonoCelularTutor'),
                    tutor_comunicacion_email: getComunicacion('emailTutor')
                };

                var tab3 = {
                    plantel_id: document.getElementById('plantelInscripcion').value || null,
                    plantel: document.getElementById('plantelInscripcion').options[document.getElementById('plantelInscripcion').selectedIndex] ? document.getElementById('plantelInscripcion').options[document.getElementById('plantelInscripcion').selectedIndex].text : null,
                    oferta_educativa_id: document.getElementById('ofertaEducativaInscripcion').value || null,
                    oferta_educativa: document.getElementById('ofertaEducativaInscripcion').options[document.getElementById('ofertaEducativaInscripcion').selectedIndex] ? document.getElementById('ofertaEducativaInscripcion').options[document.getElementById('ofertaEducativaInscripcion').selectedIndex].text : null,
                    plan_estudio_id: document.getElementById('planEstudiosInscripcion').value || null,
                    plan_estudios: document.getElementById('planEstudiosInscripcion').options[document.getElementById('planEstudiosInscripcion').selectedIndex] ? document.getElementById('planEstudiosInscripcion').options[document.getElementById('planEstudiosInscripcion').selectedIndex].text : null,
                    turno_id: document.getElementById('turnoInscripcion').value || null,
                    turno: document.getElementById('turnoInscripcion').options[document.getElementById('turnoInscripcion').selectedIndex] ? document.getElementById('turnoInscripcion').options[document.getElementById('turnoInscripcion').selectedIndex].text : null,
                    grado: document.getElementById('gradoInscripcion').value || null,
                    grupo_id: document.getElementById('grupoInscripcion').value || null,
                    periodo: document.getElementById('periodoInscripcion').value || null,
                    ciclo_id: document.getElementById('cicloIdInscripcion') ? document.getElementById('cicloIdInscripcion').value : null,
                    matricula_opcional: document.getElementById('matriculaOpcionalInscripcion').value.trim() || null,
                    fecha_inscripcion: document.getElementById('fechaInscripcion').value,
                    plan_pago: document.getElementById('planPagoInscripcion').value || null
                };

                var tab4 = {
                    plan_pago: document.getElementById('planPagoInscripcion').value || null
                };

                if (!tab1.nombre || !tab1.apellido_paterno || !tab1.email) {
                    Swal.fire({ icon: 'warning', title: 'Campos requeridos', text: 'Complete al menos nombre, apellido paterno y email del alumno en la pestaña 1.', confirmButtonColor: '#3085d6' });
                    return;
                }
                var tab3Plantel = document.getElementById('plantelInscripcion').value;
                var tab3Oferta = document.getElementById('ofertaEducativaInscripcion').value;
                var tab3Turno = document.getElementById('turnoInscripcion').value;
                var tab3Grado = document.getElementById('gradoInscripcion').value;
                var tab3Grupo = document.getElementById('grupoInscripcion').value;
                var tab3Periodo = document.getElementById('periodoInscripcion').value;
                if (!tab3Plantel || !tab3Oferta || !tab3Turno || !tab3Grado || !tab3Grupo || !tab3Periodo) {
                    Swal.fire({ icon: 'warning', title: 'Campos requeridos', text: 'Complete todos los campos obligatorios de la pestaña Inscripción Administrativa (Plantel, Oferta educativa, Turno, Grado, Grupo, Periodo).', confirmButtonColor: '#3085d6' });
                    return;
                }

                fetch('{{ url("api/alumnos/registro") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        tab1: tab1,
                        tab2: tab2,
                        tab3: tab3,
                        tab4: tab4,
                        _token: '{{ csrf_token() }}'
                    })
                })
                .then(function(r) { return r.json().then(function(data) { return { ok: r.ok, data: data }; }); })
                .then(function(result) {
                    if (result.ok && result.data.success) {
                        var alumnoId = result.data.alumno_id;
                        var pendientes = pendingDocumentosRegistro.slice();
                        function subirSiguiente(indice) {
                            if (indice >= pendientes.length) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Registro completado',
                                    text: 'El alumno y sus documentos han sido registrados correctamente. Matrícula: ' + (result.data.matricula || ''),
                                    confirmButtonColor: '#3085d6'
                                }).then(function() {
                                    window.location.href = '{{ url("alumnos") }}';
                                });
                                return;
                            }
                            var p = pendientes[indice];
                            var fd = new FormData();
                            fd.append('archivos[]', p.file);
                            fd.append('tipo_documento', p.tipo);
                            fd.append('es_original', p.es_original ? '1' : '0');
                            fd.append('_token', '{{ csrf_token() }}');
                            fetch(baseUrlRegistro + '/alumnos/' + alumnoId + '/documentos', {
                                method: 'POST',
                                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
                                body: fd
                            }).then(function(r) { return r.json(); }).then(function() {
                                subirSiguiente(indice + 1);
                            }).catch(function() {
                                subirSiguiente(indice + 1);
                            });
                        }
                        subirSiguiente(0);
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: result.data.message || 'No se pudo guardar el registro.',
                            confirmButtonColor: '#3085d6'
                        });
                    }
                })
                .catch(function(err) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'No se pudo conectar con el servidor.',
                        confirmButtonColor: '#3085d6'
                    });
                });
            });
        });
    </script>
@endsection