{{-- Modal Plan de estudios (imágenes 2 y 3) --}}
<div class="modal fade" id="modalPlanEstudios" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">Plan de estudios</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="planId">
                <p class="text-muted small mb-3">Nota: Llenar campos obligatorios (*).</p>
                <div class="row g-3">
                    {{-- Columna izquierda --}}
                    <div class="col-md-6">
                        <div class="mb-2">
                            <label class="form-label">* Modalidad</label>
                            <input type="text" class="form-control" id="planModalidad" placeholder="Modalidad" title="Modalidad en que se imparte el plan (ej. Escolarizada, No escolarizada, Mixta).">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">* Oferta educativa</label>
                            <select class="form-select" id="planOfertaEducativa" title="Oferta educativa a la que pertenece este plan (ej. Bachillerato, Licenciatura).">
                                <option value="">-- Seleccione --</option>
                            </select>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">* Duración</label>
                            <div class="d-flex align-items-center gap-2">
                                <input type="number" class="form-control" id="planDuracion" placeholder="0" min="0" title="Número total de grados o niveles que dura el plan (ej. 3 para bachillerato, 8 para licenciatura en semestres).">
                                <span class="text-muted">grados</span>
                            </div>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">* Número de Bloques (Ejm.: Bimestres, parciales, semestres, etc.)</label>
                            <input type="text" class="form-control" id="planNumeroBloques" placeholder="" title="Cantidad de bloques o periodos en que se divide cada grado (ej. 2 bimestres, 3 parciales, 2 semestres).">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">No. RVOE / Autorización / Acuerdo</label>
                            <input type="text" class="form-control" id="planRvoe" placeholder="" title="Número oficial del RVOE, autorización o acuerdo que avala el plan ante la autoridad educativa.">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Clave de centro de trabajo</label>
                            <input type="text" class="form-control" id="planClaveCentro" placeholder="" title="Clave del centro de trabajo asignada por la SEP o autoridad educativa.">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Clave del programa en DGP</label>
                            <input type="text" class="form-control" id="planClaveProgramaDgp" placeholder="" title="Clave del programa de estudios en el Sistema DGP (Dirección General de Profesiones).">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Nombre del Responsable de Firma de Certificados</label>
                            <input type="text" class="form-control" id="planResponsableFirma" placeholder="" title="Nombre completo de la persona autorizada para firmar certificados de este plan.">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Nombre del Responsable Externo de Firma de Certificados</label>
                            <input type="text" class="form-control" id="planResponsableExterno" placeholder="" title="Nombre del responsable externo que puede firmar certificados cuando aplique.">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Permitir inscripción académica en asignaturas hasta</label>
                            <div class="d-flex align-items-center gap-2">
                                <select class="form-select" id="planPermitirInscripcionHasta" style="width: auto;" title="Hasta cuántos grados superiores puede inscribirse el alumno en asignaturas (ej. 1 = solo un grado arriba).">
                                    @for($i = 1; $i <= 10; $i++) <option value="{{ $i }}">{{ $i }}</option> @endfor
                                </select>
                                <span class="text-muted">grados superiores.</span>
                            </div>
                        </div>
                    </div>
                    {{-- Columna derecha --}}
                    <div class="col-md-6">
                        <div class="mb-2">
                            <label class="form-label">* Tipo de periodo (Plan)</label>
                            <select class="form-select" id="planTipoPeriodo" title="Duración de cada bloque del plan: Mensual, Bimestral, Trimestral, Cuatrimestral, Semestral o Anual.">
                                <option value="Mensual">Mensual</option>
                                <option value="Bimestral">Bimestral</option>
                                <option value="Trimestral">Trimestral</option>
                                <option value="Cuatrimestral">Cuatrimestral</option>
                                <option value="Semestral">Semestral</option>
                                <option value="Anual">Anual</option>
                            </select>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">* Criterio de evaluación</label>
                            <select class="form-select" id="planCriterioEvaluacion" title="Criterio con el que se calificará en todas las asignaturas del plan (cuantitativo, cualitativo, etc.).">
                                <option value="">-- Seleccione --</option>
                            </select>
                            <p class="small text-muted mb-0">Aplica para todas las asignaturas incluidas en plan de estudios. Si lo requiere, podrá asignarlo también por asignatura.</p>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">* Nombre del plan</label>
                            <input type="text" class="form-control" id="planNombre" placeholder="Nombre del plan de estudios" title="Nombre oficial o descriptivo del plan de estudios (ej. Bachillerato General 2026).">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Clave de plan de estudios</label>
                            <input type="text" class="form-control" id="planClavePlan" placeholder="" readonly title="Clave única asignada automáticamente al plan; solo lectura.">
                            <p class="small text-muted mb-0">Se asigna automáticamente.</p>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">* Etiqueta Bloques</label>
                            <input type="text" class="form-control" id="planEtiquetaBloques" placeholder="" title="Texto con el que se nombran los bloques en el plan (ej. Bimestre, Parcial, Semestre).">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Autorización-Reconocimiento</label>
                            <select class="form-select" id="planAutorizacion" title="Indica si el plan cuenta con RVOE, Reconocimiento de validez o no aplica.">
                                <option value="">NO APLICA</option>
                                <option value="RVOE">RVOE</option>
                                <option value="Reconocimiento">Reconocimiento</option>
                            </select>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Fecha RVOE</label>
                            <input type="date" class="form-control" id="planFechaRvoe" title="Fecha en que se otorgó el RVOE o reconocimiento oficial.">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Clave de la institución en DGP</label>
                            <input type="text" class="form-control" id="planClaveInstitucionDgp" placeholder="" title="Clave de la institución en el Sistema DGP.">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Puesto del Responsable de Firma de Certificados</label>
                            <input type="text" class="form-control" id="planPuestoResponsable" placeholder="" title="Cargo o puesto del responsable que firma los certificados.">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Puesto del Responsable Externo de Firma de Certificados</label>
                            <input type="text" class="form-control" id="planPuestoResponsableExterno" placeholder="" title="Cargo o puesto del responsable externo de firma de certificados.">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Incorporada a</label>
                            <select class="form-select" id="planIncorporada" title="Autoridad educativa a la que está incorporada la institución (ej. SEP).">
                                <option value="">Sin información</option>
                                <option value="SEP">SEP</option>
                                <option value="Otro">Otro</option>
                            </select>
                        </div>
                        <div class="mb-2">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="planPlanActivo" checked title="Si está activo, el plan podrá usarse para inscripciones y grupos; si está inactivo, solo se mostrará en consultas.">
                                <label class="form-check-label" for="planPlanActivo">Plan activo</label>
                            </div>
                        </div>
                    </div>
                </div>
                <p class="small text-muted mt-2 mb-2">A continuación se lista los tipos de materias optativas, registra la cantidad de estas que se requiere que curse el alumno (si no es requerido deja los campos en blanco):</p>
                {{-- Sección Avanzado (imagen 3) --}}
                <div class="card border">
                    <div class="card-header bg-light py-2 d-flex justify-content-between align-items-center" data-bs-toggle="collapse" data-bs-target="#collapseAvanzado" style="cursor:pointer;">
                        <span class="text-primary fw-medium">Avanzado</span>
                        <i class="ri-arrow-down-s-line fs-5 text-primary"></i>
                    </div>
                    <div class="collapse show" id="collapseAvanzado">
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">Créditos mínimos por semestre</label>
                                    <input type="number" class="form-control" id="planCreditosMin" step="0.01" min="0" placeholder="" title="Mínimo de créditos que el alumno debe cursar por semestre o periodo.">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Créditos máximos por semestre</label>
                                    <input type="number" class="form-control" id="planCreditosMax" step="0.01" min="0" placeholder="" title="Máximo de créditos que el alumno puede cursar por semestre o periodo.">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Total de créditos en toda la carrera</label>
                                    <input type="number" class="form-control" id="planTotalCreditos" step="0.01" min="0" placeholder="" title="Suma total de créditos que debe acreditar el alumno para concluir el plan.">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Total de unidades de aprendizaje obligatorias</label>
                                    <input type="number" class="form-control" id="planTotalUnidadesObl" min="0" placeholder="" title="Cantidad total de asignaturas o unidades obligatorias del plan.">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Total de unidades de aprendizaje optativas</label>
                                    <input type="number" class="form-control" id="planTotalUnidadesOpt" min="0" placeholder="" title="Cantidad total de asignaturas optativas que puede cursar el alumno.">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Total de unidades de aprendizaje que se pueden dar de baja durante toda su carrera</label>
                                    <input type="number" class="form-control" id="planTotalUnidadesBaja" min="0" placeholder="" title="Número máximo de asignaturas que el alumno puede dar de baja a lo largo de la carrera.">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Número máximo de unidades de aprendizaje reprobadas durante toda su carrera</label>
                                    <input type="number" class="form-control" id="planMaxUnidadesReprob" min="0" placeholder="" title="Límite de asignaturas reprobadas permitidas para permanecer o concluir el plan.">
                                </div>
                            </div>
                            <p class="small text-muted mt-2 mb-0">Nota: Llenar campos obligatorios (*).</p>
                        </div>
                    </div>
                </div>
            </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="btnGuardarPlan"><i class="ri-save-line me-1"></i>Guardar</button>
            </div>
        </div>
    </div>
</div>