@php
    /**
     * Çok dilli sözleşme editörü.
     *
     * Düzen, Satış Belgesi Şablonu ekranıyla aynıdır: solda değişken rayı,
     * ortada koyu HTML kaynak editörü, altta canlı önizleme. Sözleşmeye özel
     * eklentiler: dil sekmeleri (her dil kendi başlık + içeriğini taşır) ve
     * kontrat bağlamı.
     *
     * Beklenen değişkenler:
     *   $languages        : Language koleksiyonu
     *   $primaryLanguage  : Language|null  (ana metnin dili)
     *   $contract         : AgencyContract|null
     *   $translationsData : array  (language_id => ['title'=>, 'content'=>])
     */
    $contract = $contract ?? null;
    $translationsData = $translationsData ?? [];
    $primaryId = $primaryLanguage->id ?? null;
    $isSystem = (bool) ($contract->is_system ?? false);

    $baseTitle = old('title', $contract->title ?? '');
    $baseContent = old('content', $contract->content ?? '');

    $otherLanguages = $languages->filter(fn ($l) => $l->id !== $primaryId)->values();

    // Başlangıç durumu: ana metin + yalnızca içeriği olan diller "aktif" sekme olur
    $langState = ['base' => ['title' => $baseTitle, 'content' => $baseContent]];
    $activeLangs = collect();
    foreach ($otherLanguages as $l) {
        $t = old("translations.{$l->id}.title", $translationsData[$l->id]['title'] ?? '');
        $c = old("translations.{$l->id}.content", $translationsData[$l->id]['content'] ?? '');
        if (trim(strip_tags((string) $c)) !== '' || trim((string) $t) !== '') {
            $langState[(string) $l->id] = ['title' => $t, 'content' => $c];
            $activeLangs->push($l);
        }
    }
    $activeIds = $activeLangs->pluck('id')->all();

    $contractContext = old('context', $contract->context ?? 'general');
    $mergeCatalog = \App\Services\Operation\ContractRenderService::catalog();

    $catIcons = [
        'Kaynak / Kişi' => 'fa-user-tie',
        'Araç' => 'fa-bus',
        'Tedarikçi' => 'fa-building',
        'Tur' => 'fa-route',
        'Görev' => 'fa-calendar-check',
        'Ücret' => 'fa-coins',
        'Hizmetler' => 'fa-bell-concierge',
        'Acente' => 'fa-briefcase',
        'Yolcu' => 'fa-user',
        'Rezervasyon' => 'fa-receipt',
        'Kalkış' => 'fa-plane-departure',
        'Genel' => 'fa-shapes',
    ];
    $ctxIcons = [
        'general' => 'fa-file-lines', 'customer' => 'fa-user', 'guide' => 'fa-user-tie',
        'vehicle' => 'fa-bus', 'captain' => 'fa-id-card', 'passenger' => 'fa-users',
    ];

    // Önizlemede {{token}} yerine etiketi gösterebilmek için düz harita
    $tokenMap = [];
    foreach ($mergeCatalog as $group => $fields) {
        foreach ($fields as $f) {
            $tokenMap[$f['token']] = ['label' => $f['label'], 'mode' => $f['mode'], 'group' => $group];
        }
    }
@endphp

{{-- ══ KONTRAT BAĞLAMI ══ --}}
<div class="mb-4">
    <label class="ced-label">Kontrat Bağlamı</label>
    <div class="ctx-pills" id="contractContextPills">
        @foreach(\App\Models\Agency\AgencyContract::CONTEXTS as $ck => $cl)
            <label class="ctx-pill {{ $contractContext === $ck ? 'active' : '' }}">
                <input type="radio" name="context" value="{{ $ck }}" {{ $contractContext === $ck ? 'checked' : '' }} hidden>
                <i class="fas {{ $ctxIcons[$ck] ?? 'fa-file' }}"></i>
                <span>{{ $cl }}</span>
            </label>
        @endforeach
    </div>
    <span class="ced-hint"><i class="fas fa-circle-info me-1"></i> <strong>Rehber / Araç / Kaptan</strong> bağlamındaki şablonlar kaynak atamalarında, <strong>Yolcu</strong> bağlamındakiler operasyon yolcu listesinde belge üretiminde listelenir.</span>
</div>

{{-- ══ DİL SEKMELERİ ══ --}}
<div class="mb-2 d-flex justify-content-between align-items-end flex-wrap gap-2">
    <label class="ced-label mb-0">Diller</label>
    <span class="ced-hint mt-0"><i class="fas fa-circle text-success me-1" style="font-size:.5rem; vertical-align:middle;"></i> İçerik girilmiş diller yeşil nokta ile işaretlenir.</span>
</div>

