@extends('agency.layouts.app')

@section('title', 'Fiyat Sınıfları')

@push('styles')
<style>
    .pc-wrap { --pc-accent:#4f46e5; }
    .pc-head-icon { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; color:#fff;
        background:linear-gradient(135deg,#6366f1,#4338ca); box-shadow:0 10px 24px -8px rgba(79,70,229,.6); font-size:1.25rem; }
    .pc-divider { height:1px; background:linear-gradient(90deg,#e2e8f0,transparent); }

    .pc-card { background:#fff; border:1px solid #eef2f7; border-radius:22px; box-shadow:0 1px 3px rgba(15,23,42,.04); }

    /* Grup sekmeleri */
    .pcg-tabs { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:1.2rem; }
    .pcg-tab { display:inline-flex; align-items:center; gap:.5rem; border:1.5px solid #e2e8f0; background:#fff; color:#475569;
        font-size:.82rem; font-weight:800; padding:.55rem 1rem; border-radius:12px; cursor:pointer; transition:.15s; }
    .pcg-tab:hover { border-color:#c7d2fe; color:#4338ca; }
    .pcg-tab.is-active { background:linear-gradient(135deg,#6366f1,#4338ca); border-color:transparent; color:#fff;
        box-shadow:0 8px 18px -8px rgba(79,70,229,.55); }
    .pcg-tab .pcg-count { font-size:.66rem; font-weight:800; background:rgba(99,102,241,.12); color:#4338ca; border-radius:20px; padding:1px 7px; }
    .pcg-tab.is-active .pcg-count { background:rgba(255,255,255,.22); color:#fff; }
    .pcg-tab .pcg-def { font-size:.6rem; text-transform:uppercase; letter-spacing:.04em; opacity:.75; }
    .pcg-add { display:inline-flex; align-items:center; gap:.4rem; border:1.5px dashed #c7d2fe; background:#f5f3ff; color:#6d28d9;
        font-size:.8rem; font-weight:800; padding:.55rem 1rem; border-radius:12px; cursor:pointer; transition:.15s; }
    .pcg-add:hover { background:#6d28d9; border-color:#6d28d9; color:#fff; }

    .pcg-panel { display:none; }
    .pcg-panel.is-active { display:block; }

    /* Grup başlığı (yeniden adlandır / sil) */
    .pcg-head { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:1.1rem; }
    .pcg-name-form { display:flex; align-items:center; gap:.45rem; flex:1; min-width:240px; }
    .pcg-name-inp { border:1.5px solid transparent; background:transparent; font-size:1.05rem; font-weight:800; color:#0f172a;
        border-radius:10px; padding:.35rem .6rem; flex:1; min-width:0; transition:.15s; }
    .pcg-name-inp:hover { border-color:#e2e8f0; background:#fbfcfe; }
    .pcg-name-inp:focus { outline:none; border-color:#4f46e5; background:#fff; box-shadow:0 0 0 3px rgba(79,70,229,.12); }
    .pcg-name-save { display:none; width:34px; height:34px; border-radius:10px; border:none; background:linear-gradient(135deg,#6366f1,#4338ca);
        color:#fff; cursor:pointer; flex-shrink:0; }
    .pcg-name-form.is-dirty .pcg-name-save { display:grid; place-items:center; }
    .pcg-del-group { display:inline-flex; align-items:center; gap:.4rem; border:1px solid #fee2e2; background:#fff5f5; color:#ef4444;
        font-size:.74rem; font-weight:800; padding:.45rem .8rem; border-radius:10px; cursor:pointer; transition:.15s; }
    .pcg-del-group:hover { background:#ef4444; color:#fff; border-color:#ef4444; }
    .pcg-default-chip { font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#4338ca;
        background:#eef2ff; border:1px solid #e0e7ff; padding:3px 9px; border-radius:20px; }

    /* Sınıf satırı */
    .pc-row { display:grid; grid-template-columns:44px 1.6fr 1.1fr 1.2fr 96px 96px 44px; gap:.85rem; align-items:center;
        padding:.85rem 1rem; border:1.5px solid #eef2f7; border-radius:16px; background:#fbfcfe; transition:border-color .15s, box-shadow .15s, background .15s; margin-bottom:.7rem; }
    .pc-row:hover { border-color:#dbe3ef; box-shadow:0 6px 20px -12px rgba(15,23,42,.25); }
    .pc-row.is-base { border-color:#c7d2fe; background:linear-gradient(180deg,#f5f7ff,#fff); }
    .pc-badge-num { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; font-weight:800; font-size:.9rem;
        color:#fff; background:linear-gradient(135deg,#64748b,#475569); }
    .pc-row.is-base .pc-badge-num { background:linear-gradient(135deg,#6366f1,#4338ca); }
    .pc-lbl { font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#94a3b8; margin-bottom:.25rem; display:block; }
    .pc-inp { width:100%; border:1.5px solid #e2e8f0; background:#fff; border-radius:10px; padding:.5rem .7rem; font-size:.86rem; font-weight:600; color:#0f172a; transition:.15s; }
    .pc-inp:focus { outline:none; border-color:#4f46e5; box-shadow:0 0 0 3px rgba(79,70,229,.12); }
    .pc-inp:disabled { background:#f1f5f9; color:#94a3b8; }

    .pc-difftype { display:inline-flex; background:#eef2f7; border-radius:10px; padding:3px; }
    .pc-difftype label { margin:0; }
    .pc-difftype input { display:none; }
    .pc-difftype span { display:block; padding:.32rem .6rem; font-size:.78rem; font-weight:800; color:#64748b; border-radius:8px; cursor:pointer; transition:.15s; }
    .pc-difftype input:checked + span { background:#fff; color:#4338ca; box-shadow:0 1px 3px rgba(15,23,42,.12); }

    .pc-base-radio { width:20px; height:20px; accent-color:#4f46e5; cursor:pointer; }
    .pc-del { width:36px; height:36px; border-radius:10px; border:1px solid #fee2e2; background:#fff5f5; color:#ef4444; cursor:pointer; transition:.15s; }
    .pc-del:hover { background:#ef4444; color:#fff; }
    .pc-del:disabled { opacity:.35; cursor:not-allowed; }

    .pc-switch { width:42px; height:24px; }

    .pc-empty-group { text-align:center; padding:2.2rem 1rem; color:#94a3b8; border:1.5px dashed #e2e8f0; border-radius:16px; }
    .pc-empty-group i { font-size:1.8rem; opacity:.4; display:block; margin-bottom:.5rem; }

    /* Canlı önizleme */
    .pc-preview { background:linear-gradient(135deg,#0f172a,#1e293b); border-radius:22px; padding:1.4rem 1.5rem; color:#e2e8f0; position:relative; overflow:hidden; }
    .pc-preview::before { content:''; position:absolute; inset:0; background:radial-gradient(600px 200px at 100% 0,rgba(99,102,241,.25),transparent); pointer-events:none; }
    .pc-preview h5 { font-weight:800; font-size:.95rem; letter-spacing:.01em; margin:0 0 .2rem; color:#fff; }
    .pc-preview .sub { font-size:.76rem; color:#94a3b8; margin-bottom:1rem; }
    .pc-preview-group { font-size:.72rem; font-weight:800; color:#c7d2fe; background:rgba(99,102,241,.14); border:1px solid rgba(129,140,248,.35);
        display:inline-block; padding:.3rem .7rem; border-radius:20px; margin-bottom:.9rem; }
    .pc-preview-base { display:flex; align-items:center; gap:.6rem; margin-bottom:1.1rem; flex-wrap:wrap; }
    .pc-preview-base input { width:130px; border:1.5px solid rgba(148,163,184,.3); background:rgba(15,23,42,.5); color:#fff; border-radius:10px; padding:.5rem .7rem; font-weight:700; }
    .pc-preview-base input:focus { outline:none; border-color:#818cf8; }
    .pc-chips { display:flex; gap:.7rem; flex-wrap:wrap; }
    .pc-chip { flex:1; min-width:120px; background:rgba(255,255,255,.04); border:1px solid rgba(148,163,184,.16); border-radius:14px; padding:.85rem .95rem; }
    .pc-chip.base { border-color:rgba(129,140,248,.5); background:rgba(99,102,241,.12); }
    .pc-chip .cn { font-size:.72rem; font-weight:800; color:#c7d2fe; text-transform:uppercase; letter-spacing:.04em; }
    .pc-chip .cp { font-size:1.25rem; font-weight:800; color:#fff; margin-top:.25rem; line-height:1; }
    .pc-chip .cd { font-size:.68rem; color:#94a3b8; margin-top:.3rem; }

    @media (max-width:900px){ .pc-row{ grid-template-columns:1fr 1fr; } .pc-row > div:first-child{ grid-column:1/-1; } }
</style>
@endpush

@section('content')
<div class="container-fluid py-4 pc-wrap">

    {{-- Header --}}
    <div class="d-flex align-items-center gap-3 mb-2">
        <a href="{{ route('agency.settings') }}" class="btn btn-outline-secondary btn-sm px-3 py-2" style="border-radius:12px;border-color:#e2e8f0;font-weight:600;">
            <i class="fas fa-arrow-left me-1"></i> Ayarlara Dön
        </a>
        <div class="pc-head-icon ms-2"><i class="fas fa-layer-group"></i></div>
        <div>
            <h1 class="h3 fw-800 text-dark mb-0">Fiyat Sınıfları</h1>
            <p class="text-muted mb-0">Sınıflarınızı gruplara ayırın (örn: yurtiçi turlar, yurtdışı turlar); her ürün hangi sınıflandırmayı kullanacağını seçer.</p>
        </div>
    </div>
    <div class="pc-divider mt-4 mb-4"></div>

    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm" style="border-radius:14px;background:#ecfdf5;color:#065f46;"><i class="fas fa-check-circle me-2"></i>{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger border-0 shadow-sm" style="border-radius:14px;background:#fef2f2;color:#991b1b;"><i class="fas fa-triangle-exclamation me-2"></i>{{ session('error') }}</div>
    @endif

    {{-- Grup sekmeleri --}}
    <div class="pcg-tabs">
        @foreach($groups as $g)
            <button type="button" class="pcg-tab {{ $loop->first ? 'is-active' : '' }}" data-pcg-tab="{{ $g->id }}">
                <i class="fas fa-folder{{ $loop->first ? '-open' : '' }}"></i>
                {{ $g->name }}
                <span class="pcg-count">{{ $g->classes->count() }}</span>
                @if($g->is_default)<span class="pcg-def">varsayılan</span>@endif
            </button>
        @endforeach
        <button type="button" class="pcg-add" data-bs-toggle="modal" data-bs-target="#addGroupModal">
            <i class="fas fa-plus"></i> Yeni Grup
        </button>
    </div>

    <div class="row g-4">
        {{-- Grup panelleri --}}
        <div class="col-lg-8">
            @foreach($groups as $g)
                <div class="pcg-panel {{ $loop->first ? 'is-active' : '' }}" data-pcg-panel="{{ $g->id }}">
                    <div class="pc-card p-4" data-pc-root data-group-id="{{ $g->id }}" data-group-name="{{ $g->name }}">

                        {{-- Grup başlığı: adlandır / varsayılan rozeti / sil --}}
                        <div class="pcg-head">
                            <form action="{{ route('agency.settings.class-groups.update', $g) }}" method="POST" class="pcg-name-form" data-pcg-rename>
                                @csrf
                                @method('PATCH')
                                <input type="text" name="name" value="{{ $g->name }}" class="pcg-name-inp" required maxlength="150" title="Grup adını düzenlemek için tıklayın">
                                <button type="submit" class="pcg-name-save" title="Adı kaydet"><i class="fas fa-check"></i></button>
                            </form>
                            @if($g->is_default)
                                <span class="pcg-default-chip"><i class="fas fa-star me-1"></i>Varsayılan</span>
                            @else
                                <button type="button" class="pcg-del-group" onclick="pcgDeleteGroup('{{ route('agency.settings.class-groups.destroy', $g) }}', '{{ addslashes($g->name) }}', {{ $g->classes->count() }})">
                                    <i class="fas fa-trash-can"></i> Grubu Sil
                                </button>
                            @endif
                        </div>

                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <small class="text-muted">Taban sınıf fiyatı 100 kabul edilir; gruptaki diğer sınıflar buna göre hesaplanır.</small>
                            <button type="button" class="btn btn-sm fw-bold py-2 px-3 text-white" data-pcg-addclass="{{ $g->id }}"
                                    data-bs-toggle="modal" data-bs-target="#addClassModal"
                                    style="border-radius:10px;background:linear-gradient(135deg,#6366f1,#4338ca);border:none;">
                                <i class="fas fa-plus me-1"></i> Yeni Sınıf
                            </button>
                        </div>

                        @if($g->classes->isEmpty())
                            <div class="pc-empty-group">
                                <i class="fas fa-layer-group"></i>
                                Bu grupta henüz sınıf yok. <b>Yeni Sınıf</b> ile ekleyin — ilk sınıf otomatik <b>taban</b> olur.
                            </div>
                        @else
                            <form action="{{ route('agency.settings.classes.bulk-update') }}" method="POST">
                                @csrf
                                <input type="hidden" name="group_id" value="{{ $g->id }}">

                                <div class="d-none d-lg-grid mb-2 px-1" style="grid-template-columns:44px 1.6fr 1.1fr 1.2fr 96px 96px 44px;gap:.85rem;">
                                    <span></span>
                                    <span class="pc-lbl mb-0">Sınıf Adı</span>
                                    <span class="pc-lbl mb-0">Kod</span>
                                    <span class="pc-lbl mb-0">Tabana Göre Fark</span>
                                    <span class="pc-lbl mb-0 text-center">Taban</span>
                                    <span class="pc-lbl mb-0 text-center">Aktif</span>
                                    <span></span>
                                </div>

                                @foreach($g->classes as $i => $cls)
                                    <div class="pc-row {{ $cls->is_base ? 'is-base' : '' }}" data-pc-item>
                                        <div><span class="pc-badge-num">{{ $cls->code ?: ($i + 1) }}</span></div>

                                        <div>
                                            <span class="pc-lbl d-lg-none">Sınıf Adı</span>
                                            <input type="text" name="classes[{{ $cls->id }}][name]" value="{{ $cls->name }}" class="pc-inp" required maxlength="100">
                                        </div>

                                        <div>
                                            <span class="pc-lbl d-lg-none">Kod</span>
                                            <input type="text" name="classes[{{ $cls->id }}][code]" value="{{ $cls->code }}" class="pc-inp" maxlength="10" placeholder="A">
                                        </div>

                                        <div>
                                            <span class="pc-lbl d-lg-none">Tabana Göre Fark</span>
                                            <div class="d-flex align-items-center gap-2">
                                                <input type="number" step="0.01" name="classes[{{ $cls->id }}][diff_value]" value="{{ (float) $cls->diff_value }}"
                                                       class="pc-inp pc-diffval" style="max-width:90px" {{ $cls->is_base ? 'disabled' : '' }}>
                                                <div class="pc-difftype">
                                                    <label><input type="radio" name="classes[{{ $cls->id }}][diff_type]" value="percent" {{ $cls->diff_type === 'percent' ? 'checked' : '' }} {{ $cls->is_base ? 'disabled' : '' }}><span>%</span></label>
                                                    <label><input type="radio" name="classes[{{ $cls->id }}][diff_type]" value="amount" {{ $cls->diff_type === 'amount' ? 'checked' : '' }} {{ $cls->is_base ? 'disabled' : '' }}><span>Tutar</span></label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="text-center">
                                            <span class="pc-lbl d-lg-none">Taban</span>
                                            <input type="radio" name="base_id" value="{{ $cls->id }}" class="pc-base-radio" {{ $cls->is_base ? 'checked' : '' }} title="Taban sınıf yap">
                                        </div>

                                        <div class="text-center">
                                            <span class="pc-lbl d-lg-none">Aktif</span>
                                            <div class="form-check form-switch d-inline-block">
                                                <input class="form-check-input pc-switch" type="checkbox" name="active[]" value="{{ $cls->id }}" {{ $cls->is_active ? 'checked' : '' }} {{ $cls->is_base ? 'disabled' : '' }}>
                                            </div>
                                        </div>

                                        <div class="text-end">
                                            <button type="button" class="pc-del" title="Sil"
                                                    {{ $cls->is_base && $g->classes->count() > 1 ? 'disabled' : '' }}
                                                    onclick="pcDeleteClass('{{ route('agency.settings.classes.destroy', $cls->id) }}')">
                                                <i class="fas fa-trash-can"></i>
                                            </button>
                                        </div>
                                    </div>
                                @endforeach

                                <div class="d-flex justify-content-end mt-4 pt-3" style="border-top:1px dashed #eef2f7;">
                                    <button type="submit" class="btn fw-bold text-white py-2 px-4" style="border-radius:12px;background:linear-gradient(135deg,#4f46e5,#3730a3);border:none;box-shadow:0 8px 20px -8px rgba(79,70,229,.6);">
                                        <i class="fas fa-floppy-disk me-2"></i> Değişiklikleri Kaydet
                                    </button>
                                </div>
                            </form>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Canlı önizleme (aktif grup) --}}
        <div class="col-lg-4">
            <div class="pc-preview" data-pc-preview>
                <h5><i class="fas fa-wand-magic-sparkles me-1" style="color:#818cf8"></i> Canlı Önizleme</h5>
                <div class="sub">Örnek bir taban fiyata göre sınıf fiyatları:</div>
                <div class="pc-preview-group" data-pc-preview-group></div>
                <div class="pc-preview-base">
                    <input type="number" min="0" step="1" value="1000" data-pc-base-input>
                    <span style="font-size:.8rem;color:#94a3b8">taban fiyat</span>
                </div>
                <div class="pc-chips" data-pc-chips></div>
                <p style="font-size:.7rem;color:#64748b;margin:1rem 0 0"><i class="fas fa-circle-info me-1"></i> Önizleme, seçili gruptaki değerleri anlık yansıtır. Tutar farkı, fiyatın para biriminde eklenir.</p>
            </div>
        </div>
    </div>
</div>

{{-- Yeni grup modalı --}}
<div class="modal fade" id="addGroupModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius:20px;border:none;">
            <form action="{{ route('agency.settings.class-groups.store') }}" method="POST">
                @csrf
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold"><i class="fas fa-folder-plus me-2 text-primary"></i>Yeni Sınıflandırma Grubu</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body pt-2">
                    <div class="mb-2">
                        <label class="pc-lbl">Grup Başlığı</label>
                        <input type="text" name="name" class="pc-inp" required maxlength="150" placeholder="Örn: Yurtiçi Turlar Fiyat Sınıfları">
                    </div>
                    <p class="text-muted mb-0" style="font-size:.74rem"><i class="fas fa-circle-info me-1"></i> Grup oluşturulduktan sonra kendi sınıflarını ekleyebilirsiniz. Ürünler, quick-view'da hangi grubu kullanacağını seçer.</p>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" style="border-radius:10px">Vazgeç</button>
                    <button type="submit" class="btn text-white fw-bold" style="border-radius:10px;background:linear-gradient(135deg,#4f46e5,#3730a3);border:none;">Oluştur</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Yeni sınıf modalı (aktif gruba ekler) --}}
<div class="modal fade" id="addClassModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius:20px;border:none;">
            <form action="{{ route('agency.settings.classes.store') }}" method="POST">
                @csrf
                <input type="hidden" name="group_id" value="" data-addclass-group>
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold"><i class="fas fa-layer-group me-2 text-primary"></i>Yeni Fiyat Sınıfı <small class="text-muted fw-600" style="font-size:.72rem" data-addclass-groupname></small></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body pt-2">
                    <div class="mb-3">
                        <label class="pc-lbl">Sınıf Adı</label>
                        <input type="text" name="name" class="pc-inp" required maxlength="100" placeholder="Örn: D Sınıfı / VIP">
                    </div>
                    <div class="mb-3">
                        <label class="pc-lbl">Kod (kısa)</label>
                        <input type="text" name="code" class="pc-inp" maxlength="10" placeholder="Örn: D">
                    </div>
                    <div class="row g-2">
                        <div class="col-6">
                            <label class="pc-lbl">Fark Değeri</label>
                            <input type="number" step="0.01" name="diff_value" class="pc-inp" value="0">
                        </div>
                        <div class="col-6">
                            <label class="pc-lbl">Fark Tipi</label>
                            <select name="diff_type" class="pc-inp">
                                <option value="percent">Yüzde (%)</option>
                                <option value="amount">Tutar</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-check mt-3">
                        <input class="form-check-input" type="checkbox" name="is_base" id="addIsBase">
                        <label class="form-check-label small" for="addIsBase">Bu sınıfı grubun tabanı yap (fiyatlar buradan türetilir)</label>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" style="border-radius:10px">Vazgeç</button>
                    <button type="submit" class="btn text-white fw-bold" style="border-radius:10px;background:linear-gradient(135deg,#4f46e5,#3730a3);border:none;">Ekle</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Gizli silme formu --}}
<form id="pcDeleteForm" method="POST" class="d-none">@csrf @method('DELETE')</form>
@endsection

@push('scripts')
<script>
function pcDeleteClass(url) {
    const run = () => { const f = document.getElementById('pcDeleteForm'); f.action = url; f.submit(); };
    if (typeof Swal !== 'undefined') {
        Swal.fire({ title: 'Sınıf silinsin mi?', text: 'Bu fiyat sınıfı ve tarihlere girilmiş sınıf fiyatları kaldırılacak.', icon: 'warning', showCancelButton: true, confirmButtonColor: '#ef4444', confirmButtonText: 'Evet, sil', cancelButtonText: 'Vazgeç' })
            .then(r => r.isConfirmed && run());
    } else if (confirm('Sınıf silinsin mi?')) run();
}

function pcgDeleteGroup(url, name, classCount) {
    const run = () => { const f = document.getElementById('pcDeleteForm'); f.action = url; f.submit(); };
    const txt = classCount > 0
        ? 'Gruptaki ' + classCount + ' sınıf ve bunlara girilmiş tarih fiyatları da silinecek. Bu grubu kullanan ürünler varsayılan gruba döner.'
        : 'Bu grubu kullanan ürünler varsayılan gruba döner.';
    if (typeof Swal !== 'undefined') {
        Swal.fire({ title: '“' + name + '” silinsin mi?', text: txt, icon: 'warning', showCancelButton: true, confirmButtonColor: '#ef4444', confirmButtonText: 'Evet, grubu sil', cancelButtonText: 'Vazgeç' })
            .then(r => r.isConfirmed && run());
    } else if (confirm('“' + name + '” grubu silinsin mi? ' + txt)) run();
}

(function () {
    const tabs = document.querySelectorAll('[data-pcg-tab]');
    const panels = document.querySelectorAll('[data-pcg-panel]');
    const preview = document.querySelector('[data-pc-preview]');
    if (!preview) return;
    const chips = preview.querySelector('[data-pc-chips]');
    const groupLabel = preview.querySelector('[data-pc-preview-group]');
    const baseInput = preview.querySelector('[data-pc-base-input]');

    function activeRoot() {
        const p = document.querySelector('.pcg-panel.is-active [data-pc-root]');
        return p || null;
    }

    function fmt(n) { return new Intl.NumberFormat('tr-TR', { maximumFractionDigits: 2 }).format(n); }

    function derive(base, type, value, isBase) {
        if (isBase) return base;
        return type === 'amount' ? base + value : base * (1 + value / 100);
    }

    function render() {
        const root = activeRoot();
        if (!root) { chips.innerHTML = ''; return; }
        if (groupLabel) groupLabel.innerHTML = '<i class="fas fa-folder-open me-1"></i>' + (root.dataset.groupName || '');
        const base = parseFloat(baseInput.value) || 0;
        const baseId = (root.querySelector('input[name="base_id"]:checked') || {}).value;
        let html = '';
        root.querySelectorAll('[data-pc-item]').forEach(function (row) {
            const nameInp = row.querySelector('input[name$="[name]"]');
            const codeInp = row.querySelector('input[name$="[code]"]');
            const valInp = row.querySelector('.pc-diffval');
            const typeInp = row.querySelector('input[name$="[diff_type]"]:checked');
            const baseRadio = row.querySelector('input[name="base_id"]');
            const isBase = baseRadio && baseRadio.value === baseId;
            const name = (nameInp && nameInp.value) || (codeInp && codeInp.value) || 'Sınıf';
            const val = parseFloat(valInp && valInp.value) || 0;
            const type = typeInp ? typeInp.value : 'percent';
            const price = derive(base, type, val, isBase);
            const diffLabel = isBase ? 'taban' : (type === 'amount' ? ('+' + fmt(val)) : ('+' + fmt(val) + '%'));
            html += '<div class="pc-chip ' + (isBase ? 'base' : '') + '">' +
                        '<div class="cn">' + name + '</div>' +
                        '<div class="cp">' + fmt(Math.max(0, Math.round(price * 100) / 100)) + '</div>' +
                        '<div class="cd">' + diffLabel + '</div>' +
                    '</div>';
        });
        chips.innerHTML = html || '<span style="color:#64748b;font-size:.8rem">Bu grupta sınıf yok</span>';
    }

    // Taban seçimi değişince: taban satırının fark alanlarını kilitle/aç ve stil güncelle
    function syncBaseLocks(root) {
        if (!root) return;
        const baseId = (root.querySelector('input[name="base_id"]:checked') || {}).value;
        root.querySelectorAll('[data-pc-item]').forEach(function (row) {
            const baseRadio = row.querySelector('input[name="base_id"]');
            const isBase = baseRadio && baseRadio.value === baseId;
            row.classList.toggle('is-base', isBase);
            const valInp = row.querySelector('.pc-diffval');
            const types = row.querySelectorAll('input[name$="[diff_type]"]');
            const activeSw = row.querySelector('.pc-switch');
            if (valInp) valInp.disabled = isBase;
            types.forEach(t => t.disabled = isBase);
            if (activeSw) { activeSw.disabled = isBase; if (isBase) activeSw.checked = true; }
            const del = row.querySelector('.pc-del');
            if (del) del.disabled = isBase && root.querySelectorAll('[data-pc-item]').length > 1;
        });
    }

    // Sekme geçişi
    tabs.forEach(function (tab) {
        tab.addEventListener('click', function () {
            tabs.forEach(t => { t.classList.toggle('is-active', t === tab); });
            panels.forEach(p => p.classList.toggle('is-active', p.dataset.pcgPanel === tab.dataset.pcgTab));
            render();
        });
    });

    // Panel içi düzenlemeler
    document.querySelectorAll('[data-pc-root]').forEach(function (root) {
        root.addEventListener('input', render);
        root.addEventListener('change', function () { syncBaseLocks(root); render(); });
        syncBaseLocks(root);
    });
    baseInput.addEventListener('input', render);

    // Grup adı düzenleme: değişince kaydet butonunu göster
    document.querySelectorAll('[data-pcg-rename]').forEach(function (form) {
        const inp = form.querySelector('.pcg-name-inp');
        const initial = inp.value;
        inp.addEventListener('input', function () {
            form.classList.toggle('is-dirty', inp.value.trim() !== initial && inp.value.trim() !== '');
        });
    });

    // "Yeni Sınıf" hangi gruptan açıldıysa modala işle
    document.querySelectorAll('[data-pcg-addclass]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const gid = btn.getAttribute('data-pcg-addclass');
            const root = document.querySelector('[data-pc-root][data-group-id="' + gid + '"]');
            const modal = document.getElementById('addClassModal');
            modal.querySelector('[data-addclass-group]').value = gid;
            modal.querySelector('[data-addclass-groupname]').textContent = root ? ('→ ' + root.dataset.groupName) : '';
        });
    });

    render();
})();
</script>
@endpush