{{-- SEO sekmesi — LEDGER (defter) tasarımı: müşteri Künyesiyle aynı sabit kalıp.
     Canlı Google önizlemesi + karakter sayaçları + etiket-çip motoru _qv-seo-ui'de
     (pfx alanlarını da okur); kayıt sözleşmesi değişmedi: blur/Enter → update-field PATCH.

     Meta satırları ledger-card ile DEĞİL elle çizilir: her satır _qv-seo-ui'nin
     beklediği data-seo/data-max kancalarını ve etiket yanındaki .qv-cc sayacını taşır.

     Günübirlik, kültür ve yurtdışı turlarının ortak SEO sekmesidir.
     Gerekli: $tour, $editBase. Opsiyonel: $uf, $urlSegment --}}
@php
    $uf = $uf ?? route("$editBase.update-field", $tour);
    $tagsArr = is_array($tour->tags ?? null) ? $tour->tags : [];
    $previewTitle = $tour->meta_title ?: $tour->name;
    $previewDesc  = $tour->meta_description ?: ($tour->short_description ?: 'Bu tur için henüz bir açıklama girilmedi.');
    $host = preg_replace('#^https?://#', '', rtrim(config('app.url'), '/'));
    // editBase 'agency.products.gunubirlik-turlar' → 'gunubirlik-turlar'
    $urlSegment = $urlSegment ?? \Illuminate\Support\Str::afterLast($editBase, '.');
    $previewUrl = $host . ' › ' . $urlSegment . ' › ' . ($tour->slug ?? '');

    // Meta satırları: seo => _qv-seo-ui kancası (data-seo/data-max + canlı sayaç)
    $seoRows = [
        ['label' => 'Meta Başlık', 'field' => 'meta_title', 'type' => 'text', 'seo' => 'title', 'max' => 60,
         'value' => $tour->meta_title, 'ph' => 'Boş: tur adı kullanılır'],
        ['label' => 'Meta Açıklama', 'field' => 'meta_description', 'type' => 'textarea', 'seo' => 'desc', 'max' => 160,
         'value' => $tour->meta_description, 'ph' => 'Boş: kısa açıklama kullanılır'],
        ['label' => 'Anahtar Kelimeler', 'field' => 'meta_keywords', 'type' => 'text', 'seo' => null, 'max' => null,
         'value' => $tour->meta_keywords, 'ph' => 'virgül, ile, ayrılmış'],
    ];
    $seoEmpty = collect($seoRows)->filter(fn ($r) => blank($r['value']))->count();
@endphp

