@extends('backend.layouts.master')

@section('title', 'Créer une question pour ' . $event->title)

@section('content')
    <div class="container-fluid">
        <h1 class="h3 mb-3">Créer une nouvelle question</h1>

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

                    <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') }}" 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>
                        <select class="form-select @error('type') is-invalid @enderror" id="type" name="type"
                            required>
                            <option value="unique" @if (old('type') == 'unique') selected @endif>Choix unique</option>
                            <option value="multiple" @if (old('type') == 'multiple') selected @endif>Choix multiples
                            </option>
                            <option value="text" @if (old('type') == 'text') selected @endif>Texte libre</option>
                        </select>
                        @error('type')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div id="choices-container" class="mb-3 d-none">
                        <label class="form-label">Choix de réponse</label>
                        <div id="choices-wrapper">
                            <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>
                        </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>

                    <button type="submit" class="btn btn-primary">Créer la question</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 typeSelect = document.getElementById('type');
                const choicesContainer = document.getElementById('choices-container');
                const addChoiceButton = document.getElementById('add-choice');
                const choicesWrapper = document.getElementById('choices-wrapper');

                function toggleChoices() {
                    if (typeSelect.value === 'unique' || typeSelect.value === 'multiple') {
                        choicesContainer.classList.remove('d-none');
                    } else {
                        choicesContainer.classList.add('d-none');
                    }
                }

                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) {
                    button.parentElement.remove();
                }

                typeSelect.addEventListener('change', toggleChoices);
                toggleChoices(); // Initial check
            });
        </script>
    @endpush
@endsection