@php
    $introCategoryOptions = $introCategoryOptions ?? collect();
    $defaultCategorySlug = $defaultCategorySlug ?? main_category_slug(\App\Constants\Status::CLASSIFIED);
@endphp

<input type="hidden" name="category" id="intro_search_category" value="{{ $defaultCategorySlug }}">
<input type="hidden" name="sub_category_id" id="intro_search_sub_category_id" value="">

<select class="form-select select2 intro-search-category-select" id="intro_category_select"
    aria-label="{{ __('translate.Category') }}">
    <option selected value="" data-category="{{ $defaultCategorySlug }}" data-sub-category-id="">
        {{ __('translate.Category') }}
    </option>
    @foreach ($introCategoryOptions as $option)
        @php
            $subCategoryId = ($option->item_type ?? null) === 'category'
                ? ''
                : ($option->sub_category_id ?? $option->id ?? '');
            $categorySlug = $option->category_slug ?? $option->category?->slug ?? $defaultCategorySlug;
        @endphp
        <option value="{{ $subCategoryId }}"
            data-category="{{ $categorySlug }}"
            data-sub-category-id="{{ $subCategoryId }}">
            {{ $option->name }}
        </option>
    @endforeach
</select>

@once
    @push('js_section')
        <script>
            (function ($) {
                'use strict';

                function syncIntroSearchCategoryFields() {
                    const $select = $('#intro_category_select');

                    if (!$select.length) {
                        return;
                    }

                    const $selected = $select.find(':selected');
                    const categorySlug = $selected.data('category') || $('#intro_search_category').val() || @json(main_category_slug(\App\Constants\Status::CLASSIFIED));
                    const subCategoryId = $selected.data('sub-category-id') || '';

                    $('#intro_search_category').val(categorySlug);
                    $('#intro_search_sub_category_id').val(subCategoryId);
                }

                $(document).on('change', '#intro_category_select', syncIntroSearchCategoryFields);
                $(document).on('click', '#intro_form_submit', syncIntroSearchCategoryFields);
                $(document).ready(syncIntroSearchCategoryFields);
            })(jQuery);
        </script>
    @endpush
@endonce