@php
    /** @var \App\Models\Banner|null $banner */
    $b = $banner ?? null;
    $enabledLocales = site_supported_locales();
    $maxImageKb = (int) config('admin.media.max_image_size', 2048);
    $maxImageMb = max(1, (int) round($maxImageKb / 1024));
    $dropError = $errors->first('image');
@endphp

<div class="grid gap-4 sm:grid-cols-2">
    <div class="sm:col-span-2 rounded-xl border border-slate-100 p-4">
        <h3 class="mb-3 text-sm font-bold text-slate-700">{{ __('admin.banner_section_identity') }}</h3>
        <div class="grid gap-4 sm:grid-cols-2">
            @foreach ($enabledLocales as $loc)
                <div>
                    <label class="admin-label">{{ __("admin.locale_{$loc}") }} — {{ __('admin.title') }}</label>
                    <input name="title_{{ $loc }}" class="admin-input" value="{{ old("title_{$loc}", $b?->{"title_{$loc}"}) }}" maxlength="255" required />
                    @error("title_{$loc}")<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="admin-label">{{ __("admin.locale_{$loc}") }} — {{ __('admin.banner_alt_text') }}</label>
                    <input name="alt_text_{{ $loc }}" class="admin-input" value="{{ old("alt_text_{$loc}", $b?->{"alt_text_{$loc}"}) }}" maxlength="255" />
                    <p class="mt-1 text-[11px] text-slate-500">{{ __('admin.banner_alt_hint') }}</p>
                    @error("alt_text_{$loc}")<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
                </div>
            @endforeach
            <div>
                <label class="admin-label">{{ __('admin.banner_position') }}</label>
                <select name="position" class="admin-input" required>
                    @foreach ($positions as $position)
                        <option value="{{ $position }}" @selected(old('position', $b?->position ?? \App\Enums\BannerPosition::HomeTop->value) === $position)>
                            {{ __("admin.banner_position_{$position}") }}
                        </option>
                    @endforeach
                </select>
                @error('position')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="admin-label">{{ __('admin.sort_order') }}</label>
                <input type="number" min="0" name="sort_order" class="admin-input" value="{{ old('sort_order', $b?->sort_order ?? 0) }}" />
                @error('sort_order')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
            </div>
            <div class="sm:col-span-2">
                <label class="admin-label">{{ __('admin.banner_link') }}</label>
                <input
                    name="link"
                    class="admin-input"
                    dir="ltr"
                    value="{{ old('link', \App\Support\BannerLink::forAdminInput($b?->link)) }}"
                    placeholder="/industries/inverter-drive-repair"
                    maxlength="1000"
                />
                <p class="mt-1 text-[11px] text-slate-500">{{ __('admin.banner_link_hint') }}</p>
                @error('link')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="admin-label">{{ __('admin.banner_target') }}</label>
                <select name="target" class="admin-input">
                    <option value="_self" @selected(old('target', $b?->target ?? '_self') === '_self')>{{ __('admin.banner_target_self') }}</option>
                    <option value="_blank" @selected(old('target', $b?->target ?? '_self') === '_blank')>{{ __('admin.banner_target_blank') }}</option>
                </select>
                @error('target')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
            </div>
            <div class="flex items-end">
                <label class="flex items-center gap-2 text-sm">
                    <input type="hidden" name="is_active" value="0" />
                    <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $b?->is_active ?? true)) class="rounded" />
                    <span>{{ __('admin.status_active') }}</span>
                </label>
            </div>
        </div>
    </div>

    <div class="rounded-xl border border-slate-100  p-4">
        <h3 class="mb-3 text-sm font-bold text-slate-700">{{ __('admin.banner_schedule') }}</h3>
        <div class="grid gap-4">
            <div>
                <label class="admin-label">{{ __('admin.banner_starts_at') }}</label>
                <x-admin.date-field name="starts_at" mode="datetime" :value="old('starts_at', $b?->starts_at?->format('Y-m-d\TH:i'))" />
                @error('starts_at')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="admin-label">{{ __('admin.banner_ends_at') }}</label>
                <x-admin.date-field name="ends_at" mode="datetime" :value="old('ends_at', $b?->ends_at?->format('Y-m-d\TH:i'))" />
                @error('ends_at')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
            </div>
        </div>
    </div>

    <div class="rounded-xl border border-slate-100  p-4"
         x-data="{
            dragging: false,
            loading: false,
            error: @js($dropError),
            preview: @js($b?->imageUrl()),
            filename: '',
            allowed: ['image/jpeg', 'image/png', 'image/webp', 'image/gif'],
            maxBytes: {{ $maxImageKb * 1024 }},
            select(e) {
                const file = e.target.files?.[0];
                this.consume(file, false);
            },
            drop(e) {
                const file = e.dataTransfer?.files?.[0];
                this.dragging = false;
                this.consume(file, true);
            },
            consume(file, fromDrop) {
                this.error = '';
                if (!file) return;
                if (!this.allowed.includes(file.type)) {
                    this.error = @js(__('admin.banner_upload_invalid_type'));
                    return;
                }
                if (file.size > this.maxBytes) {
                    this.error = @js(__('admin.banner_upload_invalid_size', ['size' => $maxImageMb]));
                    return;
                }
                if (this.preview && this.preview.startsWith('blob:')) URL.revokeObjectURL(this.preview);
                this.loading = true;
                this.filename = file.name;
                this.preview = URL.createObjectURL(file);
                const dt = new DataTransfer();
                dt.items.add(file);
                this.$refs.file.files = dt.files;
                this.loading = false;
                if (fromDrop) this.$refs.file.dispatchEvent(new Event('change'));
            },
            clear() {
                if (this.preview && this.preview.startsWith('blob:')) URL.revokeObjectURL(this.preview);
                this.preview = @js($b?->imageUrl());
                this.filename = '';
                this.error = '';
                this.$refs.file.value = '';
            }
         }"
    >
        <h3 class="mb-3 text-sm font-bold text-slate-700">{{ __('admin.image') }}</h3>
        <div class="space-y-3">
            <div class="rounded-xl border border-dashed p-4 transition"
                 :class="dragging ? 'border-brand-primary bg-brand-primary/5' : 'border-slate-300 bg-white'"
                 @dragover.prevent="dragging = true"
                 @dragleave.prevent="dragging = false"
                 @drop.prevent="drop($event)">
                <template x-if="preview">
                    <img :src="preview" alt="" class="mb-3 h-36 w-full rounded-lg object-cover ring-1 " />
                </template>
                <div class="flex flex-wrap items-center gap-2">
                    <label class="admin-btn-muted cursor-pointer">
                        <input x-ref="file" type="file" name="image" accept="image/jpeg,image/png,image/webp,image/gif"
                               class="sr-only" @change="select($event)" {{ $b ? '' : 'required' }} />
                        {{ __('admin.banner_pick_image') }}
                    </label>
                    <button type="button" class="admin-btn-muted" @click="clear()">{{ __('admin.banner_clear_new_file') }}</button>
                    <span class="text-xs text-slate-500" x-text="filename"></span>
                </div>
                <p class="mt-2 text-[11px] text-slate-500">
                    {{ __('admin.banner_drop_hint') }}
                    — {{ __('admin.banner_size_hint', ['size' => $maxImageMb]) }}
                </p>
                <p class="mt-1 text-[11px] text-slate-500">
                    {{ __('admin.banner_dimensions_hint') }}:
                    @foreach ($dimensions as $position => $dimension)
                        <span class="font-semibold">{{ __("admin.banner_position_{$position}") }}={{ $dimension }}</span>@if (! $loop->last), @endif
                    @endforeach
                </p>
                <p class="mt-2 text-xs text-amber-600" x-show="loading" x-cloak>{{ __('admin.saving') }}</p>
                <p class="mt-2 text-xs text-rose-600" x-text="error" x-show="error" x-cloak></p>
                @error('image')<p class="mt-2 text-xs text-rose-600">{{ $message }}</p>@enderror
            </div>
        </div>
    </div>
</div>