{{-- Modal Registrar/Editar Grupo (según imagen) --}}
<div class="modal fade" id="modalGrupo" tabindex="-1" aria-labelledby="modalGrupoLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="modalGrupoTitulo">Grupos</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="grupoId">
                <form id="formModalGrupo">
                    <p class="text-muted small mb-3">Completa el siguiente formulario para registrar un grupo:</p>

                    <div class="row g-3 mb-3">
                        <div class="col-md-12">
                            <label for="grupoClave" class="form-label">* Nombre del grupo</label>
                            <input type="text" class="form-control" id="grupoClave" placeholder="Ej: 1A, 2B" maxlength="20" required>
                        </div>
                        <div class="col-md-6">
                            <label for="grupoPlantel" class="form-label">* Plantel</label>
                            <select class="form-select" id="grupoPlantel" required>
                                <option value="">-- Seleccione --</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="grupoPlanEstudio" class="form-label">* Plan de estudios</label>
                            <select class="form-select" id="grupoPlanEstudio" required>
                                <option value="">-- Seleccione --</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="grupoGrado" class="form-label">* Grado</label>
                            <select class="form-select" id="grupoGrado" required>
                                <option value="">-- Seleccione --</option>
                                @for ($g = 1; $g <= 9; $g++)
                                    <option value="{{ $g }}">{{ $g }}°</option>
                                @endfor
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="grupoTurno" class="form-label">* Turno</label>
                            <select class="form-select" id="grupoTurno" required>
                                <option value="">-- Seleccione --</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="grupoCiclo" class="form-label">* Ciclo / Periodo</label>
                            <select class="form-select" id="grupoCiclo" required>
                                <option value="">-- Seleccione --</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="grupoCapacidadMinima" class="form-label">Capacidad mínima</label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="grupoCapacidadMinima" placeholder="0" min="0" max="999" step="1">
                                <span class="input-group-text">Alumnos</span>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label for="grupoCapacidadMaxima" class="form-label">* Capacidad máxima</label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="grupoCapacidadMaxima" placeholder="30" min="1" max="999" step="1" required>
                                <span class="input-group-text">Alumnos</span>
                            </div>
                        </div>
                    </div>

                    <p class="text-muted small mb-0">Nota: Llenar campos obligatorios (*).</p>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" form="formModalGrupo" class="btn btn-success">
                    <i class="ri-save-line me-1"></i>Guardar
                </button>
            </div>
        </div>
    </div>
</div>