@extends('agency.layouts.app')

@section('title', 'Fatura Şablonu')

@section('content')
<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">

@php
    // Değişkenleri gruplara ayır (panelde başlıklarla listelenir)
    $tokenGroups = [
        'Fatura' => ['icon' => 'fa-file-invoice', 'items' => []],
        'Firma' => ['icon' => 'fa-building', 'items' => []],
        'Müşteri' => ['icon' => 'fa-user', 'items' => []],
        'Tutarlar' => ['icon' => 'fa-coins', 'items' => []],
        'Diğer' => ['icon' => 'fa-ellipsis', 'items' => []],
    ];
    foreach ($tokens as $token => $desc) {
        $group = str_starts_with($token, 'fatura_') ? 'Fatura'
            : (str_starts_with($token, 'firma_') || $token === 'banka_hesaplari' ? 'Firma'
            : (str_starts_with($token, 'musteri_') ? 'Müşteri'
            : (in_array($token, ['kalemler', 'ara_toplam', 'indirim_toplam', 'kdv_toplam', 'genel_toplam', 'para_birimi'], true) ? 'Tutarlar' : 'Diğer')));
        $tokenGroups[$group]['items'][$token] = $desc;
    }
@endphp

<div class="container-fluid py-4 itpl-page">

    <!-- Başlık -->
    <div class="d-flex align-items-center flex-wrap gap-3 mb-4">
        <a href="{{ route('agency.settings') }}" class="itpl-back" title="Ayarlara Dön"><i class="fas fa-arrow-left"></i></a>
        <div>
            <div class="itpl-kicker">AYARLAR · FATURA</div>
            <h1 class="itpl-title mb-0">Fatura Şablonu</h1>
        </div>
        <div class="ms-auto d-flex gap-2 flex-wrap">
            <button type="button" class="itpl-btn numrule" id="itplNumRuleBtn" title="Fatura numarası kuralını düzenle">
                <i class="fas fa-hashtag"></i>
                <span class="d-none d-md-inline">Fatura No Kuralı:</span>
                <code id="itplNumExample">{{ $numberExample }}</code>
            </button>
            <button type="button" class="itpl-btn ghost" id="itplReset" title="Varsayılan şablona dön">
                <i class="fas fa-rotate-left"></i> Varsayılana Dön
            </button>
            <button type="button" class="itpl-btn solid" id="itplSave">
                <i class="fas fa-floppy-disk"></i> Şablonu Kaydet
            </button>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success" style="border-radius:12px">{{ session('success') }}</div>
    @endif

    <!-- Değişken paneli + Editör + Önizleme -->
    <div class="itpl-layout">

        <!-- Sol: Değişkenler -->
        <aside class="itpl-vars">
            <div class="itpl-vars-head">
                <i class="fas fa-shuffle"></i> Değişkenler
            </div>
            <div class="itpl-vars-hint">
                <i class="fas fa-wand-magic-sparkles"></i>
                <div>
                    <b>Nasıl çalışır?</b>
                    Önce ortadaki 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.
                    Editörde seçili bir metin varsa, seçimin üzerine yazılır.
                    Faturada her değişken, gerçek veriyle otomatik değiştirilir.
                </div>
            </div>
            <div class="itpl-vars-search">
                <i class="fas fa-magnifying-glass"></i>
                <input type="text" id="itplVarSearch" placeholder="Değişken ara..." autocomplete="off">
            </div>
            <div class="itpl-vars-list" id="itplVarList">
                @foreach($tokenGroups as $groupName => $group)
                    @if(count($group['items']))
                        <div class="itpl-var-group" data-group>
                            <div class="itpl-var-group-title"><i class="fas {{ $group['icon'] }}"></i> {{ $groupName }}</div>
                            @foreach($group['items'] as $token => $desc)
                                <button type="button" class="itpl-var"
                                        data-token="{{ '{{' . $token . chr(125) . chr(125) }}"
                                        data-search="{{ mb_strtolower($token . ' ' . $desc) }}">
                                    <span class="itpl-var-name">{{ '{{' . $token . chr(125) . chr(125) }}</span>
                                    <span class="itpl-var-desc">{{ $desc }}</span>
                                    <span class="itpl-var-add"><i class="fas fa-plus"></i></span>
                                </button>
                            @endforeach
                        </div>
                    @endif
                @endforeach
                <div class="itpl-var-empty" id="itplVarEmpty" hidden>
                    <i class="fas fa-magnifying-glass-minus"></i> Eşleşen değişken yok.
                </div>
            </div>
        </aside>

        <!-- Orta: Editör -->
        <div class="itpl-pane itpl-editor-pane">
            <div class="itpl-pane-head">
                <span><i class="fas fa-code me-2"></i>HTML Şablon</span>
                <small><i class="fas fa-i-cursor me-1"></i>Değişkenler imlecin olduğu noktaya eklenir</small>
            </div>
            <textarea id="itplEditor" spellcheck="false">{{ $template }}</textarea>
        </div>

        <!-- Sağ: Önizleme -->
        <div class="itpl-pane itpl-preview-pane">
            <div class="itpl-pane-head">
                <span><i class="fas fa-eye me-2"></i>Canlı Önizleme <small class="ms-1">(örnek verilerle)</small></span>
                <button type="button" class="itpl-mini" id="itplRefresh"><i class="fas fa-arrows-rotate"></i> Yenile</button>
            </div>
            <iframe id="itplFrame" title="Fatura önizleme"></iframe>
        </div>
    </div>
