@extends('admin.layouts.netgescon')

@section('page-title', 'Scheda Anagrafica')

@section('breadcrumb')
    <span>Rubrica Unica</span>
    <i class="fas fa-chevron-right text-xs"></i>
    <span>Scheda soggetto</span>
@endsection

@php
    $condominium = $condominium ?? [
        'name' => 'Condominio Via Germanico 12',
        'code' => 'COND-0021',
        'address' => 'Via Germanico 12, 00192 Roma',
        'units' => 42,
    ];

    $subject = $subject ?? [
        'id' => 2149,
        'name' => 'Michele Barone',
        'code' => 'SUB-2149',
        'roles' => ['Proprietario', 'Cliente'],
        'status' => 'Attivo',
        'phone' => '+39 0639731100',
        'email' => 'm.barone@mclink.it',
        'codice_fiscale' => 'BRNMHL69M11H501K',
        'partita_iva' => '09878630582',
        'documento' => 'Patente RM3549466G',
    ];

    $unitAssociations = $unitAssociations ?? [
        ['label' => 'Scala A · Interno 5', 'millesimi' => 45, 'tipo' => 'Proprietario', 'note' => 'Locale abitativo', 'piano' => '2', 'uso' => 'Abitazione'],
        ['label' => 'Scala B · Locale Tecnico', 'millesimi' => null, 'tipo' => 'Manutentore', 'note' => 'Locale contatori', 'piano' => 'T', 'uso' => 'Locale tecnico'],
        ['label' => 'Box 18', 'millesimi' => null, 'tipo' => 'Pertinenza', 'note' => 'Pertinenza collegata a Scala A', 'piano' => '-1', 'uso' => 'Box'],
    ];

    $indicators = $indicators ?? [
        ['label' => 'Unità collegate', 'value' => count($unitAssociations), 'icon' => 'fa-building', 'tone' => 'indigo'],
        ['label' => 'Rate scadute', 'value' => '€ 1.240', 'icon' => 'fa-file-invoice-dollar', 'tone' => 'orange'],
        ['label' => 'Ticket aperti', 'value' => 1, 'icon' => 'fa-headset', 'tone' => 'cyan'],
        ['label' => 'Stato anagrafica', 'value' => $subject['status'], 'icon' => 'fa-shield-check', 'tone' => 'emerald'],
    ];

    $tabs = $tabs ?? [
        'overview' => 'Panoramica',
        'addresses' => 'Indirizzi & recapiti',
        'fiscal' => 'Dati fiscali',
        'relations' => 'Relazioni condominiali',
        'crm' => 'CRM & attività',
        'documents' => 'Documenti',
        'channels' => 'Canali digitali',
        'financial' => 'Pagamenti & banche',
        'rentals' => 'Affitti collegati',
    ];

    $breadcrumbs = $breadcrumbs ?? [
        ['label' => 'Dashboard', 'icon' => 'fa-home', 'route' => '#'],
        ['label' => 'Anagrafica', 'icon' => 'fa-address-book', 'route' => '#'],
        ['label' => 'Scheda soggetto', 'icon' => 'fa-id-card', 'route' => null],
    ];

    $actions = ($actions ?? collect())->count() ? $actions : collect([
        ['label' => 'Nuova nota CRM', 'icon' => 'fa-note-sticky', 'color' => 'primary'],
        ['label' => 'Invia email', 'icon' => 'fa-envelope', 'color' => 'success'],
        ['label' => 'Invia SMS', 'icon' => 'fa-sms', 'color' => 'warning'],
        ['label' => 'Allega documento', 'icon' => 'fa-paperclip', 'color' => 'dark'],
        ['label' => 'Crea accesso web', 'icon' => 'fa-globe', 'color' => 'info'],
    ]);

    $sidebarStats = ($sidebarStats ?? collect())->count() ? $sidebarStats : collect([
        ['label' => 'Rate scadute', 'value' => '€ 1.240', 'hint' => '2 posizioni aperte', 'tone' => 'danger'],
        ['label' => 'Documenti mancanti', 'value' => '3', 'hint' => 'CF, IBAN, Documento identità', 'tone' => 'warning'],
        ['label' => 'Ticket aperti', 'value' => '1', 'hint' => 'Richiesta manutenzione caldaia', 'tone' => 'info'],
    ]);

    $tasks = ($tasks ?? collect())->count() ? $tasks : collect([
        ['title' => 'Verificare codice fiscale importato', 'due' => 'Oggi', 'priority' => 'high'],
        ['title' => 'Aggiornare IBAN per SDD', 'due' => 'Domani', 'priority' => 'medium'],
        ['title' => 'Confermare accesso al portale', 'due' => 'Settimana prossima', 'priority' => 'low'],
    ]);

    $alerts = $alerts ?? [];
