@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 class="col-sm-12 col-md-6 mb-2">
                            <label>{{ __('labels.category') }}</label>
                            <select name="category_id" class="form-control">
                                @foreach($categories as $category)
                                    <option {{ $category->id == $question->category_id ? 'selected' : '' }} value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>


                        {{-- التصنيفات --}}
                        <div class="col-sm-12 col-md-6 mb-2">
                            <label>{{ __('labels.categories_value') }}</label>
                            @foreach($categories as $category)
                                <div class="form-check mb-2">
                                    <input class="form-check-input category-checkbox" type="checkbox"
                                           id="cat_{{ $category->id }}"
                                           name="categories[]" value="{{ $category->id }}"
                                        {{ in_array($category->id, $question->categories->pluck('id')->toArray()) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="cat_{{ $category->id }}">
                                        {{ $category->name }}
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </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-md-12 option-category-scores mt-3">
                                        @foreach($question->categories as $cat)
                                            @php
                                                $score = $option->categoryOptions->firstWhere('category_id', $cat->id)?->score;
                                            @endphp
                                            <div class="mb-2">
                                                <label>{{ $cat->name }} {{ __('labels.value') }}</label>
                                                <input type="number"
                                                       name="options[{{ $index }}][scores][{{ $cat->id }}]"
                                                       class="form-control"
                                                       value="{{ $score }}">
                                            </div>
                                        @endforeach
                                    </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 categories = @json($categories);
        const selectedCategories = @json($question->categories->pluck('id')->toArray());
        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-md-12 option-category-scores mt-3">`;
            categories.forEach((cat) => {
                if (selectedCategories.includes(cat.id)) {
                    optionHTML += `
                    <div class="mb-2">
                        <label>${cat.name} ${valueLabel}</label>
                        <input type="number" name="options[${optionIndex}][scores][${cat.id}]" class="form-control">
                    </div>`;
                }
            });
            optionHTML += `</div>`;

            optionHTML += `
                <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