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

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

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

                    <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 value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- التصنيفات --}}
                    <div class="mb-4">
                        <label>{{ __('labels.categories_value') }}</label>
                        <div class="row">
                            @foreach($categories as $category)
                                <div class="col-md-3 mb-2">
                                    <div class="form-check">
                                        <input class="form-check-input category-checkbox" type="checkbox"
                                               id="cat_{{ $category->id }}"
                                               name="categories[]" value="{{ $category->id }}">
                                        <label class="form-check-label" for="cat_{{ $category->id }}">
                                            {{ $category->name }}
                                        </label>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <hr>

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

                    {{-- الخيارات --}}
                    <div id="options-container">
                        <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[0][option][{{ $key }}]" class="form-control" required>
                                    </div>
                                @endforeach

                                <div class="col-md-12 option-category-scores mt-3">
                                    {{-- ستُملأ حسب التصنيفات --}}
                                </div>

                                <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>
                    </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.save') }}</button>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        let optionIndex = 1;

        const locales = @json(Config::get('laravellocalization.supportedLocales'));
        const optionLabel = @json(__('labels.option'));
        const valueLabel = @json(__('labels.value'));
        const removeLabel = @json(__('labels.remove'));

        let selectedCategories = [];

        document.querySelectorAll('.category-checkbox').forEach((checkbox) => {
            checkbox.addEventListener('change', () => {
                selectedCategories = Array.from(document.querySelectorAll('.category-checkbox:checked'))
                    .map(cb => ({
                        id: cb.value,
                        name: cb.nextElementSibling.innerText
                    }));
                renderCategoryScoresInOptions();
            });
        });

        function generateScoresHTML(index) {
            let html = '';
            selectedCategories.forEach((cat) => {
                html += `
                <div class="mb-2">
                    <label>${cat.name} {{ __('admin.value') }}</label>
                    <input type="number" name="options[${index}][scores][${cat.id}]" class="form-control" required>
                </div>`;
            });
            return html;
        }

        function renderCategoryScoresInOptions() {
            document.querySelectorAll('.option-item').forEach((optionBox, index) => {
                const scoresContainer = optionBox.querySelector('.option-category-scores');
                if (!scoresContainer) return;
                scoresContainer.innerHTML = generateScoresHTML(index);
            });
        }

        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((locale) => {
                optionHTML += `
                <div class="col-sm-12 col-md-6">
                    <label>${optionLabel} (${locale[1]['native']})</label>
                    <input type="text" name="options[${optionIndex}][option][${locale[0]}]" class="form-control" required>
                </div>`;
            });

            optionHTML += `
            <div class="col-md-12 option-category-scores mt-3">
                ${generateScoresHTML(optionIndex)}
            </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