@php
$existingOptions = $question->options ?? collect();
$options = old('options', $existingOptions->count() ? $existingOptions->map(function($opt){
    return ['text' => $opt->option, 'is_correct' => $opt->is_correct];
})->toArray() : [[],[]]);
@endphp
<div class="form-group">
    <label for="question">Domanda</label>
    <textarea class="form-control" id="question" name="question" rows="2" required>{{ old('question', $question->question ?? '') }}</textarea>
</div>
<div class="form-group">
    <label for="position">Ordine</label>
    <input type="number" class="form-control" id="position" name="position" min="1" value="{{ old('position', $question->position ?? 1) }}" required>
</div>
<div class="form-group">
    <label>Opzioni</label>
    <div id="options-wrapper">
        @foreach($options as $idx => $option)
        <div class="border p-2 mb-2">
            <div class="form-group mb-2">
                <label>Testo</label>
                <input type="text" class="form-control" name="options[{{ $idx }}][text]" value="{{ $option['text'] ?? '' }}" required>
            </div>
            <div class="form-check">
                <input type="hidden" name="options[{{ $idx }}][is_correct]" value="0">
                <input type="checkbox" class="form-check-input" id="opt-correct-{{ $idx }}" name="options[{{ $idx }}][is_correct]" value="1" {{ !empty($option['is_correct']) ? 'checked' : '' }}>
                <label class="form-check-label" for="opt-correct-{{ $idx }}">Corretta</label>
            </div>
        </div>
        @endforeach
    </div>
    <button type="button" id="add-option" class="btn btn-sm btn-outline-primary">Aggiungi opzione</button>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const wrapper = document.getElementById('options-wrapper');
        const addBtn = document.getElementById('add-option');
        let index = {{ count($options) }};
        addBtn.addEventListener('click', function() {
            const html = `
            <div class="border p-2 mb-2">
                <div class="form-group mb-2">
                    <label>Testo</label>
                    <input type="text" class="form-control" name="options[${index}][text]" required>
                </div>
                <div class="form-check">
                    <input type="hidden" name="options[${index}][is_correct]" value="0">
                    <input type="checkbox" class="form-check-input" id="opt-correct-${index}" name="options[${index}][is_correct]" value="1">
                    <label class="form-check-label" for="opt-correct-${index}">Corretta</label>
                </div>
            </div>`;
            wrapper.insertAdjacentHTML('beforeend', html);
            index++;
        });
    });
</script>
@endpush