@php
    $isEdit = $qr?->exists ?? false;
    $isChild = $isEdit ? (bool) $qr->parent_id : request()->parent_id;
    $action = $isEdit ? route('branch.qrs.update', ['qr' => $qr->id]) : route('branch.qrs.store', ['parent_id' => request('parent_id')]);
    $selectedStores = old('stores', $isEdit ? $qr->qrables->map(fn($item) => "{$item->qrable_id}-{$item->qrable_type}")->all() : []);
    $inheritStores = (bool) old('inherit_stores', $pageBuilder['inherit_stores']);
    $inheritCategories = (bool) old('page_builder.inherit_categories', $pageBuilder['inherit_categories']);
    $categoryDefaults = $pageBuilder['main_category_ids'];
    $categoryOrderDefaults = $pageBuilder['category_order'];
    if ($isChild && $inheritCategories) {
        $categoryParent = $isEdit ? $qr->parent : $parent;
        $categoryDefaults = $categoryParent?->pageBuilderConfig()['main_category_ids'] ?? $categoryDefaults;
        $categoryOrderDefaults = $categoryParent?->pageBuilderConfig()['category_order'] ?? $categoryOrderDefaults;
    }
    $selectedCategories = old('page_builder.main_category_ids', $categoryDefaults ?: ['all']);
@endphp

