@php
    $title = old('seo.title', $seo?->title);
    $desc = old('seo.description', $seo?->description);
    $focus = old('seo.focus_keyword', $seo?->focus_keyword ?: $seo?->keywords);
    $secondary = old('seo.secondary_keywords', is_array($seo?->secondary_keywords) ? implode(', ', $seo->secondary_keywords) : '');
    $synonyms = old('seo.synonyms', is_array($seo?->synonyms) ? implode(', ', $seo->synonyms) : '');
    $ogImage = old('seo.og_image', $seo?->og_image);
    $canonicalDefault = route('services.show', $item->slug);
@endphp

<form method="POST" action="{{ route('admin.services.update', $item) }}" class="home-editor__body"
      x-data="{ title: @js((string) $title), description: @js((string) $desc) }">
    @csrf
    @method('PUT')
    <input type="hidden" name="tab" value="seo">

    <div class="grid gap-6 lg:grid-cols-5">
        <div class="space-y-4 lg:col-span-3">
            <div class="home-seo-card space-y-4">
                <div>
                    <label class="home-label">SEO title <span class="font-normal text-slate-400" x-text="title.length + '/60'"></span></label>
                    <input type="text" name="seo[title]" x-model="title" maxlength="255" class="home-input" placeholder="Service title for search engines">
                </div>
                <div>
                    <label class="home-label">Meta description <span class="font-normal text-slate-400" x-text="description.length + '/160'"></span></label>
                    <textarea name="seo[description]" rows="4" x-model="description" maxlength="500" class="home-textarea" placeholder="Compelling summary with a soft CTA">{{ $desc }}</textarea>
                </div>
                <div class="home-field-grid">
                    <div>
                        <label class="home-label">Focus keyphrase</label>
                        <input type="text" name="seo[focus_keyword]" value="{{ $focus }}" class="home-input" placeholder="e.g. bookkeeping virtual assistant">
                    </div>
                    <div>
                        <label class="home-label">Robots</label>
                        <select name="seo[robots]" class="home-select">
                            @foreach (['index, follow','noindex, follow','index, nofollow','noindex, nofollow'] as $robots)
                                <option value="{{ $robots }}" @selected(old('seo.robots', $seo?->robots ?? 'index, follow') === $robots)>{{ $robots }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="span-2">
                        <label class="home-label">Secondary keywords</label>
                        <input type="text" name="seo[secondary_keywords]" value="{{ $secondary }}" class="home-input" placeholder="Comma separated">
                    </div>
                    <div class="span-2">
                        <label class="home-label">Synonyms</label>
                        <input type="text" name="seo[synonyms]" value="{{ $synonyms }}" class="home-input" placeholder="Comma separated">
                    </div>
                    <div>
                        <label class="home-label">OG title override</label>
                        <input type="text" name="seo[og_title]" value="{{ old('seo.og_title', $seo?->og_title) }}" class="home-input" placeholder="Defaults to SEO title">
                    </div>
                    <div>
                        <label class="home-label">Canonical URL</label>
                        <input type="text" name="seo[canonical_url]" value="{{ old('seo.canonical_url', $seo?->canonical_url ?: $canonicalDefault) }}" class="home-input">
                    </div>
                    <div class="span-2">
                        <label class="home-label">OG description override</label>
                        <textarea name="seo[og_description]" rows="2" class="home-textarea" placeholder="Defaults to meta description">{{ old('seo.og_description', $seo?->og_description) }}</textarea>
                    </div>
                </div>
            </div>

            <div class="home-seo-card">
                <x-admin.media-picker
                    mode="url"
                    name="seo[og_image]"
                    :value="$ogImage"
                    label="OG image"
                    help="Optional. Leave empty to use featured image or global OG from Settings."
                />
                @if ($globalOg)
                    <p class="home-note mt-3">
                        Global fallback:
                        <a href="{{ str_starts_with($globalOg, 'http') ? $globalOg : url($globalOg) }}" target="_blank" class="font-semibold underline">view current global image</a>
                    </p>
                @else
                    <p class="home-note mt-3">No global OG image configured yet — set one in Settings → Schema.</p>
                @endif
            </div>
        </div>

        <div class="space-y-4 lg:col-span-2">
            <div class="home-seo-card" style="background: linear-gradient(180deg,#f8fafc,#fff);">
                <p class="mb-3 text-[10px] font-bold uppercase tracking-[0.12em] text-slate-500">Google preview</p>
                <p class="truncate text-base text-[#1a0dab]" x-text="(title || 'Page title') + ' | {{ config('apex.name') }}'"></p>
                <p class="truncate text-xs text-[#006621]">{{ parse_url(url('/'), PHP_URL_HOST) }}/services/{{ $item->slug }}</p>
                <p class="mt-1 text-sm leading-snug text-[#4d5156]" x-text="description || 'Meta description preview…'"></p>
            </div>
            <div class="home-note">
                After saving, open <strong>SEO Audit</strong> for score, desktop/mobile SERP previews, and prioritized suggestions.
            </div>
        </div>
    </div>

    <div class="home-editor__footer">
        <button type="submit" class="home-btn home-btn--primary">Save SEO</button>
    </div>
</form>