</div>

<!-- ══════════ FATURA NUMARASI KURAL MODALI ══════════ -->
<div class="nrm-overlay" id="nrmOverlay" hidden>
    <div class="nrm-modal">
        <div class="nrm-head">
            <div>
                <div class="nrm-kicker">FATURA NUMARASI</div>
                <div class="nrm-title">Numara Kuralı Tasarımı</div>
            </div>
            <button type="button" class="nrm-close" id="nrmClose"><i class="fas fa-times"></i></button>
        </div>

        <div class="nrm-preview">
            <span class="nrm-preview-label">ÖRNEK ÇIKTI</span>
            <span class="nrm-preview-value" id="nrmPreview">—</span>
        </div>

        <div class="nrm-body">
            <div class="nrm-segments" id="nrmSegments"></div>

            <div class="nrm-addbar">
                <span class="nrm-addbar-label">Parça ekle:</span>
                <button type="button" class="nrm-add" data-add="text"><i class="fas fa-font"></i> Sabit Metin</button>
                <button type="button" class="nrm-add" data-add="date"><i class="fas fa-calendar-day"></i> Tarih</button>
                <button type="button" class="nrm-add" data-add="seq"><i class="fas fa-arrow-up-1-9"></i> Sıra No</button>
                <button type="button" class="nrm-add" data-add="random"><i class="fas fa-dice"></i> Rastgele</button>
                <button type="button" class="nrm-add" data-add="code"><i class="fas fa-building"></i> Acente Kodu</button>
            </div>

            <div class="nrm-note">
                <i class="fas fa-circle-info"></i>
                <div>
                    <b>Sıra No</b> parçası; sabit metin ve tarih parçaları aynı kaldığı sürece her faturada
                    belirlediğiniz artış değeri kadar artar. Tarih parçası değiştiğinde (örneğin yeni yıl)
                    sıra otomatik olarak başlangıç değerinden yeniden başlar.
                </div>
            </div>
        </div>

        <div class="nrm-foot">
            <button type="button" class="nrm-btn ghost" id="nrmReset"><i class="fas fa-rotate-left"></i> Varsayılana Dön</button>
            <button type="button" class="nrm-btn solid" id="nrmSave"><i class="fas fa-floppy-disk"></i> Kuralı Kaydet</button>
        </div>
    </div>
</div>

