<x-filament-panels::page>
@php
    $columns = $this->getColumns();
    $stats = $this->getStats();
    $detail = $this->getOpenCardDetail();
@endphp

<style>
:root {
  --pb-bg: #F7F7F5;
  --pb-surface: #FFFFFF;
  --pb-border: rgba(0,0,0,0.08);
  --pb-border-md: rgba(0,0,0,0.14);
  --pb-text: #111;
  --pb-text-2: #555;
  --pb-text-3: #999;
  --pb-blue: #1C6EF2;
  --pb-blue-bg: #EBF2FF;
  --pb-blue-text: #1347A8;
  --pb-green: #16A34A;
  --pb-green-bg: #DCFCE7;
  --pb-green-text: #166534;
  --pb-amber: #D97706;
  --pb-amber-bg: #FEF3C7;
  --pb-amber-text: #92400E;
  --pb-red: #DC2626;
  --pb-red-bg: #FEE2E2;
  --pb-red-text: #991B1B;
  --pb-purple: #7C3AED;
  --pb-purple-bg: #EDE9FE;
  --pb-purple-text: #4C1D95;
  --pb-gray-bg: #F1F0EE;
  --pb-gray-text: #444;
}
.dark {
  --pb-bg: #0f172a;
  --pb-surface: #1f2937;
  --pb-border: rgba(255,255,255,0.08);
  --pb-border-md: rgba(255,255,255,0.18);
  --pb-text: #f1f5f9;
  --pb-text-2: #cbd5e1;
  --pb-text-3: #94a3b8;
  --pb-blue-bg: #1e293b;
  --pb-blue-text: #93c5fd;
  --pb-green-bg: #14532d;
  --pb-green-text: #86efac;
  --pb-amber-bg: #422006;
  --pb-amber-text: #fcd34d;
  --pb-red-bg: #450a0a;
  --pb-red-text: #fca5a5;
  --pb-purple-bg: #3b0764;
  --pb-purple-text: #c4b5fd;
  --pb-gray-bg: #374151;
  --pb-gray-text: #d1d5db;
}

/* Break out of Filament chrome */
.fi-main-ctn:has(.pb-shell) { padding: 0 !important; }
.fi-main:has(.pb-shell) { padding: 0 !important; }
.fi-page:has(.pb-shell) > div { padding: 0 !important; gap: 0 !important; }
.fi-page:has(.pb-shell) .fi-header { display: none !important; }
.fi-page:has(.pb-shell) { gap: 0 !important; }

.pb-shell { background:var(--pb-bg); color:var(--pb-text); margin:0; padding:0; min-height:calc(100vh - 64px); font-size:13px; display:flex; flex-direction:column; }