<x-dashboard.form.form :action="$action" :method="$isEdit ? 'PATCH' : null" class="qr-page-builder-form">
    <div class="col-12">
        <ul class="nav nav-tabs" id="qrBuilderTabs">
            <li class="nav-item"><a class="nav-link {{ current_tab('#builderSettings') }}" data-toggle="tab" href="#builderSettings">@lang('qr_builder.settings')</a></li>
            <li class="nav-item"><a class="nav-link {{ current_tab('#builderCategories') }}" data-toggle="tab" href="#builderCategories">@lang('qr_builder.categories')</a></li>
            <li class="nav-item"><a class="nav-link {{ current_tab('#builderStores') }}" data-toggle="tab" href="#builderStores">@lang('qr_builder.stores')</a></li>
            <li class="nav-item"><a class="nav-link {{ current_tab('#builderIdentity') }}" data-toggle="tab" href="#builderIdentity">@lang('qr_builder.identity')</a></li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane fade {{ current_tab('#builderSettings') }}" id="builderSettings" role="tabpanel">
                <div class="row">
                    <x-dashboard.form.input name="title[ar]" :title="__('validation.attributes.title') . ' ( ' . __('global.arabic') . ' )'" :value="$qr?->getTranslation('title', 'ar')" />
                    <x-dashboard.form.input name="title[en]" :title="__('validation.attributes.title') . ' ( ' . __('global.english') . ' )'" :value="$qr?->getTranslation('title', 'en')" />
                    <x-dashboard.form.select name="is_active" :boolean="true" :value="$qr?->is_active" />
                    <x-dashboard.form.select name="is_visible" :boolean="true" :value="$qr?->is_visible" />
                    <x-dashboard.form.select name="allow_location_change" :boolean="true" :value="$qr?->allow_location_change" />
                    <x-dashboard.form.select name="show_location_modal_automatically" :boolean="true" :value="$qr?->show_location_modal_automatically" />
                    <x-dashboard.form.select name="service_type" :data-array="['all', 'delivery', 'takeaway']" :name-fn="fn ($type) => $type === 'all' ? __('global.all') : __('global.orders_type.' . $type)" :value="$qr?->service_type" :ajax="false" />
                    @if (!$isChild)
                        <x-dashboard.form.select name="install_pwa" :boolean="true" :value="$qr?->install_pwa" />
                        <x-dashboard.form.input name="delivery_fees" type="number" step="any" :required="false" :value="$qr?->delivery_fees" />
                    @endif

                    <x-dashboard.form.select name="show_location_modal" :boolean="true" :value="$qr?->show_location_modal" />
                    <x-dashboard.form.select name="default_service_type" :required="false" :data-array="['delivery', 'takeaway']" :name-fn="fn($type) => __('global.orders_type.' . $type)" :value="$qr?->default_service_type" :ajax="false" />

                    <div class="col-12">
                        <hr>
                        <h4 class="my-3">@lang('qr_builder.page_builder')</h4>
                    </div>

                    <x-dashboard.form.select name="page_builder[enabled]" :title="__('qr_builder.enable_builder')" :boolean="true" :value="$pageBuilder['enabled']" :help="__('qr_builder.enable_builder_help')" />
                    @if ($isChild)
                        <x-dashboard.form.select name="page_builder[inherit_design]" id="inheritDesignToggle" :title="__('qr_builder.inherit_design')" :boolean="true" :value="$pageBuilder['inherit_design']" :help="__('qr_builder.inherit_design_help')" />
                    @endif
                    <x-dashboard.form.input name="page_builder[settings][welcome][ar]" :title="__('qr_builder.welcome') . ' ( ' . __('global.arabic') . ' )'" :required="false" :value="$pageBuilder['settings']['welcome']['ar']" />
                    <x-dashboard.form.input name="page_builder[settings][welcome][en]" :title="__('qr_builder.welcome') . ' ( ' . __('global.english') . ' )'" :required="false" :value="$pageBuilder['settings']['welcome']['en']" />
                    @foreach (['ar', 'en'] as $contactLocale)
                        <x-dashboard.form.input name="page_builder[settings][contact_label][{{ $contactLocale }}]" :title="__('qr_builder.contact_label') . ' (' . __('global.' . ($contactLocale === 'ar' ? 'arabic' : 'english')) . ')'" :required="false" :value="$pageBuilder['settings']['contact_label'][$contactLocale]" :help="__('qr_builder.contact_label_help')" />
                    @endforeach
                    <x-dashboard.form.textarea name="page_builder[settings][subtitle][ar]" :title="__('qr_builder.subtitle') . ' ( ' . __('global.arabic') . ' )'" :required="false" :ckeditor="false" :value="strip_tags(html_entity_decode($pageBuilder['settings']['subtitle']['ar'], ENT_QUOTES | ENT_HTML5, 'UTF-8'))" />
                    <x-dashboard.form.textarea name="page_builder[settings][subtitle][en]" :title="__('qr_builder.subtitle') . ' ( ' . __('global.english') . ' )'" :required="false" :ckeditor="false" :value="strip_tags(html_entity_decode($pageBuilder['settings']['subtitle']['en'], ENT_QUOTES | ENT_HTML5, 'UTF-8'))" />

                    <div class="col-12">
                        <hr>
                        <h4 class="my-3">@lang('qr_builder.display_options')</h4>
                    </div>

                    @include('branch.portfolio.partials.social-links')
                    @foreach (['show_hero', 'show_search', 'show_section_nav', 'show_contact', 'show_language', 'show_footer', 'show_install_pwa', 'show_survey'] as $option)
                        <x-dashboard.form.select name="page_builder[settings][{{ $option }}]" :title="__('qr_builder.' . $option)" :boolean="true" :value="$pageBuilder['settings'][$option]" />
                    @endforeach
                </div>
            </div>

            <div class="tab-pane fade {{ current_tab('#builderCategories') }}" id="builderCategories" role="tabpanel">
                <p><a href="{{ route('branch.categories.index') }}">@lang('qr_builder.manage_category_sections')</a></p>
                <h5 class="mt-4">@lang('qr_builder.category_visibility')</h5>
                <p class="text-muted">@lang('qr_builder.category_visibility_help')</p>
                @if ($isChild)
                    <div class="row">
                        <x-dashboard.form.select name="page_builder[inherit_categories]" id="inheritCategoriesToggle" :title="__('qr_builder.inherit_categories')" :boolean="true" :value="$inheritCategories" :help="__('qr_builder.inherit_categories_help')" />
                    </div>
                @else
                    <input type="hidden" name="page_builder[inherit_categories]" value="0">
                @endif
                <div id="builderCategoryPicker" @class(['builder-inherited' => $inheritCategories])>
                    <div class="row">
                        <x-dashboard.form.select :data-array="$mainCategories" name="page_builder[main_category_ids]" id="qrMainCategoriesSelect" :multiple="true" :required="false" :ajax="false" class="has-all" :value="$selectedCategories" container-classes="col-12" />
                    </div>
                    <p class="text-muted">@lang('qr_builder.category_order_help')</p>
                    <div class="row" id="qrCategoryOrderFields">
                        @foreach ($mainCategories->where('id', '!=', 'all') as $categoryOption)
                            <x-dashboard.form.input name="page_builder[category_order][{{ $categoryOption->id }}]" :title="__('qr_builder.category_order') . ' - ' . $categoryOption->title" type="number" min="0" max="9999" :required="false" :value="$categoryOrderDefaults[$categoryOption->id] ?? null" />
                        @endforeach
                    </div>
                </div>

            </div>

            <div class="tab-pane fade {{ current_tab('#builderStores') }}" id="builderStores" role="tabpanel">
                <h4 class="my-3">@lang('qr_builder.stores')</h4>
                <p class="text-muted">@lang('qr_builder.store_assignment_help')</p>
                @if ($isChild)
                    <div class="row">
                        <x-dashboard.form.select name="inherit_stores" id="inheritStoresToggle" :title="__('qr_builder.inherit_stores')" :boolean="true" :value="$inheritStores" :help="__('qr_builder.inherit_stores_help')" />
                    </div>
                @else
                    <input type="hidden" name="inherit_stores" value="0">
                @endif

                <div id="builderStorePicker" @class(['builder-inherited' => $inheritStores])>
                    <div class="row">
                        <x-dashboard.form.select :data-array="$stores" name="stores" id="qrStoresSelect" :multiple="true" :required="false" :ajax="false" class="has-all" :value="$selectedStores" container-classes="col-12" data-qr="{{ $qr?->id }}" />
                        <div class="col-12" id="qrStoreTableContainer"></div>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade {{ current_tab('#builderIdentity') }}" id="builderIdentity" role="tabpanel">
                @php($identity = $pageBuilder['identity'])
                <p id="builderIdentityInherited" class="text-muted mt-3" hidden>@lang('qr_builder.identity_inherited_notice')</p>
                <div class="row" id="builderIdentityFields">
                    @include('branch.portfolio.partials.identity')
                </div>
            </div>
        </div>
    </div>
    <x-dashboard.form.button />
</x-dashboard.form.form>