@switch($attribute->type)
    @case('text')
        <v-field
            type="text"
            name="{{ $attribute->code }}"
            :rules="{{ $attribute->validations }}"
            label="{{ $attribute->name }}"
            value="{{ old($attribute->code) }}"
            v-slot="{ field }"
        >
            <input
                type="text"
                name="{{ $attribute->code }}"
                id="{{ $attribute->code }}"
                v-bind="field"
                :class="[errors['{{ $attribute->code }}'] ? 'border border-red-600 hover:border-red-600' : '']"
                class="mb-3 flex min-h-10 w-full border rounded-lg p-[20px_25px] text-sm text-gray-600 transition-all hover:border-gray-400 focus:border-gray-400"
            >
        </v-field>

        @break

    @case('price')
        <div class="relative">
            <v-field
                type="text"
                name="{{ $attribute->code }}"
                :rules="{{ $attribute->validations }}"
                label="{{ $attribute->name }}"
                value="{{ old($attribute->code) }}"
                v-slot="{ field }"
            >
                <input
                    type="text"
                    name="{{ $attribute->code }}"
                    id="{{ $attribute->code }}"
                    v-bind="field"
                    :class="[errors['{{ $attribute->code }}'] ? 'border border-red-600 hover:border-red-600' : '']"
                    class="mb-3 flex min-h-10 w-full border rounded-lg p-[20px_25px] ltr:pl-12 rtl:pr-12 text-sm text-gray-600 transition-all hover:border-gray-400 focus:border-gray-400"
                />
            </v-field>

            <span class="absolute ltr:left-4 rtl:right-4 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none">
                {{ core()->currencySymbol(core()->getBaseCurrencyCode()) }}
            </span>
        </div>
    @break

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

        @break

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

        @break

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

        @break

    @case('select')
        <x-marketplace::seller.form.control-group.control
            type="select"
            :name="$attribute->code"
            class="rounded-lg !p-[20px_25px]"
            :id="$attribute->code"
            ::rules="{{ $attribute->validations }}"
            :label="$attribute->name"
            :value="old($attribute->code)"
        >
            @php
                $selectedOption = old($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 = collect(old($attribute->code))
                ->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.'[]'"
            class="rounded-lg !p-[20px_25px]"
            :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);
        @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) @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">
            <v-field
                type="text"
                class="w-full"
                name="{{ $attribute->code }}"
                :rules="{{ $attribute->validations }}"
                label="{{ $attribute->name }}"
                v-slot="{ handleChange, handleBlur }"
                value="{{ old($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>

        @break

@endswitch