{{-- Modal Agregar evaluación (imágenes 3, 4, 5) --}}
<div class="modal fade" id="modalAgregarEvaluacion" 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">Criterio de evaluación - Agregar evaluación</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="evalCriterioId">
                <input type="hidden" id="evalEvaluacionId" value="">
                <p class="text-muted mb-3">Ingresa la información que pertenecerá al criterio.</p>
                <ul class="nav nav-tabs mb-3" role="tablist">
                    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tabEvalGeneral">Información general</a></li>
                    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tabEvalValidacion">Validación y redondeo</a></li>
                    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tabEvalEstatus">Estatus adicionales</a></li>
                </ul>
                <div class="tab-content">
                    {{-- Tab 1: Información general (imagen 3) --}}
                    <div class="tab-pane fade show active" id="tabEvalGeneral" data-tab-index="0">
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label">* Nombre de evaluación</label>
                                <input type="text" class="form-control" id="evalNombre" placeholder="Nombre" title="Nombre con el que se identificará esta evaluación en el criterio (ej. Parcial 1, Examen final).">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">* Abreviatura</label>
                                <input type="text" class="form-control" id="evalAbreviatura" placeholder="Abreviatura" title="Abreviatura corta para mostrar en documentos o fórmulas (ej. P1, EF).">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">* Orden de aplicación</label>
                                <select class="form-select" id="evalOrden" title="Indica si se trata de la primera, segunda, tercera, etc. evaluación del periodo.">
                                    @for($i = 1; $i <= 20; $i++) <option value="{{ $i }}">{{ $i }}</option> @endfor
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">* Pertenece al bloque</label>
                                <select class="form-select" id="evalPerteneceBloque" title="Bloque o etapa al que pertenece esta evaluación dentro del periodo.">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="evalObligatoria" checked title="Si está activo, esta evaluación es obligatoria para todos los alumnos."><label class="form-check-label" for="evalObligatoria">Evaluación obligatoria</label></div>
                                <div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="evalMostrarDoc" checked title="Si está activo, esta evaluación se mostrará en documentos oficiales (certificados, boletas)."><label class="form-check-label" for="evalMostrarDoc">Mostrar en documentos</label></div>
                                <div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="evalPromedio" title="Si está activo, esta evaluación se incluirá en el cálculo del promedio general."><label class="form-check-label" for="evalPromedio">Promedio general</label></div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">* Cantidad máxima por periodo</label>
                                <select class="form-select" id="evalCantMaxPeriodo" title="Número máximo de veces que puede aplicarse esta evaluación en el periodo (ej. exámenes de recuperación).">
                                    <option value="">Sin límite</option>
                                    @for($i = 1; $i <= 20; $i++) <option value="{{ $i }}">{{ $i }}</option> @endfor
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">* Cantidad máxima por alumno</label>
                                <select class="form-select" id="evalCantMaxAlumno" title="Número máximo de veces que un mismo alumno puede tener esta evaluación en el periodo.">
                                    <option value="">Sin límite</option>
                                    @for($i = 1; $i <= 20; $i++) <option value="{{ $i }}">{{ $i }}</option> @endfor
                                </select>
                            </div>
                        </div>
                        <h6 class="text-primary mb-2">Calificación</h6>
                        <div class="row g-3 mb-3">
                            <div class="col-12">
                                <label class="form-label">* Forma de aplicación</label>
                                <div class="d-flex gap-3">
                                    <div class="form-check"><input class="form-check-input" type="radio" name="evalFormaAplicacion" id="evalFormaCapturada" value="Capturada" checked title="La calificación se captura manualmente."><label class="form-check-label" for="evalFormaCapturada">Capturada</label></div>
                                    <div class="form-check"><input class="form-check-input" type="radio" name="evalFormaAplicacion" id="evalFormaFormula" value="Fórmula" title="La calificación se obtiene mediante una fórmula con otras evaluaciones."><label class="form-check-label" for="evalFormaFormula">Fórmula</label></div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">* Mínima capturable</label>
                                <input type="text" class="form-control" id="evalFaltasMinCapturable" placeholder="0" value="0" title="Calificación mínima que se puede capturar para esta evaluación.">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Colocar como calificación de faltas por evaluación</label>
                                <input type="text" class="form-control" id="evalColocarCalFaltasEval" placeholder="" title="Calificación que se asigna cuando el alumno acumula faltas en esta evaluación.">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Se aplica al acumular (Cambiar a %)</label>
                                <input type="text" class="form-control" id="evalSeAplicaAcumularEval" placeholder="inasistencias" title="Número o porcentaje de inasistencias a partir del cual se aplica la calificación por faltas.">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Colocar como calificación (faltas por inscripción)</label>
                                <input type="text" class="form-control" id="evalColocarCalFaltasInsc" placeholder="" title="Calificación que se asigna por faltas acumuladas en la inscripción.">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Se aplica al acumular (Cambiar a %)</label>
                                <input type="text" class="form-control" id="evalSeAplicaAcumularInsc" placeholder="inasistencias por inscripción" title="Número o porcentaje de inasistencias por inscripción para aplicar la calificación.">
                            </div>
                        </div>
                    </div>
                    {{-- Tab 2: Validación y redondeo (imagen 4) --}}
                    <div class="tab-pane fade" id="tabEvalValidacion" data-tab-index="1">
                        <div class="mb-3">
                            <label class="form-label">* Validación</label>
                            <p class="small text-muted">Condiciones: SI ENTONCES OTRO FIN Y O. Operadores: + - / * = &lt; &gt; &lt;= &gt;= (). Calificación mínima captura: m</p>
                            <textarea class="form-control" id="evalValidacion" rows="4" placeholder="Fórmula de validación" title="Fórmula que define condiciones para asignar estatus o calificaciones automáticamente."></textarea>
                            <p class="small text-muted mt-1">La fórmula de validación permite aplicar estatus o calificaciones según se cumpla o no una condición.</p>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">* Validación para exámenes</label>
                            <p class="small text-muted">Condiciones: SI ENTONCES OTRO FIN Y O. Resultado condiciones: VERDADERO FALSO. Operadores: + - / * = &lt; &gt; &lt;= &gt;= ()</p>
                            <textarea class="form-control" id="evalValidacionExamenes" rows="4" title="Fórmula de validación específica para exámenes. Usa abreviaturas de las evaluaciones del criterio."></textarea>
                            <p class="small text-muted mt-1">Utiliza las abreviaturas de evaluaciones del presente criterio (incluyendo un espacio y uno después de la abreviatura).</p>
                        </div>
                        <h6 class="text-primary mb-2">Redondeo</h6>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">* Precisión de calificación</label>
                                <select class="form-select" id="evalRedondeoPrecision" title="Cantidad de decimales con los que se mostrará la calificación (ninguno, 1 o 2).">
                                    <option value="Ninguno">Ninguno</option>
                                    <option value="1">1 dígito decimal</option>
                                    <option value="2">2 dígitos decimales</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">* Décimas</label>
                                <select class="form-select" id="evalRedondeoDecimas" title="Regla de redondeo para las décimas (ej. al entero superior).">
                                    <option value="No redondear">No redondear</option>
                                    <option value="Al entero superior">Al entero inmediato superior</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">* Centésimas</label>
                                <select class="form-select" id="evalRedondeoCentesimas" title="Regla de redondeo para las centésimas.">
                                    <option value="No redondear">No redondear</option>
                                    <option value="A la décima superior">A la décima inmediata superior</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Aplicar desde</label>
                                <input type="text" class="form-control" id="evalRedondeoAplicarDesde" placeholder="Deja en blanco para NO aplicar redondeo" title="A partir de qué valor o evaluación se aplica el redondeo. Dejar en blanco si no aplica.">
                            </div>
                            <div class="col-12">
                                <div class="form-check"><input class="form-check-input" type="checkbox" id="evalRedondeo" title="Activa el redondeo de la calificación según las reglas configuradas."><label class="form-check-label" for="evalRedondeo">Aplicar redondeo</label></div>
                            </div>
                        </div>
                    </div>
                    {{-- Tab 3: Estatus adicionales (imagen 5) --}}
                    <div class="tab-pane fade" id="tabEvalEstatus" data-tab-index="2">
                        <h6 class="text-primary mb-3">Estatus adicionales</h6>
                        <p class="text-muted small mb-3">Selecciona los estatus adicionales que se podrán especificar para esta evaluación. Pueden aplicarse automáticamente cuando el alumno acumula la cantidad de faltas que indiques.</p>
                        <h6 class="text-primary mb-2">Exención</h6>
                        <div class="row g-3 mb-3">
                            <div class="col-md-4">
                                <label class="form-label">Calificación</label>
                                <input type="text" class="form-control" id="evalExencionCal" placeholder="" title="Calificación o valor que representa la exención en esta evaluación.">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">En la evaluación</label>
                                <select class="form-select" id="evalExencionEnEvaluacion" title="Evaluación concreta en la que aplica la exención (Evaluación 1, 2 o Final).">
                                    <option value="">-- Seleccione --</option>
                                    <option value="Evaluación 1">Evaluación 1</option>
                                    <option value="Evaluación 2">Evaluación 2</option>
                                    <option value="Final">Final</option>
                                </select>
                            </div>
                        </div>
                        <p class="small text-muted mb-2">Configura las faltas límite por evaluación o inscripción que puede tener un alumno para obtener la exención.</p>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Faltas por evaluación - No aplica al acumular (Cambiar a %)</label>
                                <input type="text" class="form-control" id="evalExencionFaltasEval" placeholder="inasistencias" title="Límite de faltas por evaluación para que el alumno pueda obtener exención.">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Faltas por inscripción - No aplica al acumular (Cambiar a %)</label>
                                <input type="text" class="form-control" id="evalExencionFaltasInsc" placeholder="inasistencias por inscripción" title="Límite de faltas por inscripción para que el alumno pueda obtener exención.">
                            </div>
                        </div>
                        <p class="small text-warning mt-2">La exención no será válida cuando se hayan superado las reglas anteriores.</p>
                        <div class="mb-3">
                            <label class="form-label">Calificación para exentar</label>
                            <input type="number" class="form-control" id="evalCalExentar" step="0.01" placeholder="" title="Calificación mínima o valor que debe tener el alumno para poder exentar esta evaluación.">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer" id="modalEvalFooter">
                <button type="button" class="btn btn-secondary" id="btnRegresarEval">Regresar</button>
                <button type="button" class="btn btn-primary" id="btnContinuarEval"><i class="ri-arrow-right-line me-1"></i>Continuar</button>
                <button type="button" class="btn btn-success d-none" id="btnGuardarEvaluacion"><i class="ri-save-line me-1"></i>Guardar</button>
            </div>
        </div>
    </div>
</div>