@extends('layouts.landing')

@section('title', $evaluacion->titulo)

@section('content')
<div class="container-fluid">

    <div class="d-sm-flex align-items-center justify-content-between mb-3">
        <div>
            <h5 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-clipboard-list mr-1"></i> {{ $evaluacion->titulo }}
            </h5>
            @if($evaluacion->descripcion)
                <small class="text-muted">{{ $evaluacion->descripcion }}</small>
            @endif
        </div>
        <a href="{{ route('evaluacion.mis_evaluaciones') }}" class="btn btn-sm btn-secondary mt-2 mt-sm-0">
            <i class="fas fa-arrow-left mr-1"></i> Regresar
        </a>
    </div>

    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    @if($yaRespondida)
        {{-- Ya respondida --}}
        <div class="card shadow">
            <div class="card-body text-center py-5">
                <i class="fas fa-check-circle fa-4x text-success mb-3 d-block"></i>
                <h5 class="font-weight-bold">Ya respondiste esta evaluación</h5>
                <p class="text-muted">Tu participación ha sido registrada. ¡Gracias!</p>
                <a href="{{ route('evaluacion.mis_evaluaciones') }}" class="btn btn-primary">
                    <i class="fas fa-arrow-left mr-1"></i> Volver a mis evaluaciones
                </a>
            </div>
        </div>

    @else
        {{-- Formulario --}}
        <form action="{{ route('evaluacion.responder.store', $evaluacion) }}" method="POST"
              id="form-evaluacion">
            @csrf

            @php
                $numPregunta = 1;
                $totalPreguntas = $preguntas->count();
                // For docente questions: multiply by number of teachers
                if($docentesParaEvaluar->isNotEmpty()) {
                    $esDocenteCount  = $preguntas->where('es_docente', true)->count();
                    $normalCount     = $totalPreguntas - $esDocenteCount;
                    $totalPreguntas  = $normalCount + ($esDocenteCount * $docentesParaEvaluar->count());
                }
            @endphp

            {{-- Info de la evaluación --}}
            <div class="alert alert-info d-flex align-items-center mb-4">
                <i class="fas fa-info-circle fa-lg mr-3"></i>
                <div>
                    <strong>{{ $totalPreguntas }} pregunta(s)</strong> en esta evaluación.
                    @if($evaluacion->anonima)
                        &nbsp;<span class="badge badge-secondary">
                            <i class="fas fa-user-secret mr-1"></i>Anónima
                        </span>
                    @endif
                    @if($evaluacion->fecha_fin)
                        &nbsp; Cierra el
                        <strong>{{ \Carbon\Carbon::parse($evaluacion->fecha_fin)->format('d/m/Y') }}</strong>.
                    @endif
                </div>
            </div>

            @foreach($preguntas as $pregunta)
                @php $tipoSlug = $pregunta->tipo?->slug; @endphp

                @if($pregunta->es_docente && $docentesParaEvaluar->isNotEmpty())
                    {{-- ═══ PREGUNTA DE DOCENTE: una vez por cada docente ═══ --}}
                    @foreach($docentesParaEvaluar as $docente)
                        @php
                            $user         = $docente->docentes->first();
                            $fotoUrl      = $user?->profile_photo_url;
                            $nombreDocente = trim("{$user?->apellidoPaterno} {$user?->apellidoMaterno} {$user?->name}") ?: 'Docente';
                        @endphp

                        <div class="card shadow-sm mb-4 border-left-info">
                            <div class="card-header py-2 bg-light d-flex align-items-center">
                                {{-- Foto del docente --}}
                                <img src="{{ $fotoUrl }}"
                                     alt="{{ $nombreDocente }}"
                                     class="rounded-circle mr-3"
                                     style="width:48px; height:48px; object-fit:cover; border:2px solid #36b9cc;">
                                <div>
                                    <div class="font-weight-bold">{{ $nombreDocente }}</div>
                                    <small class="text-muted">
                                        <i class="fas fa-chalkboard-teacher mr-1 text-info"></i>
                                        Pregunta {{ $numPregunta++ }}
                                        @if($pregunta->requerida)
                                            <span class="text-danger">*</span>
                                        @endif
                                    </small>
                                </div>
                            </div>
                            <div class="card-body">
                                <p class="font-weight-bold mb-3">{{ $pregunta->texto }}</p>

                                @include('evaluacion._input_pregunta', [
                                    'pregunta'   => $pregunta,
                                    'tipoSlug'   => $tipoSlug,
                                    'fieldName'  => "resp[{$pregunta->id}][{$docente->id}]",
                                    'fieldId'    => "resp_{$pregunta->id}_{$docente->id}",
                                ])
                            </div>
                        </div>
                    @endforeach

                @else
                    {{-- ═══ PREGUNTA NORMAL ═══ --}}
                    <div class="card shadow-sm mb-4 border-left-primary">
                        <div class="card-body">
                            <small class="text-muted font-weight-bold d-block mb-1">
                                Pregunta {{ $numPregunta++ }}
                                @if($pregunta->requerida)
                                    <span class="text-danger">*</span>
                                @endif
                            </small>
                            <p class="font-weight-bold mb-3">{{ $pregunta->texto }}</p>

                            @include('evaluacion._input_pregunta', [
                                'pregunta'   => $pregunta,
                                'tipoSlug'   => $tipoSlug,
                                'fieldName'  => "resp[{$pregunta->id}]",
                                'fieldId'    => "resp_{$pregunta->id}",
                            ])
                        </div>
                    </div>
                @endif
            @endforeach

            <div class="card shadow-sm mb-4">
                <div class="card-body text-center">
                    <button type="button" class="btn btn-success btn-lg px-5"
                            onclick="confirmarEnvioEvaluacion()">
                        <i class="fas fa-paper-plane mr-2"></i> Enviar evaluación
                    </button>
                </div>
            </div>
        </form>
    @endif

</div>
@endsection

@section('scripts')
<script>
function confirmarEnvioEvaluacion() {
    Swal.fire({
        title: '¿Enviar evaluación?',
        html: 'Una vez enviada <strong>no podrás modificar tus respuestas</strong>.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Sí, enviar',
        cancelButtonText: 'Cancelar',
        confirmButtonColor: '#1cc88a',
        cancelButtonColor: '#6c757d',
    }).then(result => {
        if (result.isConfirmed) {
            document.getElementById('form-evaluacion').submit();
        }
    });
}
</script>
@endsection