@php
    $listingId = $listingId ?? 0;
    $isAdminLayout = $isAdminLayout ?? false;
@endphp

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

            const isAdminLayout = @json($isAdminLayout);
            const $container = $('#listing_dynamic_options_container');
            const $grid = $('.listing-category-fields__grid');
            const $adminInsertPoint = $('#listing_dynamic_options_insertion_point');
            const selectPlaceholder = @json(__('translate.Select'));

            function listingOptionParentSelects() {
                return $(
                    '.listing-category-fields__grid .listing-option-select[data-triggers-group-id], ' +
                    '#listing_dynamic_options_mount .listing-option-select[data-triggers-group-id], ' +
                    '.listing-dynamic-option-col .listing-option-select[data-triggers-group-id], ' +
                    '#listing_dynamic_options_container .listing-option-select[data-triggers-group-id]'
                );
            }

            function loadDependentOptions($parentSelect, preselect) {
                const parentOptionId = $parentSelect.val();
                const childGroupId = $parentSelect.data('triggers-group-id');

                if (!childGroupId) {
                    return;
                }

                const $dependentWrap = $('.listing-dynamic-option-field[data-child-group-id="' + childGroupId + '"]');
                const $dependentSelect = $dependentWrap.find('.listing-option-select--dependent');

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

                if (!parentOptionId) {
                    $dependentSelect
                        .html('<option value="">' + selectPlaceholder + '</option>')
                        .val('')
                        .prop('required', false)
                        .prop('disabled', true);
                    return;
                }

                $dependentSelect.prop('disabled', true);

                $.ajax({
                    url: '{{ url('category-options-by-parent') }}/' + childGroupId + '/' + parentOptionId,
                    type: 'GET',
                    success: function (html) {
                        $dependentSelect.html(html).prop('disabled', false);
                        if (preselect) {
                            $dependentSelect.val(String(preselect));
                        }
                        $dependentSelect.prop('required', String($dependentWrap.data('required')) === '1');
                    },
                    error: function () {
                        $dependentSelect
                            .html('<option value="">' + selectPlaceholder + '</option>')
                            .prop('disabled', true);
                    }
                });
            }

            function resetDependentSelects() {
                $('.listing-dynamic-option-field--dependent').each(function () {
                    const $wrap = $(this);
                    const $select = $wrap.find('.listing-option-select--dependent');

                    $select
                        .html('<option value="">' + selectPlaceholder + '</option>')
                        .val('')
                        .prop('required', false)
                        .prop('disabled', true);
                });
            }

            function initListingDynamicOptions() {
                resetDependentSelects();

                listingOptionParentSelects().each(function () {
                    const $parent = $(this);
                    const childGroupId = $parent.data('triggers-group-id');
                    const $childWrap = $('.listing-dynamic-option-field[data-child-group-id="' + childGroupId + '"]');
                    const $child = $childWrap.find('.listing-option-select--dependent');
                    const preselect = $child.data('preselect') || null;

                    if ($parent.val()) {
                        loadDependentOptions($parent, preselect || null);
                    }
                });
            }

            window.initListingDynamicOptions = initListingDynamicOptions;

            function clearDynamicOptionFields() {
                if ($grid.length) {
                    $grid.find('.listing-dynamic-option-field').remove();
                }

                $('.listing-dynamic-option-col').remove();
                $container.empty().addClass('d-none').attr('aria-hidden', 'true');
            }

            function mountDynamicOptionFields() {
                const $fields = $container.children('.listing-dynamic-option-field, .listing-dynamic-option-col');

                if (!$fields.length) {
                    clearDynamicOptionFields();
                    return;
                }

                if ($grid.length) {
                    $container.children('.listing-dynamic-option-field').appendTo($grid);
                    $container.empty().addClass('d-none').attr('aria-hidden', 'true');
                    return;
                }

                if (isAdminLayout && $adminInsertPoint.length) {
                    $container.children('.listing-dynamic-option-col').insertBefore($adminInsertPoint);
                    $container.children('.listing-dynamic-option-field').each(function () {
                        const $col = $('<div class="col-md-6 listing-dynamic-option-col"></div>');
                        $(this).addClass('crancy__item-form--group mg-top-form-20').appendTo($col);
                        $col.insertBefore($adminInsertPoint);
                    });
                    $container.empty().addClass('d-none').attr('aria-hidden', 'true');
                    return;
                }

                $container.removeClass('d-none').attr('aria-hidden', 'false');
            }

            function loadListingDynamicOptions() {
                const childId = $('#child_category_id').val();

                if (!childId) {
                    clearDynamicOptionFields();
                    return;
                }

                $.ajax({
                    type: 'GET',
                    url: '{{ url('listing-fields-by-child-category') }}/' + childId,
                    data: {
                        listing_id: {{ (int) $listingId }},
                        layout: isAdminLayout ? 'admin' : 'user'
                    },
                    success: function (html) {
                        const trimmed = $.trim(html);
                        if (!trimmed) {
                            clearDynamicOptionFields();
                            return;
                        }

                        clearDynamicOptionFields();
                        $container.removeClass('d-none').attr('aria-hidden', 'false').html(html);
                        mountDynamicOptionFields();
                        initListingDynamicOptions();
                    },
                    error: function (xhr) {
                        clearDynamicOptionFields();
                        if (window.console && console.warn) {
                            console.warn('listing-fields-by-child-category failed', xhr.status, xhr.responseText);
                        }
                    }
                });
            }

            $(document).on('change', '#child_category_id', loadListingDynamicOptions);

            $(document).on('change', '#sub_category_id', function () {
                clearDynamicOptionFields();
            });

            $(document).on('change', '.listing-option-select[data-triggers-group-id]', function () {
                loadDependentOptions($(this), null);
            });

            $(document).ready(function () {
                if ($('#child_category_id').val()) {
                    loadListingDynamicOptions();
                }
            });
        })(jQuery);
    </script>
@endpush