@extends('layouts.app')

@section('title', __('Создать отчет - Багтрекер'))

@php
    $breadcrumbs = [
        ['title' => __('Главная'), 'url' => route('welcome')],
        ['title' => __('Багтрекер'), 'url' => route('reports.index')],
        ['title' => __('Создать отчет'), 'url' => route('reports.create')],
    ];

    // Data for JS
    $subcategoriesData = [
        'classes' => [
            'warrior' => __('Воин'),
            'paladin' => __('Паладин'),
            'hunter' => __('Охотник'),
            'rogue' => __('Разбойник'),
            'priest' => __('Жрец'),
            'death_knight' => __('Рыцарь смерти'),
            'shaman' => __('Шаман'),
            'mage' => __('Маг'),
            'warlock' => __('Чернокнижник'),
            'druid' => __('Друид'),
        ],
        'game_world' => [
            'loot' => __('Лут'),
            'population' => __('Заселение'),
            'items' => __('Предметы'),
            'achievements' => __('Достижения'),
            'transport' => __('Транспорт'),
            'reputation' => __('Репутация'),
            'other' => __('Прочее'),
        ],
        'website' => [
            'armory' => __('Оружейная'),
            'account' => __('Личный кабинет'),
            'shop' => __('Магазин'),
            'other' => __('Другое'),
        ]
    ];

    $jsTranslations = [
        'select_subcategory' => __('Выберите подкатегорию...')
    ];
@endphp

@section('content')
    @include('pages.reports.partials._create-content')
@endsection

@push('scripts')
<script>
    document.addEventListener('app:loaded', function() {
        $(function() {
            const pageContainer = $('#report-create-page');
            const subcategories = JSON.parse(pageContainer.attr('data-subcategories'));
            const translations = JSON.parse(pageContainer.attr('data-translations'));

            const categorySelect = $('#category');
            const subcategoryWrapper = $('#subcategory-wrapper');
            const subcategorySelect = $('#subcategory');

            function updateSubcategories() {
                const selectedCategory = categorySelect.val();
                const availableSubcategories = subcategories[selectedCategory];

                subcategorySelect.empty();

                if (availableSubcategories && Object.keys(availableSubcategories).length > 0) {
                    subcategoryWrapper.show();
                    subcategorySelect.append($('<option>', { value: '', text: translations.select_subcategory }));
                    $.each(availableSubcategories, function(key, value) {
                        subcategorySelect.append($('<option>', { 
                            value: key, 
                            text: value 
                        }));
                    });
                } else {
                    subcategoryWrapper.hide();
                }
            }

            // Initial check on page load
            updateSubcategories();

            // Listen for changes
            categorySelect.on('change', updateSubcategories);
        });
    });
</script>
@endpush