<div class="lang-tabbar" id="langTabbar">
    <button type="button" class="lang-tab active" data-lang="base">
        <span class="lang-code">{{ strtoupper($primaryLanguage->code ?? '—') }}</span>
        <span class="lang-name">{{ $primaryLanguage->name ?? 'Varsayılan' }}</span>
        <span class="lang-primary-badge">ANA METİN</span>
        <span class="lang-dot" data-dot="base"></span>
    </button>

    @foreach($activeLangs as $l)
        <button type="button" class="lang-tab" data-lang="{{ $l->id }}">
            <span class="lang-code">{{ strtoupper($l->code) }}</span>
            <span class="lang-name">{{ $l->name }}</span>
            <span class="lang-dot" data-dot="{{ $l->id }}"></span>
            <span class="lang-remove" title="Bu çeviriyi kaldır" onclick="event.stopPropagation(); removeContractLanguage({{ $l->id }});"><i class="fas fa-times"></i></span>
        </button>
    @endforeach

    <div class="lang-add-wrap" id="langAddWrap">
        <button type="button" class="lang-add-btn" id="langAddBtn">
            <i class="fas fa-plus"></i><span>Dil Ekle</span>
        </button>
        <div class="lang-add-panel" id="langAddPanel">
            <div class="lang-add-search">
                <i class="fas fa-search"></i>
                <input type="text" id="langAddSearch" placeholder="Dil ara..." autocomplete="off">
            </div>
            <div class="lang-add-list" id="langAddList">
                @foreach($otherLanguages as $l)
                    <button type="button" class="lang-add-item {{ in_array($l->id, $activeIds) ? 'd-none' : '' }}"
                            data-lang-id="{{ $l->id }}" data-search="{{ mb_strtolower($l->name . ' ' . $l->code) }}"
                            onclick="addContractLanguage({{ $l->id }})">
                        <span class="lang-code">{{ strtoupper($l->code) }}</span>
                        <span>{{ $l->name }}</span>
                    </button>
                @endforeach
                <div class="lang-add-empty text-muted small text-center py-2" id="langAddEmpty" style="display:none;">Eklenecek dil bulunamadı.</div>
            </div>
        </div>
    </div>
</div>

<div class="active-lang-banner mb-3" id="activeLangBanner">
    <i class="fas fa-language me-2"></i>
    <span><strong id="activeLangName">{{ $primaryLanguage->name ?? 'Varsayılan' }}</strong> dilinde düzenliyorsunuz.</span>
    <span class="ms-auto badge" id="activeLangTag">ANA METİN</span>
</div>

{{-- ══ BAŞLIK ══ --}}
<div class="mb-4">
    <label class="ced-label">Sözleşme Başlığı *</label>
    <input type="text" id="contractTitle" class="form-control form-control-lg @error('title') is-invalid @enderror"
           placeholder="Örn: İptal ve İade Sözleşmesi" value="{{ $baseTitle }}" style="border-radius:10px; font-size:1rem;">
    <span class="ced-hint" id="titleSystemNote" style="display:none !important;"><i class="fas fa-info-circle me-1"></i> Bu bir varsayılan sistem sözleşmesidir, ana metin başlığı değiştirilemez. (Çeviri başlıkları düzenlenebilir.)</span>
    @error('title')
        <div class="invalid-feedback d-block">{{ $message }}</div>
    @enderror
</div>

{{-- ══ DEĞİŞKEN PANELİ + EDİTÖR + ÖNİZLEME ══ --}}
<div class="mb-2 d-flex justify-content-between align-items-end flex-wrap gap-2">
    <label class="ced-label mb-0">Sözleşme İçeriği *</label>
    @error('content')<span class="text-danger small fw-bold">{{ $message }}</span>@enderror
</div>

<div class="ced-layout mb-4">

    {{-- Sol: değişkenler --}}
    <aside class="ced-vars">
        <div class="ced-vars-head"><i class="fas fa-shuffle"></i> Değişkenler</div>
        <div class="ced-vars-hint">
            <i class="fas fa-wand-magic-sparkles"></i>
            <div>
                <b>Nasıl çalışır?</b>
                Önce editörde, değişkenin ekleneceği yere tıklayarak imleci konumlandırın.
                Ardından aşağıdan bir değişkene tıklayın — değişken <u>tam olarak imlecin bulunduğu noktaya</u> eklenir.
                Sözleşme üretilirken <b>Oto</b> alanlar kayıttan doldurulur, <b>Manuel</b> alanlar üretim sırasında sorulur.
            </div>
        </div>
        <div class="ced-vars-search">
            <i class="fas fa-magnifying-glass"></i>
            <input type="text" id="cedVarSearch" placeholder="Değişken ara… (plaka, vergi, tarih)" autocomplete="off">
        </div>
        <div class="ced-vars-list" id="cedVarList">
            @foreach($mergeCatalog as $group => $fields)
                <div class="ced-var-group" data-group>
                    <div class="ced-var-group-title"><i class="fas {{ $catIcons[$group] ?? 'fa-tag' }}"></i> {{ $group }}</div>
                    @foreach($fields as $f)
                        @php $tokenDisplay = '{' . '{' . $f['token'] . '}' . '}'; @endphp
                        <button type="button" class="ced-var" data-token="{{ $f['token'] }}"
                                data-search="{{ mb_strtolower($f['label'] . ' ' . $f['token'] . ' ' . $group) }}">
                            <span class="ced-var-top">
                                <span class="ced-var-label">{{ $f['label'] }}</span>
                                <span class="ced-var-mode {{ $f['mode'] === 'manual' ? 'is-manual' : 'is-auto' }}">{{ $f['mode'] === 'manual' ? 'Manuel' : 'Oto' }}</span>
                            </span>
                            <span class="ced-var-name">{{ $tokenDisplay }}</span>
                            <span class="ced-var-add"><i class="fas fa-plus"></i></span>
                        </button>
                    @endforeach
                </div>
            @endforeach
            <div class="ced-var-empty" id="cedVarEmpty" hidden>
                <i class="fas fa-magnifying-glass-minus"></i> Eşleşen değişken yok.
            </div>
        </div>
    </aside>

    {{-- Orta: içerik editörü — düz yazı (zengin metin) veya HTML kaynağı --}}
    <div class="ced-pane ced-editor-pane" id="cedEditorPane">
        <div class="ced-pane-head">
            <span><i class="fas fa-pen-nib me-2"></i>Sözleşme Metni</span>
            <div class="ced-modes" id="cedModes">
                <button type="button" data-mode="rich" class="active"><i class="fas fa-align-left"></i> Düz Yazı</button>
                <button type="button" data-mode="html"><i class="fas fa-code"></i> HTML</button>
            </div>
        </div>

        {{-- Düz yazı modu (Quill) --}}
        <div class="ced-rich" id="cedRichWrap">
            <div id="cedQuill"></div>
        </div>

        {{-- HTML kaynak modu --}}
        <textarea id="cedEditor" spellcheck="false" hidden>{{ $baseContent }}</textarea>

        <div class="ced-editor-foot">
            <span id="cedStatTokens"><i class="fas fa-shuffle me-1"></i>0 değişken</span>
            <span id="cedStatBad" class="bad" hidden><i class="fas fa-triangle-exclamation me-1"></i>0 tanımsız</span>
            <span class="ced-foot-hint"><i class="fas fa-i-cursor me-1"></i>Değişkenler imlecin olduğu noktaya eklenir</span>
            <span class="ms-auto" id="cedStatChars">0 karakter</span>
        </div>
    </div>

    {{-- Alt: canlı önizleme --}}
    <div class="ced-pane ced-preview-pane">
        <div class="ced-pane-head">
            <span><i class="fas fa-eye me-2"></i>Canlı Önizleme <small class="ms-1">(değişkenler etiketleriyle gösterilir)</small></span>
            <button type="button" class="ced-mini" id="cedRefresh"><i class="fas fa-arrows-rotate"></i> Yenile</button>
        </div>
        <iframe id="cedFrame" title="Sözleşme önizleme"></iframe>
    </div>