@endphp

@section('content')
<div class="space-y-8 netgescon-fade-in pb-10">
            @if(!empty($alerts))
                <div class="netgescon-card bg-amber-50 border border-amber-200 text-amber-800">
                    <ul class="list-disc ml-5 space-y-1 text-sm">
                        @foreach($alerts as $alert)
                            <li>{{ $alert }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <x-anagrafica.context-header
                :breadcrumbs="$breadcrumbs"
                :condominium="$condominium"
                :subject="$subject"
                :indicators="$indicators"
                :show-breadcrumbs="false"
            />

            <div class="scheda-grid">
                <section class="scheda-grid__main">
                    <div class="netgescon-card scheda-card h-full flex flex-col">
                        <div class="scheda-toolbar">
                            <a
                                href="{{ url('/admin/rubrica') }}"
                                class="netgescon-btn netgescon-btn-outline-primary"
                            >
                                <i class="fas fa-arrow-left mr-2"></i>
                                Torna alla Rubrica Unica
                            </a>
                            <span class="text-sm text-slate-500">
                                Ricerca e selezione nominativi ora avviene dalla Rubrica.
                            </span>
                        </div>
                        <div class="scheda-tabs" role="tablist">
                            @foreach($tabs as $key => $label)
                                <button
                                    class="scheda-tab {{ $loop->first ? 'is-active' : '' }}"
                                    type="button"
                                    data-tab-target="tab-{{ $key }}"
                                >
                                    {{ $label }}
                                </button>
                            @endforeach
                        </div>

                        <div class="scheda-panels" id="scheda-tab-content">
                            @foreach($tabs as $key => $label)
                                <div class="scheda-panel {{ $loop->first ? 'is-active' : '' }}" id="tab-{{ $key }}">
                                    @switch($key)
                                        @case('overview')
                                            <div class="grid gap-6 lg:grid-cols-2">
                                                <div class="soft-card">
                                                    <div class="flex items-start justify-between mb-4">
                                                        <div>
                                                            <p class="text-xs uppercase tracking-wide text-slate-500 mb-1">Generalità</p>
                                                            <h4 class="text-xl font-semibold text-slate-900">{{ $subject['name'] }}</h4>
                                                        </div>
                                                        <span class="pill pill-success">{{ implode(' · ', $subject['roles'] ?? []) ?: 'Contatto' }}</span>
                                                    </div>
                                                    <dl class="space-y-3 text-sm">
                                                        <div class="flex items-center justify-between border-b pb-3">
                                                            <dt class="text-slate-500">Codice fiscale</dt>
                                                            <dd class="font-semibold text-slate-900">{{ $subject['codice_fiscale'] ?? '—' }}</dd>
                                                        </div>
                                                        <div class="flex items-center justify-between border-b pb-3">
                                                            <dt class="text-slate-500">Partita IVA</dt>
                                                            <dd class="font-semibold text-slate-900">{{ $subject['partita_iva'] ?? '—' }}</dd>
                                                        </div>
                                                        <div class="flex items-center justify-between">
                                                            <dt class="text-slate-500">Documento identità</dt>
                                                            <dd class="font-semibold text-slate-900">{{ $subject['documento'] ?? '—' }}</dd>
                                                        </div>
                                                    </dl>
                                                    <button class="netgescon-btn netgescon-btn-outline-secondary mt-6">
                                                        <i class="fas fa-pen mr-2"></i>Modifica generalità
                                                    </button>
                                                </div>
                                                <div class="soft-card">
                                                    <p class="text-xs uppercase tracking-wide text-slate-500 mb-3">Unità associate</p>
                                                    <div class="space-y-4">
                                                        @forelse($unitAssociations as $unit)
                                                            <div class="flex items-start justify-between">
                                                                <div>
                                                                    <p class="font-semibold text-slate-900">{{ $unit['label'] ?? 'Unità' }}</p>
                                                                    <p class="text-sm text-slate-500">
                                                                        {{ $unit['note'] ?? ($unit['uso'] ?? 'Uso non indicato') }}
                                                                        @if(!empty($unit['millesimi']))
                                                                            · Millesimi {{ rtrim(rtrim(number_format($unit['millesimi'], 2, ',', ''), '0'), ',') }}
                                                                        @endif
                                                                    </p>
                                                                </div>
                                                                <span class="pill pill-primary">{{ $unit['tipo'] ?? 'Collegato' }}</span>
                                                            </div>
                                                        @empty
                                                            <p class="text-sm text-slate-500">Nessuna unità collegata dal dataset import.</p>
                                                        @endforelse
                                                    </div>
                                                </div>
                                            </div>
                                                    @break

                                    @case('addresses')
                                        <div class="grid gap-6 md:grid-cols-2">
                                            <div class="soft-card">
                                                <p class="text-xs uppercase tracking-wide text-slate-500 mb-2">Sede legale</p>
                                                <h4 class="text-lg font-semibold text-slate-900">Via Augusto Riboty 1</h4>
                                                <p class="text-slate-500 mb-4">00195 Roma (RM) · Italia</p>
                                                <label class="flex items-center gap-2 text-sm text-slate-600">
                                                    <input type="checkbox" checked class="w-4 h-4 text-blue-600 border-slate-300 rounded" />
                                                    Sincronizza con indirizzo operativo
                                                </label>
                                            </div>
                                            <div class="soft-card">
                                                <p class="text-xs uppercase tracking-wide text-slate-500 mb-2">Fatturazione</p>
                                                <div class="flex items-center gap-3 bg-orange-50 border border-orange-200 rounded-2xl px-4 py-3 mb-4 text-orange-800">
                                                    <i class="fas fa-exclamation-triangle"></i>
                                                    <span class="font-semibold">Da validare: CAP mancante.</span>
                                                </div>
                                                <p class="text-slate-500 text-sm">Per import correnti da Gescon verrà mostrato il dettaglio versione.</p>
                                            </div>
                                        </div>
                                        @break

                                    @case('fiscal')
                                        <div class="grid gap-6 lg:grid-cols-[minmax(0,320px)_minmax(0,1fr)]">
                                            <div class="soft-card">
                                                <p class="text-xs uppercase tracking-wide text-slate-500 mb-3">Certificazione unica</p>
                                                <ul class="space-y-3 text-sm text-slate-600">
                                                    <li class="flex items-center justify-between border-b pb-3"><span>Categoria previdenziale</span><strong class="text-slate-900">33</strong></li>
                                                    <li class="flex items-center justify-between border-b pb-3"><span>Codice fiscale rappresentante</span><strong class="text-slate-900">BRNMHL69M11H501K</strong></li>
                                                    <li class="flex items-center justify-between"><span>Escludi CU</span><span class="pill pill-muted">No</span></li>
                                                </ul>
                                            </div>
                                            <div class="soft-card">
                                                <p class="text-xs uppercase tracking-wide text-slate-500 mb-3">Adempimenti</p>
                                                <div class="timeline">
                                                    <div class="timeline-item">
                                                        <span class="timeline-dot success"></span>
                                                        <div>
                                                            <p class="font-semibold text-slate-900 mb-0">PEC collegata</p>
                                                            <p class="text-sm text-slate-500">m.barone@mclink.it</p>
                                                        </div>
                                                    </div>
                                                    <div class="timeline-item">
                                                        <span class="timeline-dot warning"></span>
                                                        <div>
                                                            <p class="font-semibold text-slate-900 mb-0">Dichiarazione estera non caricata</p>
                                                            <p class="text-sm text-slate-500">Richiedere documento entro 15/12</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @break

                                    @case('relations')
                                        <div class="soft-card overflow-hidden p-0">
                                            <div class="overflow-x-auto">
                                                <table class="min-w-full divide-y divide-slate-200 text-sm">
                                                    <thead class="bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
                                                        <tr>
                                                            <th class="px-6 py-3 text-left">Unità</th>
                                                            <th class="px-6 py-3 text-left">Ruolo</th>
                                                            <th class="px-6 py-3 text-left">Periodo</th>
                                                            <th class="px-6 py-3 text-left">Millesimi</th>
                                                            <th class="px-6 py-3 text-left">Stato</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody class="divide-y divide-slate-100 text-slate-700">
                                                        <tr>
                                                            <td class="px-6 py-4">Scala A / Interno 5</td>
                                                            <td class="px-6 py-4"><span class="pill pill-primary">Proprietario</span></td>
                                                            <td class="px-6 py-4">01/2015 → Oggi</td>
                                                            <td class="px-6 py-4">45,000</td>
                                                            <td class="px-6 py-4"><span class="pill pill-success">Attivo</span></td>
                                                        </tr>
                                                        <tr>
                                                            <td class="px-6 py-4">Scala B / Locale Tecnico</td>
                                                            <td class="px-6 py-4"><span class="pill pill-warning">Manutentore</span></td>
                                                            <td class="px-6 py-4">06/2022 → 06/2025</td>
                                                            <td class="px-6 py-4">—</td>
                                                            <td class="px-6 py-4"><span class="pill pill-warning">In scadenza</span></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        @break

                                    @case('crm')
                                        <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
                                            <p class="text-xs uppercase tracking-wide text-slate-500 mb-0">Timeline attività</p>
                                            <button class="netgescon-btn netgescon-btn-primary">
                                                <i class="fas fa-plus mr-2"></i>Nuova attività
                                            </button>
                                        </div>
                                        <div class="timeline">
                                            <div class="soft-card">
                                                <div class="flex flex-wrap items-center gap-3 mb-2">
                                                    <span class="pill pill-info">Email</span>
                                                    <strong class="text-slate-900">Invio AVVISO rate luglio</strong>
                                                    <small class="text-slate-500">06/07/2011 · Operatore: Michele</small>
                                                </div>
                                                <p class="text-slate-600 text-sm">"Ciao Michele, come stai per quel problema"</p>
                                            </div>
                                            <div class="soft-card">
                                                <div class="flex flex-wrap items-center gap-3 mb-2">
                                                    <span class="pill pill-success">Chiamata</span>
                                                    <strong class="text-slate-900">Richiesta sollecito pagamento</strong>
                                                    <small class="text-slate-500">18/02/2011 · Operatore: Michele</small>
                                                </div>
                                                <p class="text-slate-600 text-sm">Cliente conferma pagamento entro 5 giorni.</p>
                                            </div>
                                        </div>
                                        @break

                                    @case('documents')
                                        <div class="grid gap-6 md:grid-cols-3">
                                            <div class="soft-card text-center">
                                                <i class="fas fa-id-card text-2xl text-blue-600 mb-4"></i>
                                                <p class="font-semibold text-slate-900 mb-1">Documento identità</p>
                                                <p class="text-sm text-slate-500 mb-4">Scadenza 27/11/2017</p>
                                                <button class="netgescon-btn netgescon-btn-outline-secondary">Carica nuovo</button>
                                            </div>
                                            <div class="soft-card md:col-span-2">
                                                <p class="text-xs uppercase tracking-wide text-slate-500 mb-4">Documenti allegati</p>
                                                <div class="space-y-4">
                                                    <div class="flex items-center justify-between">
                                                        <div>
                                                            <p class="font-semibold text-slate-900 mb-1">Contratto di locazione.pdf</p>
                                                            <p class="text-sm text-slate-500">Caricato il 12/09/2024 · 2.4 MB</p>
                                                        </div>
                                                        <button class="netgescon-btn netgescon-btn-outline-primary netgescon-btn-sm" title="Scarica">
                                                            <i class="fas fa-download"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @break

                                    @case('channels')
                                        <div class="grid gap-6 md:grid-cols-2">
                                            <div class="soft-card">
                                                <p class="text-xs uppercase tracking-wide text-slate-500 mb-4">Email & PEC</p>
                                                <ul class="space-y-3 text-sm text-slate-600">
                                                    <li class="flex items-center justify-between"><span>Fatture elettroniche</span><strong class="text-slate-900">m.barone@mclink.it</strong></li>
                                                    <li class="flex items-center justify-between"><span>Avvisi generali</span><strong class="text-slate-900">m.barone@mclink.it</strong></li>
                                                    <li class="flex items-center justify-between"><span>PEC</span><strong class="text-slate-900">m.barone@pec.it</strong></li>
                                                </ul>
                                            </div>
                                            <div class="soft-card">
                                                <p class="text-xs uppercase tracking-wide text-slate-500 mb-3">SMS & notifiche</p>
                                                <p class="text-sm text-slate-600 mb-4">Configura canali per campagne rapide o invii di emergenza.</p>
                                                <button class="netgescon-btn netgescon-btn-success">Configura preferenze</button>
                                            </div>
                                        </div>
                                        @break

                                    @case('financial')
                                        <div class="grid gap-6 md:grid-cols-2">
                                            <div class="soft-card">
                                                <p class="text-xs uppercase tracking-wide text-slate-500 mb-2">IBAN e mandati</p>
                                                <p class="font-semibold text-slate-900 mb-1">IT60 X054 2811 1010 0000 0123 456</p>
                                                <p class="text-sm text-slate-500 mb-3">ABI 05428 · CAB 11101 · Banca Nazionale</p>
                                                <div class="flex flex-wrap gap-2">
                                                    <span class="pill pill-success">Verificato</span>
                                                    <span class="pill pill-muted">SDD</span>
                                                </div>
                                            </div>
                                            <div class="soft-card">
                                                <p class="text-xs uppercase tracking-wide text-slate-500 mb-2">Storico pagamenti</p>
                                                <ul class="space-y-3 text-sm">
                                                    <li class="flex items-center justify-between"><span>Fattura rate trimestre Q3</span><strong class="text-emerald-600">Pagata 12/10/2025</strong></li>
                                                    <li class="flex items-center justify-between"><span>Saldo straordinario ascensore</span><strong class="text-rose-600">In sospeso</strong></li>
                                                </ul>
                                            </div>
                                        </div>
                                        @break

                                    @case('rentals')
                                        <div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(320px,360px)]">
                                            <div class="soft-card">
                                                <p class="text-xs uppercase tracking-wide text-slate-500 mb-2">Contratti collegati</p>
                                                <p class="text-sm text-slate-600 mb-4">
                                                    In questa sezione mostreremo tutti i contratti di locazione associati al soggetto
                                                    e, quando appartiene a uno stabile, la vista riepilogativa dell'intero complesso.
                                                </p>
                                                <ul class="space-y-3 text-sm">
                                                    <li class="flex items-center justify-between border-b pb-3">
                                                        <span class="text-slate-500">Unità collegata</span>
                                                        <strong class="text-slate-900">Scala A / Interno 5</strong>
                                                    </li>
                                                    <li class="flex items-center justify-between border-b pb-3">
                                                        <span class="text-slate-500">Contratto attivo</span>
                                                        <span class="pill pill-success">Dal 01/09/2023</span>
                                                    </li>
                                                    <li class="flex items-center justify-between">
                                                        <span class="text-slate-500">Canone attuale</span>
                                                        <strong class="text-slate-900">€ 980 / mese</strong>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="soft-card bg-slate-50 border-dashed border-slate-300">
                                                <p class="text-xs uppercase tracking-wide text-slate-500 mb-3">Prossimi passi</p>
                                                <p class="text-sm text-slate-600 mb-4">
                                                    Collega rapidamente gli affitti esistenti oppure crea un nuovo contratto e
                                                    sincronizzalo con la gestione affitti dello stabile.</p>
                                                <div class="flex flex-col gap-3">
                                                    <button class="netgescon-btn netgescon-btn-primary">
                                                        <i class="fas fa-link mr-2"></i>Collega affitto esistente
                                                    </button>
                                                    <a href="{{ route('admin.affitti.index') }}" class="netgescon-btn netgescon-btn-outline-secondary">
                                                        <i class="fas fa-building mr-2"></i>Apri gestione affitti stabile
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        @break

                                @default
                                    <div class="soft-card">
                                        <p class="text-slate-500">Contenuto in preparazione.</p>
                                    </div>
                            @endswitch
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        <aside class="scheda-grid__rail">
            <x-anagrafica.action-rail
                :actions="$actions"
                :stats="$sidebarStats"
                :tasks="$tasks"
            />
        </aside>
    </div>
