@extends('dashboard.app')
@section('content')
<div class="container-fluid">
    <div class="col-xl-12 col-lg-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Adicionar Nova Questão</h4>
            </div>
            <div class="card-body">
                <div class="basic-form">
                    <form action="{{ route('questions.store') }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label for="title" class="form-label">Título da Pergunta</label>
                            <input type="text" name="title" id="title" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label for="description" class="form-label">Pergunta Principal</label>
                            <textarea name="description" id="description" class="form-control"></textarea>
                        </div>

                        <div class="mb-3">
                            <label for="order" class="form-label">Ordem</label>
                            <input type="number" name="order" id="order" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Opções</label>
                            <div id="options-wrapper">
                                <div class="input-group mb-2">
                                    <input type="text" name="options[]" class="form-control" placeholder="Opção 1" required>
                                    <input type="radio" name="correct_option" value="0" class="form-check-input ms-2" required>
                                    <label class="form-check-label ms-1">Correta</label>
                                    <button type="button" class="btn btn-danger remove-option ms-2">Remover</button>
                                </div>
                            </div>
                            <button type="button" id="add-option" class="btn btn-secondary mt-2">Adicionar Opção</button>
                        </div>

                        <button type="submit" class="btn btn-primary">Salvar Pergunta</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const addOptionBtn = document.getElementById('add-option');
        const optionsWrapper = document.getElementById('options-wrapper');

        addOptionBtn.addEventListener('click', function () {
            const optionIndex = optionsWrapper.children.length;
            const newOption = document.createElement('div');
            newOption.classList.add('input-group', 'mb-2');
            newOption.innerHTML = `
                <input type="text" name="options[]" class="form-control" placeholder="Opção ${optionIndex + 1}" required>
                <input type="radio" name="correct_option" value="${optionIndex}" class="form-check-input ms-2" required>
                <label class="form-check-label ms-1">Correta</label>
                <button type="button" class="btn btn-danger remove-option ms-2">Remover</button>
            `;
            optionsWrapper.appendChild(newOption);
        });

        optionsWrapper.addEventListener('click', function (e) {
            if (e.target.classList.contains('remove-option')) {
                e.target.closest('.input-group').remove();

                // Atualiza os índices das opções e do botão rádio
                const allOptions = optionsWrapper.querySelectorAll('.input-group');
                allOptions.forEach((option, index) => {
                    option.querySelector('input[type="text"]').placeholder = `Opção ${index + 1}`;
                    option.querySelector('input[type="radio"]').value = index;
                });
            }
        });
    });
</script>


@endsection