/* TOPBAR */
.pb-topbar { height:52px; background:var(--pb-surface); border-bottom:1px solid var(--pb-border); display:flex; align-items:center; padding:0 20px; gap:12px; flex-shrink:0; }
.pb-topbar-title { font-size:15px; font-weight:600; letter-spacing:-.2px; }
.pb-topbar-sep { width:1px; height:18px; background:var(--pb-border-md); }
.pb-search { display:flex; align-items:center; gap:6px; background:var(--pb-bg); border:1px solid var(--pb-border); border-radius:6px; padding:5px 10px; flex:1; max-width:320px; }
.pb-search input { border:none; background:transparent; outline:none; font-size:12px; color:var(--pb-text); width:100%; }
.pb-search-icon { color:var(--pb-text-3); font-size:14px; }
.pb-topbar-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.pb-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:6px; font-size:12px; font-weight:500; cursor:pointer; border:1px solid var(--pb-border-md); background:var(--pb-surface); color:var(--pb-text); white-space:nowrap; text-decoration:none; }
.pb-btn:hover { background:var(--pb-bg); }
.pb-btn-primary { background:var(--pb-blue); color:#fff !important; border-color:var(--pb-blue); }
.pb-btn-primary:hover { background:#1557d4; }

.pb-stat-strip { background:var(--pb-surface); border-bottom:1px solid var(--pb-border); padding:10px 20px; display:flex; gap:20px; flex-wrap:wrap; flex-shrink:0; }
.pb-stat-item { display:flex; flex-direction:column; gap:2px; min-width:60px; }
.pb-stat-val { font-size:16px; font-weight:600; }
.pb-stat-lbl { font-size:10px; color:var(--pb-text-3); white-space:nowrap; }
.pb-stat-sep { width:1px; background:var(--pb-border); align-self:stretch; }

.pb-filter-bar { background:var(--pb-surface); border-bottom:1px solid var(--pb-border); padding:8px 20px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex-shrink:0; }
.pb-view-toggle { display:flex; background:var(--pb-bg); border-radius:6px; padding:2px; border:1px solid var(--pb-border); }
.pb-vt-btn { display:flex; align-items:center; gap:4px; padding:4px 10px; border-radius:4px; font-size:11px; font-weight:500; cursor:pointer; color:var(--pb-text-3); }
.pb-vt-btn.active { background:var(--pb-surface); color:var(--pb-text); box-shadow:0 1px 2px rgba(0,0,0,0.08); }
.pb-chip { display:flex; align-items:center; gap:4px; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:500; cursor:pointer; border:1px solid var(--pb-border); background:var(--pb-surface); color:var(--pb-text-2); }
.pb-chip:hover { border-color:var(--pb-border-md); }
.pb-chip.active { background:var(--pb-blue-bg); border-color:#93B8F9; color:var(--pb-blue-text); }
.pb-filter-sep { width:1px; height:20px; background:var(--pb-border); }
.pb-period { display:flex; align-items:center; gap:5px; padding:4px 10px; border:1px solid var(--pb-border); border-radius:6px; font-size:11px; background:var(--pb-surface); color:var(--pb-text-2); }
.pb-total { margin-left:auto; font-size:11px; color:var(--pb-text-2); }
.pb-total strong { color:var(--pb-text); }

.pb-board { display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; padding:16px 20px; align-items:flex-start; flex:1; min-height:0; }
.pb-col { width:260px; flex-shrink:0; display:flex; flex-direction:column; gap:6px; height:100%; }
.pb-col.over .pb-col-body { background:var(--pb-blue-bg); border-radius:8px; }
.pb-col-head { background:var(--pb-surface); border:1px solid var(--pb-border); border-radius:10px; padding:10px 12px; flex-shrink:0; }
.pb-col-head-top { display:flex; align-items:center; justify-content:space-between; }
.pb-col-name { font-size:12px; font-weight:600; display:flex; align-items:center; gap:6px; }
.pb-col-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.pb-col-count { font-size:10px; font-weight:600; background:var(--pb-bg); padding:1px 6px; border-radius:8px; color:var(--pb-text-2); }
.pb-col-sum { font-size:11px; color:var(--pb-text-3); margin-top:3px; }
.pb-col-sum strong { color:var(--pb-text-2); }
.pb-col-body { flex:1; display:flex; flex-direction:column; gap:6px; overflow-y:auto; padding:2px; transition:background .15s; min-height:60px; }
.pb-col-body::-webkit-scrollbar { width:3px; }
.pb-col-body::-webkit-scrollbar-thumb { background:var(--pb-border-md); border-radius:2px; }

.pb-deal { background:var(--pb-surface); border:1px solid var(--pb-border); border-radius:10px; padding:11px 12px; cursor:pointer; transition:all .12s; position:relative; }
.pb-deal:hover { border-color:var(--pb-border-md); box-shadow:0 4px 12px rgba(0,0,0,0.1); transform:translateY(-1px); }
.pb-deal.dragging { opacity:0.4; }
.pb-deal-urgent { position:absolute; top:0; left:0; width:3px; height:100%; background:var(--pb-red); border-radius:10px 0 0 10px; }
.pb-deal-id { font-size:10px; color:var(--pb-text-3); font-weight:500; letter-spacing:.3px; margin-bottom:4px; }
.pb-deal-subject { font-size:12px; font-weight:600; margin-bottom:3px; line-height:1.3; }
.pb-deal-car { font-size:11px; color:var(--pb-text-2); display:flex; align-items:center; gap:4px; margin-bottom:6px; }
.pb-deal-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.pb-tag { font-size:10px; font-weight:500; padding:2px 7px; border-radius:4px; white-space:nowrap; }
.pb-tag-blue { background:var(--pb-blue-bg); color:var(--pb-blue-text); }
.pb-tag-green { background:var(--pb-green-bg); color:var(--pb-green-text); }
.pb-tag-amber { background:var(--pb-amber-bg); color:var(--pb-amber-text); }
.pb-tag-red { background:var(--pb-red-bg); color:var(--pb-red-text); }
.pb-tag-gray { background:var(--pb-gray-bg); color:var(--pb-gray-text); }
.pb-tag-purple { background:var(--pb-purple-bg); color:var(--pb-purple-text); }
.pb-deal-footer { display:flex; align-items:center; justify-content:space-between; }
.pb-deal-assignee { display:flex; align-items:center; gap:5px; }
.pb-av { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:700; flex-shrink:0; }
.pb-av-blue { background:var(--pb-blue-bg); color:var(--pb-blue-text); }
.pb-av-green { background:var(--pb-green-bg); color:var(--pb-green-text); }
.pb-av-purple { background:var(--pb-purple-bg); color:var(--pb-purple-text); }
.pb-av-amber { background:var(--pb-amber-bg); color:var(--pb-amber-text); }
.pb-av-gray { background:var(--pb-gray-bg); color:var(--pb-gray-text); }
.pb-deal-name { font-size:11px; color:var(--pb-text-2); }
.pb-deal-amount { font-size:12px; font-weight:600; }
.pb-deal-time { font-size:10px; color:var(--pb-text-3); margin-top:5px; display:flex; align-items:center; gap:3px; }
.pb-deal-time.overdue { color:var(--pb-red); }
.pb-progress-bar { height:3px; background:var(--pb-bg); border-radius:2px; overflow:hidden; margin-top:6px; }
.pb-progress-fill { height:100%; border-radius:2px; background:var(--pb-purple); }

/* Hover floating action buttons */
.pb-deal-actions { position:absolute; top:8px; right:8px; display:none; gap:3px; z-index:2; }
.pb-deal:hover .pb-deal-actions { display:flex; }
.pb-act-btn { width:24px; height:24px; border-radius:5px; border:1px solid var(--pb-border); background:var(--pb-surface); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--pb-text-2); font-size:13px; text-decoration:none; }
.pb-act-btn:hover { background:var(--pb-bg); color:var(--pb-text); border-color:var(--pb-border-md); }

/* Col 6 (Achitat azi): faded, no hover actions */
.pb-col[data-col="paid"] .pb-deal { opacity:0.65; }
.pb-col[data-col="paid"] .pb-deal-actions { display:none !important; }

.pb-add-card { display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 12px; border-radius:10px; border:1px dashed var(--pb-border-md); color:var(--pb-text-3); font-size:11px; cursor:pointer; background:transparent; text-decoration:none; flex-shrink:0; }
.pb-add-card:hover { border-color:var(--pb-blue); color:var(--pb-blue); background:var(--pb-blue-bg); }

.pb-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.25); z-index:100; opacity:0; pointer-events:none; transition:opacity .2s; }
.pb-overlay.open { opacity:1; pointer-events:all; }
.pb-panel { position:fixed; right:0; top:0; bottom:0; width:440px; max-width:92vw; background:var(--pb-surface); border-left:1px solid var(--pb-border); z-index:101; transform:translateX(100%); transition:transform .25s cubic-bezier(.4,0,.2,1); overflow:hidden; display:flex; flex-direction:column; }
.pb-panel.open { transform:translateX(0); }
.pb-panel-head { padding:16px 20px 12px; border-bottom:1px solid var(--pb-border); display:flex; align-items:flex-start; justify-content:space-between; background:var(--pb-surface); flex-shrink:0; }
.pb-panel-title { font-size:15px; font-weight:600; line-height:1.3; }
.pb-panel-id { font-size:11px; color:var(--pb-text-3); margin-top:2px; }
.pb-close-btn { width:28px; height:28px; border-radius:6px; border:1px solid var(--pb-border); background:var(--pb-bg); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.pb-panel-body { padding:16px 20px; flex:1; overflow-y:auto; }
.pb-pfield { margin-bottom:14px; }
.pb-pfield-label { font-size:10px; font-weight:600; color:var(--pb-text-3); text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
.pb-pfield-val { font-size:13px; font-weight:500; }
.pb-two-cols { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pb-panel-section { margin-top:16px; padding-top:16px; border-top:1px solid var(--pb-border); }
.pb-panel-sec-title { font-size:11px; font-weight:600; color:var(--pb-text-3); text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }
.pb-stage-stepper { display:flex; gap:4px; }
.pb-stage-step { flex:1; height:4px; border-radius:2px; background:var(--pb-bg); }
.pb-stage-step.done { background:var(--pb-green); }
.pb-stage-step.current { background:var(--pb-blue); }
.pb-stage-labels { display:flex; gap:4px; margin-top:5px; }
.pb-stage-lbl { flex:1; font-size:9px; color:var(--pb-text-3); text-align:center; }
.pb-stage-lbl.current { color:var(--pb-blue); font-weight:600; }
.pb-activity-item { display:flex; gap:10px; margin-bottom:10px; }
.pb-act-icon { width:24px; height:24px; border-radius:6px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; }
.pb-act-text { font-size:12px; color:var(--pb-text-2); flex:1; }
.pb-act-time { font-size:10px; color:var(--pb-text-3); margin-top:1px; }
.pb-quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.pb-quick-btn { display:flex; align-items:center; justify-content:center; gap:5px; padding:8px; font-size:11px; border:1px solid var(--pb-border-md); border-radius:6px; background:var(--pb-surface); color:var(--pb-text); cursor:pointer; text-decoration:none; }
.pb-quick-btn:hover { background:var(--pb-bg); }
.pb-quick-btn.primary { background:var(--pb-blue); color:#fff !important; border-color:var(--pb-blue); }
.pb-quick-btn.primary:hover { background:#1557d4; }

.pb-panel-actions { padding:12px 20px; border-top:1px solid var(--pb-border); display:flex; gap:8px; background:var(--pb-surface); flex-shrink:0; }
.pb-panel-actions .pb-quick-btn { flex:1; }

/* New-card form */
.pb-form-field { margin-bottom:12px; }
.pb-form-field label { display:block; font-size:10px; font-weight:600; color:var(--pb-text-3); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.pb-form-field input, .pb-form-field textarea, .pb-form-field select { width:100%; padding:8px 10px; font-size:13px; border:1px solid var(--pb-border-md); border-radius:6px; background:var(--pb-surface); color:var(--pb-text); outline:none; font-family:inherit; }
.pb-form-field input:focus, .pb-form-field textarea:focus, .pb-form-field select:focus { border-color:var(--pb-blue); }
.pb-form-field textarea { resize:vertical; min-height:60px; }

.pb-empty-col { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 12px; color:var(--pb-text-3); font-size:11px; text-align:center; }
</style>

<div class="pb-shell" x-data="{ view: 'kanban', dragKey: null }" wire:poll.10s>
    {{-- TOPBAR --}}
    <div class="pb-topbar">
        <span class="pb-topbar-title">Pipeline</span>
        <div class="pb-topbar-sep"></div>
        <div class="pb-search">
            <span class="pb-search-icon">🔍</span>
            <input placeholder="Caută client, mașină, număr..." wire:model.live.debounce.300ms="searchQuery" />
        </div>
        <div class="pb-topbar-right">
            <button class="pb-btn" wire:click="setFilter('urgent')">⚠ Filtre</button>
            <a class="pb-btn" wire:click="exportCsv" wire:loading.attr="disabled">⬇ Export</a>
            <button class="pb-btn pb-btn-primary" wire:click="openNewForm">+ Deal nou</button>
        </div>
    </div>

    {{-- STAT STRIP --}}
    <div class="pb-stat-strip">
        <div class="pb-stat-item">
            <span class="pb-stat-val">{{ $stats['active'] }}</span>
            <span class="pb-stat-lbl">Total deals active</span>
        </div>
        <div class="pb-stat-sep"></div>
        <div class="pb-stat-item">
            <span class="pb-stat-val" style="color:var(--pb-blue)">{{ number_format($stats['pipeline_mdl'], 0, '.', ' ') }}</span>
            <span class="pb-stat-lbl">MDL pipeline total</span>
        </div>
        <div class="pb-stat-sep"></div>
        <div class="pb-stat-item">
            <span class="pb-stat-val" style="color:var(--pb-green)">{{ number_format($stats['closed_today_mdl'], 0, '.', ' ') }}</span>
            <span class="pb-stat-lbl">MDL închise azi</span>
        </div>
        <div class="pb-stat-sep"></div>
        <div class="pb-stat-item">
            <span class="pb-stat-val" style="color:var(--pb-amber)">{{ $stats['need_action'] }}</span>
            <span class="pb-stat-lbl">Necesită acțiune</span>
        </div>
        <div class="pb-stat-sep"></div>
        <div class="pb-stat-item">
            <span class="pb-stat-val">{{ $stats['conversion_rate'] }}%</span>
            <span class="pb-stat-lbl">Rata conversie</span>
        </div>
        <div class="pb-stat-sep"></div>
        <div class="pb-stat-item">
            <span class="pb-stat-val" style="color:var(--pb-red)">{{ $stats['overdue'] }}</span>
            <span class="pb-stat-lbl">Depășit termen</span>
        </div>
    </div>

    {{-- FILTER BAR --}}
    <div class="pb-filter-bar">
        <div class="pb-view-toggle">
            <div class="pb-vt-btn" :class="view==='kanban' && 'active'" @click="view='kanban'">📋 Kanban</div>
            <div class="pb-vt-btn" :class="view==='list' && 'active'" @click="view='list'">≡ Listă</div>
        </div>
        <div class="pb-filter-sep"></div>
        <div class="pb-chip {{ $activeFilter === 'all' ? 'active' : '' }}" wire:click="setFilter('all')">Toate</div>
        <div class="pb-chip {{ $activeFilter === 'mine' ? 'active' : '' }}" wire:click="setFilter('mine')">👤 Ale mele</div>
        <div class="pb-chip {{ $activeFilter === 'urgent' ? 'active' : '' }}" wire:click="setFilter('urgent')" style="color:var(--pb-red-text)">⚠ Urgente</div>
        <div class="pb-chip {{ $activeFilter === 'today' ? 'active' : '' }}" wire:click="setFilter('today')">📅 Azi</div>
        <div class="pb-filter-sep"></div>
        <div class="pb-period">📅 {{ now()->locale('ro')->isoFormat('MMMM YYYY') }}</div>
        <div class="pb-total">Pipeline: <strong>{{ number_format($stats['pipeline_mdl'], 0, '.', ' ') }} MDL</strong> · <strong>{{ $stats['active'] }} deals</strong></div>
    </div>

    {{-- KANBAN --}}
    <div class="pb-board" x-show="view==='kanban'">
        @foreach ($columns as $colKey => $col)
            <div class="pb-col" data-col="{{ $colKey }}"
                 @dragover.prevent="$el.classList.add('over')"
                 @dragleave="$el.classList.remove('over')"
                 @drop.prevent="
                    $el.classList.remove('over');
                    if (dragKey) {
                        $wire.moveCard(dragKey, '{{ $colKey }}');
                        dragKey = null;
                    }
                 ">
                <div class="pb-col-head">
                    <div class="pb-col-head-top">
                        <div class="pb-col-name">
                            <div class="pb-col-dot" style="background:{{ $col['color'] }}"></div>
                            {{ $col['label'] }}
                        </div>
                        <span class="pb-col-count">{{ $col['count'] }}</span>
                    </div>
                    <div class="pb-col-sum"><strong>{{ number_format($col['sum'], 0, '.', ' ') }} MDL</strong></div>
                </div>
                <div class="pb-col-body">
                    @forelse ($col['cards'] as $card)
                        <div class="pb-deal"
                             draggable="true"
                             wire:click="openCard('{{ $card['key'] }}')"
                             @dragstart="dragKey='{{ $card['key'] }}'; $el.classList.add('dragging')"
                             @dragend="$el.classList.remove('dragging')">
                            @if ($card['urgent'])
                                <div class="pb-deal-urgent"></div>
                            @endif
                            <div class="pb-deal-actions" @click.stop>
                                @if ($colKey === 'request')
                                    {{-- 📅 calendar-plus / 📞 phone / ⋮ --}}
                                    <a class="pb-act-btn" wire:click.stop="quickSchedule('{{ $card['key'] }}')" title="Programare">📅</a>
                                    @if (!empty($card['phone']))<a class="pb-act-btn" href="tel:{{ $card['phone'] }}" @click.stop title="Sună">📞</a>@endif
                                    <a class="pb-act-btn" href="{{ $card['edit_url'] }}" @click.stop title="Editare">⋮</a>
                                @elseif ($colKey === 'quote')
                                    {{-- 📅 / 💬 message / ⋮ --}}
                                    <a class="pb-act-btn" wire:click.stop="quickSchedule('{{ $card['key'] }}')" title="Programare">📅</a>
                                    @if (!empty($card['phone']))<a class="pb-act-btn" href="https://wa.me/{{ preg_replace('/\D/', '', $card['phone']) }}" target="_blank" @click.stop title="WhatsApp">💬</a>@endif
                                    <a class="pb-act-btn" href="{{ $card['edit_url'] }}" @click.stop title="Editare">⋮</a>
                                @elseif ($colKey === 'scheduled')
                                    {{-- 📄+ file-plus (start WO) / 💬 / ⋮ --}}
                                    <a class="pb-act-btn" wire:click.stop="moveCard('{{ $card['key'] }}', 'in_work')" title="Începe lucrul (creează fișă)">📄</a>
                                    @if (!empty($card['phone']))<a class="pb-act-btn" href="https://wa.me/{{ preg_replace('/\D/', '', $card['phone']) }}" target="_blank" @click.stop title="WhatsApp">💬</a>@endif
                                    <a class="pb-act-btn" href="{{ $card['edit_url'] }}" @click.stop title="Editare">⋮</a>
                                @elseif ($colKey === 'in_work')
                                    {{-- 👁 eye / 💬 / ⋮ --}}
                                    <a class="pb-act-btn" href="{{ $card['edit_url'] }}" @click.stop title="Deschide fișa">👁</a>
                                    @if (!empty($card['phone']))<a class="pb-act-btn" href="https://wa.me/{{ preg_replace('/\D/', '', $card['phone']) }}" target="_blank" @click.stop title="WhatsApp">💬</a>@endif
                                    <a class="pb-act-btn" wire:click.stop="moveCard('{{ $card['key'] }}', 'ready')" title="Marchează Gata">✓</a>
                                @elseif ($colKey === 'ready')
                                    {{-- 💰 cash / 💬 / ⋮ --}}
                                    <a class="pb-act-btn" wire:click.stop="moveCard('{{ $card['key'] }}', 'paid')" title="Achitat">💰</a>
                                    @if (!empty($card['phone']))<a class="pb-act-btn" href="tel:{{ $card['phone'] }}" @click.stop title="Sună">📞</a>@endif
                                    <a class="pb-act-btn" href="{{ $card['edit_url'] }}" @click.stop title="Editare">⋮</a>
                                @endif
                            </div>
                            <div class="pb-deal-id">{{ $card['code'] }}</div>
                            <div class="pb-deal-subject">{{ $card['subject'] }}</div>
                            <div class="pb-deal-car">🚗 {{ $card['plate'] ?: '—' }} · {{ $card['client_name'] }}</div>
                            @if (!empty($card['tags']))
                                <div class="pb-deal-meta">
                                    @foreach ($card['tags'] as $tag)
                                        <span class="pb-tag pb-tag-{{ $tag['color'] }}">{{ $tag['label'] }}</span>
                                    @endforeach
                                </div>
                            @endif
                            <div class="pb-deal-footer">
                                <div class="pb-deal-assignee">
                                    <div class="pb-av pb-av-{{ $card['assignee']['color'] }}">{{ $card['assignee']['initials'] }}</div>
                                    @if ($colKey !== 'paid')<span class="pb-deal-name">{{ $card['assignee']['name'] }}</span>@endif
                                </div>
                                <span class="pb-deal-amount">{{ $card['amount'] > 0 ? number_format($card['amount'], 0, '.', ' ') . ' MDL' : '—' }}</span>
                            </div>
                            @if (!is_null($card['progress_pct']))
                                <div class="pb-progress-bar"><div class="pb-progress-fill" style="width:{{ $card['progress_pct'] }}%"></div></div>
                            @endif
                            @if ($card['time_text'] && $colKey !== 'paid')
                                <div class="pb-deal-time {{ $card['time_overdue'] ? 'overdue' : '' }}">
                                    @if ($card['time_icon']==='check')✓@elseif($card['time_icon']==='phone')📞@elseif($card['time_icon']==='message')💬@else⏱@endif
                                    {{ $card['time_text'] }}
                                </div>
                            @endif
                        </div>
                    @empty
                        <div class="pb-empty-col">Gol — trage un card aici</div>
                    @endforelse
                    @if ($colKey !== 'paid')
                        <button type="button" class="pb-add-card" wire:click="openNewForm">+ Adaugă cerere</button>
                    @endif
                </div>
            </div>
        @endforeach
    </div>

    {{-- LIST VIEW --}}
    <div x-show="view==='list'" style="padding:16px 20px; flex:1; overflow:auto;" x-cloak>
        <table style="width:100%; border-collapse:collapse; background:var(--pb-surface); border:1px solid var(--pb-border); border-radius:10px;">
            <thead>
                <tr>
                    @foreach (['#', 'Subiect', 'Client', 'Auto', 'Etapă', 'Sumă', 'Responsabil', 'Stare timp'] as $h)
                        <th style="text-align:left; padding:8px 12px; font-size:10px; font-weight:600; color:var(--pb-text-3); text-transform:uppercase; border-bottom:1px solid var(--pb-border);">{{ $h }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @foreach ($columns as $colKey => $col)
                    @foreach ($col['cards'] as $card)
                        <tr wire:click="openCard('{{ $card['key'] }}')" style="cursor:pointer; border-bottom:1px solid var(--pb-border);">
                            <td style="padding:10px 12px; font-size:12px; color:var(--pb-text-3);">{{ $card['code'] }}</td>
                            <td style="padding:10px 12px; font-size:13px; font-weight:500;">{{ $card['subject'] }}</td>
                            <td style="padding:10px 12px; font-size:12px;">{{ $card['client_name'] }}</td>
                            <td style="padding:10px 12px; font-size:12px;">{{ $card['plate'] }}</td>
                            <td style="padding:10px 12px;"><span class="pb-tag pb-tag-gray">{{ $col['label'] }}</span></td>
                            <td style="padding:10px 12px; font-size:12px; font-weight:600;">{{ $card['amount'] > 0 ? number_format($card['amount'], 0, '.', ' ') . ' MDL' : '—' }}</td>
                            <td style="padding:10px 12px; font-size:12px;">{{ $card['assignee']['name'] }}</td>
                            <td style="padding:10px 12px; font-size:11px; color:{{ $card['time_overdue'] ? 'var(--pb-red)' : 'var(--pb-text-3)' }};">{{ $card['time_text'] }}</td>
                        </tr>
                    @endforeach
                @endforeach
            </tbody>
        </table>
    </div>

    {{-- PANEL: NEW FORM mode --}}
    <div class="pb-overlay {{ $showNewForm ? 'open' : '' }}" wire:click="$set('showNewForm', false)"></div>
    <div class="pb-panel {{ $showNewForm ? 'open' : '' }}">
        @if ($showNewForm)
            <div class="pb-panel-head">
                <div>
                    <div class="pb-panel-title">Cerere nouă</div>
                    <div class="pb-panel-id">Va fi adăugată în Cerere nouă</div>
                </div>
                <div class="pb-close-btn" wire:click="$set('showNewForm', false)">✕</div>
            </div>
            <form class="pb-panel-body" wire:submit.prevent="createNewLead">
                <div class="pb-form-field">
                    <label>Nume *</label>
                    <input type="text" wire:model="newName" placeholder="Ion Popescu" autofocus>
                </div>
                <div class="pb-form-field">
                    <label>Telefon *</label>
                    <input type="text" wire:model="newPhone" placeholder="+373 69 ...">
                </div>
                <div class="pb-form-field">
                    <label>Auto / model</label>
                    <input type="text" wire:model="newCar" placeholder="VW Passat 2018">
                </div>
                <div class="pb-form-field">
                    <label>Sursă</label>
                    <select wire:model="newSource">
                        @foreach (\App\Models\Tenant\Lead::SOURCES as $val => $lbl)
                            <option value="{{ $val }}">{{ $lbl }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="pb-form-field">
                    <label>Notițe / reclamație</label>
                    <textarea wire:model="newNotes" placeholder="Ce a spus clientul..."></textarea>
                </div>
            </form>
            <div class="pb-panel-actions">
                <button type="button" class="pb-quick-btn" wire:click="$set('showNewForm', false)">Anulează</button>
                <button type="button" class="pb-quick-btn primary" wire:click="createNewLead">Creează cerere</button>
            </div>
        @endif
    </div>

    {{-- PANEL: DETAIL mode --}}
    <div class="pb-overlay {{ $openCardKey && !$showNewForm ? 'open' : '' }}" wire:click="closeCard()"></div>
    <div class="pb-panel {{ $openCardKey && !$showNewForm ? 'open' : '' }}">
        @if ($detail && !$showNewForm)
            <div class="pb-panel-head">
                <div>
                    <div class="pb-panel-title">{{ $detail['title'] }}</div>
                    <div class="pb-panel-id">{{ $detail['subtitle'] }}</div>
                </div>
                <div class="pb-close-btn" wire:click="closeCard()">✕</div>
            </div>
            <div class="pb-panel-body">
                <div>
                    <div class="pb-panel-sec-title">Progres etapă</div>
                    <div class="pb-stage-stepper">
                        @foreach ($detail['stages'] as $st)
                            <div class="pb-stage-step {{ $st['done'] ? 'done' : '' }} {{ $st['current'] ? 'current' : '' }}"></div>
                        @endforeach
                    </div>
                    <div class="pb-stage-labels">
                        @foreach ($detail['stages'] as $st)
                            <div class="pb-stage-lbl {{ $st['current'] ? 'current' : '' }}">{{ $st['label'] }}</div>
                        @endforeach
                    </div>
                </div>

                <div class="pb-panel-section">
                    <div class="pb-two-cols">
                        @foreach ($detail['fields'] as $label => $value)
                            @if ($value)
                                <div class="pb-pfield">
                                    <div class="pb-pfield-label">{{ $label }}</div>
                                    <div class="pb-pfield-val" @if($label==='Telefon') style="color:var(--pb-blue)" @endif>{{ $value }}</div>
                                </div>
                            @endif
                        @endforeach
                    </div>
                    @if ($detail['note'])
                        <div class="pb-pfield">
                            <div class="pb-pfield-label">Notițe / Reclamație</div>
                            <div style="font-size:12px; color:var(--pb-text-2); white-space:pre-wrap;">{{ $detail['note'] }}</div>
                        </div>
                    @endif
                </div>

                @if (!empty($detail['wo']))
                    <div class="pb-panel-section">
                        <div class="pb-panel-sec-title">Fișă de lucru</div>
                        <div style="background:var(--pb-purple-bg); border:1px solid #DDD6FE; border-radius:6px; padding:10px 12px; display:flex; align-items:center; justify-content:space-between;">
                            <div>
                                <div style="font-size:12px; font-weight:600; color:var(--pb-purple-text);">{{ $detail['wo']['number'] }} · {{ $detail['wo']['status_label'] }}</div>
                                <div style="font-size:11px; color:var(--pb-purple-text); opacity:.8; margin-top:2px;">
                                    @if (!is_null($detail['wo']['progress_pct'])){{ $detail['wo']['progress_pct'] }}% finalizat @endif
                                    @if ($detail['wo']['eta']) · ETA {{ $detail['wo']['eta'] }} @endif
                                </div>
                            </div>
                            <a class="pb-quick-btn" style="padding:4px 10px;" href="{{ $detail['edit_url'] }}">↗ Deschide</a>
                        </div>
                        @if (!empty($detail['wo']['has_pending_approval']))
                            <div style="margin-top:8px; background:var(--pb-amber-bg); border:1px solid #FDE68A; border-radius:6px; padding:8px 12px;">
                                <div style="font-size:11px; font-weight:600; color:var(--pb-amber-text);">⚠ Necesită aprobare client</div>
                                <div style="font-size:11px; color:var(--pb-amber-text); margin-top:2px;">Deschide fișa pentru aprobare lucrare/piesă.</div>
                            </div>
                        @endif
                    </div>
                @endif

                @if (!empty($detail['activity']))
                    <div class="pb-panel-section">
                        <div class="pb-panel-sec-title">Activitate recentă</div>
                        @foreach ($detail['activity'] as $a)
                            <div class="pb-activity-item">
                                <div class="pb-act-icon" style="background:var(--pb-blue-bg); color:var(--pb-blue-text);">●</div>
                                <div>
                                    <div class="pb-act-text">{{ $a['text'] }}</div>
                                    <div class="pb-act-time">{{ $a['time'] }}</div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif

                <div class="pb-panel-section">
                    <div class="pb-panel-sec-title">Acțiuni rapide</div>
                    <div class="pb-quick-grid">
                        @if (!empty($detail['phone']))
                            <a class="pb-quick-btn" target="_blank" href="https://wa.me/{{ preg_replace('/\D/', '', $detail['phone']) }}">💚 WhatsApp</a>
                            <a class="pb-quick-btn" href="tel:{{ $detail['phone'] }}">📞 Sună</a>
                            <a class="pb-quick-btn" href="sms:{{ $detail['phone'] }}">💬 SMS</a>
                        @endif
                        @if (!empty($detail['wo']['tracking_url']))
                            <a class="pb-quick-btn" href="{{ $detail['wo']['tracking_url'] }}" target="_blank">🔗 Link tracking</a>
                        @endif
                    </div>
                </div>
            </div>

            <div class="pb-panel-actions">
                @php $kind = explode(':', $openCardKey)[0] ?? '' @endphp
                @if (in_array($kind, ['lead', 'deal']) && empty($detail['wo']))
                    <a class="pb-quick-btn" wire:click="quickSchedule('{{ $openCardKey }}')">📅 Programează</a>
                    <a class="pb-quick-btn primary" href="{{ $detail['edit_url'] }}">↗ Deschide deal</a>
                @elseif ($kind === 'wo')
                    <a class="pb-quick-btn" href="{{ $this->calendarUrl() }}">📅 Calendar</a>
                    <a class="pb-quick-btn primary" href="{{ $detail['edit_url'] }}">↗ Deschide Fișă</a>
                @endif
            </div>
        @endif
    </div>
</div>
</x-filament-panels::page>
