@php
    $listing = $listing ?? null;
    $selectedSubId = old('sub_category_id', $listing?->sub_category_id);
    $selectedChildId = old('child_category_id', $listing?->child_category_id);
    $sub_categories = sort_items_alphabetically(
        collect($sub_categories ?? []),
        fn ($subCategory) => (string) ($subCategory->translate->name ?? $subCategory->name ?? '')
    );
    $child_categories = sort_items_alphabetically(
        collect($child_categories ?? []),
        fn ($childCategory) => (string) ($childCategory->translate->name ?? $childCategory->name ?? '')
    );
@endphp

<div class="description-item listing-category-fields">
    <div class="listing-category-fields__grid">
        <div class="description-item-inner listing-field-subcategory">
            <label class="form-label" for="sub_category_id">{{ __('translate.Sub Category') }}
                <span>*</span>
            </label>
            <select class="form-select" name="sub_category_id" id="sub_category_id">
                <option value="">{{ __('translate.Select') }}</option>
                @foreach ($sub_categories as $sub_category)
                    <option
                        value="{{ $sub_category->id }}"
                        {{ (string) $sub_category->id === (string) $selectedSubId ? 'selected' : '' }}
                    >{{ $sub_category->translate->name ?? $sub_category->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="description-item-inner listing-field-childcategory">
            <label class="form-label" for="child_category_id">{{ __('translate.Child Category') }}</label>
            <select class="form-select" name="child_category_id" id="child_category_id">
                <option value="">{{ __('translate.Select') }}</option>
                @if (! empty($child_categories))
                    @foreach ($child_categories as $child_category)
                        <option
                            value="{{ $child_category->id }}"
                            {{ (string) $child_category->id === (string) $selectedChildId ? 'selected' : '' }}
                        >{{ $child_category->translate->name ?? $child_category->name }}</option>
                    @endforeach
                @endif
            </select>
        </div>
    </div>

    @include('listing::frontend.partials.listing-dynamic-options-slot')
</div>

@once
    @push('style_section')
        <style>
            .dashboard .description-item.listing-category-fields {
                display: block;
            }

            .dashboard .listing-category-fields__grid {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 20px;
                width: 100%;
            }

            .dashboard .listing-category-fields__grid .description-item-inner {
                width: auto;
                min-width: 0;
            }

            .dashboard .listing-category-fields__grid .listing-dynamic-option-field[data-group-key="marca"] {
                grid-column: 1;
                grid-row: 2;
            }

            .dashboard .listing-category-fields__grid .listing-dynamic-option-field[data-group-key="model"] {
                grid-column: 2;
                grid-row: 2;
            }

            @media (max-width: 767px) {
                .dashboard .listing-category-fields__grid {
                    grid-template-columns: 1fr;
                }

                .dashboard .listing-category-fields__grid .listing-dynamic-option-field[data-group-key="marca"],
                .dashboard .listing-category-fields__grid .listing-dynamic-option-field[data-group-key="model"] {
                    grid-column: 1;
                    grid-row: auto;
                }
            }
        </style>
    @endpush
@endonce