<style>
    .itpl-page { font-family: 'Manrope', system-ui, sans-serif; }

    .itpl-back {
        width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
        background: white; color: #64748b; text-decoration: none; border: 1px solid #e2e8f0; transition: all .2s ease;
    }
    .itpl-back:hover { background: #065f46; color: #a7f3d0; border-color: #065f46; transform: translateX(-3px); }
    .itpl-kicker { font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .3em; color: #059669; font-weight: 500; }
    .itpl-title { font-weight: 800; font-size: 1.55rem; letter-spacing: -.02em; color: #0f172a; }

    .itpl-btn {
        display: inline-flex; align-items: center; gap: .5rem; border: none; cursor: pointer;
        font-family: inherit; font-size: .82rem; font-weight: 800; padding: .6rem 1.2rem; border-radius: 12px;
        transition: all .18s ease;
    }
    .itpl-btn.ghost { background: white; border: 1px solid #e2e8f0; color: #64748b; }
    .itpl-btn.ghost:hover { color: #b91c1c; border-color: #fca5a5; background: #fef2f2; }
    .itpl-btn.solid { background: linear-gradient(135deg, #059669, #047857); color: white; box-shadow: 0 8px 20px -8px rgba(5, 150, 105, .5); }
    .itpl-btn.solid:hover { transform: translateY(-1px); filter: brightness(1.06); }
    .itpl-btn.numrule { background: #0f172a; color: #94a3b8; border: 1px solid #1e293b; }
    .itpl-btn.numrule:hover { color: #a7f3d0; border-color: #065f46; }
    .itpl-btn.numrule code {
        font-family: 'JetBrains Mono', monospace; font-size: .78rem; color: #34d399;
        background: rgba(52, 211, 153, .08); border: 1px solid rgba(52, 211, 153, .25);
        border-radius: 7px; padding: .1rem .5rem;
    }

    /* ── Yerleşim: üstte değişkenler + geniş editör, altta tam genişlik önizleme ── */
    .itpl-layout {
        display: grid;
        grid-template-columns: 285px minmax(0, 1fr);
        grid-template-areas: "vars editor" "preview preview";
        gap: 14px;
    }
    .itpl-vars { grid-area: vars; height: calc(100vh - 240px); min-height: 560px; }
    .itpl-editor-pane { grid-area: editor; height: calc(100vh - 240px); min-height: 560px; min-width: 0; }
    .itpl-preview-pane { grid-area: preview; height: 900px; }
    @media (max-width: 900px) {
        .itpl-layout { grid-template-columns: 1fr; grid-template-areas: "vars" "editor" "preview"; }
        .itpl-vars { height: 380px; min-height: 0; }
        .itpl-editor-pane { height: 560px; min-height: 0; }
        .itpl-preview-pane { height: 700px; }
    }

    /* ── Değişken paneli ── */
    .itpl-vars {
        display: flex; flex-direction: column; background: #0f172a; border-radius: 16px;
        border: 1px solid #1e293b; overflow: hidden;
    }
    .itpl-vars-head {
        display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem;
        font-size: .78rem; font-weight: 800; color: #e2e8f0; border-bottom: 1px solid #1e293b;
    }
    .itpl-vars-head i { color: #34d399; }
    .itpl-vars-hint {
        display: flex; gap: .6rem; margin: .7rem .7rem 0; padding: .65rem .7rem;
        background: rgba(52, 211, 153, .06); border: 1px solid rgba(52, 211, 153, .18);
        border-radius: 11px; font-size: .67rem; line-height: 1.55; color: #94b8ab;
    }
    .itpl-vars-hint i { color: #34d399; margin-top: 2px; }
    .itpl-vars-hint b { display: block; color: #a7f3d0; margin-bottom: 2px; }
    .itpl-vars-hint u { text-decoration-color: #34d399; text-underline-offset: 2px; }

    .itpl-vars-search { position: relative; margin: .7rem .7rem .4rem; }
    .itpl-vars-search i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: #475569; font-size: .7rem; }
    .itpl-vars-search input {
        width: 100%; background: #1e293b; border: 1px solid #334155; border-radius: 10px;
        color: #e2e8f0; font-family: inherit; font-size: .74rem; font-weight: 600;
        padding: .45rem .7rem .45rem 1.9rem; outline: none; transition: border-color .15s;
    }
    .itpl-vars-search input:focus { border-color: #34d399; }
    .itpl-vars-search input::placeholder { color: #475569; }

    .itpl-vars-list { flex: 1; overflow-y: auto; padding: .3rem .7rem .8rem; scrollbar-width: thin; scrollbar-color: #334155 transparent; }
    .itpl-var-group-title {
        display: flex; align-items: center; gap: .45rem;
        font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
        color: #64748b; margin: .85rem 2px .35rem;
    }
    .itpl-var-group-title i { color: #34d399; font-size: .6rem; }

    .itpl-var {
        position: relative; display: block; width: 100%; text-align: left;
        background: #16223a; border: 1px solid #24334d; border-radius: 10px;
        padding: .45rem 2rem .45rem .6rem; margin-bottom: .3rem; cursor: pointer;
        transition: all .13s ease;
    }
    .itpl-var:hover { border-color: #34d399; background: #132f27; transform: translateX(2px); }
    .itpl-var-name { display: block; font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 700; color: #6ee7b7; }
    .itpl-var-desc { display: block; font-size: .64rem; font-weight: 600; color: #7c8aa5; margin-top: 1px; }
    .itpl-var-add {
        position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
        width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
        background: #1e293b; color: #64748b; border-radius: 6px; font-size: .58rem; transition: all .13s;
    }
    .itpl-var:hover .itpl-var-add { background: #059669; color: white; }
    .itpl-var.inserted { border-color: #34d399; }
    .itpl-var.inserted .itpl-var-add { background: #059669; color: white; }
    .itpl-var-empty { text-align: center; color: #475569; font-size: .72rem; font-weight: 700; padding: 1.4rem 0; }

    /* ── Editör + önizleme paneli ── */
    .itpl-pane { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid #e8edf4; background: white; }
    .itpl-pane-head {
        display: flex; align-items: center; justify-content: space-between;
        padding: .7rem 1rem; border-bottom: 1px solid #eef2f7; font-size: .78rem; font-weight: 800; color: #334155;
    }
    .itpl-pane-head small { font-weight: 600; color: #94a3b8; }
    .itpl-editor-pane .itpl-pane-head { background: #0f172a; color: #e2e8f0; border-bottom-color: #1e293b; }
    .itpl-editor-pane .itpl-pane-head small { color: #64748b; }
    .itpl-editor-pane .itpl-pane-head i { color: #34d399; }

    #itplEditor {
        flex: 1; width: 100%; border: none; resize: none; outline: none;
        background: #0b1220; color: #d1e7dd;
        font-family: 'JetBrains Mono', monospace; font-size: .8rem; line-height: 1.7;
        padding: 16px 18px; tab-size: 2;
        /* Uzun satırlar sarılır → yatay kaydırma çıkmaz, rahat düzenleme */
        white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; overflow-y: auto;
    }

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

    #itplFrame { flex: 1; width: 100%; border: none; background: #f1f5f9; }

    /* ══ Numara kuralı modalı ══ */
    .nrm-overlay {
        position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center;
        background: rgba(2, 6, 23, .62); backdrop-filter: blur(4px); padding: 20px;
        animation: nrmFade .18s ease;
    }
    @keyframes nrmFade { from { opacity: 0; } to { opacity: 1; } }
    .nrm-modal {
        width: 100%; max-width: 680px; max-height: calc(100vh - 40px); display: flex; flex-direction: column;
        background: white; border-radius: 20px; overflow: hidden; font-family: 'Manrope', system-ui, sans-serif;
        box-shadow: 0 40px 90px -20px rgba(2, 6, 23, .5);
        animation: nrmPop .22s cubic-bezier(.22,1,.36,1);
    }
    @keyframes nrmPop { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

    .nrm-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem .9rem; }
    .nrm-kicker { font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .28em; color: #059669; font-weight: 500; }
    .nrm-title { font-weight: 800; font-size: 1.15rem; color: #0f172a; letter-spacing: -.01em; }
    .nrm-close {
        width: 36px; height: 36px; border: none; border-radius: 10px; background: #f1f5f9; color: #64748b;
        cursor: pointer; transition: all .15s;
    }
    .nrm-close:hover { background: #fee2e2; color: #b91c1c; }

    .nrm-preview {
        display: flex; align-items: center; gap: .9rem; margin: 0 1.4rem;
        background: #0f172a; border-radius: 14px; padding: .8rem 1.1rem;
    }
    .nrm-preview-label { font-size: .58rem; font-weight: 800; letter-spacing: .18em; color: #64748b; }
    .nrm-preview-value { font-family: 'JetBrains Mono', monospace; font-size: 1.15rem; font-weight: 700; color: #34d399; letter-spacing: .04em; word-break: break-all; }

    .nrm-body { flex: 1; overflow-y: auto; padding: 1rem 1.4rem; }

    .nrm-seg {
        display: flex; align-items: center; gap: .55rem; background: #f8fafc; border: 1px solid #e2e8f0;
        border-radius: 12px; padding: .55rem .65rem; margin-bottom: .5rem;
        animation: nrmPop .18s ease;
    }
    .nrm-seg-type {
        display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; width: 116px;
        font-size: .68rem; font-weight: 800; border-radius: 9px; padding: .38rem .55rem;
    }
    .nrm-seg-type.text { background: #eef2ff; color: #4338ca; }
    .nrm-seg-type.date { background: #fef3c7; color: #b45309; }
    .nrm-seg-type.seq { background: #d1fae5; color: #047857; }
    .nrm-seg-type.random { background: #fce7f3; color: #be185d; }

    .nrm-seg-fields { flex: 1; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
    .nrm-seg-fields input, .nrm-seg-fields select {
        border: 1px solid #e2e8f0; border-radius: 9px; font-family: inherit; font-size: .74rem; font-weight: 700;
        color: #0f172a; padding: .32rem .55rem; outline: none; background: white; transition: border-color .15s;
    }
    .nrm-seg-fields input:focus, .nrm-seg-fields select:focus { border-color: #34d399; }
    .nrm-seg-fields .nrm-w-sm { width: 76px; }
    .nrm-seg-fields label { font-size: .62rem; font-weight: 700; color: #94a3b8; }
    .nrm-seg-fields input[type="text"] { font-family: 'JetBrains Mono', monospace; }

    .nrm-seg-tools { display: flex; gap: .25rem; flex-shrink: 0; }
    .nrm-seg-tools button {
        width: 27px; height: 27px; border: none; border-radius: 8px; background: white; color: #94a3b8;
        border: 1px solid #e2e8f0; cursor: pointer; font-size: .64rem; transition: all .13s;
    }
    .nrm-seg-tools button:hover { color: #0f172a; border-color: #cbd5e1; }
    .nrm-seg-tools button.del:hover { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
    .nrm-seg-tools button:disabled { opacity: .35; cursor: default; }

    .nrm-addbar { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .8rem; }
    .nrm-addbar-label { font-size: .68rem; font-weight: 800; color: #64748b; }
    .nrm-add {
        display: inline-flex; align-items: center; gap: .4rem; border: 1.5px dashed #cbd5e1; background: white;
        color: #475569; font-family: inherit; font-size: .7rem; font-weight: 800; border-radius: 10px;
        padding: .4rem .75rem; cursor: pointer; transition: all .15s;
    }
    .nrm-add:hover { border-color: #059669; color: #047857; background: #ecfdf5; }

    .nrm-note {
        display: flex; gap: .55rem; margin-top: 1rem; padding: .7rem .8rem;
        background: #fffbeb; border: 1px solid #fde68a; border-radius: 11px;
        font-size: .68rem; line-height: 1.55; color: #92600a;
    }
    .nrm-note i { margin-top: 2px; }

    .nrm-foot { display: flex; justify-content: space-between; gap: .6rem; padding: .9rem 1.4rem 1.2rem; border-top: 1px solid #eef2f7; }
    .nrm-btn {
        display: inline-flex; align-items: center; gap: .5rem; border: none; cursor: pointer;
        font-family: inherit; font-size: .78rem; font-weight: 800; padding: .55rem 1.1rem; border-radius: 11px;
        transition: all .16s ease;
    }
    .nrm-btn.ghost { background: white; border: 1px solid #e2e8f0; color: #64748b; }
    .nrm-btn.ghost:hover { color: #b91c1c; border-color: #fca5a5; background: #fef2f2; }
    .nrm-btn.solid { background: linear-gradient(135deg, #059669, #047857); color: white; box-shadow: 0 8px 18px -8px rgba(5,150,105,.55); }
    .nrm-btn.solid:hover { transform: translateY(-1px); filter: brightness(1.06); }
</style>

<script>
    (function () {
        const editor = document.getElementById('itplEditor');
        const frame = document.getElementById('itplFrame');
        const PREVIEW_URL = "{{ route('agency.settings.invoice-template.preview') }}";
        const SAVE_URL = "{{ route('agency.settings.invoice-template.update') }}";
        const CSRF = "{{ csrf_token() }}";
        let timer = null;

        function refreshPreview() {
            fetch(PREVIEW_URL, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
                body: JSON.stringify({ template: editor.value })
            })
            .then(r => r.text())
            .then(html => { frame.srcdoc = html; })
            .catch(() => {});
        }

        editor.addEventListener('input', () => {
            clearTimeout(timer);
            timer = setTimeout(refreshPreview, 700);
        });
        document.getElementById('itplRefresh').addEventListener('click', refreshPreview);

        // ── Değişken paneli: imleç konumuna ekleme + arama ──
        document.querySelectorAll('.itpl-var').forEach(btn => {
            btn.addEventListener('click', () => {
                const token = btn.dataset.token;
                const start = editor.selectionStart, end = editor.selectionEnd;
                editor.setRangeText(token, start, end, 'end');
                editor.focus();
                btn.classList.add('inserted');
                setTimeout(() => btn.classList.remove('inserted'), 700);
                clearTimeout(timer);
                timer = setTimeout(refreshPreview, 400);
            });
        });

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

        // ── Şablon kaydet / sıfırla ──
        document.getElementById('itplSave').addEventListener('click', function () {
            const btn = this;
            btn.disabled = true;
            fetch(SAVE_URL, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
                body: JSON.stringify({ _method: 'PUT', template: editor.value })
            })
            .then(r => r.json())
            .then(d => {
                btn.disabled = false;
                if (typeof Swal !== 'undefined') {
                    Swal.fire({ title: d.success ? 'Kaydedildi' : 'Hata', text: d.message || '', icon: d.success ? 'success' : 'error', timer: 1600, showConfirmButton: false });
                }
            })
            .catch(() => { btn.disabled = false; });
        });

        document.getElementById('itplReset').addEventListener('click', () => {
            const doReset = () => {
                editor.value = @json(\App\Services\Sale\InvoiceRenderService::defaultTemplate());
                refreshPreview();
            };
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    title: 'Varsayılana dönülsün mü?',
                    text: 'Mevcut düzenlemeleriniz editörden kaldırılır (kaydetmediğiniz sürece veritabanı değişmez).',
                    icon: 'question', showCancelButton: true, confirmButtonText: 'Evet, dön', cancelButtonText: 'Vazgeç'
                }).then(r => { if (r.isConfirmed) doReset(); });
            } else if (confirm('Varsayılan şablona dönülsün mü?')) {
                doReset();
            }
        });

        refreshPreview();

        // ══════════ FATURA NUMARASI KURALI ══════════
        const RULE_URL = "{{ route('agency.settings.invoice-template.number-rule') }}";
        const DATE_FORMATS = @json($dateFormats);
        const RANDOM_KINDS = @json($randomKinds);
        const AGENCY_CODE = @json((string) ($agency->code ?? ''));
        const DEFAULT_RULE = [
            { type: 'text', value: 'FTR-' },
            { type: 'date', format: 'Y' },
            { type: 'text', value: '-' },
            { type: 'seq', pad: 4, step: 1, start: 1 }
        ];
        let rule = @json($numberRule);

        const overlay = document.getElementById('nrmOverlay');
        const segWrap = document.getElementById('nrmSegments');
        const preview = document.getElementById('nrmPreview');

        function fmtDate(format) {
            const n = new Date();
            const Y = String(n.getFullYear()), y = Y.slice(-2);
            const m = String(n.getMonth() + 1).padStart(2, '0');
            const d = String(n.getDate()).padStart(2, '0');
            const His = String(n.getHours()).padStart(2, '0') + String(n.getMinutes()).padStart(2, '0') + String(n.getSeconds()).padStart(2, '0');
            // ISO hafta numarası
            const t = new Date(Date.UTC(n.getFullYear(), n.getMonth(), n.getDate()));
            t.setUTCDate(t.getUTCDate() + 4 - (t.getUTCDay() || 7));
            const W = String(Math.ceil((((t - Date.UTC(t.getUTCFullYear(), 0, 1)) / 86400000) + 1) / 7)).padStart(2, '0');
            return ({ Y, y, m, d, Ym: Y + m, Ymd: Y + m + d, ym: y + m, W, His })[format] || Y;
        }

        function sampleRandom(kind, len) {
            const sets = { digits: '0123456789', letters: 'ABCDEFGHIJKLMNPQRSTUVWXYZ', alnum: 'ABCDEFGHIJKLMNPQRSTUVWXYZ0123456789' };
            const chars = sets[kind] || sets.digits;
            let out = '';
            for (let i = 0; i < len; i++) out += chars[Math.floor(Math.random() * chars.length)];
            return out;
        }

        function renderPreview() {
            preview.textContent = rule.map(seg => {
                if (seg.type === 'text') return seg.value || '';
                if (seg.type === 'date') return fmtDate(seg.format);
                if (seg.type === 'seq') return String(seg.start || 1).padStart(seg.pad || 4, '0');
                if (seg.type === 'random') return sampleRandom(seg.kind, seg.length || 4);
                if (seg.type === 'code') return AGENCY_CODE || 'KOD';
                return '';
            }).join('') || '—';
        }

        const TYPE_META = {
            text: { label: 'Sabit Metin', icon: 'fa-font' },
            date: { label: 'Tarih', icon: 'fa-calendar-day' },
            seq: { label: 'Sıra No', icon: 'fa-arrow-up-1-9' },
            random: { label: 'Rastgele', icon: 'fa-dice' },
            code: { label: 'Acente Kodu', icon: 'fa-building' }
        };

        function fieldsHtml(seg, i) {
            if (seg.type === 'text') {
                return `<input type="text" maxlength="20" value="${(seg.value || '').replace(/"/g, '&quot;')}" placeholder="Örn: FTR-" data-f="value" data-i="${i}" style="flex:1;min-width:120px;">`;
            }
            if (seg.type === 'date') {
                const opts = Object.entries(DATE_FORMATS).map(([k, v]) => `<option value="${k}" ${seg.format === k ? 'selected' : ''}>${v}</option>`).join('');
                return `<select data-f="format" data-i="${i}" style="flex:1;">${opts}</select>`;
            }
            if (seg.type === 'seq') {
                const sample = String(seg.start || 1).padStart(seg.pad || 4, '0');
                return `<label>Basamak:</label><input type="number" class="nrm-w-sm" min="1" max="8" value="${seg.pad || 4}" data-f="pad" data-i="${i}">
                        <label>Artış:</label><input type="number" class="nrm-w-sm" min="1" max="1000" value="${seg.step || 1}" data-f="step" data-i="${i}" title="Her faturada sıra bu değer kadar artar (örn: 2 → ikişerli)">
                        <label>Başlangıç:</label><input type="number" class="nrm-w-sm" min="1" max="99999999" value="${seg.start || 1}" data-f="start" data-i="${i}" title="İlk faturanın sıra numarası">
                        <label style="color:#cbd5e1;">→ ${sample}</label>`;
            }
            if (seg.type === 'code') {
                return `<label style="color:#64748b;">Acentenizin sistem kodu:</label>
                        <span style="font-family:'JetBrains Mono',monospace;font-size:.76rem;font-weight:700;color:#0f172a;background:#eef2f7;border-radius:8px;padding:.28rem .6rem;">${AGENCY_CODE || '—'}</span>`;
            }
            const kindOpts = Object.entries(RANDOM_KINDS).map(([k, v]) => `<option value="${k}" ${seg.kind === k ? 'selected' : ''}>${v}</option>`).join('');
            return `<select data-f="kind" data-i="${i}" style="flex:1;">${kindOpts}</select>
                    <label>Uzunluk:</label><input type="number" class="nrm-w-sm" min="1" max="10" value="${seg.length || 4}" data-f="length" data-i="${i}">`;
        }

        function renderSegments() {
            segWrap.innerHTML = rule.map((seg, i) => {
                const meta = TYPE_META[seg.type];
                return `<div class="nrm-seg">
                    <span class="nrm-seg-type ${seg.type}"><i class="fas ${meta.icon}"></i> ${meta.label}</span>
                    <div class="nrm-seg-fields">${fieldsHtml(seg, i)}</div>
                    <div class="nrm-seg-tools">
                        <button type="button" data-move="-1" data-i="${i}" ${i === 0 ? 'disabled' : ''} title="Yukarı taşı"><i class="fas fa-chevron-up"></i></button>
                        <button type="button" data-move="1" data-i="${i}" ${i === rule.length - 1 ? 'disabled' : ''} title="Aşağı taşı"><i class="fas fa-chevron-down"></i></button>
                        <button type="button" class="del" data-del="${i}" title="Parçayı sil"><i class="fas fa-trash-alt"></i></button>
                    </div>
                </div>`;
            }).join('') || '<div class="text-center text-muted py-3" style="font-size:.76rem;font-weight:700;">Parça yok — aşağıdan ekleyin.</div>';
            renderPreview();
        }

        segWrap.addEventListener('input', (e) => {
            const f = e.target.dataset.f;
            if (!f) return;
            const i = parseInt(e.target.dataset.i, 10);
            let v = e.target.value;
            if (f === 'pad') { v = Math.max(1, Math.min(8, parseInt(v, 10) || 4)); rule[i][f] = v; renderPreview(); return; }
            if (f === 'length') { v = Math.max(1, Math.min(10, parseInt(v, 10) || 4)); rule[i][f] = v; renderPreview(); return; }
            if (f === 'step') { v = Math.max(1, Math.min(1000, parseInt(v, 10) || 1)); rule[i][f] = v; renderPreview(); return; }
            if (f === 'start') { v = Math.max(1, Math.min(99999999, parseInt(v, 10) || 1)); rule[i][f] = v; renderPreview(); return; }
            rule[i][f] = v;
            renderPreview();
        });
        segWrap.addEventListener('change', (e) => {
            if (['pad', 'length', 'step', 'start'].includes(e.target.dataset.f)) renderSegments();
        });
        segWrap.addEventListener('click', (e) => {
            const mv = e.target.closest('[data-move]');
            if (mv) {
                const i = parseInt(mv.dataset.i, 10), dir = parseInt(mv.dataset.move, 10);
                const j = i + dir;
                if (j >= 0 && j < rule.length) { [rule[i], rule[j]] = [rule[j], rule[i]]; renderSegments(); }
                return;
            }
            const del = e.target.closest('[data-del]');
            if (del) { rule.splice(parseInt(del.dataset.del, 10), 1); renderSegments(); }
        });

        document.querySelectorAll('.nrm-add').forEach(btn => {
            btn.addEventListener('click', () => {
                if (rule.length >= 12) return;
                const t = btn.dataset.add;
                rule.push(t === 'text' ? { type: 'text', value: '' }
                    : t === 'date' ? { type: 'date', format: 'Y' }
                    : t === 'seq' ? { type: 'seq', pad: 4, step: 1, start: 1 }
                    : t === 'code' ? { type: 'code' }
                    : { type: 'random', kind: 'digits', length: 4 });
                renderSegments();
                const inp = segWrap.querySelector('.nrm-seg:last-child input, .nrm-seg:last-child select');
                if (inp) inp.focus();
            });
        });

        document.getElementById('itplNumRuleBtn').addEventListener('click', () => {
            overlay.hidden = false;
            renderSegments();
        });
        const closeModal = () => { overlay.hidden = true; };
        document.getElementById('nrmClose').addEventListener('click', closeModal);
        overlay.addEventListener('click', (e) => { if (e.target === overlay) closeModal(); });
        document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !overlay.hidden) closeModal(); });

        document.getElementById('nrmReset').addEventListener('click', () => {
            rule = JSON.parse(JSON.stringify(DEFAULT_RULE));
            renderSegments();
        });

        document.getElementById('nrmSave').addEventListener('click', function () {
            const btn = this;
            btn.disabled = true;
            fetch(RULE_URL, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
                body: JSON.stringify({ _method: 'PUT', rule: rule })
            })
            .then(r => r.json())
            .then(d => {
                btn.disabled = false;
                if (d.success) {
                    if (d.example) document.getElementById('itplNumExample').textContent = d.example;
                    closeModal();
                    refreshPreview(); // örnek faturadaki numara da yeni kurala göre yenilensin
                }
                if (typeof Swal !== 'undefined') {
                    Swal.fire({ title: d.success ? 'Kaydedildi' : 'Hata', text: d.message || '', icon: d.success ? 'success' : 'error', timer: 1700, showConfirmButton: false });
                }
            })
            .catch(() => { btn.disabled = false; });
        });
    })();
</script>
@endsection