@php
$VerEditor = auth()->user()->can('Calificaciones - Visor') || auth()->user()->can('Calificaciones - Editor')
@endphp
@if($VerEditor)
@extends('layouts.app')
@section('tituloModulo') {{ "CALIFICACIONES DEL CURSO: " . strtoupper($cursos->nombre_curs) . " GRUPO: " . strtoupper($grupos->nombre_grup)}} @endsection
@section('contenido')
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Información General</h5>
                <div class="row">
                    <div class="col-md-4">
                        <div class="border-start border-start-4 border-start-primary px-3">
                            <small class="text-muted">Curso</small>
                            <h5>{{ strtoupper($cursos->nombre_curs) }}</h5>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="border-start border-start-4 border-start-success px-3">
                            <small class="text-muted">Grupo</small>
                            <h5>{{ strtoupper($grupos->nombre_grup) }}</h5>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="border-start border-start-4 border-start-info px-3">
                            <small class="text-muted">Total de alumnos</small>
                            <h5>{{ count($alumnosConCalificaciones) }}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="card">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="card-title mb-0">Listado de Alumnos</h5>
            <div>
                <button class="btn btn-sm btn-outline-secondary" id="btn-expand-all">
                    <i class="bx bx-expand-alt"></i> Expandir Todos
                </button>
                <button class="btn btn-sm btn-outline-secondary" id="btn-collapse-all">
                    <i class="bx bx-collapse-alt"></i> Colapsar Todos
                </button>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table">
                <thead class="table-light">
                    <tr>
                        <th style="width: 20px;"></th>
                        <th>Alumno</th>
                        <th>Correo Electrónico</th>
                        <th>Promedio</th>
                        <th>Estado</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($alumnosConCalificaciones as $item)
                    <tr class="expandable-row">
                        <td>
                            <button class="btn btn-sm btn-icon expand-btn" data-codigo="{{ $item['alumno']->codigo_alum }}">
                                <i class="bx bx-plus-circle"></i>
                            </button>
                        </td>
                        <td>{{ $item['alumno']->nombre_alum }}</td>
                        <td>{{ $item['alumno']->correo_alum }}</td>
                        <td>
                            @php
                                $calificaciones = $item['calificaciones']->where('calificacion_cali', '>', 0);
                                $promedio = $calificaciones->count() > 0 ? round($calificaciones->avg('calificacion_cali'), 2) : 0;
                            @endphp
                            @if($promedio == 0)
                                <span class="badge bg-secondary">Sin calificaciones</span>
                            @elseif($promedio < 6)
                                <span class="badge bg-danger">{{ number_format($promedio, 2) }}</span>
                            @elseif($promedio < 8)
                                <span class="badge bg-warning text-dark">{{ number_format($promedio, 2) }}</span>
                            @else
                                <span class="badge bg-success">{{ number_format($promedio, 2) }}</span>
                            @endif
                        </td>
                        <td>
                            @php
                                $pendientes = $item['calificaciones']->where('calificacion_cali', 0)->count();
                                $total = $item['calificaciones']->count();
                            @endphp
                            @if($pendientes == 0)
                                <span class="badge bg-success">Completo</span>
                            @elseif($pendientes == $total)
                                <span class="badge bg-danger">Sin calificar</span>
                            @else
                                <span class="badge bg-warning text-dark">Parcial ({{ $total - $pendientes }}/{{ $total }})</span>
                            @endif
                        </td>
                    </tr>
                    <tr id="details-{{ $item['alumno']->codigo_alum }}" class="details-row" style="display: none;">
                        <td colspan="5" class="p-0">
                            <div class="p-3 bg-light">
                                <h6 class="fw-bold mb-3">Módulos y Calificaciones</h6>
                                <div class="table-responsive">
                                    <table class="table table-sm table-bordered">
                                        <thead class="table-secondary">
                                            <tr>
                                                <th>Módulo</th>
                                                <th style="width: 120px;">Calificación</th>
                                                <th>Comentarios</th>
                                                @can('Calificaciones - Editor')
                                                <th style="width: 100px;">Acciones</th>
                                                @endcan
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($item['calificaciones'] as $calificacion)
                                            <tr>
                                                <td>{{ $calificacion->modulo_cali }}</td>
                                                <td class="text-center">
                                                    @if($calificacion->calificacion_cali == 0)
                                                        <span class="badge bg-warning">Sin calificar</span>
                                                    @elseif($calificacion->calificacion_cali < 6)
                                                        <span class="badge bg-danger">{{ number_format($calificacion->calificacion_cali, 2) }}</span>
                                                    @else
                                                        <span class="badge bg-success">{{ number_format($calificacion->calificacion_cali, 2) }}</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    {{ $calificacion->comentarios_cali ?: 'Sin comentarios' }}
                                                </td>
                                                @can('Calificaciones - Editor')
                                                <td class="text-center">
                                                    <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#editar{{ $calificacion->codigo_cali }}">
                                                        <i class="bx bx-edit-alt"></i>
                                                    </button>
                                                </td>
                                                @endcan
                                            </tr>
                                            @empty
                                            <tr>
                                                <td colspan="4" class="text-center">No hay calificaciones disponibles</td>
                                            </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