</div>

{{-- Gizli gönderim alanları --}}
<input type="hidden" name="title" id="base_title" value="{{ $baseTitle }}">
<input type="hidden" name="content" id="base_content">
<div id="translationInputs">
    @foreach($activeLangs as $l)
        <input type="hidden" name="translations[{{ $l->id }}][title]" id="tr_title_{{ $l->id }}">
        <input type="hidden" name="translations[{{ $l->id }}][content]" id="tr_content_{{ $l->id }}">
    @endforeach
</div>

@push('styles')
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastr@2.1.4/build/toastr.min.css">
<style>
    .ced-label { display:block; font-size:.75rem; font-weight:700; text-transform:uppercase; color:#94a3b8; margin-bottom:.35rem; }
    .ced-hint { display:block; margin-top:.4rem; font-size:.75rem; color:#94a3b8; }

    /* ── Dil sekmeleri ── */
    .lang-tabbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:14px; }
    .lang-tab { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; border:1.5px solid #e2e8f0; background:#fff; font-size:.82rem; font-weight:700; color:#334155; cursor:pointer; transition:all .18s; }
    .lang-tab:hover { border-color:#c4b5fd; color:#6d28d9; transform:translateY(-1px); box-shadow:0 4px 10px rgba(124,58,237,.08); }
    .lang-tab.active { background:linear-gradient(135deg,#7c3aed,#6d28d9); border-color:#7c3aed; color:#fff; box-shadow:0 6px 16px rgba(124,58,237,.25); }
    .lang-tab .lang-code { font-size:.62rem; font-weight:800; background:rgba(100,116,139,.12); color:#475569; border-radius:6px; padding:2px 6px; letter-spacing:.04em; line-height:1.4; }
    .lang-tab.active .lang-code { background:rgba(255,255,255,.22); color:#fff; }
    .lang-tab .lang-dot { width:8px; height:8px; border-radius:50%; background:#cbd5e1; transition:all .2s; flex-shrink:0; }
    .lang-tab .lang-dot.filled { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18); }
    .lang-tab.active .lang-dot.filled { background:#bbf7d0; box-shadow:none; }
    .lang-tab .lang-primary-badge { font-size:.56rem; font-weight:800; background:#fbbf24; color:#7c2d12; border-radius:5px; padding:1px 6px; letter-spacing:.03em; }
    .lang-tab.active .lang-primary-badge { background:#fde68a; color:#78350f; }
    .lang-tab .lang-remove { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; font-size:.6rem; color:#94a3b8; transition:all .15s; }
    .lang-tab .lang-remove:hover { background:rgba(239,68,68,.15); color:#ef4444; }
    .lang-tab.active .lang-remove { color:rgba(255,255,255,.7); }
    .lang-tab.active .lang-remove:hover { background:rgba(255,255,255,.2); color:#fff; }

    .lang-add-wrap { position:relative; }
    .lang-add-btn { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:12px; border:1.5px dashed #c4b5fd; background:rgba(124,58,237,.05); color:#7c3aed; font-size:.82rem; font-weight:700; cursor:pointer; transition:all .18s; }
    .lang-add-btn:hover { background:rgba(124,58,237,.12); border-color:#7c3aed; }
    .lang-add-panel { position:absolute; top:calc(100% + 8px); left:0; z-index:30; width:300px; max-width:80vw; background:#fff; border:1px solid #e2e8f0; border-radius:14px; box-shadow:0 18px 40px rgba(15,23,42,.16); padding:10px; display:none; }
    .lang-add-panel.open { display:block; animation:langPanelIn .16s ease; }
    @keyframes langPanelIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
    .lang-add-search { display:flex; align-items:center; gap:8px; padding:8px 10px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; margin-bottom:8px; color:#94a3b8; }
    .lang-add-search input { border:none; outline:none; background:transparent; font-size:.85rem; width:100%; color:#0f172a; }
    .lang-add-list { max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; padding-right:2px; }
    .lang-add-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:8px 10px; border:none; background:transparent; border-radius:9px; font-size:.85rem; font-weight:600; color:#334155; cursor:pointer; transition:all .12s; }
    .lang-add-item:hover { background:rgba(124,58,237,.08); color:#6d28d9; }
    .lang-add-item .lang-code { font-size:.6rem; font-weight:800; background:rgba(100,116,139,.12); color:#475569; border-radius:6px; padding:2px 6px; letter-spacing:.04em; }
    .lang-add-list::-webkit-scrollbar { width:6px; }
    .lang-add-list::-webkit-scrollbar-thumb { background:#e2e8f0; border-radius:6px; }

    .active-lang-banner { display:flex; align-items:center; gap:.25rem; padding:.6rem .9rem; border-radius:12px; background:rgba(124,58,237,.07); color:#6d28d9; font-size:.82rem; font-weight:600; border:1px solid rgba(124,58,237,.12); }
    .active-lang-banner .badge { background:#7c3aed; color:#fff; font-size:.62rem; font-weight:800; letter-spacing:.03em; }

    /* ── Kontrat bağlamı ── */
    .ctx-pills { display:flex; flex-wrap:wrap; gap:8px; }
    .ctx-pill { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:12px; border:1.5px solid #e2e8f0; background:#fff; font-size:.85rem; font-weight:700; color:#475569; cursor:pointer; transition:all .18s; margin:0; }
    .ctx-pill:hover { border-color:#c4b5fd; color:#6d28d9; }
    .ctx-pill.active { background:linear-gradient(135deg,#7c3aed,#6d28d9); border-color:#7c3aed; color:#fff; box-shadow:0 6px 16px rgba(124,58,237,.22); }

    /* ══ EDİTÖR YERLEŞİMİ (Satış Belgesi Şablonu ile aynı düzen) ══ */
    .ced-layout {
        font-family:'Manrope', system-ui, sans-serif;
        display:grid; grid-template-columns:275px minmax(0,1fr);
        grid-template-areas:"vars editor" "preview preview"; gap:14px;
    }
    .ced-vars { grid-area:vars; height:520px; }
    .ced-editor-pane { grid-area:editor; height:520px; min-width:0; }
    .ced-preview-pane { grid-area:preview; height:640px; }
    @media (max-width:900px) {
        .ced-layout { grid-template-columns:1fr; grid-template-areas:"vars" "editor" "preview"; }
        .ced-vars { height:360px; }
        .ced-editor-pane { height:440px; }
        .ced-preview-pane { height:520px; }
    }

    /* ── Değişken rayı ── */
    .ced-vars { display:flex; flex-direction:column; background:#12101f; border-radius:16px; border:1px solid #241f3d; overflow:hidden; }
    .ced-vars-head { display:flex; align-items:center; gap:.5rem; padding:.75rem 1rem; font-size:.78rem; font-weight:800; color:#e9e6f5; border-bottom:1px solid #241f3d; }
    .ced-vars-head i { color:#a78bfa; }
    .ced-vars-hint {
        display:flex; gap:.6rem; margin:.7rem .7rem 0; padding:.65rem .7rem;
        background:rgba(167,139,250,.07); border:1px solid rgba(167,139,250,.2);
        border-radius:11px; font-size:.67rem; line-height:1.55; color:#a29cc4;
    }
    .ced-vars-hint i { color:#a78bfa; margin-top:2px; }
    .ced-vars-hint b { color:#ddd6fe; }
    .ced-vars-hint u { text-decoration-color:#a78bfa; text-underline-offset:2px; }

    .ced-vars-search { position:relative; margin:.7rem .7rem .4rem; }
    .ced-vars-search i { position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:#544d78; font-size:.7rem; }
    .ced-vars-search input {
        width:100%; background:#1c1830; border:1px solid #322b52; border-radius:10px; color:#e9e6f5;
        font-family:inherit; font-size:.74rem; font-weight:600; padding:.45rem .7rem .45rem 1.9rem;
        outline:none; transition:border-color .15s;
    }
    .ced-vars-search input:focus { border-color:#a78bfa; }
    .ced-vars-search input::placeholder { color:#544d78; }

    .ced-vars-list { flex:1; overflow-y:auto; padding:.3rem .7rem .8rem; scrollbar-width:thin; scrollbar-color:#322b52 transparent; }
    .ced-vars-list::-webkit-scrollbar { width:8px; }
    .ced-vars-list::-webkit-scrollbar-thumb { background:#322b52; border-radius:8px; }
    .ced-var-group-title {
        display:flex; align-items:center; gap:.45rem; font-size:.62rem; font-weight:800; letter-spacing:.14em;
        text-transform:uppercase; color:#6f6795; margin:.85rem 2px .35rem;
    }
    .ced-var-group-title i { color:#a78bfa; font-size:.6rem; }

    .ced-var {
        position:relative; display:block; width:100%; text-align:left; background:#1a1730; border:1px solid #2c2650;
        border-radius:10px; padding:.45rem 2rem .45rem .6rem; margin-bottom:.3rem; cursor:pointer; transition:all .13s ease;
    }
    .ced-var[hidden], .ced-var-group[hidden] { display:none; }
    .ced-var:hover { border-color:#a78bfa; background:#221c42; transform:translateX(2px); }
    .ced-var-top { display:flex; align-items:center; gap:6px; }
    .ced-var-label { font-size:.7rem; font-weight:700; color:#e9e6f5; line-height:1.25; }
    .ced-var-mode { font-size:.53rem; font-weight:800; border-radius:5px; padding:1px 5px; letter-spacing:.02em; flex-shrink:0; }
    .ced-var-mode.is-auto { background:rgba(16,185,129,.15); color:#34d399; }
    .ced-var-mode.is-manual { background:rgba(245,158,11,.16); color:#fbbf24; }
    .ced-var-name { display:block; font-family:'JetBrains Mono', monospace; font-size:.65rem; font-weight:600; color:#a78bfa; margin-top:2px; }
    .ced-var-add {
        position:absolute; right:.5rem; top:50%; transform:translateY(-50%); width:20px; height:20px;
        display:flex; align-items:center; justify-content:center; background:#241f3d; color:#6f6795;
        border-radius:6px; font-size:.58rem; transition:all .13s;
    }
    .ced-var:hover .ced-var-add { background:#7c3aed; color:#fff; }
    .ced-var.inserted { border-color:#a78bfa; }
    .ced-var.inserted .ced-var-add { background:#7c3aed; color:#fff; }
    .ced-var-empty { text-align:center; color:#544d78; font-size:.72rem; font-weight:700; padding:1.4rem 0; }

    /* ── Editör + önizleme panelleri ── */
    .ced-pane { display:flex; flex-direction:column; border-radius:16px; overflow:hidden; border:1px solid #e8edf4; background:#fff; }
    .ced-pane-head {
        display:flex; align-items:center; justify-content:space-between; gap:.5rem;
        padding:.7rem 1rem; border-bottom:1px solid #eef2f7; font-size:.78rem; font-weight:800; color:#334155;
    }
    .ced-pane-head small { font-weight:600; color:#94a3b8; }
    .ced-editor-pane .ced-pane-head { background:#12101f; color:#e9e6f5; border-bottom-color:#241f3d; }
    .ced-editor-pane .ced-pane-head small { color:#6f6795; }
    .ced-editor-pane .ced-pane-head i { color:#a78bfa; }

    /* Mod anahtarı (Düz Yazı / HTML) */
    .ced-modes { display:flex; gap:3px; background:#1c1830; border:1px solid #322b52; border-radius:10px; padding:3px; }
    .ced-modes button {
        display:inline-flex; align-items:center; gap:.35rem; border:none; background:none; color:#8c85b0;
        font-family:inherit; font-size:.68rem; font-weight:800; padding:.28rem .7rem; border-radius:8px;
        cursor:pointer; transition:all .15s;
    }
    .ced-modes button:hover { color:#ddd6fe; }
    .ced-modes button.active { background:linear-gradient(135deg,#7c3aed,#6d28d9); color:#fff; box-shadow:0 4px 10px -4px rgba(124,58,237,.7); }
    .ced-editor-pane .ced-modes button i { color:inherit; }

    /* Düz yazı modu */
    .ced-rich { flex:1; min-height:0; display:flex; flex-direction:column; background:#fff; }
    .ced-rich[hidden] { display:none; }
    .ced-rich .ql-toolbar.ql-snow { border:none; border-bottom:1px solid #e8edf4; background:#f8fafc; flex:none; }
    .ced-rich .ql-container.ql-snow { border:none; flex:1; min-height:0; overflow:hidden; }
    .ced-rich .ql-editor { overflow-y:auto; font-size:.95rem; line-height:1.7; color:#334155; }
    .ced-rich .ql-editor h3 { font-size:1.02rem; font-weight:800; color:#0f172a; }
    .ced-rich .ql-editor.ql-blank::before { color:#b6bfd0; font-style:normal; }

    /* HTML kaynak modu */
    #cedEditor {
        flex:1; width:100%; border:none; resize:none; outline:none; background:#0d0b17; color:#dcd8f0;
        font-family:'JetBrains Mono', monospace; font-size:.8rem; line-height:1.7; padding:16px 18px; tab-size:2;
        white-space:pre-wrap; overflow-wrap:anywhere; overflow-x:hidden; overflow-y:auto;
    }
    #cedEditor[hidden] { display:none; }

    .ced-editor-foot {
        display:flex; align-items:center; gap:.9rem; padding:.45rem 1rem; background:#12101f;
        border-top:1px solid #241f3d; font-size:.66rem; font-weight:700; color:#6f6795;
    }
    .ced-editor-foot .bad { color:#fca5a5; }
    .ced-editor-foot .ced-foot-hint { color:#544d78; }
    @media (max-width:640px) { .ced-editor-foot .ced-foot-hint { display:none; } }

    .ced-mini {
        display:inline-flex; align-items:center; gap:.35rem; border:1px solid #e2e8f0; background:#fff; color:#7c3aed;
        font-size:.7rem; font-weight:800; padding:.3rem .7rem; border-radius:8px; cursor:pointer;
        transition:all .15s ease; font-family:inherit;
    }
    .ced-mini:hover { background:#f5f3ff; border-color:#c4b5fd; }

    #cedFrame { flex:1; width:100%; border:none; background:#eef1f7; }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/toastr@2.1.4/toastr.min.js"></script>
<script>
(function () {
    // ─── Durum ───
    const LANG_STATE = @json($langState);
    const IS_SYSTEM  = @json($isSystem);
    const TOKENS     = @json($tokenMap);
    const ALL_LANGS  = @json($otherLanguages->map(fn ($l) => ['id' => (string) $l->id, 'code' => strtoupper($l->code), 'name' => $l->name])->values());
    const LANG_BY_ID = {};
    ALL_LANGS.forEach(l => LANG_BY_ID[l.id] = l);

    let activeLang = 'base';

    const editor            = document.getElementById('cedEditor');
    const frame             = document.getElementById('cedFrame');
    const titleInput        = document.getElementById('contractTitle');
    const titleSystemNote   = document.getElementById('titleSystemNote');
    const activeLangName    = document.getElementById('activeLangName');
    const activeLangTag     = document.getElementById('activeLangTag');
    const tabbar            = document.getElementById('langTabbar');
    const addWrap           = document.getElementById('langAddWrap');
    const translationInputs = document.getElementById('translationInputs');

    const TOKEN_RE = /\{\{\s*([a-z0-9_.]+)\s*\}\}/gi;

    // ─── İki mod: düz yazı (Quill) ve HTML kaynağı ───
    // İçerik tek yerde tutulmaz; aktif moddaki editör kaynaktır ve mod
    // değişince diğerine aktarılır.
    const richWrap = document.getElementById('cedRichWrap');
    const modeBar  = document.getElementById('cedModes');
    let mode = 'rich';

    const quill = new Quill('#cedQuill', {
        theme: 'snow',
        placeholder: 'Sözleşme metnini buraya yazın veya yapıştırın…',
        modules: {
            toolbar: [
                [{ header: [1, 2, 3, false] }],
                ['bold', 'italic', 'underline', 'strike'],
                [{ list: 'ordered' }, { list: 'bullet' }],
                [{ color: [] }, { background: [] }],
                [{ align: [] }],
                ['link', 'blockquote', 'clean'],
            ],
        },
    });

    const getContent = () => (mode === 'html' ? editor.value : quill.root.innerHTML);

    function setContent(html) {
        editor.value = html || '';
        quill.root.innerHTML = html || '';
    }

    // Quill tablo/gömülü stil gibi yapıları tanımaz; düz yazıya geçerken
    // bunların sadeleşeceği önceden söylenir.
    const RICH_UNSAFE = /<\s*(table|style|script|iframe)\b/i;

    /** Yalnızca görünürlüğü değiştirir; içeriğe dokunmaz. */
    function applyMode(next) {
        mode = next;
        const isHtml = mode === 'html';
        editor.hidden = !isHtml;
        richWrap.hidden = isHtml;
        modeBar.querySelectorAll('button').forEach(b => b.classList.toggle('active', b.dataset.mode === mode));
    }

    /** Kullanıcı mod değiştirdiğinde: aktif içeriği diğer moda taşıyarak geçer. */
    function setMode(next) {
        if (next === mode) return;

        if (next === 'rich' && RICH_UNSAFE.test(editor.value)) {
            const ok = confirm(
                'Bu sözleşmede tablo veya özel stil bulunuyor. Düz yazı modunda düzenlerseniz '
                + 'bu bölümler sadeleşebilir.\n\nYine de düz yazı moduna geçilsin mi?'
            );
            if (!ok) return;
        }

        setContent(getContent());
        applyMode(next);
        setTimeout(() => (next === 'html' ? editor.focus() : quill.focus()), 20);
        refreshPreview();
    }

    modeBar.addEventListener('click', e => {
        const b = e.target.closest('button[data-mode]');
        if (b) setMode(b.dataset.mode);
    });

    // ─── Canlı önizleme ───
    // Sunucuya gitmeden çalışır: değişken alanları etiketleriyle rozet olarak
    // gösterilir, tanımsız olanlar kırmızı işaretlenir.
    const PREVIEW_CSS = `
        *{box-sizing:border-box}
        body{margin:0;padding:34px 20px;background:#eef1f7;font-family:'Segoe UI',system-ui,sans-serif;color:#334155}
        .sheet{max-width:820px;margin:0 auto;background:#fff;border-radius:14px;padding:44px 52px;
               box-shadow:0 18px 46px rgba(15,23,42,.13);line-height:1.72;font-size:15px}
        .sheet h1.doc{margin:0 0 30px;text-align:center;font-size:1.42rem;font-weight:800;color:#0f172a;letter-spacing:-.01em}
        .sheet h3{color:#0f172a;font-size:1.02rem;margin:26px 0 9px;font-weight:800}
        .sheet table{width:100%;border-collapse:collapse}
        .sheet img{max-width:100%}
        .tk{display:inline-block;border-radius:6px;padding:1px 7px;font-size:.86em;font-weight:700;
            background:#ede9fe;color:#6d28d9;border:1px solid #ddd6fe}
        .tk.man{background:#fef3c7;color:#b45309;border-color:#fde68a}
        .tk.bad{background:#fee2e2;color:#b91c1c;border-color:#fecaca;font-family:monospace}
        .empty{max-width:820px;margin:0 auto;text-align:center;color:#94a3b8;font-weight:700;padding:70px 20px}
    `;

    function esc(s) {
        return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    }

    function markTokens(html) {
        return String(html || '').replace(TOKEN_RE, (raw, token) => {
            const meta = TOKENS[token.toLowerCase()];
            if (!meta) return '<span class="tk bad" title="Tanımsız değişken — üretimde boş kalır">' + esc(raw) + '</span>';
            const cls = meta.mode === 'manual' ? 'tk man' : 'tk';
            return '<span class="' + cls + '" title="' + esc(raw) + (meta.mode === 'manual' ? ' · üretimde sorulur' : ' · otomatik doldurulur') + '">' + esc(meta.label) + '</span>';
        });
    }

    function tokenStats(html) {
        let total = 0, bad = 0;
        String(html || '').replace(TOKEN_RE, (raw, token) => {
            total++;
            if (!TOKENS[token.toLowerCase()]) bad++;
            return raw;
        });
        return { total, bad };
    }

    function refreshPreview() {
        const html = getContent();
        const body = html.trim()
            ? '<div class="sheet">' + (titleInput.value ? '<h1 class="doc">' + esc(titleInput.value) + '</h1>' : '') + markTokens(html) + '</div>'
            : '<div class="empty">İçerik boş — soldaki değişkenleri ve HTML metnini ekledikçe burada görünür.</div>';
        frame.srcdoc = '<!doctype html><html lang="tr"><head><meta charset="utf-8"><style>' + PREVIEW_CSS + '</style></head><body>' + body + '</body></html>';

        const st = tokenStats(html);
        document.getElementById('cedStatTokens').innerHTML = '<i class="fas fa-shuffle me-1"></i>' + st.total + ' değişken';
        const badEl = document.getElementById('cedStatBad');
        badEl.hidden = st.bad === 0;
        badEl.innerHTML = '<i class="fas fa-triangle-exclamation me-1"></i>' + st.bad + ' tanımsız';
        document.getElementById('cedStatChars').textContent = html.length.toLocaleString('tr-TR') + ' karakter';
    }

    let timer = null;
    const schedulePreview = (ms) => { clearTimeout(timer); timer = setTimeout(refreshPreview, ms || 600); };

    editor.addEventListener('input', () => { schedulePreview(600); refreshDots(); });
    quill.on('text-change', (delta, old, source) => {
        if (source !== 'user') return;
        schedulePreview(600);
        refreshDots();
    });
    titleInput.addEventListener('input', () => schedulePreview(400));
    document.getElementById('cedRefresh').addEventListener('click', refreshPreview);

    // Tab tuşu odağı değiştirmesin, girinti eklesin
    editor.addEventListener('keydown', (e) => {
        if (e.key !== 'Tab') return;
        e.preventDefault();
        const s = editor.selectionStart, en = editor.selectionEnd;
        editor.setRangeText('  ', s, en, 'end');
    });

    // ─── Değişken ekleme + arama ───
    let savedRange = null; // Quill odağı kaybolunca imleç konumu burada tutulur
    quill.on('selection-change', range => { if (range) savedRange = range; });

    document.querySelectorAll('.ced-var').forEach(btn => {
        btn.addEventListener('click', () => {
            const snippet = '{' + '{' + btn.dataset.token + '}' + '}';

            if (mode === 'html') {
                editor.setRangeText(snippet, editor.selectionStart, editor.selectionEnd, 'end');
                editor.focus();
            } else {
                const range = quill.getSelection() || savedRange || { index: quill.getLength() - 1, length: 0 };
                quill.deleteText(range.index, range.length, 'user');
                quill.insertText(range.index, snippet, 'user');
                savedRange = { index: range.index + snippet.length, length: 0 };
                quill.setSelection(savedRange.index, 0);
            }

            btn.classList.add('inserted');
            setTimeout(() => btn.classList.remove('inserted'), 700);
            schedulePreview(350);
        });
    });

    const varSearch = document.getElementById('cedVarSearch');
    varSearch.addEventListener('input', () => {
        const q = varSearch.value.trim().toLocaleLowerCase('tr');
        let any = false;
        document.querySelectorAll('.ced-var').forEach(el => {
            const hit = !q || el.dataset.search.includes(q);
            el.hidden = !hit;
            if (hit) any = true;
        });
        document.querySelectorAll('#cedVarList [data-group]').forEach(g => {
            g.hidden = ![...g.querySelectorAll('.ced-var')].some(el => !el.hidden);
        });
        document.getElementById('cedVarEmpty').hidden = any;
    });

    // ─── Dil durumu ───
    function isContentEmpty(html) {
        const d = document.createElement('div');
        d.innerHTML = html || '';
        return d.textContent.trim() === '' && d.querySelectorAll('img, iframe').length === 0;
    }

    function refreshDots() {
        LANG_STATE[activeLang] = { title: titleInput.value, content: getContent() };
        document.querySelectorAll('.lang-dot').forEach(dot => {
            const st = LANG_STATE[dot.getAttribute('data-dot')];
            dot.classList.toggle('filled', !!(st && !isContentEmpty(st.content)));
        });
    }

    const saveActiveState = () => refreshDots();

    function loadState(lang) {
        const st = LANG_STATE[lang] || { title: '', content: '' };
        titleInput.value = st.title || '';
        setContent(st.content || '');

        // Tablo/stil içeren metinler kaynak modunda açılır ki hiçbir şey kaybolmasın
        applyMode(RICH_UNSAFE.test(st.content || '') ? 'html' : 'rich');

        const lockTitle = IS_SYSTEM && lang === 'base';
        titleInput.readOnly = lockTitle;
        titleInput.style.backgroundColor = lockTitle ? '#e2e8f0' : '';
        titleInput.style.cursor = lockTitle ? 'not-allowed' : '';
        titleSystemNote.style.setProperty('display', lockTitle ? 'block' : 'none', 'important');
        refreshPreview();
    }

    function activateTab(lang) {
        document.querySelectorAll('.lang-tab').forEach(t => t.classList.toggle('active', t.getAttribute('data-lang') === lang));
        if (lang === 'base') {
            activeLangName.textContent = document.querySelector('.lang-tab[data-lang="base"] .lang-name').textContent;
            activeLangTag.textContent = 'ANA METİN';
        } else {
            const l = LANG_BY_ID[lang];
            activeLangName.textContent = l ? l.name : lang;
            activeLangTag.textContent = l ? l.code : 'ÇEVİRİ';
        }
    }

    function switchTo(lang) {
        if (lang === activeLang) return;
        saveActiveState();
        activeLang = lang;
        loadState(lang);
        activateTab(lang);
    }

    tabbar.addEventListener('click', function (e) {
        const tab = e.target.closest('.lang-tab');
        if (!tab || e.target.closest('.lang-remove')) return;
        switchTo(tab.getAttribute('data-lang'));
    });

    // ─── Dil ekle / kaldır ───
    window.addContractLanguage = function (id) {
        id = String(id);
        const lang = LANG_BY_ID[id];
        if (!lang) return;

        if (!document.querySelector(`.lang-tab[data-lang="${id}"]`)) {
            LANG_STATE[id] = LANG_STATE[id] || { title: '', content: '' };

            const tab = document.createElement('button');
            tab.type = 'button';
            tab.className = 'lang-tab';
            tab.setAttribute('data-lang', id);
            tab.innerHTML = `<span class="lang-code">${lang.code}</span>`
                + `<span class="lang-name">${lang.name}</span>`
                + `<span class="lang-dot" data-dot="${id}"></span>`
                + `<span class="lang-remove" title="Bu çeviriyi kaldır" onclick="event.stopPropagation(); removeContractLanguage(${id});"><i class="fas fa-times"></i></span>`;
            tabbar.insertBefore(tab, addWrap);

            const ti = document.createElement('input');
            ti.type = 'hidden'; ti.name = `translations[${id}][title]`; ti.id = `tr_title_${id}`;
            const ci = document.createElement('input');
            ci.type = 'hidden'; ci.name = `translations[${id}][content]`; ci.id = `tr_content_${id}`;
            translationInputs.appendChild(ti);
            translationInputs.appendChild(ci);

            const item = document.querySelector(`.lang-add-item[data-lang-id="${id}"]`);
            if (item) item.classList.add('d-none');
        }

        closeAddPanel();
        switchTo(id);
        refreshDots();
    };

    window.removeContractLanguage = function (id) {
        id = String(id);
        const st = LANG_STATE[id];
        const hasContent = st && (!isContentEmpty(st.content) || (st.title && st.title.trim() !== ''));
        if (hasContent && !confirm('Bu dildeki çeviri içeriği kaldırılacak. Devam edilsin mi?')) return;

        if (activeLang === id) switchTo('base');
        delete LANG_STATE[id];

        const tab = document.querySelector(`.lang-tab[data-lang="${id}"]`);
        if (tab) tab.remove();
        ['tr_title_' + id, 'tr_content_' + id].forEach(eid => { const el = document.getElementById(eid); if (el) el.remove(); });

        const item = document.querySelector(`.lang-add-item[data-lang-id="${id}"]`);
        if (item) item.classList.remove('d-none');
        filterAddList();
    };

    // ─── Dil ekle paneli ───
    const addBtn    = document.getElementById('langAddBtn');
    const addPanel  = document.getElementById('langAddPanel');
    const addSearch = document.getElementById('langAddSearch');
    const addEmpty  = document.getElementById('langAddEmpty');

    function openAddPanel() { addPanel.classList.add('open'); addSearch.value = ''; filterAddList(); setTimeout(() => addSearch.focus(), 30); }
    function closeAddPanel() { addPanel.classList.remove('open'); }
    function filterAddList() {
        const q = (addSearch.value || '').toLowerCase().trim();
        let visible = 0;
        document.querySelectorAll('.lang-add-item').forEach(item => {
            if (item.classList.contains('d-none')) return;
            const match = item.getAttribute('data-search').includes(q);
            item.style.display = match ? '' : 'none';
            if (match) visible++;
        });
        addEmpty.style.display = visible === 0 ? 'block' : 'none';
    }

    addBtn.addEventListener('click', e => { e.stopPropagation(); addPanel.classList.contains('open') ? closeAddPanel() : openAddPanel(); });
    addSearch.addEventListener('input', filterAddList);
    addSearch.addEventListener('click', e => e.stopPropagation());
    document.addEventListener('click', e => { if (!addWrap.contains(e.target)) closeAddPanel(); });

    // ─── Kontrat bağlamı (pill radio) ───
    document.querySelectorAll('#contractContextPills .ctx-pill').forEach(pill => {
        pill.addEventListener('click', function () {
            document.querySelectorAll('#contractContextPills .ctx-pill').forEach(p => p.classList.remove('active'));
            pill.classList.add('active');
            const radio = pill.querySelector('input[type=radio]');
            if (radio) radio.checked = true;
        });
    });

    // ─── Gönderim ───
    document.getElementById('contractForm').addEventListener('submit', function (e) {
        saveActiveState();
        const base = LANG_STATE['base'] || { title: '', content: '' };

        if (!base.title || base.title.trim() === '') {
            e.preventDefault();
            if (activeLang !== 'base') switchTo('base');
            (typeof toastr !== 'undefined') ? toastr.error('Lütfen sözleşme başlığını girin.') : alert('Lütfen sözleşme başlığını girin.');
            return false;
        }
        if (isContentEmpty(base.content)) {
            e.preventDefault();
            if (activeLang !== 'base') switchTo('base');
            (typeof toastr !== 'undefined') ? toastr.error('Lütfen ana metin içeriğini doldurun.') : alert('Lütfen ana metin içeriğini doldurun.');
            return false;
        }

        document.getElementById('base_title').value = base.title;
        document.getElementById('base_content').value = base.content;

        Object.keys(LANG_STATE).forEach(function (id) {
            if (id === 'base') return;
            const st = LANG_STATE[id] || { title: '', content: '' };
            const t = document.getElementById('tr_title_' + id);
            const c = document.getElementById('tr_content_' + id);
            if (t) t.value = st.title || '';
            if (c) c.value = isContentEmpty(st.content) ? '' : st.content;
        });
    });

    // ─── İlk yükleme ───
    loadState('base');
    activateTab('base');
    refreshDots();
})();
</script>
@endpush