@extends('admin.layout.app')

@section('content')
    <div class="p-10 max-w-5xl mx-auto space-y-8">
        <section>
            <p class="font-label-md text-label-md text-secondary uppercase tracking-wider mb-2">Editar pregunta</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">
                Ajusta la pregunta y sus opciones calificables.
            </p>
        </section>

        @if ($errors->any())
            <div class="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="bg-white rounded-xl border border-outline-variant p-8 shadow-[0px_4px_20px_rgba(0,0,0,0.04)] space-y-6"
            action="{{ route('admin.evaluaciones.questions.update', [$campaign, $question]) }}" method="POST">
            @csrf
            @method('PUT')

            <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', $question->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', $question->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', $question->tipo) === 'multiple')>Opción múltiple</option>
                    <option value="open" @selected(old('tipo', $question->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">
                    @php
                        $answers = old('answers')
                            ? collect(old('answers'))
                            : $question->respuestas->map(fn ($answer) => [
                                'id' => $answer->id,
                                'respuesta' => $answer->respuesta,
                                'valor' => $answer->valor,
                            ]);
                    @endphp
                    @foreach ($answers as $i => $answer)
                        <div class="grid grid-cols-12 gap-2 answer-row">
                            <input name="answers[{{ $i }}][id]" type="hidden" value="{{ $answer['id'] ?? '' }}" />
                            <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="{{ $answer['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="{{ $answer['valor'] ?? 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>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="flex justify-end gap-3 border-t border-outline-variant pt-6">
                <a class="rounded-lg border border-outline-variant px-5 py-3 font-label-md text-label-md text-on-surface-variant"
                    href="{{ route('admin.evaluaciones.show', $campaign) }}">Cancelar</a>
                <button class="rounded-lg bg-primary px-5 py-3 font-label-md text-label-md text-on-primary" type="submit">
                    Guardar pregunta
                </button>
            </div>
        </form>
    </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.querySelector('input[type="hidden"]').name = `answers[${index}][id]`;
                    row.querySelectorAll('input[type="text"], input[type="number"]')[0].name = `answers[${index}][respuesta]`;
                    row.querySelectorAll('input[type="text"], input[type="number"]')[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 name="answers[${index}][id]" type="hidden" value="" />
                    <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