<!-- Modales para editar calificaciones -->
@can('Calificaciones - Editor')
    @foreach($alumnosConCalificaciones as $item)
        @foreach($item['calificaciones'] as $calificacion)
        <div class="modal fade" id="editar{{ $calificacion->codigo_cali }}" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title">
                            <i class="bx bx-edit-alt me-1"></i>
                            Editar Calificación
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form action="{{ route('alumnos.calificaciones.alumno.actualizar', $calificacion->codigo_cali) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="modal-body">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Alumno:</label>
                                <div>{{ $item['alumno']->nombre_alum }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold">Módulo:</label>
                                <div>{{ $calificacion->modulo_cali }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label is-required">Calificación:</label>
                                <input type="number" class="form-control" name="calificacion"
                                        value="{{ $calificacion->calificacion_cali }}"
                                        min="0" max="10" step="0.01" required>
                                <div class="form-text">Ingrese una calificación entre 0 y 10</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Comentarios (opcional):</label>
                                <textarea class="form-control" name="comentarios" rows="3">{{ $calificacion->comentarios_cali }}</textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-success">
                                <i class="bx bx-check me-1"></i> Guardar
                            </button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                <i class="bx bx-x me-1"></i> Cancelar
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        @endforeach
    @endforeach
@endcan
@endsection
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Manejar la expansión de filas
            document.querySelectorAll('.expand-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const codigo = this.dataset.codigo;
                    const detailsRow = document.getElementById('details-' + codigo);
                    const icon = this.querySelector('i');
                    if (detailsRow.style.display === 'none' || detailsRow.style.display === '') {
                        detailsRow.style.display = 'table-row';
                        icon.classList.remove('bx-plus-circle');
                        icon.classList.add('bx-minus-circle');
                    } else {
                        detailsRow.style.display = 'none';
                        icon.classList.remove('bx-minus-circle');
                        icon.classList.add('bx-plus-circle');
                    }
                });
            });
            // Botón expandir todo
            document.getElementById('btn-expand-all').addEventListener('click', function() {
                document.querySelectorAll('.details-row').forEach(row => {
                    row.style.display = 'table-row';
                });
                document.querySelectorAll('.expand-btn i').forEach(icon => {
                    icon.classList.remove('bx-plus-circle');
                    icon.classList.add('bx-minus-circle');
                });
            });
            // Botón colapsar todo
            document.getElementById('btn-collapse-all').addEventListener('click', function() {
                document.querySelectorAll('.details-row').forEach(row => {
                    row.style.display = 'none';
                });
                document.querySelectorAll('.expand-btn i').forEach(icon => {
                    icon.classList.remove('bx-minus-circle');
                    icon.classList.add('bx-plus-circle');
                });
            });
        });
    </script>
@endif