@php
    /**
     * Çok dilli sözleşme editörü.
     * 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();
@endphp

{{-- Kontrat Bağlamı --}}
<div class="mb-4">
    <label class="form-label small fw-bold text-muted mb-1" style="font-size:0.75rem; text-transform:uppercase;">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 {{ ['general' => 'fa-file-lines', 'customer' => 'fa-user', 'guide' => 'fa-user-tie'][$ck] ?? 'fa-file' }}"></i>
                <span>{{ $cl }}</span>
            </label>
        @endforeach
    </div>
    <span class="text-muted small mt-1 d-block"><i class="fas fa-circle-info me-1"></i> <strong>Rehber / Kaynak</strong> bağlamındaki şablonlar operasyon ekranında rehber atamalarında listelenir ve birleştirme alanlarıyla otomatik doldurulur.</span>
</div>

{{-- Dil Sekmeleri --}}
<div class="mb-2 d-flex justify-content-between align-items-end flex-wrap gap-2">
    <label class="form-label small fw-bold text-muted mb-0" style="font-size:0.75rem; text-transform:uppercase;">Diller</label>
    <span class="text-muted" style="font-size:0.72rem;"><i class="fas fa-circle text-success me-1" style="font-size:0.5rem; vertical-align:middle;"></i> İçerik girilmiş diller yeşil nokta ile işaretlenir.</span>
</div>

<div class="lang-tabbar" id="langTabbar">
    {{-- Ana metin (birincil dil) --}}
    <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>

    {{-- İçerik girilmiş çeviri dilleri --}}
    @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

    {{-- Dil Ekle --}}
    <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>

{{-- Aktif dil bilgisi --}}
<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şlık --}}
<div class="mb-4">
    <label class="form-label small fw-bold text-muted mb-1" style="font-size:0.75rem; text-transform:uppercase;">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="text-muted small mt-1 d-block" 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>

{{-- İçerik Editörü --}}
<div class="mb-4">
    <div class="d-flex justify-content-between align-items-center mb-2">
        <label class="form-label small fw-bold text-muted mb-0" style="font-size:0.75rem; text-transform:uppercase;">Sözleşme İçeriği *</label>
        <div class="d-flex gap-2">
            <div class="mf-wrap" id="mergeFieldWrap">
                <button type="button" class="btn btn-xs btn-outline-info py-1 px-2 fw-bold" id="mergeFieldBtn" style="font-size: 0.75rem; border-radius: 6px;">
                    <i class="fas fa-wand-magic-sparkles me-1"></i> Alan Ekle
                </button>
                <div class="mf-panel" id="mergeFieldPanel">
                    <div class="mf-head"><i class="fas fa-wand-magic-sparkles me-1"></i> Birleştirme Alanı Ekle</div>
                    <div class="mf-hint">İmleç konumuna otomatik doldurulacak bir alan ekler.</div>
                    @foreach($mergeCatalog as $group => $fields)
                        <div class="mf-group-label">{{ $group }}</div>
                        @foreach($fields as $f)
                            @php $tokenDisplay = '{{' . $f['token'] . '}}'; @endphp
                            <button type="button" class="mf-item" data-token="{{ $f['token'] }}">
                                <span class="mf-item-label">{{ $f['label'] }}</span>
                                <span class="mf-item-token">{{ $tokenDisplay }}</span>
                                <span class="mf-mode mf-mode-{{ $f['mode'] }}">{{ $f['mode'] === 'manual' ? 'Manuel' : 'Oto' }}</span>
                            </button>
                        @endforeach
                    @endforeach
                </div>
            </div>
            <button type="button" class="btn btn-xs btn-outline-secondary py-1 px-2 fw-bold" id="previewBtn" style="font-size: 0.75rem; border-radius: 6px;">
                <i class="fas fa-eye me-1"></i> Ön İzleme
            </button>
            <button type="button" class="btn btn-xs btn-outline-primary py-1 px-2 fw-bold" id="toggleModeBtn" style="font-size: 0.75rem; border-radius: 6px;">
                <i class="fas fa-code me-1"></i> HTML Düzenle
            </button>
        </div>
    </div>
    <div class="editor-container-wrapper @error('content') is-invalid-container @enderror" style="border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden; position: relative;">
        <div id="quillEditor" style="height: 380px; font-size: 1rem; border: none !important;"></div>
    </div>
    @error('content')
        <div class="text-danger small mt-1">{{ $message }}</div>
    @enderror
</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')
<!-- CodeMirror styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/lib/codemirror.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/theme/dracula.min.css">
<!-- Toastr styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastr@2.1.4/build/toastr.min.css">
<style>
    .editor-container-wrapper .ql-toolbar.ql-snow { border: none; border-bottom: 1px solid #cbd5e1; background: #f8fafc; }
    .editor-container-wrapper .ql-container.ql-snow { border: none; }
    .is-invalid-container { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); }
    .CodeMirror { font-family: 'Fira Code', 'Courier New', Courier, monospace; font-size: 14px; height: 380px !important; border-radius: 0 0 10px 10px; }

    /* ── 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; }

    /* ── Dil Ekle ── */
    .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); }

    /* ── Alan Ekle (merge field) ── */
    .mf-wrap { position:relative; }
    .mf-panel { position:absolute; top:calc(100% + 8px); right:0; z-index:40; width:320px; max-width:88vw; max-height:360px; overflow-y:auto; background:#fff; border:1px solid #e2e8f0; border-radius:14px; box-shadow:0 18px 40px rgba(15,23,42,.18); padding:12px; display:none; }
    .mf-panel.open { display:block; animation: langPanelIn .16s ease; }
    .mf-head { font-size:.8rem; font-weight:800; color:#0f172a; margin-bottom:2px; }
    .mf-hint { font-size:.7rem; color:#94a3b8; margin-bottom:8px; }
    .mf-group-label { font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#94a3b8; margin:8px 4px 4px; }
    .mf-item { display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:7px 9px; border:none; background:transparent; border-radius:9px; cursor:pointer; transition:all .12s; }
    .mf-item:hover { background:rgba(14,165,233,.09); }
    .mf-item-label { font-size:.82rem; font-weight:600; color:#334155; flex-shrink:0; }
    .mf-item-token { font-size:.68rem; font-family:monospace; color:#0ea5e9; background:rgba(14,165,233,.1); border-radius:6px; padding:2px 6px; margin-left:auto; white-space:nowrap; }
    .mf-mode { font-size:.56rem; font-weight:800; border-radius:5px; padding:2px 5px; }
    .mf-mode-auto { background:rgba(16,185,129,.14); color:#059669; }
    .mf-mode-manual { background:rgba(245,158,11,.16); color:#d97706; }
</style>
@endpush

@push('scripts')
<!-- CodeMirror -->
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/lib/codemirror.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/xml/xml.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/javascript/javascript.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/css/css.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/htmlmixed/htmlmixed.min.js"></script>
<!-- Toastr -->
<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);
    // Tüm çeviri dilleri (Dil Ekle menüsü + dinamik sekme için)
    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';

    // ─── Quill (layout'tan global) ───
    const quill = new Quill('#quillEditor', {
        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', 'clean']
            ]
        }
    });

    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');

    // ─── HTML modu (CodeMirror) ───
    let isHtmlMode = false;
    let codeEditor = null;
    const toggleModeBtn = document.getElementById('toggleModeBtn');
    const quillEditor = document.getElementById('quillEditor');
    const editorWrapper = quillEditor.parentNode;

    const htmlTextarea = document.createElement('textarea');
    htmlTextarea.id = 'htmlTextarea';
    htmlTextarea.className = 'form-control';
    htmlTextarea.style.display = 'none';
    editorWrapper.appendChild(htmlTextarea);

    function getEditorHtml() {
        if (isHtmlMode) return codeEditor ? codeEditor.getValue() : htmlTextarea.value;
        return quill.root.innerHTML;
    }
    function setEditorHtml(html) {
        quill.root.innerHTML = html || '';
        if (isHtmlMode) { codeEditor ? codeEditor.setValue(html || '') : (htmlTextarea.value = html || ''); }
    }
    function isContentEmpty(html) {
        const d = document.createElement('div');
        d.innerHTML = html || '';
        return d.textContent.trim() === '' && d.querySelectorAll('img, iframe').length === 0;
    }

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

    function saveActiveState() {
        LANG_STATE[activeLang] = { title: titleInput.value, content: getEditorHtml() };
        refreshDots();
    }

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

        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');
    }

    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;
        if (isHtmlMode) toggleModeBtn.click(); // önce zengin metne dön
        saveActiveState();
        activeLang = lang;
        loadState(lang);
        activateTab(lang);
    }

    // Sekme tıklama (delege)
    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: '' };

            // Sekme oluştur
            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);

            // Gizli alanlar
            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);

            // Menüden gizle
            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; // zaten ekli
            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', function (e) { e.stopPropagation(); addPanel.classList.contains('open') ? closeAddPanel() : openAddPanel(); });
    addSearch.addEventListener('input', filterAddList);
    addSearch.addEventListener('click', e => e.stopPropagation());
    document.addEventListener('click', function (e) { if (!addWrap.contains(e.target)) closeAddPanel(); });

    // ─── HTML <-> Zengin Metin ───
    toggleModeBtn.addEventListener('click', function () {
        if (!isHtmlMode) {
            const html = quill.root.innerHTML;
            htmlTextarea.value = html;
            quillEditor.style.display = 'none';
            editorWrapper.querySelector('.ql-toolbar').style.display = 'none';
            if (!codeEditor) {
                try {
                    codeEditor = CodeMirror.fromTextArea(htmlTextarea, { mode: 'text/html', theme: 'dracula', lineNumbers: true, tabSize: 2, lineWrapping: true });
                    codeEditor.setSize('100%', '380px');
                } catch (e) { codeEditor = null; htmlTextarea.style.display = 'block'; htmlTextarea.style.height = '380px'; }
            } else {
                codeEditor.setValue(html);
                codeEditor.getWrapperElement().style.display = 'block';
                setTimeout(() => codeEditor.refresh(), 10);
            }
            toggleModeBtn.innerHTML = '<i class="fas fa-edit me-1"></i> Metin Düzenle';
            toggleModeBtn.classList.replace('btn-outline-primary', 'btn-outline-success');
            isHtmlMode = true;
        } else {
            const html = codeEditor ? codeEditor.getValue() : htmlTextarea.value;
            quill.root.innerHTML = html;
            if (codeEditor && codeEditor.getWrapperElement) codeEditor.getWrapperElement().style.display = 'none';
            else htmlTextarea.style.display = 'none';
            quillEditor.style.display = 'block';
            editorWrapper.querySelector('.ql-toolbar').style.display = 'block';
            toggleModeBtn.innerHTML = '<i class="fas fa-code me-1"></i> HTML Düzenle';
            toggleModeBtn.classList.replace('btn-outline-success', 'btn-outline-primary');
            isHtmlMode = false;
        }
    });

    // ─── Ön izleme ───
    const previewBtn = document.getElementById('previewBtn');
    const previewModalEl = document.getElementById('previewModal');
    const previewModal = previewModalEl ? new bootstrap.Modal(previewModalEl) : null;
    previewBtn.addEventListener('click', function () {
        if (!previewModal) return;
        document.getElementById('modalTitle').textContent = titleInput.value || 'Sözleşme';
        const logoPreview = document.getElementById('logoPreview');
        const modalLogoWrapper = document.getElementById('modalLogoWrapper');
        const modalLogo = document.getElementById('modalLogo');
        if (modalLogoWrapper && modalLogo && logoPreview && logoPreview.style.display !== 'none' && logoPreview.src) {
            modalLogo.src = logoPreview.src; modalLogoWrapper.style.display = 'block';
        } else if (modalLogoWrapper) { modalLogoWrapper.style.display = 'none'; }
        document.getElementById('modalContent').innerHTML = getEditorHtml() || '<p class="text-muted text-center">İçerik boş.</p>';
        previewModal.show();
    });

    // ─── Gönderim ───
    const form = document.getElementById('contractForm');
    form.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 (Türkçe) 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;
        });
    });

    // ─── Kontrat bağlamı (pill radio) ───
    document.querySelectorAll('#contractContextPills .ctx-pill').forEach(function (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;
        });
    });

    // ─── Alan Ekle (merge field) ───
    const mfBtn = document.getElementById('mergeFieldBtn');
    const mfPanel = document.getElementById('mergeFieldPanel');
    const mfWrap = document.getElementById('mergeFieldWrap');

    function insertToken(token) {
        const snippet = '{' + '{' + token + '}' + '}'; // parcali yazim (Blade echo yakalamasin diye)
        if (isHtmlMode && codeEditor) {
            codeEditor.replaceSelection(snippet);
            codeEditor.focus();
            return;
        }
        const range = quill.getSelection(true) || { index: quill.getLength(), length: 0 };
        quill.insertText(range.index, snippet, 'user');
        quill.setSelection(range.index + snippet.length, 0);
        quill.focus();
    }

    if (mfBtn) {
        mfBtn.addEventListener('click', function (e) {
            e.stopPropagation();
            mfPanel.classList.toggle('open');
        });
        mfPanel.querySelectorAll('.mf-item').forEach(function (item) {
            item.addEventListener('click', function () {
                insertToken(item.getAttribute('data-token'));
                mfPanel.classList.remove('open');
            });
        });
        document.addEventListener('click', function (e) { if (!mfWrap.contains(e.target)) mfPanel.classList.remove('open'); });
    }

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