</div>
@endsection

@push('styles')
<style>
    .scheda-grid {
        display: grid;
        gap: 1.5rem;
        grid-template-columns: minmax(0, 1fr);
    }

    @media (min-width: 1024px) {
        .scheda-grid {
            grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
            align-items: flex-start;
        }
    }

    .scheda-grid__list,
    .scheda-grid__main,
    .scheda-grid__rail {
        width: 100%;
    }

    .scheda-grid__rail {
        position: sticky;
        top: 1.5rem;
        align-self: start;
    }

    .scheda-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.25rem;
    }

    .scheda-card {
        border-radius: 28px;
        padding: 1.75rem;
        gap: 1.5rem;
    }

    .scheda-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .scheda-tab {
        border-radius: 999px;
        border: 1px solid #e0e7ff;
        background: #fff;
        color: #475569;
        font-weight: 600;
        padding: 0.45rem 1.2rem;
        transition: all 0.2s ease;
    }

    .scheda-tab.is-active {
        background: linear-gradient(135deg, #2563eb, #7c3aed);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 12px 24px rgba(59, 130, 246, 0.25);
    }

    .scheda-panel {
        display: none;
        flex-direction: column;
        gap: 1.5rem;
    }

    .scheda-panel.is-active {
        display: flex;
    }

    .soft-card {
        border: 1px solid #e2e8f0;
        border-radius: 24px;
        padding: 1.5rem;
        background: #fff;
        box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
    }

    .pill {
        border-radius: 999px;
        padding: 0.2rem 0.85rem;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .pill-primary { background: rgba(37, 99, 235, 0.15); color: #1d4ed8; }
    .pill-success { background: rgba(16, 185, 129, 0.15); color: #047857; }
    .pill-warning { background: rgba(251, 191, 36, 0.2); color: #92400e; }
    .pill-muted { background: rgba(148, 163, 184, 0.2); color: #475569; }

    .timeline {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .timeline-item {
        display: flex;
        gap: 0.9rem;
        align-items: flex-start;
    }

    .timeline-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-top: 0.35rem;
    }

    .timeline-dot.success { background: #10b981; }
    .timeline-dot.warning { background: #f97316; }
    .timeline-dot.info { background: #0ea5e9; }

    @media (max-width: 640px) {
        .scheda-tabs {
            flex-direction: column;
        }

        .scheda-tab {
            width: 100%;
            text-align: center;
        }

        .scheda-toolbar {
            flex-direction: column;
            align-items: flex-start;
        }
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const tabs = document.querySelectorAll('.scheda-tab');
        const panels = document.querySelectorAll('.scheda-panel');

        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                const targetId = tab.getAttribute('data-tab-target');

                tabs.forEach(t => t.classList.remove('is-active'));
                panels.forEach(panel => panel.classList.remove('is-active'));

                tab.classList.add('is-active');
                document.getElementById(targetId)?.classList.add('is-active');
            });
        });
    });
</script>
@endpush