@php
    $s = $service ?? null;
    $enabledLocales = site_supported_locales();
    $statusLabels = [
        'active' => __('admin.status_active'),
        'inactive' => __('admin.status_inactive'),
        'pending' => __('admin.pending'),
        'draft' => __('admin.draft'),
    ];
    $openMediaTab = $errors->has('image')
        || $errors->has('technician_avatar')
        || collect($errors->keys())->contains(fn ($key) => str_starts_with((string) $key, 'gallery_files'));
@endphp

<div class="space-y-6" x-data="{ tab: @js($openMediaTab ? 'media' : 'basics'), type: @js(old('type', $s?->type ?? \App\Models\RepairService::TYPE_SERVICE)) }">
    <div class="flex flex-wrap gap-2 border-b border-slate-200 pb-3">
        <button type="button" class="rounded-lg px-3 py-1.5 text-sm font-semibold transition"
            :class="tab === 'basics' ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'"
            @click="tab = 'basics'">{{ __('admin.service_tab_basics') }}</button>
        <button type="button" class="rounded-lg px-3 py-1.5 text-sm font-semibold transition"
            :class="tab === 'content' ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'"
            @click="tab = 'content'">{{ __('admin.service_tab_content') }}</button>
        <button type="button" class="rounded-lg px-3 py-1.5 text-sm font-semibold transition"
            :class="tab === 'media' ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'"
            @click="tab = 'media'">{{ __('admin.service_tab_media') }}</button>
        <button type="button" class="rounded-lg px-3 py-1.5 text-sm font-semibold transition"
            :class="tab === 'showcase' ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'"
            @click="tab = 'showcase'">{{ __('admin.service_tab_showcase') }}</button>
    </div>

    {{-- Basics --}}
    <div class="grid gap-4 sm:grid-cols-2" x-show="tab === 'basics'">
        <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.service_section_identity') }}</h3>
            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label class="admin-label">{{ __('admin.service_type') }}</label>
                    <select name="type" class="admin-input" x-model="type">
                        <option value="{{ \App\Models\RepairService::TYPE_SERVICE }}" @selected(old('type', $s?->type ?? \App\Models\RepairService::TYPE_SERVICE) === \App\Models\RepairService::TYPE_SERVICE)>{{ __('admin.service_type_service') }}</option>
                        <option value="{{ \App\Models\RepairService::TYPE_MAIN }}" @selected(old('type', $s?->type) === \App\Models\RepairService::TYPE_MAIN)>{{ __('admin.service_type_main') }}</option>
                        <option value="{{ \App\Models\RepairService::TYPE_BRAND }}" @selected(old('type', $s?->type) === \App\Models\RepairService::TYPE_BRAND)>{{ __('admin.service_type_brand') }}</option>
                    </select>
                </div>
                <div>
                    <label class="admin-label">{{ __('admin.category') }}</label>
                    <x-admin.category-select
                        name="category_id"
                        :options="$categories"
                        :value="old('category_id', $s?->category_id)"
                        :placeholder="__('admin.optional')"
                    />
                </div>
                @foreach($enabledLocales as $loc)
                    <div>
                        <label class="admin-label">{{ __("admin.locale_{$loc}") }} — {{ __('admin.name') }}</label>
                        <input name="name_{{ $loc }}" value="{{ old("name_{$loc}", $s?->{"name_{$loc}"}) }}" class="admin-input" required />
                    </div>
                @endforeach
                <div>
                    <label class="admin-label">{{ __('admin.slug') }}</label>
                    <input name="slug" value="{{ old('slug', $s?->slug) }}" class="admin-input" placeholder="auto" />
                </div>
            </div>
        </div>

        <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.service_section_pricing') }}</h3>
            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                <div>
                    <label class="admin-label">{{ __('admin.price_estimate_from') }}</label>
                    <input type="number" step="0.01" name="price_estimate_from" value="{{ old('price_estimate_from', $s?->price_estimate_from) }}" class="admin-input" />
                </div>
                <div>
                    <label class="admin-label">{{ __('admin.currency_unit') }}</label>
                    <select name="currency" class="admin-input">
                        @foreach(config('site.supported_currencies', ['USD', 'EUR', 'IRR', 'TOM']) as $cur)
                            <option value="{{ $cur }}" @selected(old('currency', $s?->currency ?? 'USD') === $cur)>{{ $cur }}</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-slate-500">{{ __('admin.currency_price_hint') }}</p>
                </div>
                <div>
                    <label class="admin-label">{{ __('admin.lead_time_days') }}</label>
                    <input type="number" name="lead_time_days" value="{{ old('lead_time_days', $s?->lead_time_days) }}" class="admin-input" min="0" />
                </div>
                <div>
                    <label class="admin-label">{{ __('admin.warranty_days') }}</label>
                    <input type="number" name="warranty_days" value="{{ old('warranty_days', $s?->warranty_days) }}" class="admin-input" min="0" />
                </div>
                <div>
                    <label class="admin-label">{{ __('admin.status') }}</label>
                    <select name="status" class="admin-input">
                        @foreach(['active','inactive','pending','draft'] as $st)
                            <option value="{{ $st }}" @selected(old('status', $s?->status ?? 'active') === $st)>{{ $statusLabels[$st] ?? $st }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="admin-label">{{ __('admin.sort_order') }}</label>
                    <input type="number" name="sort_order" value="{{ old('sort_order', $s?->sort_order ?? 0) }}" class="admin-input" min="0" />
                </div>
                <div class="flex flex-wrap items-center gap-4 pt-6 lg:col-span-3">
                    <label class="flex items-center gap-2 text-sm">
                        <input type="hidden" name="available" value="0" />
                        <input type="checkbox" name="available" value="1" @checked(old('available', $s?->available ?? true)) class="rounded" />
                        <span>{{ __('admin.available') }}</span>
                    </label>
                    <label class="flex items-center gap-2 text-sm">
                        <input type="hidden" name="featured" value="0" />
                        <input type="checkbox" name="featured" value="1" @checked(old('featured', $s?->featured)) class="rounded" />
                        <span>{{ __('admin.featured') }}</span>
                    </label>
                </div>
            </div>
        </div>
    </div>

    {{-- Content --}}
    <div class="space-y-4" x-show="tab === 'content'" x-cloak>
        @foreach($enabledLocales as $loc)
            <div class="rounded-xl border border-slate-100  p-4">
                <h3 class="mb-3 text-sm font-bold text-slate-700">{{ __("admin.locale_{$loc}") }}</h3>
                <div class="space-y-3">
                    <div>
                        <label class="admin-label">{{ __('admin.summary') ?? 'خلاصه' }}</label>
                        <textarea name="summary_{{ $loc }}" rows="8" class="admin-input admin-input--prose-sm">{{ old("summary_{$loc}", $s?->{"summary_{$loc}"}) }}</textarea>
                    </div>
                    <div>
                        <label class="admin-label">{{ __('admin.body') }}</label>
                        <textarea name="description_{{ $loc }}" rows="16" class="admin-input admin-input--prose">{{ old("description_{$loc}", $s?->{"description_{$loc}"}) }}</textarea>
                    </div>
                </div>
            </div>
        @endforeach
        <div class="rounded-xl border border-slate-100  p-4">
            <label class="admin-label">{{ __('admin.deliverables') }}</label>
            <textarea name="deliverables" rows="5" class="admin-input font-mono text-xs" dir="ltr">{{ admin_form_json_field('deliverables', $s?->deliverables) }}</textarea>
        </div>
        <div class="rounded-xl border border-slate-100 p-4">
            <label class="admin-label">{{ __('admin.seo_tags') }}</label>
            <x-admin.tag-input name="meta_keywords" :value="old('meta_keywords', $s?->meta_keywords)" :hint="__('admin.seo_tags_hint')" />
        </div>
    </div>

    {{-- Media --}}
    <div class="space-y-4" x-show="tab === 'media'" x-cloak>
        <div
            class="rounded-xl border border-slate-100  p-4"
            x-data="{
                preview: @js($s?->image ? '/storage/'.ltrim($s->image, '/') : null),
                onCover(e) {
                    const file = e.target.files?.[0];
                    if (this.preview && this.preview.startsWith('blob:')) {
                        URL.revokeObjectURL(this.preview);
                    }
                    this.preview = file ? URL.createObjectURL(file) : @js($s?->image ? '/storage/'.ltrim($s->image, '/') : null);
                }
            }"
        >
            <label class="admin-label">{{ __('admin.image') }}</label>
            <template x-if="preview">
                <p class="mb-3">
                    <img :src="preview" alt="" class="h-28 w-28 rounded-xl object-cover ring-1 " />
                </p>
            </template>
            @can(\App\Models\Permission::MEDIA_UPLOAD)
                <input type="file" name="image" accept="image/*,.svg,image/svg+xml" class="admin-input" @change="onCover($event)" />
                <p class="mt-1 text-[11px] text-slate-400" x-show="type === 'brand'">{{ __('admin.service_brand_svg_hint') }}</p>
                <p class="mt-1 text-[11px] text-slate-400" x-show="type !== 'brand'">{{ __('admin.cover_image_hint') }}</p>
            @endcan
        </div>
        <div class="rounded-xl border border-slate-100  p-4">
            @include('admin.partials.gallery-upload', [
                'existingImages' => $s?->images ?? collect(),
                'existingMedia' => $s?->galleryMedia ?? collect(),
                'deleteRouteName' => $s ? 'admin.repair-services.images.destroy' : null,
                'deleteRouteParams' => $s ? ['repair_service' => $s] : [],
                'deleteMediaRouteName' => $s ? 'admin.repair-services.media.destroy' : null,
                'deleteMediaRouteParams' => $s ? ['repair_service' => $s] : [],
            ])
        </div>
    </div>

    {{-- Showcase --}}
    <div class="space-y-4" x-show="tab === 'showcase'" x-cloak>
        <div class="rounded-xl border border-slate-100  p-4">
            <h3 class="mb-3 text-sm font-bold text-slate-700">{{ __('admin.card_showcase') }}</h3>
            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label class="admin-label">{{ __('admin.showcase_tracking_code') }}</label>
                    <input name="showcase_tracking_code" value="{{ old('showcase_tracking_code', $s?->showcase_tracking_code) }}" class="admin-input" dir="ltr" />
                </div>
                <div>
                    <label class="admin-label">{{ __('admin.showcase_progress_percent') }}</label>
                    <input type="number" name="showcase_progress_percent" value="{{ old('showcase_progress_percent', $s?->showcase_progress_percent ?? 0) }}" class="admin-input" min="0" max="100" />
                </div>
                <div>
                    <label class="admin-label">{{ __('admin.showcase_status') }}</label>
                    <select name="showcase_status" class="admin-input">
                        @foreach (['received','diagnosing','parts','repairing','testing','ready'] as $st)
                            <option value="{{ $st }}" @selected(old('showcase_status', $s?->showcase_status ?? 'received') === $st)>{{ $st }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="admin-label">{{ __('admin.technician_rating') }}</label>
                    <input type="number" step="0.1" name="technician_rating" value="{{ old('technician_rating', $s?->technician_rating ?? 5) }}" class="admin-input" min="0" max="5" />
                </div>
                <div>
                    <label class="admin-label">{{ __('admin.financial_estimate') }}</label>
                    <input type="number" step="0.01" name="financial_estimate" value="{{ old('financial_estimate', $s?->financial_estimate) }}" class="admin-input" />
                </div>
                <div>
                    <label class="admin-label">{{ __('admin.financial_paid') }}</label>
                    <input type="number" step="0.01" name="financial_paid" value="{{ old('financial_paid', $s?->financial_paid ?? 0) }}" class="admin-input" />
                </div>
            </div>
        </div>

        @foreach($enabledLocales as $loc)
            <div class="rounded-xl border border-slate-100  p-4">
                <h3 class="mb-3 text-sm font-bold text-slate-700">{{ __("admin.locale_{$loc}") }} — {{ __('admin.technician_name') }}</h3>
                <div class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <label class="admin-label">{{ __('admin.technician_name') }}</label>
                        <input name="technician_name_{{ $loc }}" value="{{ old("technician_name_{$loc}", $s?->{"technician_name_{$loc}"}) }}" class="admin-input" />
                    </div>
                    <div>
                        <label class="admin-label">{{ __('admin.technician_role') }}</label>
                        <input name="technician_role_{{ $loc }}" value="{{ old("technician_role_{$loc}", $s?->{"technician_role_{$loc}"}) }}" class="admin-input" />
                    </div>
                    <div class="sm:col-span-2">
                        <label class="admin-label">{{ __('admin.ai_diagnosis') }}</label>
                        <textarea name="ai_diagnosis_{{ $loc }}" rows="2" class="admin-input">{{ old("ai_diagnosis_{$loc}", $s?->{"ai_diagnosis_{$loc}"}) }}</textarea>
                    </div>
                </div>
            </div>
        @endforeach

        <div
            class="rounded-xl border border-slate-100  p-4"
            x-data="{
                preview: @js($s?->technician_avatar ? \App\Support\UserAvatar::url($s->technician_avatar) : null),
                onAvatar(e) {
                    const file = e.target.files?.[0];
                    if (this.preview && this.preview.startsWith('blob:')) {
                        URL.revokeObjectURL(this.preview);
                    }
                    this.preview = file ? URL.createObjectURL(file) : @js($s?->technician_avatar ? \App\Support\UserAvatar::url($s->technician_avatar) : null);
                }
            }"
        >
            <label class="admin-label">{{ __('admin.technician_avatar') }}</label>
            <template x-if="preview">
                <p class="mb-3">
                    <img :src="preview" alt="" class="h-16 w-16 rounded-full object-cover ring-1 " />
                </p>
            </template>
            @can(\App\Models\Permission::MEDIA_UPLOAD)
                <input type="file" name="technician_avatar" accept="image/*" class="admin-input" @change="onAvatar($event)" />
            @endcan
        </div>
    </div>
</div>