@php
    $isMainCategory = isset($category) ? ! $category->parent_id : ! request()->filled('parent_id');
    $selectedCategoryIds = (array) old('section_settings.category_ids', old('category_selection_present') ? [] : ($sectionSettings['category_ids'] ?? []));
@endphp
<div class="col-12">
    <ul class="nav nav-tabs" id="categoryDesignTabs">
        <li class="nav-item"><a class="nav-link {{ current_tab('#categoryInfo') }}" data-toggle="tab" href="#categoryInfo">@lang('qr_builder.category_info')</a></li>
        @if ($isMainCategory)
            <li class="nav-item"><a class="nav-link {{ current_tab('#categoryDesign') }}" data-toggle="tab" href="#categoryDesign">@lang('qr_builder.category_design')</a></li>
        @endif
        <li class="nav-item"><a class="nav-link {{ current_tab('#categoryOrdering') }}" data-toggle="tab" href="#categoryOrdering">@lang('qr_builder.content_ordering')</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade {{ current_tab('#categoryInfo') }}" id="categoryInfo">
            <div class="row">
                <x-dashboard.form.input name="title[ar]" :title="__('validation.attributes.title') . ' ( ' . __('global.arabic') . ' )'" :value="isset($category) ? $category->getTranslation('title', 'ar') : null" />
                <x-dashboard.form.input name="title[en]" :title="__('validation.attributes.title') . ' ( ' . __('global.english') . ' )'" :value="isset($category) ? $category->getTranslation('title', 'en') : null" />
                <x-dashboard.form.file name="image" :value="$category->image ?? null" :required="false" />
                <x-dashboard.form.input name="priority" type="number" :value="$category->priority ?? 1" :help="$isMainCategory ? __('qr_builder.category_priority_help') : ''" />
                @foreach (['ar', 'en'] as $locale)
                    <x-dashboard.form.file name="category_image_{{ $locale }}" :title="__('qr_builder.category_image') . ' (' . __('global.' . ($locale === 'ar' ? 'arabic' : 'english')) . ')'" :value="$sectionSettings['localized_images'][$locale] ?? null" :required="false" :tooltip="__('qr_builder.category_image_help')" />
                    <x-dashboard.form.textarea name="section_settings[subtitle][{{ $locale }}]" :title="__('qr_builder.section_subtitle') . ' (' . __('global.' . ($locale === 'ar' ? 'arabic' : 'english')) . ')'" :required="false" :ckeditor="false" :value="strip_tags(html_entity_decode($sectionSettings['subtitle'][$locale] ?? '', ENT_QUOTES | ENT_HTML5, 'UTF-8'))" />
                @endforeach
                <x-dashboard.form.select name="section_settings[content_type]" :title="__('qr_builder.content_type')" :data-array="['stores', 'categories']" :name-fn="fn ($value) => __('qr_builder.content_types.' . $value)" :value="$sectionSettings['content_type'] ?? 'stores'" :ajax="false" :with-search="false" />
                <div class="col-12 category-content-choices" data-content-type="categories">
                    <h5>@lang('qr_builder.categories')</h5>
                    <p class="text-muted">@lang('qr_builder.nested_categories_help')</p>
                    <input type="hidden" name="category_selection_present" value="1">
                    <div class="row">
                        @foreach (($categoryChoices ?? collect()) as $choice)
                            <div class="col-md-6 mb-2 d-flex align-items-center">
                                <label class="mb-0 flex-grow-1"><input type="checkbox" name="section_settings[category_ids][]" value="{{ $choice->id }}" @checked(in_array($choice->id, $selectedCategoryIds))> {{ $choice->title }}</label>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        @if ($isMainCategory)
            <div class="tab-pane fade {{ current_tab('#categoryDesign') }}" id="categoryDesign">
                <div class="row">
                    @include('branch.categories.partials.section-settings')
                </div>
            </div>
        @endif
        <div class="tab-pane fade {{ current_tab('#categoryOrdering') }}" id="categoryOrdering">
            @include('branch.categories.partials.ordering')
        </div>
    </div>
</div>