@extends('landing.layout.app')

@section('content')
    <main class="flex-grow">
        <section class="relative bg-primary py-16 overflow-hidden">
            <div class="absolute inset-0 opacity-20">
                @if ($campaign->banner_path)
                    <img class="w-full h-full object-cover" src="{{ route('evaluaciones.public.banner', $campaign) }}"
                        alt="Banner {{ $campaign->titulo }}" />
                @else
                    <img class="w-full h-full object-cover"
                        src="https://lh3.googleusercontent.com/aida-public/AB6AXuBo1yKFntL0Q8LyNPl8VRzLgVr4lKaik2hF1wvGLbVdrrVQCx6VlEPsiXC0QXQlFyJvBWM5mmlgw_OBfG0ax8ZUkAO7ipbFhtQ-LzJAsye57wgGdcMvojtV1Jw5yI7EsAdj7bT71zWaEtN03qbEcfPT-nuejI-DkcCDxfuL6WmZNkoS7kPSU4jU2jCnCpwkMbuEz_uol0eKC76MLf5F31BCHJ1NGA3aa_-DnQXBfEwmNv4Z_kMYbEUBx_KVkNOsMHClbVW_iXFoeOM" />
                @endif
            </div>
            <div class="max-w-7xl mx-auto px-6 relative z-10">
                <div class="max-w-3xl">
                    <nav class="flex mb-4 text-white/70 text-label-sm uppercase tracking-widest">
                        <a class="hover:text-white" href="{{ route('complaints.index') }}">Inicio</a>
                        <span class="mx-2">/</span>
                        <span class="text-white">Evaluación</span>
                    </nav>
                    <h1 class="font-display-xl text-white mb-4">{{ $campaign->titulo }}</h1>
                    @if ($campaign->descripcion)
                        <p class="text-body-lg text-white/90">{{ $campaign->descripcion }}</p>
                    @endif
                </div>
            </div>
        </section>

        <section class="max-w-7xl mx-auto px-6 py-12 -mt-12 relative z-20">
            @if (session('success'))
                <div class="mb-6 bg-green-50 border border-green-200 text-green-800 p-4 rounded-lg font-body-md">
                    {{ session('success') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="mb-6 bg-error-container border border-error/30 text-on-error-container p-4 rounded-lg font-body-md">
                    Revisa los campos marcados antes de enviar tu evaluación.
                </div>
            @endif

            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
                <aside class="lg:col-span-4 space-y-6">
                    <div class="bg-white p-8 border border-surface-container-high rounded-lg shadow-sm">
                        <span class="material-symbols-outlined text-secondary text-4xl mb-4">info</span>
                        <h3 class="font-headline-sm text-primary mb-2">Instrucciones</h3>
                        <p class="text-on-surface-variant text-body-sm leading-relaxed mb-4">
                            Completa tus datos y responde cada pregunta. Las preguntas de opción múltiple tienen valores
                            internos para calcular indicadores de satisfacción institucional.
                        </p>
                        <div class="p-4 bg-surface-container-low border-l-4 border-secondary">
                            <p class="text-xs font-bold text-secondary uppercase tracking-wider mb-1">Disponible hasta</p>
                            <p class="text-primary font-medium">{{ $campaign->fin_at->format('d/m/Y H:i') }}</p>
                        </div>
                    </div>

                    <div class="bg-white p-8 border border-surface-container-high rounded-lg shadow-sm">
                        <span class="material-symbols-outlined text-primary text-4xl mb-4">verified_user</span>
                        <h3 class="font-headline-sm text-primary mb-2">Privacidad</h3>
                        <p class="text-on-surface-variant text-body-sm leading-relaxed">
                            La información será utilizada únicamente para seguimiento académico y análisis estadístico.
                        </p>
                    </div>
                </aside>

                <div class="lg:col-span-8">
                    @unless ($campaign->esta_disponible)
                        <div class="bg-white p-8 border border-error/30 rounded-lg shadow-sm text-on-error-container">
                            Esta evaluación no está disponible en este momento.
                        </div>
                    @else
                        <form class="space-y-8" action="{{ route('evaluaciones.public.store', $campaign) }}" method="POST">
                            @csrf

                            <div class="bg-white p-8 border border-surface-container-high rounded-lg shadow-sm">
                                <h2 class="font-headline-sm text-primary mb-6 flex items-center gap-2">
                                    <span class="material-symbols-outlined">person</span>
                                    Datos del Estudiante
                                </h2>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div class="space-y-2">
                                        <label class="font-label-md text-on-surface-variant block">NOMBRE COMPLETO</label>
                                        <input
                                            class="w-full p-3 bg-white border border-outline-variant focus:border-primary focus:ring-1 focus:ring-primary rounded transition-all outline-none text-body-md"
                                            name="nombre_completo" placeholder="Ej. Juan Pérez" type="text"
                                            value="{{ old('nombre_completo') }}" required />
                                        @error('nombre_completo')
                                            <p class="font-label-sm text-error">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="space-y-2">
                                        <label class="font-label-md text-on-surface-variant block">MATRÍCULA</label>
                                        <input
                                            class="w-full p-3 bg-white border border-outline-variant focus:border-primary focus:ring-1 focus:ring-primary rounded transition-all outline-none text-body-md"
                                            name="matricula" placeholder="ID-000000" type="text" value="{{ old('matricula') }}"
                                            required />
                                        @error('matricula')
                                            <p class="font-label-sm text-error">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="space-y-2">
                                        <label class="font-label-md text-on-surface-variant block">CAMPUS</label>
                                        <input
                                            class="w-full p-3 bg-white border border-outline-variant focus:border-primary focus:ring-1 focus:ring-primary rounded transition-all outline-none text-body-md"
                                            name="campus" placeholder="Ej. Campus Central" type="text" value="{{ old('campus') }}"
                                            required />
                                        @error('campus')
                                            <p class="font-label-sm text-error">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="space-y-2">
                                        <label class="font-label-md text-on-surface-variant block">CORREO (OPCIONAL)</label>
                                        <input
                                            class="w-full p-3 bg-white border border-outline-variant focus:border-primary focus:ring-1 focus:ring-primary rounded transition-all outline-none text-body-md"
                                            name="email" placeholder="correo@universidad.edu" type="email" value="{{ old('email') }}" />
                                        @error('email')
                                            <p class="font-label-sm text-error">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="bg-white p-8 border border-surface-container-high rounded-lg shadow-sm">
                                <h2 class="font-headline-sm text-primary mb-8 flex items-center gap-2">
                                    <span class="material-symbols-outlined">fact_check</span>
                                    Evaluación
                                </h2>

                                <div class="space-y-12">
                                    @forelse ($campaign->preguntas as $questionIndex => $question)
                                        <div class="space-y-4">
                                            <div>
                                                <p class="font-body-lg text-primary">
                                                    {{ $questionIndex + 1 }}. {{ $question->pregunta }}
                                                </p>
                                                @if ($question->descripcion)
                                                    <p class="text-body-sm text-on-surface-variant mt-1">{{ $question->descripcion }}</p>
                                                @endif
                                            </div>

                                            @if ($question->tipo === 'multiple')
                                                <div class="flex flex-wrap gap-4 md:gap-6">
                                                    @foreach ($question->respuestas as $answer)
                                                        <label class="flex flex-col items-center gap-2 cursor-pointer group max-w-[120px] text-center">
                                                            <input class="sr-only peer"
                                                                name="answers[{{ $question->id }}][respuesta_id]"
                                                                type="radio" value="{{ $answer->id }}"
                                                                @checked((string) old("answers.{$question->id}.respuesta_id") === (string) $answer->id) />
                                                            <div
                                                                class="w-11 h-11 rounded-full border-2 border-outline-variant flex items-center justify-center text-label-md peer-checked:bg-primary peer-checked:border-primary peer-checked:text-white transition-all">
                                                                {{ $answer->valor }}
                                                            </div>
                                                            <span class="text-xs text-on-surface-variant group-hover:text-primary">
                                                                {{ $answer->respuesta }}
                                                            </span>
                                                        </label>
                                                    @endforeach
                                                </div>
                                                @error("answers.{$question->id}.respuesta_id")
                                                    <p class="font-label-sm text-error">{{ $message }}</p>
                                                @enderror
                                            @else
                                                <textarea
                                                    class="w-full p-3 bg-white border border-outline-variant focus:border-primary focus:ring-1 focus:ring-primary rounded transition-all outline-none text-body-md"
                                                    name="answers[{{ $question->id }}][respuesta]" rows="4"
                                                    placeholder="Escribe tu respuesta...">{{ old("answers.{$question->id}.respuesta") }}</textarea>
                                                @error("answers.{$question->id}.respuesta")
                                                    <p class="font-label-sm text-error">{{ $message }}</p>
                                                @enderror
                                            @endif
                                        </div>
                                    @empty
                                        <div class="p-6 bg-surface-container-low border border-outline-variant rounded-lg text-on-surface-variant">
                                            Esta evaluación aún no tiene preguntas disponibles.
                                        </div>
                                    @endforelse
                                </div>
                            </div>

                            @if ($campaign->preguntas->isNotEmpty())
                                <div
                                    class="flex flex-col sm:flex-row items-center justify-between gap-6 bg-surface-container-low p-8 border border-surface-container-high rounded-lg">
                                    <div class="flex items-center gap-2 text-on-surface-variant">
                                        <span class="material-symbols-outlined text-green-600">lock</span>
                                        <span class="text-label-sm">Conexión segura y uso institucional</span>
                                    </div>
                                    <div class="flex gap-4 w-full sm:w-auto">
                                        <button
                                            class="w-full sm:w-auto px-8 py-3 border border-primary text-primary font-label-md rounded hover:bg-white transition-colors"
                                            type="reset">BORRAR TODO</button>
                                        <button
                                            class="w-full sm:w-auto px-8 py-3 bg-secondary text-white font-label-md rounded hover:opacity-90 active:opacity-80 transition-opacity shadow-lg shadow-secondary/20"
                                            type="submit">ENVIAR ENCUESTA</button>
                                    </div>
                                </div>
                            @endif
                        </form>
                    @endunless
                </div>
            </div>
        </section>
    </main>
@endsection