@php
    $sections = [
        'category' => __('Category'),
        'general' => __('General Info'),
        'location' => __('Location'),
        'attributes' => __('Details'),
        'settings' => __('Settings'),
        'media' => __('Media'),
    ];

    $acceptable_files = [
        'images' => ['png', 'gif', 'bmp', 'svg', 'jpg', 'jpeg', 'webp'],
        'videos' => ['mp4', 'mov', 'avi', 'wmv', 'mkv', 'webm'],
        'audio' => ['wav', 'mp3', 'm4a', 'mpga', 'wma'],
    ];
@endphp


<div class="min-h-screen bg-gradient-to-br from-primary-50 via-white to-slate-50 py-4 sm:py-8">
    <section
        id="inputs"
        x-cloak
        x-data="advertiseSectionNav()"
        class="mx-auto w-full max-w-5xl px-3 sm:px-6 lg:px-8"
    >
        <form wire:submit="save" class="space-y-6">
            <div class="overflow-hidden rounded-[2rem] border border-primary-100 bg-white shadow-xl shadow-primary-500/10">
                {{-- Header --}}
                <div class="--sticky --top-0 --z-5 border-b border-gray-100 bg-white/90 px-4 py-4 backdrop-blur sm:px-6">
                    <div class="flex items-center justify-between gap-3">
                        <div>
                            <p class="text-xs font-semibold uppercase tracking-[0.22em] text-primary-500">{{ __('Create listing') }}</p>
                            <h1 class="mt-1 text-xl font-black text-gray-950 sm:text-2xl">{{ __('New advertisement') }}</h1>
                        </div>

                        <div class="flex h-11 w-11 items-center justify-center rounded-full bg-gradient-to-tr from-primary-300 via-primary-500 to-primary-800 p-[2px]">
                            <div class="flex h-full w-full items-center justify-center rounded-full bg-white">
                                <x-isax-broken.image class="h-5 w-5 text-gray-900"/>
                            </div>
                        </div>
                    </div>

                    <p class="mt-3 max-w-2xl text-sm leading-6 text-gray-500">{{ __('Choose any section below. There is no required order, and you can save the advertisement from any section when it is ready.') }}</p>

                    <div class="mt-4 flex gap-2 overflow-x-auto pb-1">
                        @foreach ($sections as $key => $label)
                            <button
                                type="button"
                                @click="chooseSection('{{ $key }}')"
                                class="shrink-0 rounded-full border px-4 py-2 text-sm font-bold transition"
                                :aria-pressed="section === '{{ $key }}'"
                                :class="section === '{{ $key }}'
                                    ? 'border-primary-500 bg-primary-500 text-white shadow-lg shadow-primary-500/20'
                                    : 'border-primary-100 bg-white/80 text-gray-600 hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700'"
                            >
                                {{ $label }}
                            </button>
                        @endforeach
                    </div>
                </div>

                {{-- Error summary --}}
                @if ($errors->any())
                    <div class="mx-4 mt-4 rounded-2xl border border-red-200 bg-red-50 p-4 text-sm text-red-700 sm:mx-6">
                        <div class="mb-2 flex items-center gap-2 font-extrabold">
                            <x-isax-broken.info-circle class="h-5 w-5"/>
                            {{ __('Please fix these fields') }}
                        </div>
                        <ul class="list-inside list-disc space-y-1">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="p-4 sm:p-6">
                    {{-- Category --}}
                    <div x-show="section === 'category'" x-transition.opacity.duration.200ms>
                        <div class="mb-5 rounded-3xl bg-gradient-to-br from-primary-50 via-white to-primary-100 p-5">
                            <div class="flex items-start gap-3">
                                <div class="rounded-2xl bg-white p-3 shadow-sm">
                                    <x-isax-broken.category-2 class="h-6 w-6 text-primary-600"/>
                                </div>
                                <div>
                                    <h2 class="text-lg font-black text-gray-950">{{ __('Choose a category') }}</h2>
                                    <p class="mt-1 text-sm leading-6 text-gray-500">{{ __('Pick the closest category so buyers can discover your post faster.') }}</p>
                                </div>
                            </div>
                        </div>

                        <div wire:ignore>
                            <x-alizam.category-tree-input
                                :categories="$categoryTree"
                                name="category_id"
                                wire
                            />
                        </div>

                    </div>

                    {{-- General --}}
                    <div x-show="section === 'general'" x-transition.opacity.duration.200ms>
                        <div class="mb-5">
                            <h2 class="text-lg font-black text-gray-950">{{ __('Post basics') }}</h2>
                            <p class="mt-1 text-sm text-gray-500">{{ __('Use a clear title, honest price, and a short description.') }}</p>
                        </div>

                        <div class="space-y-4">
                            <label class="block">
                                <span class="mb-2 block text-sm font-bold text-gray-700">{{ __('Title') }}</span>
                                <input
                                    class="w-full rounded-2xl border border-gray-200 bg-white px-4 py-3 text-gray-950 outline-none transition placeholder:text-gray-400 focus:border-primary-400 focus:ring-4 focus:ring-primary-100"
                                    type="text"
                                    wire:model="advertise.title"
                                    placeholder="{{ __('Example: iPhone 14 Pro Max, very clean') }}"
                                />
                                @error('advertise.title')
                                <small class="mt-1 block text-red-600">{{ $message }}</small> @enderror
                            </label>

                            <label class="block">
                                <span class="mb-2 block text-sm font-bold text-gray-700">{{ __('Price') }}</span>
                                <div class="relative">
                                    <input
                                        type="number"
                                        class="price-input w-full rounded-2xl border border-gray-200 bg-white px-4 py-3  text-gray-950 outline-none transition placeholder:text-gray-400 focus:border-primary-400 focus:ring-4 focus:ring-primary-100"
                                        wire:model="advertise.price"
                                        placeholder="{{ __('Price') }}"
                                    />
                                    <span class="pointer-events-none absolute inset-y-0 end-4 flex items-center text-sm font-bold text-gray-400 pe-7">تومان</span>
                                </div>
                                @error('advertise.price')
                                <small class="mt-1 block text-red-600">{{ $message }}</small> @enderror
                            </label>

                            <label class="block">
                                <span class="mb-2 block text-sm font-bold text-gray-700">{{ __('Description') }}</span>
                                <textarea
                                    wire:model="advertise.short_description"
                                    rows="6"
                                    class="w-full resize-none rounded-2xl border border-gray-200 bg-white px-4 py-3 text-gray-950 outline-none transition placeholder:text-gray-400 focus:border-primary-400 focus:ring-4 focus:ring-primary-100"
                                    placeholder="{{ __('Tell buyers about condition, reason for selling, and what is included.') }}"
                                ></textarea>
                                @error('advertise.short_description')
                                <small class="mt-1 block text-red-600">{{ $message }}</small> @enderror
                            </label>
                        </div>
                    </div>

                    {{-- Location --}}
                    <div x-show="section === 'location'" x-transition.opacity.duration.200ms>
                        <div class="mb-5">
                            <h2 class="text-lg font-black text-gray-950">{{ __('Location details') }}</h2>
                            <p class="mt-1 text-sm text-gray-500">{{ __('Add a city and map point. You can decide later whether exact location is visible.') }}</p>
                        </div>

                        <div class="space-y-4">
                            <div class="overflow-hidden rounded-3xl border border-gray-200 bg-gray-100">
                                <div id="laefJs-map-2" class="min-h-[320px]"></div>
                                <input wire:model="advertise.lat" type="hidden" id="latitude" name="lat" value="">
                                <input wire:model="advertise.long" type="hidden" id="longitude" name="long" value="">
                            </div>

                            <div class="grid gap-4 sm:grid-cols-2">
                                <label class="block">
                                    <span class="mb-2 block text-sm font-bold text-gray-700">{{ __('Province') }}</span>
                                    <select id="province" wire:model.live="advertise.province_id" class="w-full rounded-2xl border border-gray-200 bg-white px-4 py-3 text-gray-950 outline-none transition focus:border-primary-400 focus:ring-4 focus:ring-primary-100">
                                        <option value="">{{ __('province') }}</option>
                                        @forelse ($provinces as $province)
                                            <option value="{{ $province->id }}">{{ $province->name }}</option>
                                        @empty
                                        @endforelse
                                    </select>
                                    @error('advertise.province_id')
                                    <small class="mt-1 block text-red-600">{{ $message }}</small> @enderror
                                </label>

                                <label class="block">
                                    <span class="mb-2 block text-sm font-bold text-gray-700">{{ __('City') }}</span>
                                    <select id="city" wire:model="advertise.city_id" wire:key="city-{{ $advertise->province_id }}" class="w-full rounded-2xl border border-gray-200 bg-white px-4 py-3 text-gray-950 outline-none transition focus:border-primary-400 focus:ring-4 focus:ring-primary-100">
                                        <option value="">{{ __('city') }}</option>
                                        @foreach ($cities as $city)
                                            <option value="{{ $city->id }}">{{ $city->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('advertise.city_id')
                                    <small class="mt-1 block text-red-600">{{ $message }}</small> @enderror
                                </label>
                            </div>
                        </div>
                    </div>

                    {{-- Attributes --}}
                    <div x-show="section === 'attributes'" x-transition.opacity.duration.200ms>
                        <div class="mb-5">
                            <h2 class="text-lg font-black text-gray-950">{{ __('Extra details') }}</h2>
                            <p class="mt-1 text-sm text-gray-500">{{ __('Small details help people trust the post and filter search results.') }}</p>
                        </div>

                        @if ($advertiseAttributes->isNotEmpty())
                            <div class="grid gap-4 sm:grid-cols-2">
                                @forelse ($advertiseAttributes as $attribute)
                                    @if ($attribute->type == 'number')
                                        <label class="block">
                                            <span class="mb-2 block text-sm font-bold text-gray-700">{{ $attribute->label }}</span>
                                            <input type="number" wire:model="attributes_data.{{ $attribute->name }}" class="w-full rounded-2xl border border-gray-200 bg-white px-4 py-3 text-gray-950 outline-none transition placeholder:text-gray-400 focus:border-primary-400 focus:ring-4 focus:ring-primary-100" placeholder="{{ $attribute->label }}">
                                        </label>
                                    @endif

                                    @if ($attribute->type == 'text')
                                        <label class="block">
                                            <span class="mb-2 block text-sm font-bold text-gray-700">{{ $attribute->label }}</span>
                                            <input type="text" wire:model="attributes_data.{{ $attribute->name }}" class="w-full rounded-2xl border border-gray-200 bg-white px-4 py-3 text-gray-950 outline-none transition placeholder:text-gray-400 focus:border-primary-400 focus:ring-4 focus:ring-primary-100" placeholder="{{ $attribute->label }}">
                                        </label>
                                    @endif

                                    @if ($attribute->type == 'select')
                                        <label class="block">
                                            <span class="mb-2 block text-sm font-bold text-gray-700">{{ $attribute->label }}</span>
                                            <select wire:model="attributes_data.{{ $attribute->name }}" class="w-full rounded-2xl border border-gray-200 bg-white px-4 py-3 text-gray-950 outline-none transition focus:border-primary-400 focus:ring-4 focus:ring-primary-100">
                                                <option value="">{{ $attribute->label }}</option>
                                                @forelse ($attribute->items as $item)
                                                    <option value="{{ $item->item_value }}">{{ $item->item_value }}</option>
                                                @empty
                                                @endforelse
                                            </select>
                                        </label>
                                    @endif
                                @empty
                                @endforelse
                            </div>
                        @else
                            <div class="rounded-3xl border border-dashed border-gray-200 bg-gray-50 p-8 text-center">
                                <x-isax-broken.data class="mx-auto h-10 w-10 text-gray-400"/>
                                <p class="mt-3 font-bold text-gray-800">{{ __('No extra attributes for this category') }}</p>
                                <p class="mt-1 text-sm text-gray-500">{{ __('You can leave this section empty or choose another section above.') }}</p>
                            </div>
                        @endif
                    </div>

                    {{-- Settings --}}
                    <div x-show="section === 'settings'" x-transition.opacity.duration.200ms x-init="window.app?.attachPriceFormatListeners?.()">
                        <div class="mb-5">
                            <h2 class="text-lg font-black text-gray-950">{{ __('Advertise settings') }}</h2>
                            <p class="mt-1 text-sm text-gray-500">{{ __('Control privacy and contact options before publishing.') }}</p>
                        </div>

                        @php
                            $settingOptions = [
                                [
                                    'model' => 'advertise.is_new',
                                    'title' => __('Condition'),
                                    'description' => __('Choose whether the advertised item is new or second hand.'),
                                    'options' => [
                                        ['value' => '1', 'label' => __('New')],
                                        ['value' => '0', 'label' => __('Second hand')],
                                    ],
                                ],
                                [
                                    'model' => 'advertise.show_exact_location',
                                    'title' => __('Show exact location?'),
                                    'description' => __('Use this only when you are comfortable sharing the precise point.'),
                                    'options' => [
                                        ['value' => '1', 'label' => __('Yes')],
                                        ['value' => '0', 'label' => __('No')],
                                    ],
                                ],
                                [
                                    'model' => 'advertise.call_is_active',
                                    'title' => __('Share phone number?'),
                                    'description' => __('Let interested buyers call you directly.'),
                                    'options' => [
                                        ['value' => '1', 'label' => __('Yes')],
                                        ['value' => '0', 'label' => __('No')],
                                    ],
                                ],
                                [
                                    'model' => 'advertise.chat_is_active',
                                    'title' => __('Enable chat?'),
                                    'description' => __('Allow buyers to message you inside the app.'),
                                    'options' => [
                                        ['value' => '1', 'label' => __('Yes')],
                                        ['value' => '0', 'label' => __('No')],
                                    ],
                                ],
                                [
                                    'model' => 'advertise.comment_is_active',
                                    'title' => __('Enable comments?'),
                                    'description' => __('Allow public questions under the advertisement.'),
                                    'options' => [
                                        ['value' => '1', 'label' => __('Yes')],
                                        ['value' => '0', 'label' => __('No')],
                                    ],
                                ],
                            ];
                        @endphp

                        <div class="space-y-3">
                            @foreach ($settingOptions as $setting)
                                <div class="rounded-3xl border border-gray-100 bg-gray-50 p-4 transition hover:border-primary-100 hover:bg-primary-50/40">
                                    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                                        <div class="min-w-0">
                                            <p class="font-extrabold text-gray-900">{{ $setting['title'] }}</p>
                                            <p class="mt-1 text-sm text-gray-500">{{ $setting['description'] }}</p>
                                        </div>

                                        <div class="grid shrink-0 grid-cols-2 rounded-2xl bg-white p-1 shadow-sm ring-1 ring-gray-100">
                                            @foreach ($setting['options'] as $choice)
                                                <label class="cursor-pointer">
                                                    <input
                                                        type="radio"
                                                        class="peer sr-only"
                                                        wire:model="{{ $setting['model'] }}"
                                                        name="{{ $setting['model'] }}"
                                                        value="{{ $choice['value'] }}"
                                                    >
                                                    <span class="block min-w-24 rounded-xl px-4 py-2 text-center text-sm font-bold text-gray-500 transition peer-checked:bg-primary-500 peer-checked:text-white peer-focus-visible:ring-2 peer-focus-visible:ring-primary-300">
                                                        {{ $choice['label'] }}
                                                    </span>
                                                </label>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    {{-- Media --}}
                    <div
                        x-show="section === 'media'"
                        x-transition.opacity.duration.200ms
                        x-data="{
                            uploading: false,
                            progress: 0,
                            dragging: false,
                            previews: [],
                            humanSize(bytes) {
                                if (!bytes && bytes !== 0) return '';
                                if (bytes < 1024) return bytes + ' B';
                                if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + ' KB';
                                return (bytes / 1024 / 1024).toFixed(1) + ' MB';
                            },
                            fileKind(file) {
                                if (file.type.startsWith('image/')) return 'image';
                                if (file.type.startsWith('video/')) return 'video';
                                if (file.type.startsWith('audio/')) return 'audio';
                                return 'file';
                            },
                            makePreviews(fileList) {
                                this.previews.forEach((item) => item.url && URL.revokeObjectURL(item.url));
                                this.previews = Array.from(fileList || []).map((file, index) => {
                                    const kind = this.fileKind(file);
                                    return {
                                        key: `${file.name}-${file.size}-${file.lastModified}-${index}`,
                                        name: file.name,
                                        size: this.humanSize(file.size),
                                        kind,
                                        url: ['image', 'video', 'audio'].includes(kind) ? URL.createObjectURL(file) : null,
                                    };
                                });
                            },
                            handleDrop(fileList) {
                                const input = this.$refs.uploadInput;
                                if (!fileList?.length || !input) return;

                                const transfer = new DataTransfer();
                                Array.from(fileList).forEach((file) => transfer.items.add(file));
                                input.files = transfer.files;
                                this.makePreviews(input.files);
                                input.dispatchEvent(new Event('change', { bubbles: true }));
                            },
                            removePreview(index) {
                                if (this.uploading) return;

                                const input = this.$refs.uploadInput;
                                if (!input?.files?.length) return;

                                const transfer = new DataTransfer();
                                Array.from(input.files).forEach((file, fileIndex) => {
                                    if (fileIndex !== index) transfer.items.add(file);
                                });

                                input.files = transfer.files;
                                this.makePreviews(input.files);
                                input.dispatchEvent(new Event('change', { bubbles: true }));
                            }
                        }"
                        x-on:livewire-upload-start="uploading = true; progress = 0"
                        x-on:livewire-upload-finish="uploading = false; dragging = false; progress = 100"
                        x-on:livewire-upload-cancel="uploading = false; dragging = false"
                        x-on:livewire-upload-error="uploading = false; dragging = false"
                        x-on:livewire-upload-progress="progress = $event.detail.progress"
                    >
                        <div class="mb-5">
                            <h2 class="text-lg font-black text-gray-950">{{ __('Advertise files') }}</h2>
                            <p class="mt-1 text-sm text-gray-500">{{ __('Upload clear media. The first uploaded item becomes the cover.') }}</p>
                        </div>

                        <label
                            for="upload-input"
                            class="group relative flex min-h-[230px] cursor-pointer flex-col items-center justify-center overflow-hidden rounded-[1.75rem] border-2 border-dashed border-primary-200 bg-gradient-to-br from-primary-50 via-white to-primary-100 p-6 text-center transition duration-200 hover:border-primary-500 hover:shadow-2xl hover:shadow-primary-500/10"
                            :class="dragging ? 'scale-[1.01] border-primary-500 bg-primary-50' : ''"
                            @dragover.prevent="dragging = true"
                            @dragleave.prevent="dragging = false"
                            @drop.prevent="dragging = false; handleDrop($event.dataTransfer.files)"
                        >
                            <div class="absolute right-4 top-4 flex items-center gap-2">
                                <span x-show="uploading" x-transition class="rounded-full bg-primary-500 px-3 py-1 text-xs font-black text-white shadow-lg shadow-primary-500/20">
                                    {{ __('Uploading') }} <span x-text="Math.round(progress) + '%'">0%</span>
                                </span>

                                <span x-show="!uploading && previews.length" x-transition class="rounded-full bg-white px-3 py-1 text-xs font-black text-primary-700 shadow-sm ring-1 ring-primary-100">
                                    <span x-text="previews.length"></span> {{ __('selected') }}
                                </span>
                            </div>

                            <div class="rounded-2xl bg-white p-4 shadow-sm transition group-hover:scale-105">
                                <i class="isax isax-document-upload text-[42px] font-bold text-primary-600"></i>
                            </div>

                            <p class="mt-4 text-base font-black text-gray-950">{{ __('Drag & drop files here') }}</p>
                            <p class="mt-1 text-sm text-gray-500">
                                {!! __('or <span class="font-black text-primary-600 underline underline-offset-4">browse files</span> from your device') !!}
                            </p>
                            <p class="mt-3 rounded-full bg-white/80 px-4 py-2 text-xs font-bold text-gray-500 shadow-sm">
                                {{ __('JPEG, PNG, GIF, WebP, MP4, MOV, AVI, MKV, WebM, MP3, WAV') }}
                            </p>

                            <div x-show="uploading" x-transition class="absolute inset-x-5 bottom-5 rounded-2xl border border-primary-100 bg-white/95 p-3 shadow-sm backdrop-blur">
                                <div class="mb-2 flex items-center justify-between text-xs font-black text-primary-800">
                                    <span class="flex items-center gap-2">
                                        <span class="loader-spinner inline-block h-4 w-4 rounded-full border-2 border-primary-600 border-l-transparent"></span>
                                        {{ __('Uploading files') }}
                                    </span>
                                    <span x-text="Math.round(progress) + '%'">0%</span>
                                </div>
                                <div class="h-2 overflow-hidden rounded-full bg-primary-50">
                                    <div class="h-full rounded-full bg-primary-500 transition-all duration-200" :style="`width: ${progress}%`"></div>
                                </div>
                            </div>

                            <input
                                x-ref="uploadInput"
                                @change="makePreviews($event.target.files)"
                                wire:model="files"
                                type="file"
                                id="upload-input"
                                multiple
                                class="sr-only"
                                accept="image/jpeg, image/png, image/gif, image/webp, video/mp4, video/quicktime, video/x-msvideo, video/x-matroska, video/webm, audio/mpeg, audio/wav, audio/mp4"
                            />
                        </label>

                        @error('files') <small class="mt-2 block text-red-600">{{ $message }}</small> @enderror
                        @error('files.*') <small class="mt-2 block text-red-600">{{ $message }}</small> @enderror

                        <div wire:loading.flex wire:target="files" class="mt-4 hidden rounded-2xl border border-primary-100 bg-white p-4 shadow-sm">
                            <div class="mb-2 flex w-full items-center justify-between text-sm font-bold text-gray-700">
                                <span class="flex items-center gap-2">
                                    <span class="loader-spinner inline-block h-5 w-5 rounded-full border-2 border-primary-600 border-l-transparent"></span>
                                    {{ __('Uploading') }}
                                </span>
                                <span x-text="Math.round(progress) + '%'">0%</span>
                            </div>
                            <div class="h-2 w-full overflow-hidden rounded-full bg-primary-50">
                                <div class="h-full rounded-full bg-primary-500 transition-all duration-200" :style="`width: ${progress}%`"></div>
                            </div>
                        </div>

                        <div x-show="previews.length" x-transition class="mt-5 overflow-hidden rounded-[1.75rem] border border-primary-100 bg-white shadow-sm">
                            <div class="border-b border-primary-100 bg-primary-50 px-4 py-3">
                                <p class="text-sm font-black text-primary-800">{{ __('Selected files') }}</p>
                                <p class="mt-1 text-xs text-primary-600">{{ __('Preview appears immediately. Upload progress appears while Livewire sends the files.') }}</p>
                            </div>

                            <div class="grid gap-3 p-3 sm:grid-cols-2">
                                <template x-for="(file, index) in previews" :key="file.key">
                                    <div class="group flex items-center gap-4 rounded-2xl border border-gray-100 bg-gray-50 p-3 transition hover:border-primary-100 hover:bg-primary-50/40">
                                        <div class="relative h-20 w-20 shrink-0 overflow-hidden rounded-2xl border border-primary-100 bg-white">
                                            <template x-if="file.kind === 'image'">
                                                <img :src="file.url" class="h-full w-full object-cover" alt="{{ __('Uploaded preview') }}">
                                            </template>

                                            <template x-if="file.kind === 'video'">
                                                <video :src="file.url" class="h-full w-full object-cover" muted playsinline></video>
                                            </template>

                                            <template x-if="file.kind === 'audio'">
                                                <div class="flex h-full w-full items-center justify-center bg-primary-700 text-white">
                                                    <x-isax-broken.music class="h-7 w-7"/>
                                                </div>
                                            </template>

                                            <template x-if="file.kind === 'file'">
                                                <div class="flex h-full w-full items-center justify-center bg-gray-100 text-gray-500">
                                                    <x-isax-broken.document class="h-7 w-7"/>
                                                </div>
                                            </template>

                                            <span x-show="index === 0" class="absolute left-1 top-1 rounded-full bg-primary-500 px-2 py-0.5 text-[10px] font-black text-white">{{ __('Cover') }}</span>
                                        </div>

                                        <div class="min-w-0 flex-1">
                                            <p class="truncate text-sm font-black text-gray-950" x-text="file.name"></p>
                                            <p class="mt-1 text-xs font-semibold uppercase tracking-wide text-gray-500" x-text="file.kind + ' · ' + file.size"></p>
                                            <p x-show="uploading" class="mt-2 text-xs font-bold text-primary-600">{{ __('Uploading...') }}</p>
                                        </div>

                                        <button
                                            type="button"
                                            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-red-100 bg-red-50 text-red-600 transition hover:bg-red-600 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
                                            :disabled="uploading"
                                            @click.prevent="removePreview(index)"
                                            aria-label="{{ __('Remove file') }}"
                                        >
                                            <i class="isax isax-close-circle text-xl"></i>
                                        </button>
                                    </div>
                                </template>
                            </div>
                        </div>

                        @if (count($files))
                            <div x-show="!previews.length" x-transition class="mt-5 overflow-hidden rounded-[1.75rem] border border-primary-100 bg-white shadow-sm">
                                <div class="border-b border-primary-100 bg-primary-50 px-4 py-3">
                                    <p class="text-sm font-black text-primary-800">{{ __('Uploaded files') }}</p>
                                    <p class="mt-1 text-xs text-primary-600">{{ __('These files are ready to save. Remove any file before publishing.') }}</p>
                                </div>

                                <div class="divide-y divide-primary-100">
                                    @foreach ($files as $index => $file)
                                        @php
                                            $extension = method_exists($file, 'getClientOriginalExtension')
                                                ? strtolower($file->getClientOriginalExtension())
                                                : strtolower($file->extension());
                                            $name = method_exists($file, 'getClientOriginalName') ? $file->getClientOriginalName() : __('Uploaded file');
                                            $size = method_exists($file, 'getSize') && $file->getSize() ? round($file->getSize() / 1024) : null;
                                        @endphp

                                        <div class="group flex items-center gap-4 px-4 py-3 transition hover:bg-primary-50" wire:key="upload-preview-{{ $index }}">
                                            <div class="h-16 w-16 shrink-0 overflow-hidden rounded-2xl border border-primary-100 bg-gray-100">
                                                @if (in_array($extension, $acceptable_files['images'], true))
                                                    <img src="{{ $file->temporaryUrl() }}" class="h-full w-full object-cover" alt="{{ __('Uploaded preview') }}"/>
                                                @elseif (in_array($extension, $acceptable_files['videos'], true))
                                                    <div class="flex h-full w-full items-center justify-center bg-primary-800 text-white">
                                                        <x-isax-broken.video-play class="h-7 w-7"/>
                                                    </div>
                                                @elseif (in_array($extension, $acceptable_files['audio'], true))
                                                    <div class="flex h-full w-full items-center justify-center bg-primary-700 text-white">
                                                        <x-isax-broken.music class="h-7 w-7"/>
                                                    </div>
                                                @else
                                                    <div class="flex h-full w-full items-center justify-center bg-gray-100 text-gray-500">
                                                        <x-isax-broken.document class="h-7 w-7"/>
                                                    </div>
                                                @endif
                                            </div>

                                            <div class="min-w-0 flex-1">
                                                <div class="flex flex-wrap items-center gap-2">
                                                    <p class="max-w-full truncate text-sm font-black text-gray-950">{{ $name }}</p>
                                                    @if ($loop->first)
                                                        <span class="rounded-full bg-primary-500 px-2.5 py-1 text-[11px] font-black text-white">{{ __('Cover') }}</span>
                                                    @endif
                                                </div>
                                                <p class="mt-1 text-xs font-semibold uppercase tracking-wide text-gray-500">
                                                    {{ $extension ?: __('file') }} @if($size)
                                                        · {{ $size }} KB
                                                    @endif
                                                </p>
                                            </div>

                                            <button
                                                type="button"
                                                class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-red-100 bg-red-50 text-red-600 transition hover:bg-red-600 hover:text-white"
                                                wire:click="$removeUpload('files', '{{ $file->getFilename() }}')"
                                                aria-label="{{ __('Remove file') }}"
                                            >
                                                <i class="isax isax-close-circle text-xl"></i>
                                            </button>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                {{-- Footer controls --}}
                <div class="--sticky --bottom-0 --z-5 border-t border-primary-100 bg-white/90 p-4 backdrop-blur sm:p-6">
                    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                        <p class="text-sm font-semibold leading-6 text-gray-500">
                            {{ __('Move between sections freely. Save whenever the advertisement is ready.') }}
                        </p>
                        <button
                            type="submit"
                            wire:loading.attr="disabled"
                            wire:target="save,files"
                            class="h-12 rounded-2xl bg-primary-500 px-8 text-sm font-black text-white shadow-lg shadow-primary-500/20 transition hover:-translate-y-0.5 hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-60"
                        >
                            <span wire:loading.remove wire:target="save">{{ __('Save advertise') }}</span>
                            <span wire:loading wire:target="save">{{ __('Saving...') }}</span>
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </section>
</div>