@switch($attribute->type)
    @case('text')
        @if ($attribute->code == 'country')
            <v-country
                :selected-country="'{{ old($attribute->code) ?: $seller[$attribute->code] }}'"
                attribute-code="{{ $attribute->code }}"
            >
                <template v-slot:default="{ changeCountry }">
                    <x-marketplace::seller.form.control-group.control
                        type="select"
                        :id="$attribute->code"
                        :name="$attribute->code"
                        ::rules="{{ $attribute->validations }}"
                        :value="old($attribute->code) ?: $seller[$attribute->code]"
                        :label="$attribute->name"
                        @change="changeCountry($event.target.value)"
                    >
                        @foreach (core()->countries() as $country)
                            <option 
                                value="{{ $country->code }}"
                                {{ (old($attribute->code) ?: $seller[$attribute->code]) == $country->code ? 'selected' : '' }}
                            >
                                {{ $country->name }}
                            </option>
                        @endforeach
                    </x-marketplace::seller.form.control-group.control>
                </template>
            </v-country>
        @elseif ($attribute->code == 'state')
            <v-state 
                attribute-code="{{ $attribute->code }}"
                :selected-state="'{{ old($attribute->code) ?: $seller[$attribute->code] }}'"
            >
                <template v-slot:default="{ countryStates, country, haveStates, isStateComponentLoaded, selectedState }">
                    <div v-if="isStateComponentLoaded">
                        <template v-if="haveStates()">
                            <x-marketplace::seller.form.control-group.control
                                type="select"
                                :id="$attribute->code"
                                :name="$attribute->code"
                                ::rules="{{ $attribute->validations }}"
                                ::value="selectedState"
                                :label="$attribute->name"
                            >                                
                                <option
                                    v-for='(state, index) in countryStates[country]'
                                    :key="state.code"
                                    :value="state.code"
                                    :selected="selectedState === state.code"
                                >
                                    @{{ state.default_name }}
                                </option>
                            </x-marketplace::seller.form.control-group.control>
                        </template>

                        <template v-else>
                            <x-marketplace::seller.form.control-group.control
                                type="text"
                                :id="$attribute->code"
                                :name="$attribute->code"
                                ::rules="{{ $attribute->validations }}"
                                ::value="selectedState"
                                :label="$attribute->name"
                                :placeholder="$attribute->name"
                            />
                        </template>
                    </div>
                </template>
            </v-state>
        @else
            <x-marketplace::seller.form.control-group.control
                type="text"
                :id="$attribute->code"
                :name="$attribute->code"
                ::rules="{{ $attribute->validations }}"
                :value="old($attribute->code) ?: $seller[$attribute->code]"
                :label="$attribute->name"
                :placeholder="$attribute->name"
            />
        @endif
        @break

    @case('price')
        <div class="relative">
            <x-marketplace::seller.form.control-group.control
                type="price"
                :name="$attribute->code"
                :id="$attribute->code"
                ::rules="{{ $attribute->validations }}"
                :label="$attribute->name"
                value="{{ old($attribute->code) ?: $seller[$attribute->code] }}"
                :class="($attribute->code == 'price' ? 'text-xl font-bold' : '')"
            >
                <x-slot:currency :class="'' . ($attribute->code == 'price' ? 'text-xl' : '')">
                    {{ core()->currencySymbol(core()->getBaseCurrencyCode()) }}
                </x-slot>
            </x-marketplace::seller.form.control-group.control>
        </div>
    @break

    @case('textarea')
        <x-marketplace::seller.form.control-group.control
            type="textarea"
            :name="$attribute->code"
            :id="$attribute->code"
            ::rules="{{ $attribute->validations }}"
            :label="$attribute->name"
            value="{{ old($attribute->code) ?: $seller[$attribute->code] }}"
            :tinymce="(bool) $attribute->enable_editor"
        />

        @break

    @case('date')
        <x-marketplace::seller.form.control-group.control
            type="date"
            :name="$attribute->code"
            :id="$attribute->code"
            ::rules="{{ $attribute->validations }}"
            :label="$attribute->name"
            value="{{ old($attribute->code) ?: $seller[$attribute->code] }}"
        />

        @break

    @case('datetime')
        <x-marketplace::seller.form.control-group.control
            type="datetime"
            :name="$attribute->code"
            ::rules="{{ $attribute->validations }}"
            :label="$attribute->name"
            value="{{ old($attribute->code) ?: $seller[$attribute->code] }}"
        />

        @break

    @case('select')
        <x-marketplace::seller.form.control-group.control
            type="select"
            :name="$attribute->code"
            :id="$attribute->code"
            ::rules="{{ $attribute->validations }}"
            :label="$attribute->name"
            :value="old($attribute->code) ?: $seller[$attribute->code]"
        >
            @php
                $selectedOption = old($attribute->code) ?: $seller[$attribute->code];

                $options = $attribute->options()->orderBy('sort_order')->get();
            @endphp

            @foreach ($options as $option)
                <option
                    value="{{ $option->id }}"
                    {{ $selectedOption == $option->id ? 'selected' : '' }}
                >
                    {{ $option->label }}
                </option>
            @endforeach
        </x-marketplace::seller.form.control-group.control>

        @break

    @case('multiselect')
        @php
            $selectedOption = old($attribute->code) ?: explode(',', $seller[$attribute->code]);

            $selectedOption = collect($selectedOption)
                ->filter(fn ($value) => ! empty($value))->toArray();

            $modelValue = ! empty($selectedOption) ? json_encode($selectedOption) : '';
        @endphp

        <x-marketplace::seller.form.control-group.control
            type="multiselect"
            :name="$attribute->code.'[]'"
            :id="$attribute->code.'[]'"
            ::rules="{{ $attribute->validations }}"
            ::model-value="{{ $modelValue }}"
            :label="$attribute->name"
        >
            @foreach ($attribute->options()->with('translations')->orderBy('sort_order')->get() as $option)
                <option
                    value="{{ $option->id }}"
                    {{ in_array($option->id, $selectedOption) ? 'selected' : ''}}
                >
                    {{ $option->label }}
                </option>
            @endforeach
        </x-marketplace::seller.form.control-group.control>

        @break

    @case('checkbox')
        @php
            $selectedOption = old($attribute->code) ?: explode(',', $seller[$attribute->code]);
        @endphp

        @foreach ($attribute->options as $option)
            <div class="flex items-center gap-2.5 py-1.5">
                <x-marketplace::seller.form.control-group.control
                    type="checkbox"
                    :name="$attribute->code.'[]'"
                    :value="$option->id"
                    :id="$attribute->code.'_'.$option->id"
                    :for="$attribute->code.'_'.$option->id"
                    ::rules="{{ $attribute->validations }}"
                    :label="$attribute->name"
                    :checked="in_array($option->id, $selectedOption)"
                >
                </x-marketplace::seller.form.control-group.control>

                <p class="font-semibold text-gray-600">
                    {{ $option->name }}
                </p>
            </div>
        @endforeach

        @break

    @case('boolean')
        @php $selectedValue = old($attribute->code) ?: $seller[$attribute->code] @endphp

        <x-marketplace::seller.form.control-group.control
            type="switch"
            :name="$attribute->code"
            :id="$attribute->code"
            :value="1"
            :label="$attribute->name"
            :checked="(boolean) $selectedValue"
        />

        @break

    @case('image')
    @case('file')
        <div class="flex gap-2.5">
            @if ($seller[$attribute->code])
                <a
                    href="{{ route('seller.profile.file.download', [$seller->id, $attribute->id] )}}"
                    class="flex"
                >
                    @if ($attribute->type == 'image')
                        <img
                            src="{{ Storage::url($seller[$attribute->code]) }}"
                            class="h-[45px] w-[45px] overflow-hidden rounded border hover:border-gray-400"
                        />
                    @else
                        <div class="inline-flex w-full max-w-max cursor-pointer appearance-none items-center justify-between gap-x-1 rounded-md border border-transparent p-1.5 text-center text-gray-600 transition-all marker:shadow hover:bg-gray-200 active:border-gray-300">
                            <i class="icon-download text-2xl"></i>
                        </div>
                    @endif
                </a>

                <input
                    type="hidden"
                    name="{{ $attribute->code }}"
                    value="{{ $seller[$attribute->code] }}"
                />
            @endif

            <v-field
                type="text"
                class="w-full"
                name="{{ $attribute->code }}"
                :rules="{{ $attribute->validations }}"
                label="{{ $attribute->name }}"
                v-slot="{ handleChange, handleBlur }"
                value="{{ old($attribute->code) ?: $seller[$attribute->code] }}"
            >
                <input
                    type="file"
                    name="{{ $attribute->code }}"
                    id="{{ $attribute->code }}"
                    :class="[errors['{{ $attribute->code }}'] ? 'border border-red-600 hover:border-red-600' : '']"
                    class="flex min-h-10 w-full rounded-md border px-3 py-2 text-sm text-gray-600 transition-all hover:border-gray-400 focus:border-gray-400"
                    @change="handleChange"
                    @blur="handleBlur"
                >
            </v-field>
        </div>

        @if ($seller[$attribute->code])
            <div class="flex items-center gap-2.5">
                <x-marketplace::seller.form.control-group.control
                    type="checkbox"
                    :name="$attribute->code.'[delete]'"
                    value="1"
                    :id="$attribute->code.'_delete'"
                    :for="$attribute->code.'_delete'"
                />

                <p class="text-sm text-gray-600">
                    @lang('marketplace::app.seller.products.edit.remove')
                </p>
            </div>
        @endif

        @break

