@extends('admin.layout.app')

@section('content')
    <div class="p-10 max-w-7xl mx-auto space-y-8">
        @if (session('success'))
            <div class="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-green-800 font-body-sm">
                {{ session('success') }}
            </div>
        @endif

        <section class="grid grid-cols-1 lg:grid-cols-12 gap-gutter">
            <div class="lg:col-span-8 bg-white rounded-xl border border-outline-variant overflow-hidden shadow-[0px_4px_20px_rgba(0,0,0,0.04)]">
                @if ($campaign->banner_path)
                    <img class="h-56 w-full object-cover" src="{{ route('admin.evaluaciones.asset', [$campaign, 'banner']) }}"
                        alt="Banner {{ $campaign->titulo }}" />
                @endif
                <div class="p-8">
                    <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between mb-3">
                        <p class="font-label-md text-label-md text-secondary uppercase tracking-wider">Campaña de evaluación</p>
                        <div class="flex flex-wrap gap-2">
                            <a class="inline-flex items-center justify-center gap-2 rounded-lg border border-outline-variant px-4 py-2 font-label-md text-label-md text-primary hover:bg-surface-container"
                                href="{{ route('admin.evaluaciones.results', $campaign) }}">
                                <span class="material-symbols-outlined text-[18px]">bar_chart</span>
                                Respuestas
                            </a>
                            <a class="inline-flex items-center justify-center gap-2 rounded-lg border border-outline-variant px-4 py-2 font-label-md text-label-md text-primary hover:bg-surface-container"
                                href="{{ route('admin.evaluaciones.individual-responses', $campaign) }}">
                                <span class="material-symbols-outlined text-[18px]">person_search</span>
                                Individuales
                            </a>
                            <a class="inline-flex items-center justify-center gap-2 rounded-lg border border-outline-variant px-4 py-2 font-label-md text-label-md text-primary hover:bg-surface-container"
                                href="{{ route('admin.evaluaciones.edit', $campaign) }}">
                                <span class="material-symbols-outlined text-[18px]">edit</span>
                                Editar campaña
                            </a>
                        </div>
                    </div>
                    <h2 class="font-headline-lg text-headline-lg text-primary mb-3">{{ $campaign->titulo }}</h2>
                    <p class="font-body-md text-body-md text-on-surface-variant whitespace-pre-line">{{ $campaign->descripcion }}</p>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
                        <div class="rounded-lg border border-outline-variant bg-surface-container-lowest p-4">
                            <p class="font-label-md text-label-md text-on-surface-variant uppercase">Disponible</p>
                            <p class="font-body-sm text-body-sm text-on-surface mt-2">
                                {{ $campaign->inicio_at->format('d/m/Y H:i') }}<br>
                                {{ $campaign->fin_at->format('d/m/Y H:i') }}
                            </p>
                        </div>
                        <div class="rounded-lg border border-outline-variant bg-surface-container-lowest p-4">
                            <p class="font-label-md text-label-md text-on-surface-variant uppercase">Preguntas</p>
                            <p class="font-headline-lg text-headline-lg text-primary mt-1">{{ $campaign->preguntas->count() }}</p>
                        </div>
                        <div class="rounded-lg border border-outline-variant bg-surface-container-lowest p-4">
                            <p class="font-label-md text-label-md text-on-surface-variant uppercase">Estado</p>
                            <p class="font-title-md text-title-md mt-1 {{ $campaign->esta_disponible ? 'text-green-700' : 'text-on-surface-variant' }}">
                                {{ $campaign->esta_disponible ? 'Activa' : 'Fuera de ventana' }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <aside class="lg:col-span-4 bg-white rounded-xl border border-outline-variant p-6 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 mb-4">Acceso público</p>
                @if ($campaign->qr_path)
                    <div class="rounded-xl border border-outline-variant bg-surface-container-lowest p-4">
                        <img class="mx-auto h-56 w-56" src="{{ route('admin.evaluaciones.asset', [$campaign, 'qr']) }}"
                            alt="QR {{ $campaign->titulo }}" />
                    </div>
                @endif
                <a class="mt-4 flex items-center justify-center gap-2 rounded-lg bg-primary px-4 py-3 text-on-primary font-label-md text-label-md"
                    href="{{ route('evaluaciones.public.show', $campaign) }}" target="_blank" rel="noopener">
                    Abrir evaluación
                    <span class="material-symbols-outlined">open_in_new</span>
                </a>
            </aside>
        </section>

        <section class="grid grid-cols-1 lg:grid-cols-12 gap-gutter">
            <div class="lg:col-span-5 bg-white rounded-xl border border-outline-variant p-6 shadow-[0px_4px_20px_rgba(0,0,0,0.04)]">
                <h3 class="font-title-md text-title-md text-primary mb-2">Agregar pregunta</h3>
                <p class="font-body-sm text-body-sm text-on-surface-variant mb-6">
                    Usa opción múltiple para respuestas calificables. Cada respuesta debe tener un valor para promediar.
                </p>

                @if ($errors->any())
                    <div class="mb-5 rounded-lg border border-error/30 bg-error-container px-4 py-3 text-on-error-container font-body-sm">
                        {{ $errors->first() }}
                    </div>
                @endif

                <form class="space-y-5" action="{{ route('admin.evaluaciones.questions.store', $campaign) }}" method="POST">
                    @csrf
                    <div>
                        <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="pregunta">Pregunta</label>
                        <textarea class="mt-2 w-full rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
                            id="pregunta" name="pregunta" rows="3" required>{{ old('pregunta') }}</textarea>
                    </div>
                    <div>
                        <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="descripcion">Ayuda o descripción</label>
                        <input class="mt-2 w-full rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
                            id="descripcion" name="descripcion" type="text" value="{{ old('descripcion') }}" />
                    </div>
                    <div>
                        <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="tipo">Tipo</label>
                        <select class="mt-2 w-full rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
                            id="tipo" name="tipo">
                            <option value="multiple" @selected(old('tipo', 'multiple') === 'multiple')>Opción múltiple</option>
                            <option value="open" @selected(old('tipo') === 'open')>Respuesta abierta</option>
                        </select>
                    </div>

                    <div id="answers-panel" class="space-y-3">
                        <div class="flex items-center justify-between">
                            <p class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Respuestas</p>
                            <button class="rounded-lg border border-outline-variant px-3 py-2 font-label-md text-label-md text-primary"
                                id="add-answer" type="button">
                                Agregar
                            </button>
                        </div>
                        <div id="answers-list" class="space-y-3">
                            @for ($i = 0; $i < 4; $i++)
                                <div class="grid grid-cols-12 gap-2 answer-row">
                                    <input class="col-span-8 rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
                                        name="answers[{{ $i }}][respuesta]" placeholder="Respuesta" type="text"
                                        value="{{ old("answers.$i.respuesta") }}" />
                                    <input class="col-span-3 rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
                                        name="answers[{{ $i }}][valor]" placeholder="Valor" type="number" min="0" max="100"
                                        value="{{ old("answers.$i.valor", 5 - $i) }}" />
                                    <button class="col-span-1 rounded-lg text-error hover:bg-error-container remove-answer" type="button">
                                        <span class="material-symbols-outlined">close</span>
                                    </button>
                                </div>
                            @endfor
                        </div>
                    </div>

                    <button class="w-full rounded-lg bg-primary px-5 py-3 font-label-md text-label-md text-on-primary" type="submit">
                        Guardar pregunta
                    </button>
                </form>
            </div>

            <div class="lg:col-span-7 space-y-4">
                @forelse ($campaign->preguntas as $question)
                    <article class="bg-white rounded-xl border border-outline-variant p-6 shadow-[0px_4px_20px_rgba(0,0,0,0.04)]">
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                <span class="rounded-full bg-surface-container px-3 py-1 font-label-md text-[10px] uppercase tracking-wider text-on-surface-variant">
                                    {{ $question->tipo === 'multiple' ? 'Opción múltiple' : 'Abierta' }}
                                </span>
                                <h4 class="font-title-md text-title-md text-primary mt-3">{{ $question->pregunta }}</h4>
                                @if ($question->descripcion)
                                    <p class="font-body-sm text-body-sm text-on-surface-variant mt-1">{{ $question->descripcion }}</p>
                                @endif
                            </div>
                            <a class="inline-flex items-center gap-2 rounded-lg border border-outline-variant px-3 py-2 font-label-md text-label-md text-primary hover:bg-surface-container"
                                href="{{ route('admin.evaluaciones.questions.edit', [$campaign, $question]) }}">
                                <span class="material-symbols-outlined text-[18px]">edit</span>
                                Editar
                            </a>
                        </div>

                        @if ($question->tipo === 'multiple')
                            <div class="mt-5 grid grid-cols-1 md:grid-cols-2 gap-3">
                                @foreach ($question->respuestas as $answer)
                                    <div class="flex items-center justify-between rounded-lg border border-outline-variant bg-surface-container-lowest px-4 py-3">
                                        <span class="font-body-sm text-body-sm text-on-surface">{{ $answer->respuesta }}</span>
                                        <span class="rounded-full bg-primary text-on-primary px-3 py-1 font-label-md text-[10px]">
                                            {{ $answer->valor }} pts
                                        </span>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </article>
                @empty
                    <div class="bg-white rounded-xl border border-outline-variant p-10 text-center">
                        <span class="material-symbols-outlined text-primary text-[48px]">quiz</span>
                        <h3 class="font-title-md text-title-md text-primary mt-3">Sin preguntas</h3>
                        <p class="font-body-md text-body-md text-on-surface-variant mt-2">Agrega las preguntas que verá el alumno en esta evaluación.</p>
                    </div>
                @endforelse
            </div>
        </section>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const typeSelect = document.getElementById('tipo');
            const answersPanel = document.getElementById('answers-panel');
            const answersList = document.getElementById('answers-list');
            const addAnswer = document.getElementById('add-answer');

            const refreshPanel = () => answersPanel.classList.toggle('hidden', typeSelect.value === 'open');

            const reindexRows = () => {
                answersList.querySelectorAll('.answer-row').forEach((row, index) => {
                    row.querySelectorAll('input')[0].name = `answers[${index}][respuesta]`;
                    row.querySelectorAll('input')[1].name = `answers[${index}][valor]`;
                });
            };

            addAnswer.addEventListener('click', () => {
                const index = answersList.querySelectorAll('.answer-row').length;
                const row = document.createElement('div');
                row.className = 'grid grid-cols-12 gap-2 answer-row';
                row.innerHTML = `
                    <input class="col-span-8 rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary" name="answers[${index}][respuesta]" placeholder="Respuesta" type="text" />
                    <input class="col-span-3 rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary" name="answers[${index}][valor]" placeholder="Valor" type="number" min="0" max="100" value="1" />
                    <button class="col-span-1 rounded-lg text-error hover:bg-error-container remove-answer" type="button">
                        <span class="material-symbols-outlined">close</span>
                    </button>
                `;
                answersList.appendChild(row);
            });

            answersList.addEventListener('click', (event) => {
                const button = event.target.closest('.remove-answer');
                if (!button) return;

                button.closest('.answer-row').remove();
                reindexRows();
            });

            typeSelect.addEventListener('change', refreshPanel);
            refreshPanel();
        });
    </script>
@endsection