@extends('backend.layouts.master')

@section('title', 'Modifier la question pour ' . $event->title)

@section('content')
    <div class="container-fluid">
        <h1 class="h3 mb-3">Modifier la question</h1>

        <div class="card">
            <div class="card-body">
                <form action="{{ route('backend.evaluations.update', [$event, $question]) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="mb-3">
                        <label for="text" class="form-label">Texte de la question</label>
                        <input type="text" class="form-control @error('text') is-invalid @enderror" id="text"
                            name="text" value="{{ old('text', $question->text) }}" required>
                        @error('text')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="type" class="form-label">Type de question</label>
                        <input type="text" class="form-control" id="type" name="type"
                            value="{{ $question->type }}" readonly>
                    </div>

                    @if ($question->type !== 'text')
                        <div id="choices-container" class="mb-3">
                            <label class="form-label">Choix de réponse</label>
                            <div id="choices-wrapper">
                                @forelse($question->choices as $choice)
                                    <div class="input-group mb-2">
                                        <input type="text" class="form-control" name="choices[]"
                                            placeholder="Texte du choix" value="{{ $choice->text }}">
                                        <button class="btn btn-danger" type="button"
                                            onclick="removeChoice(this)">-</button>
                                    </div>
                                @empty
                                    <div class="input-group mb-2">
                                        <input type="text" class="form-control" name="choices[]"
                                            placeholder="Texte du choix">
                                        <button class="btn btn-danger" type="button"
                                            onclick="removeChoice(this)">-</button>
                                    </div>
                                @endforelse
                            </div>
                            @error('choices')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                            <button type="button" class="btn btn-secondary mt-2" id="add-choice">Ajouter un choix</button>
                        </div>
                    @endif

                    <button type="submit" class="btn btn-primary">Mettre à jour</button>
                    <a href="{{ route('backend.evaluations.index', $event) }}" class="btn btn-secondary">Annuler</a>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const addChoiceButton = document.getElementById('add-choice');
                const choicesWrapper = document.getElementById('choices-wrapper');

                if (addChoiceButton) {
                    addChoiceButton.addEventListener('click', function() {
                        const newChoice = document.createElement('div');
                        newChoice.className = 'input-group mb-2';
                        newChoice.innerHTML = `
                    <input type="text" class="form-control" name="choices[]" placeholder="Texte du choix">
                    <button class="btn btn-danger" type="button" onclick="removeChoice(this)">-</button>
                `;
                        choicesWrapper.appendChild(newChoice);
                    });
                }

                window.removeChoice = function(button) {
                    // Prevent removing the last input field
                    if (choicesWrapper.getElementsByClassName('input-group').length > 1) {
                        button.parentElement.remove();
                    } else {
                        alert('Vous devez avoir au moins un choix.');
                    }
                }
            });
        </script>
    @endpush
@endsection