@extends('layouts.phoenix')

@section('title', $question->exists ? 'Modifier la question' : 'Nouvelle question')

@section('content')

@php
    // Lignes de réponses à afficher : ce que l'utilisateur vient de saisir (erreur de
    // validation), sinon les réponses en base, sinon deux lignes vides.
    if (old('answers')) {
        $rows = old('answers');
        $correct = (int) old('correct', -1);
    } elseif ($answers->count()) {
        $rows = $answers->map(fn ($a) => ['id' => $a->id, 'title' => $a->title])->all();
        $correct = $answers->search(fn ($a) => $a->is_correct);
        $correct = $correct === false ? -1 : $correct;
    } else {
        $rows = [['id' => null, 'title' => ''], ['id' => null, 'title' => '']];
        $correct = 0;
    }
@endphp

<div class="mb-6">
    <h2 class="mb-2">{{ $question->exists ? 'Modifier la question' : 'Nouvelle question' }}</h2>
    <p class="text-body-tertiary mb-0">Cochez la bonne réponse. Les réponses sont mélangées à l'affichage du quiz.</p>
</div>

<form method="POST" action="{{ $question->exists ? url('/admin/questions/'.$question->id) : url('/admin/questions') }}">
    @csrf

    <div class="row g-3">
        <div class="col-12 col-xl-8">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label" for="title">Question</label>
                        <input class="form-control" id="title" name="title" type="text" value="{{ old('title', $question->title) }}" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="category">Catégorie</label>
                        <select class="form-select" id="category" name="category" required>
                            @foreach(App\Models\QuizQuestion::CATEGORIES as $key => $label)
                                <option value="{{ $key }}" {{ old('category', $question->category ?? App\Models\QuizQuestion::CATEGORY_OTHER) === $key ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                        <p class="fs-10 text-body-tertiary mt-1 mb-0">
                            Une partie tire {{ App\Models\QuizQuestion::PULL[App\Models\QuizQuestion::CATEGORY_CM] }} question Crédit Mutuel
                            et {{ App\Models\QuizQuestion::PULL[App\Models\QuizQuestion::CATEGORY_OTHER] }} questions Autre.
                        </p>
                    </div>

                    <div class="mb-0">
                        <label class="form-label" for="description">Précision (optionnel, non affichée dans le quiz)</label>
                        <textarea class="form-control" id="description" name="description" rows="2">{{ old('description', $question->description) }}</textarea>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header border-bottom border-translucent d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">Réponses</h4>
                    <button class="btn btn-sm btn-phoenix-primary" type="button" id="addAnswer">Ajouter une réponse</button>
                </div>
                <div class="card-body">
                    <div id="answersList">
                        @foreach($rows as $index => $row)
                            <div class="answer-row row g-2 align-items-center mb-2">
                                <div class="col-auto">
                                    <input class="form-check-input mt-0" type="radio" name="correct" value="{{ $index }}" {{ (int) $correct === (int) $index ? 'checked' : '' }} required>
                                </div>
                                <div class="col">
                                    <input class="form-control" name="answers[{{ $index }}][title]" type="text" value="{{ $row['title'] ?? '' }}" placeholder="Libellé de la réponse" required>
                                    <input type="hidden" name="answers[{{ $index }}][id]" value="{{ $row['id'] ?? '' }}">
                                </div>
                                <div class="col-auto">
                                    <button class="btn btn-sm btn-phoenix-danger removeAnswer" type="button" title="Retirer">
                                        <span data-feather="trash-2"></span>
                                    </button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <p class="fs-10 text-body-tertiary mb-0">Le bouton radio à gauche désigne la bonne réponse.</p>
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-4">
            <div class="card">
                <div class="card-body">
                    <button class="btn btn-primary w-100 mb-2" type="submit">Enregistrer</button>
                    <a class="btn btn-phoenix-secondary w-100" href="{{ url('/admin/questions') }}">Annuler</a>
                </div>
            </div>
        </div>
    </div>
</form>

@endsection

@push('scripts')
<script>
    (function () {
        var list = document.getElementById('answersList');
        var addBtn = document.getElementById('addAnswer');
        var nextIndex = {{ count($rows) }};

        addBtn.addEventListener('click', function () {
            var row = document.createElement('div');
            row.className = 'answer-row row g-2 align-items-center mb-2';
            row.innerHTML =
                '<div class="col-auto"><input class="form-check-input mt-0" type="radio" name="correct" value="' + nextIndex + '" required></div>' +
                '<div class="col">' +
                '<input class="form-control" name="answers[' + nextIndex + '][title]" type="text" placeholder="Libellé de la réponse" required>' +
                '<input type="hidden" name="answers[' + nextIndex + '][id]" value="">' +
                '</div>' +
                '<div class="col-auto"><button class="btn btn-sm btn-phoenix-danger removeAnswer" type="button">&times;</button></div>';
            list.appendChild(row);
            nextIndex++;
        });

        list.addEventListener('click', function (event) {
            var btn = event.target.closest('.removeAnswer');
            if (!btn) {
                return;
            }
            if (list.querySelectorAll('.answer-row').length <= 2) {
                alert('Il faut au moins deux réponses.');
                return;
            }
            btn.closest('.answer-row').remove();
        });
    })();
</script>
@endpush