@php
    $orderedChoices = function ($choices, $field) use ($sectionSettings) {
        return $choices->values()->map(function ($choice, $index) use ($field, $sectionSettings) {
            $key = $field === 'category_order' ? $choice->id : $choice['key'];
            $value = old('section_settings.'.$field.'.'.$key, $sectionSettings[$field][$key] ?? null);
            return ['key' => $key, 'title' => $field === 'category_order' ? $choice->title : $choice['title'], 'order' => $value, 'saved_order' => $sectionSettings[$field][$key] ?? null, 'natural' => $index];
        })->sortBy(fn ($choice) => [filled($choice['saved_order']) ? 0 : 1, filled($choice['saved_order']) ? (int) $choice['saved_order'] : 0, $choice['natural']]);
    };
    $selectedCategoryIds = (array) old('section_settings.category_ids', old('category_selection_present') ? [] : ($sectionSettings['category_ids'] ?? []));
@endphp
<p class="text-muted my-3">@lang('qr_builder.optional_order_help')</p>
@foreach (['categories' => 'category_order', 'stores' => 'store_order'] as $type => $field)
    <div class="category-content-choices" data-order-group data-content-type="{{ $type }}">
        <h5>@lang('qr_builder.' . ($type === 'categories' ? 'nested_categories' : 'store_order'))</h5>
        <label for="order-search-{{ $type }}">@lang('qr_builder.order_search')</label>
        <input id="order-search-{{ $type }}" type="search" class="form-control mb-3" data-order-search placeholder="@lang('qr_builder.order_search')" autocomplete="off">
        <button type="button" class="btn btn-sm btn-outline-secondary mb-3" data-reset-order>@lang('qr_builder.reset_content_order')</button>
        <div data-order-list>
            @foreach ($orderedChoices($type === 'categories' ? ($categoryChoices ?? collect()) : ($storeChoices ?? collect()), $field) as $choice)
                <div @class(['border-bottom py-2', 'd-none' => $type === 'categories' && !in_array($choice['key'], $selectedCategoryIds)]) data-order-item data-order-title="{{ $choice['title'] }}" @if($type === 'categories') data-category-order-id="{{ $choice['key'] }}" @endif>
                    <div class="d-flex align-items-center">
                    <label class="mb-0 flex-grow-1" for="{{ $field }}-{{ $choice['key'] }}">{{ $choice['title'] }}</label>
                    <input id="{{ $field }}-{{ $choice['key'] }}" class="form-control w-100px" data-order-input type="number" min="0" max="99999" placeholder="@lang('qr_builder.natural_order')" name="section_settings[{{ $field }}][{{ $choice['key'] }}]" value="{{ $choice['order'] }}">
                    </div>
                </div>
            @endforeach
        </div>
        <p class="text-muted py-2" data-order-no-results hidden>@lang('qr_builder.no_results')</p>
        @if($type === 'categories')
            <p class="text-muted" data-category-order-empty @if(count($selectedCategoryIds)) hidden @endif>@lang('qr_builder.select_categories_to_order')</p>
        @elseif(($storeChoices ?? collect())->isEmpty())
            <p class="text-muted">@lang('qr_builder.store_order_empty')</p>
        @endif
    </div>
@endforeach