@endswitch

@pushOnce('scripts')
    <script
        type="text/x-template"
        id="v-country-template"
    >
        <div>
            <slot :changeCountry="changeCountry"></slot>
        </div>
    </script>

    <script
        type="text/x-template"
        id="v-state-template"
    >
        <div>
            <slot
                :country="country"
                :country-states="countryStates"
                :have-states="haveStates"
                :is-state-component-loaded="isStateComponentLoaded"
                :selected-state="selectedState"
            >
            </slot>
        </div>
    </script>

    <script type="module">
        app.component('v-country', {
            template: '#v-country-template',

            props: ['selectedCountry'],

            data() {
                return {
                    country: this.selectedCountry || '',
                };
            },

            mounted() {
                this.$emitter.emit('country-changed', this.country);
            },

            methods: {
                changeCountry(selectedCountryCode) {
                    this.country = selectedCountryCode;
                    
                    this.$emitter.emit('country-changed', selectedCountryCode);
                },
            },
        });

        app.component('v-state', {
            template: '#v-state-template',

            props: ['selectedState'],

            data() {
                return {
                    country: "",
                    isStateComponentLoaded: false,
                    countryStates: @json(core()->groupedStatesByCountries()),
                    currentSelectedState: this.selectedState || '',
                    previousCountry: ''
                };
            },

            created() {
                this.$emitter.on('country-changed', (value) => {
                    this.country = value || '';
                    
                    if (this.country !== this.previousCountry) {
                        this.currentSelectedState = '';
                    }

                    this.previousCountry = this.country;
                });

                this.initializeCountry();

                this.$nextTick(() => {
                    this.isStateComponentLoaded = true;
                });
            },

            methods: {
                haveStates() {
                    return !!this.countryStates[this.country]?.length;
                },

                initializeCountry() {
                    const countrySelect = document.querySelector('select[name="country"]');

                    if (countrySelect) {
                        this.country = countrySelect.value || '';
                    }
                }
            },

            computed: {
                selectedState() {
                    return this.currentSelectedState;
                }
            },

            watch: {
                selectedState: {
                    immediate: true,

                    handler(newVal) {
                        this.currentSelectedState = newVal || '';
                    }
                }
            }
        });
    </script>
@endPushOnce