{{-- SEO sekmesi motoru: canlı Google önizlemesi + karakter sayaçları + etiket-çip.
     Sayaç/önizleme, inline _qv-field alanları düzenlenirken (input) VE kaydedildikten sonra (MutationObserver) güncellenir.
     Delegasyon bir kez; önizleme/observer init'i her enjeksiyonda idempotent. --}}
<style>
    .qv-serp { margin-bottom: 1.25rem; }
    .qv-serp-head { font-size: .72rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .5rem; display: flex; align-items: center; gap: .4rem; }
    .qv-serp-head i { color: #4285F4; }
    .qv-serp-card { border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 16px; background: #fff; max-width: 600px; box-shadow: 0 1px 3px rgba(15,23,42,.04); }
    .qv-serp-url { font-size: .78rem; color: #4d5156; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .qv-serp-title { font-size: 1.15rem; color: #1a0dab; line-height: 1.3; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
    .qv-serp-desc { font-size: .82rem; color: #4d5156; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

    .qv-seo-field { display: flex; flex-direction: column; }
    .qv-seo-meta { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .3rem; }
    .qv-cc { font-size: .72rem; color: #94a3b8; white-space: nowrap; }
    .qv-cc.text-warning { color: #d97706; font-weight: 600; }
    .qv-cc.text-danger { color: #dc2626; font-weight: 700; }

    .qv-tags-box { display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem; border: 1px solid #e2e8f0; border-radius: 10px; min-height: 44px; background: #f8fafc; margin-bottom: .5rem; }
    .qv-tag { display: inline-flex; align-items: center; gap: .4rem; background: #2563eb; color: #fff; padding: .3rem .6rem; border-radius: 8px; font-size: .82rem; font-weight: 600; }
    .qv-tag-x { background: none; border: none; color: #fff; cursor: pointer; padding: 0; font-size: .75rem; opacity: .85; line-height: 1; }
    .qv-tag-x:hover { opacity: 1; }
    .qv-tag-input { border: 1px solid #e2e8f0; border-radius: 8px; padding: .45rem .65rem; font-size: .85rem; width: 100%; outline: none; }
    .qv-tag-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
</style>
<script>
(function () {
    var CSRF = function () { return (document.querySelector('meta[name="csrf-token"]') || {}).content; };

    function toast(ok, msg) {
        if (typeof Swal === 'undefined') return;
        Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 1600, timerProgressBar: true })
            .fire({ icon: ok ? 'success' : 'error', title: msg || (ok ? 'Kaydedildi' : 'Hata') });
    }

    // Bir SEO alanının anlık değeri: düzenleniyorsa input'tan, değilse .pqv-val metninden ('—' = boş)
    function fieldValue(container, key) {
        var wrap = container.querySelector('[data-seo="' + key + '"]');
        if (!wrap) return '';
        var input = wrap.querySelector('.qv-inline-input');
        if (input) return input.value;
        var val = wrap.querySelector('.pqv-val');
        var t = val ? val.innerText.trim() : '';
        return (t === '—') ? '' : t;
    }

    function refreshSeo(container) {
        // Karakter sayaçları
        container.querySelectorAll('[data-seo][data-max]').forEach(function (wrap) {
            var key = wrap.getAttribute('data-seo');
            var max = parseInt(wrap.getAttribute('data-max'), 10);
            var v = fieldValue(container, key);
            var cc = wrap.querySelector('.qv-cc');
            if (!cc) return;
            cc.textContent = v.length + '/' + max;
            cc.classList.remove('text-warning', 'text-danger');
            if (v.length > max * 0.9) cc.classList.add('text-danger');
            else if (v.length > max * 0.75) cc.classList.add('text-warning');
        });
        // Google önizlemesi
        var serp = container.querySelector('[data-qv-serp]');
        if (serp) {
            var title = fieldValue(container, 'title') || container.dataset.fallbackTitle || '';
            var desc = fieldValue(container, 'desc') || container.dataset.fallbackDesc || 'Bu tur için henüz bir açıklama girilmedi.';
            var t = serp.querySelector('[data-serp-title]');
            var d = serp.querySelector('[data-serp-desc]');
            if (t) t.textContent = title;
            if (d) d.textContent = desc;
        }
    }

    // Hızlı ardışık etiket ekleme/silmede istekler yarışmasın diye debounce'lu (diğer bloklarla aynı desen).
    var tagsT;
    function saveTags(container) {
        clearTimeout(tagsT);
        tagsT = setTimeout(function () {
            var tags = [].slice.call(container.querySelectorAll('[data-qv-tag]')).map(function (t) {
                return (t.childNodes[0] ? t.childNodes[0].textContent : t.textContent).trim();
            }).filter(Boolean);
            fetch(container.dataset.qvUrl, {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF(), 'X-Requested-With': 'XMLHttpRequest' },
                body: JSON.stringify({ field: 'tags', value: tags.join(',') })
            }).then(function (r) {
                return r.json().catch(function () {
                    return { success: false, message: 'Sunucu hatası (' + r.status + ') — etiketler kaydedilemedi.' };
                });
            }).catch(function () {
                return { success: false, message: 'Bağlantı hatası — etiketler kaydedilemedi.' };
            }).then(function (d) { toast(d.success, d.message); });
        }, 400);
    }

    function addTag(container, text) {
        text = (text || '').trim();
        if (!text) return;
        var box = container.querySelector('[data-qv-tags-box]');
        var span = document.createElement('span');
        span.className = 'qv-tag';
        span.setAttribute('data-qv-tag', '');
        span.innerHTML = text + '<button type="button" class="qv-tag-x" data-qv-tag-remove><i class="fas fa-times"></i></button>';
        box.appendChild(span);
        saveTags(container);
    }

    // ── Delegasyon (yalnız bir kez) ──
    if (!window.__qvSeoUiDelegated) {
        window.__qvSeoUiDelegated = true;

        // Inline düzenleme sırasında canlı sayaç + önizleme
        document.addEventListener('input', function (e) {
            var inp = e.target.closest('.qv-inline-input');
            if (!inp) return;
            var container = inp.closest('[data-qv-seo]');
            if (container) refreshSeo(container);
        });

        // Etiket ekle (Enter)
        document.addEventListener('keydown', function (e) {
            var inp = e.target.closest('[data-qv-tag-input]');
            if (!inp || e.key !== 'Enter') return;
            e.preventDefault();
            var container = inp.closest('[data-qv-tags]');
            addTag(container, inp.value);
            inp.value = '';
        });

        // Etiket sil
        document.addEventListener('click', function (e) {
            var btn = e.target.closest('[data-qv-tag-remove]');
            if (!btn) return;
            var container = btn.closest('[data-qv-tags]');
            var tag = btn.closest('[data-qv-tag]');
            if (tag) tag.remove();
            saveTags(container);
        });
    }

    // ── Her enjeksiyonda: kayıt sonrası (span metni değişince) için observer + ilk render ──
    // Not: refreshSeo izlenen alt-ağaca yazdığı için, sonsuz döngüyü önlemek üzere yazım sırasında observer koparılır.
    var OBSCFG = { childList: true, characterData: true, subtree: true };
    document.querySelectorAll('[data-qv-seo]').forEach(function (container) {
        if (!container.__seoObserved) {
            container.__seoObserved = true;
            var obs = new MutationObserver(function () {
                obs.disconnect();
                refreshSeo(container);
                obs.observe(container, OBSCFG);
            });
            obs.observe(container, OBSCFG);
        }
        refreshSeo(container);
    });
})();
</script>