<div class="qv-left-stack qv-seo"
     data-qv-seo
     data-fallback-title="{{ $tour->name }}"
     data-fallback-desc="{{ $tour->short_description }}"
     data-host="{{ $host }}"
     data-slug="{{ $tour->slug }}">

    {{-- ── Google arama sonucu önizlemesi (canlı) ── --}}
    <div class="pfx">
        <div class="pfx-top">
            <span class="pfx-top-t"><i class="fab fa-google" style="color:#4285F4"></i> Arama Sonucu Önizlemesi</span>
            <span class="qvseo-live"><i class="fas fa-circle"></i> Canlı</span>
        </div>
        <div class="pfx-body" data-qv-serp>
            <div class="qv-serp-card">
                <div class="qv-serp-url" data-serp-url>{{ $previewUrl }}</div>
                <div class="qv-serp-title" data-serp-title>{{ $previewTitle }}</div>
                <div class="qv-serp-desc" data-serp-desc>{{ $previewDesc }}</div>
            </div>
        </div>
    </div>

    {{-- ── Meta alanları: ledger satırları (+ etiket yanında canlı sayaç) ── --}}
    {{-- show-empty açık başlar: boş alanlar varsayılan görünür, düğme gizlemeye yarar --}}
    <div class="pfx show-empty" data-url="{{ $uf }}">
        <div class="pfx-top">
            <span class="pfx-top-t"><i class="fas fa-search"></i> SEO ve Meta Bilgileri</span>
            <button type="button" class="pfx-chip" data-a="empties" title="Doldurulmamış alanları göster / gizle">
                <i class="fas fa-eye-slash"></i> <span data-role="empties-n">{{ $seoEmpty }}</span> boş alan
            </button>
            <button type="button" class="pfx-chip" data-a="copy-all" title="Dolu tüm alanları kopyala">
                <i class="fas fa-clone"></i> Tümü
            </button>
        </div>

        <section class="pfx-sec">
            <div class="pfx-sec-h">
                <i class="fas fa-code"></i>
                <span>Meta Alanları</span>
                <button type="button" class="pfx-secopy" data-a="copy-sec" title="Bu bölümü kopyala">
                    <i class="fas fa-copy"></i>
                </button>
            </div>

            @foreach($seoRows as $r)
                @php $shown = trim((string) ($r['value'] ?? '')); @endphp
                <div class="pfx-row"
                     data-field="{{ $r['field'] }}"
                     data-type="{{ $r['type'] }}"
                     data-value="{{ $r['value'] }}"
                     data-label="{{ $r['label'] }}"
                     @if($r['seo']) data-seo="{{ $r['seo'] }}" data-max="{{ $r['max'] }}" @endif
                     @if($shown === '') data-empty="1" @endif>
                    <span class="pfx-l">
                        {{ $r['label'] }}
                        @if($r['seo'])
                            <b class="qv-cc {{ mb_strlen($shown) > $r['max'] * 0.9 ? 'text-danger' : (mb_strlen($shown) > $r['max'] * 0.75 ? 'text-warning' : '') }}">{{ mb_strlen($shown) }}/{{ $r['max'] }}</b>
                        @endif
                    </span>
                    <span class="pfx-v" data-ph="{{ $r['ph'] }}" title="{{ $shown }}">{{ $shown }}</span>
                    <span class="pfx-a">
                        <button type="button" class="pfx-b" data-a="copy" tabindex="-1" title="Kopyala"><i class="fas fa-copy"></i></button>
                        <button type="button" class="pfx-b" data-a="edit" tabindex="-1" title="Düzenle"><i class="fas fa-pen"></i></button>
                    </span>
                </div>
            @endforeach
        </section>

        <div class="pfx-note">
            <i class="fas fa-circle-info"></i>
            Meta başlık boşsa tur adı, meta açıklama boşsa kısa açıklama kullanılır — önizleme bunu anlık gösterir.
        </div>
    </div>

    {{-- ── Etiketler (çip motoru _qv-seo-ui'de; Enter ile ekle, otomatik kaydedilir) ── --}}
    <div class="pfx">
        <div class="pfx-top">
            <span class="pfx-top-t"><i class="fas fa-tags"></i> Etiketler</span>
            <span class="qvseo-count">{{ count($tagsArr) }}</span>
        </div>
        <div class="pfx-body">
            <div class="qv-tags" data-qv-tags data-qv-url="{{ $uf }}">
                <div class="qv-tags-box" data-qv-tags-box>
                    @foreach($tagsArr as $tag)
                        <span class="qv-tag" data-qv-tag>{{ $tag }}<button type="button" class="qv-tag-x" data-qv-tag-remove><i class="fas fa-times"></i></button></span>
                    @endforeach
                </div>
                <input type="text" class="qv-tag-input" data-qv-tag-input placeholder="Etiket yazıp Enter'a basın">
            </div>
            <div class="pfx-note" style="padding:  .35rem 0 0">
                <i class="fas fa-circle-info"></i> Enter ile eklenir, çarpı ile silinir — değişiklik anında kaydedilir.
            </div>
        </div>
    </div>
</div>

<style>
    /* Etiket yanı karakter sayacı (canlı değer _qv-seo-ui'den gelir) */
    .pfx-l .qv-cc {
        margin-left: 5px; font-size: .58rem; font-weight: 800; color: #b6c2d2;
        text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums;
    }
    .pfx-l .qv-cc.text-warning { color: #d97706; }
    .pfx-l .qv-cc.text-danger { color: #dc2626; }

    /* Önizleme kartı başlığındaki "canlı" rozeti */
    .qvseo-live {
        display: inline-flex; align-items: center; gap: 5px;
        font-size: .64rem; font-weight: 800; color: #16a34a;
        background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 999px;
        padding: 2px 9px; white-space: nowrap;
    }
    .qvseo-live i { font-size: .4rem; animation: qvseoPulse 1.6s ease infinite; }
    @keyframes qvseoPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

    /* Etiket sayısı rozeti */
    .qvseo-count {
        display: inline-grid; place-items: center; min-width: 20px; height: 20px;
        padding: 0 6px; border-radius: 999px;
        background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8;
        font-size: .64rem; font-weight: 800; font-variant-numeric: tabular-nums;
    }

    /* SERP kartı pfx gövdesinde tam genişlik kullanır */
    .qv-seo .qv-serp-card { max-width: none; }
</style>