@extends('admin.layout.master')
@section('title', __('admin.edit_question'))

@section('content')
    <div class="container">
        <h2>{{ __('labels.edit_question') }}</h2>
        <div class="card">
            <div class="card-body">
                <form action="{{ route('admin.questions.update', $question->id) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="row">
                        {{-- السؤال بكل اللغات --}}
                        @foreach(Config::get('laravellocalization.supportedLocales') as $key => $lang)
                            <div class="col-sm-12 col-md-6">
                                <label>{{ __('labels.question') }} ({{ $lang['native'] }})</label>
                                <input type="text" name="question[{{ $key }}]" class="form-control" required
                                       value="{{ $question->getTranslation('question', $key) }}">
                            </div>
                        @endforeach
                    </div>

                    <hr>
                    <h4>{{ __('labels.option') }}</h4>

                    <div id="options-container">
                        @foreach($question->options as $index => $option)
                            <div class="option-item border rounded p-3 mb-3">
                                <div class="row mb-2 align-items-end justify-content-between">
                                    @foreach(Config::get('laravellocalization.supportedLocales') as $key => $lang)
                                        <div class="col-sm-12 col-md-6">
                                            <label>{{ __('labels.option') }} ({{ $lang['native'] }})</label>
                                            <input type="text" name="options[{{ $index }}][option][{{ $key }}]" class="form-control" required
                                                   value="{{ $option->getTranslation('option', $key) }}">
                                        </div>
                                    @endforeach
                                    <div class="col-sm-6 col-md-3 mb-2">
                                        <label>{{ __('labels.value') }}</label>
                                        <input type="number" name="options[{{ $index }}][value]" class="form-control" required
                                               value="{{ $option->value }}">
                                    </div>
                                    <input type="hidden" name="options[{{ $index }}][id]" value="{{ $option->id }}">
                                    <div class="col-sm-6 col-md-3 mb-2">
                                        <button type="button" class="btn btn-danger btn-sm remove-option">{{ __('labels.remove') }}</button>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <button type="button" id="add-option" class="btn btn-secondary">{{ __('labels.add_option') }}</button>

                    <br><br>
                    <button type="submit" class="btn btn-primary">{{ __('labels.update') }}</button>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        let optionIndex = {{ $question->options->count() }};
        const locales = @json(Config::get('laravellocalization.supportedLocales'));
        const optionLabel = @json(__('labels.option'));
        const valueLabel = @json(__('labels.value'));
        const removeLabel = @json(__('labels.remove'));

        document.getElementById('add-option').addEventListener('click', function () {
            let optionHTML = `<div class="option-item border rounded p-3 mb-3"><div class="row mb-2 align-items-end justify-content-between">`;

            Object.entries(locales).forEach(([key, locale]) => {
                optionHTML += `
            <div class="col-sm-12 col-md-6">
                <label>${optionLabel} (${locale.native})</label>
                <input type="text" name="options[${optionIndex}][option][${key}]" class="form-control" required>
            </div>`;
            });

            optionHTML += `
            <div class="col-sm-6 col-md-3 mb-2">
                <label>${valueLabel}</label>
                <input type="number" name="options[${optionIndex}][value]" class="form-control" required>
            </div>
            <div class="col-sm-6 col-md-3 mb-2">
                <button type="button" class="btn btn-danger btn-sm remove-option">${removeLabel}</button>
            </div>
        </div></div>`;

            document.getElementById('options-container').insertAdjacentHTML('beforeend', optionHTML);
            optionIndex++;
        });

        document.addEventListener('click', function (e) {
            if (e.target.classList.contains('remove-option')) {
                e.target.closest('.option-item').remove();
            }
        });
    </script>
@endsection