@php
    $c = $category ?? null;
    $enabledLocales = site_supported_locales();
    $maxImageKb = (int) config('admin.media.max_image_size', 2048);
    $maxImageMb = max(1, (int) round($maxImageKb / 1024));
    $imagePreview = $c?->image ? site_media_url($c->image) : null;
    $dropError = $errors->first('image');
@endphp
<div class="grid gap-4 sm:grid-cols-2">
    <div><label class="admin-label">{{ __('admin.slug') }}</label><input name="slug" value="{{ old('slug', $c?->slug) }}" class="admin-input" required /></div>
    @foreach($enabledLocales as $loc)
        <div><label class="admin-label">{{ __("admin.locale_{$loc}") }} — {{ __('admin.name') }}</label><input name="name_{{ $loc }}" value="{{ old("name_{$loc}", $c?->{"name_{$loc}"}) }}" class="admin-input" required /></div>
    @endforeach
    <div><label class="admin-label">{{ __('admin.parent_category') }}</label>
        <select name="parent_id" class="admin-input" required>
            <option value="0" @selected(old('parent_id', $c?->parent_id ?? 0) == 0)>{{ __('admin.no_parent') }}</option>
            @foreach($parents as $p)<option value="{{ $p->id }}" @selected(old('parent_id', $c?->parent_id) == $p->id)>{{ $p->name_fa }}</option>@endforeach
        </select>
    </div>
    <div><label class="admin-label">{{ __('admin.status') }}</label>
        <select name="status" class="admin-input">
            @foreach(['active','inactive'] as $st)
                <option value="{{ $st }}" @selected(old('status', $c?->status ?? 'active') === $st)>{{ __('admin.status_'.$st) }}</option>
            @endforeach
        </select>
    </div>

    <div
        class="sm:col-span-2 rounded-xl border border-slate-100 p-4"
        x-data="{
            dragging: false,
            loading: false,
            error: @js($dropError),
            preview: @js($imagePreview),
            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($imagePreview);
                this.filename = '';
                this.error = '';
                this.$refs.file.value = '';
            }
        }"
    >
        <h3 class="mb-3 text-sm font-bold text-slate-700">{{ __('admin.category_image') }}</h3>
        <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 max-w-md rounded-lg object-cover ring-1" />
            </template>
            @can(\App\Models\Permission::MEDIA_UPLOAD)
                <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)"
                        />
                        {{ __('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-400">{{ __('admin.cover_image_hint') }}</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>
            @else
                <p class="text-xs text-slate-500">{{ __('admin.cover_image_hint') }}</p>
            @endcan
            @error('image')<p class="mt-2 text-xs text-rose-600">{{ $message }}</p>@enderror
        </div>
    </div>

    @foreach($enabledLocales as $loc)
        <div class="sm:col-span-2"><label class="admin-label">{{ __("admin.locale_{$loc}") }} — {{ __('admin.body') }}</label><textarea name="description_{{ $loc }}" rows="25" class="admin-input">{{ old("description_{$loc}", $c?->{"description_{$loc}"}) }}</textarea></div>
    @endforeach
</div>