@extends('admin.layout.app')

@section('content')
    <div class="p-10 max-w-7xl mx-auto space-y-8">
        <section class="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
            <div>
                <p class="font-label-md text-label-md text-secondary uppercase tracking-wider mb-2">Respuestas individuales</p>
                <h2 class="font-headline-lg text-headline-lg text-primary mb-2">{{ $campaign->titulo }}</h2>
                <p class="font-body-md text-body-md text-on-surface-variant max-w-2xl">
                    Consulta quién respondió la evaluación y el detalle de sus respuestas.
                </p>
            </div>
            <div class="flex flex-wrap gap-3">
                <a class="inline-flex items-center justify-center gap-2 rounded-lg border border-outline-variant px-5 py-3 font-label-md text-label-md text-primary hover:bg-surface-container"
                    href="{{ route('admin.evaluaciones.results', $campaign) }}">
                    <span class="material-symbols-outlined">bar_chart</span>
                    Gráficas
                </a>
                <a class="inline-flex items-center justify-center gap-2 rounded-lg border border-outline-variant px-5 py-3 font-label-md text-label-md text-primary hover:bg-surface-container"
                    href="{{ route('admin.evaluaciones.show', $campaign) }}">
                    <span class="material-symbols-outlined">arrow_back</span>
                    Volver
                </a>
            </div>
        </section>

        <section class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
            <div class="bg-white p-6 rounded-xl border border-outline-variant shadow-[0px_4px_20px_rgba(0,0,0,0.04)]">
                <p class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Participantes</p>
                <p class="font-headline-lg text-headline-lg text-primary mt-2">{{ number_format($participants->count()) }}</p>
            </div>
            <div class="bg-white p-6 rounded-xl border border-outline-variant shadow-[0px_4px_20px_rgba(0,0,0,0.04)]">
                <p class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Preguntas</p>
                <p class="font-headline-lg text-headline-lg text-primary mt-2">{{ number_format($campaign->preguntas->count()) }}</p>
            </div>
            <div class="bg-white p-6 rounded-xl border border-outline-variant shadow-[0px_4px_20px_rgba(0,0,0,0.04)]">
                <p class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Respuestas totales</p>
                <p class="font-headline-lg text-headline-lg text-primary mt-2">
                    {{ number_format($participants->sum(fn ($participant) => $participant['responses']->count())) }}
                </p>
            </div>
        </section>

        <section class="space-y-5">
            @forelse ($participants as $participant)
                <article id="alumno-{{ $participant['alumno']?->id }}"
                    class="bg-white rounded-xl border {{ (int) request('alumno') === $participant['alumno']?->id ? 'border-primary ring-2 ring-primary/20' : 'border-outline-variant' }} shadow-[0px_4px_20px_rgba(0,0,0,0.04)] overflow-hidden">
                    <div class="grid grid-cols-1 lg:grid-cols-12">
                        <div class="lg:col-span-4 border-b lg:border-b-0 lg:border-r border-outline-variant bg-surface-container-lowest p-6">
                            <p class="font-label-md text-label-md text-secondary uppercase tracking-wider">Alumno</p>
                            <h3 class="font-title-md text-title-md text-primary mt-2">
                                {{ $participant['alumno']?->nombre_completo ?? 'Sin nombre' }}
                            </h3>

                            <div class="mt-5 space-y-3 font-body-sm text-body-sm text-on-surface-variant">
                                <p class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-[18px] text-outline">badge</span>
                                    {{ $participant['alumno']?->matricula ?? 'Sin matrícula' }}
                                </p>
                                <p class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-[18px] text-outline">school</span>
                                    {{ $participant['alumno']?->campus ?? 'Sin campus' }}
                                </p>
                                <p class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-[18px] text-outline">mail</span>
                                    {{ $participant['alumno']?->email ?: 'Sin correo' }}
                                </p>
                                <p class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-[18px] text-outline">schedule</span>
                                    {{ optional($participant['submitted_at'])->format('d/m/Y H:i') }}
                                </p>
                            </div>

                            <div class="mt-6 rounded-lg bg-primary text-on-primary p-4">
                                <p class="font-label-md text-label-md uppercase tracking-wider">Promedio individual</p>
                                <p class="font-headline-lg text-headline-lg mt-1">
                                    {{ $participant['average'] ?? 'N/A' }}
                                </p>
                            </div>
                        </div>

                        <div class="lg:col-span-8 p-6 space-y-4">
                            @foreach ($participant['responses'] as $response)
                                <div class="rounded-lg border border-outline-variant bg-white p-4">
                                    <p class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">
                                        {{ $response->pregunta?->tipo === 'multiple' ? 'Opción múltiple' : 'Respuesta abierta' }}
                                    </p>
                                    <h4 class="font-body-md text-body-md text-primary mt-2">
                                        {{ $response->pregunta?->pregunta }}
                                    </h4>

                                    @if ($response->answer)
                                        <div class="mt-3 flex flex-wrap items-center gap-3">
                                            <span class="rounded-lg bg-surface-container px-4 py-2 font-body-sm text-body-sm text-on-surface">
                                                {{ $response->answer->respuesta }}
                                            </span>
                                            <span class="rounded-full bg-secondary text-on-secondary px-3 py-1 font-label-md text-[10px] uppercase tracking-wider">
                                                {{ $response->answer->valor }} pts
                                            </span>
                                        </div>
                                    @else
                                        <p class="mt-3 font-body-md text-body-md text-on-surface whitespace-pre-line">
                                            {{ $response->respuesta }}
                                        </p>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                </article>
            @empty
                <div class="bg-white rounded-xl border border-outline-variant p-10 text-center shadow-[0px_4px_20px_rgba(0,0,0,0.04)]">
                    <span class="material-symbols-outlined text-primary text-[48px]">person_search</span>
                    <h3 class="font-title-md text-title-md text-primary mt-3">Sin respuestas individuales</h3>
                    <p class="font-body-md text-body-md text-on-surface-variant mt-2">
                        Aún no hay alumnos que hayan respondido esta evaluación.
                    </p>
                </div>
            @endforelse
        </section>
    </div>
@endsection