@extends('agency.layouts.app')

@section('title', 'Müşteriler')
@section('page_title', 'Müşteri Yönetimi')

@push('styles')
     <style>
          /* ─── PAGE VARIABLES ─── */
          :root {
               --customer-primary: #2563eb;
               --customer-primary-light: #eff6ff;
               --customer-success: #10b981;
               --customer-warning: #f59e0b;
               --customer-danger: #ef4444;
               --customer-purple: #8b5cf6;
          }

          /* ─── STATS STRIP ─── */
          .customer-stats {
               display: grid;
               grid-template-columns: repeat(4, 1fr);
               gap: 1rem;
               margin-bottom: 1.75rem;
          }

          .cstat-card {
               background: #fff;
               border-radius: 16px;
               padding: 1.25rem 1.5rem;
               display: flex;
               align-items: center;
               gap: 1rem;
               border: 1px solid #f1f5f9;
               box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
               transition: box-shadow .2s, transform .2s;
          }

          .cstat-card:hover {
               box-shadow: 0 4px 20px rgba(99, 102, 241, .12);
               transform: translateY(-2px);
          }

          .cstat-icon {
               width: 48px;
               height: 48px;
               border-radius: 12px;
               display: flex;
               align-items: center;
               justify-content: center;
               font-size: 20px;
               flex-shrink: 0;
          }

          .cstat-icon.indigo {
               background: #eff6ff;
               color: #2563eb;
          }

          .cstat-icon.green {
               background: #d1fae5;
               color: #10b981;
          }

          .cstat-icon.amber {
               background: #fef3c7;
               color: #f59e0b;
          }

          .cstat-icon.purple {
               background: #ede9fe;
               color: #8b5cf6;
          }

          .cstat-val {
               font-size: 1.65rem;
               font-weight: 800;
               color: #0f172a;
               line-height: 1;
          }

          .cstat-lbl {
               font-size: .75rem;
               color: #94a3b8;
               font-weight: 500;
               margin-top: 2px;
               letter-spacing: .3px;
          }

          /* ─── TOOLBAR ─── */
          .customers-toolbar {
               background: #fff;
               border-radius: 16px;
               border: 1px solid #f1f5f9;
               padding: 1rem 1.25rem;
               display: flex;
               align-items: center;
               gap: .75rem;
               margin-bottom: 1rem;
               flex-wrap: wrap;
               box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
          }

          .search-wrap {
               position: relative;
               flex: 1;
               min-width: 220px;
          }

          .search-wrap i {
               position: absolute;
               left: 12px;
               top: 50%;
               transform: translateY(-50%);
               color: #94a3b8;
               font-size: 14px;
               pointer-events: none;
          }

          .search-wrap input {
               padding-left: 36px;
               border-radius: 10px;
               border: 1.5px solid #e2e8f0;
               font-size: .875rem;
               background: #f8fafc;
               height: 40px;
               width: 100%;
               transition: border-color .2s, box-shadow .2s;
          }

          .search-wrap input:focus {
               outline: none;
               border-color: var(--customer-primary);
               box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
               background: #fff;
          }

          .filter-select {
               border-radius: 10px;
               border: 1.5px solid #e2e8f0;
               font-size: .875rem;
               background: #f8fafc;
               height: 40px;
               padding: 0 .75rem;
               transition: border-color .2s;
          }

          .filter-select:focus {
               outline: none;
               border-color: var(--customer-primary);
               background: #fff;
          }

          /* ─── TABLE ─── */
          .customers-table-wrap {
               background: #fff;
               border-radius: 16px;
               border: 1px solid #f1f5f9;
               box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
               overflow: hidden;
          }

          .customers-table {
               width: 100%;
               border-collapse: collapse;
          }

          .customers-table thead th {
               padding: 13px 16px;
               font-size: .72rem;
               font-weight: 700;
               letter-spacing: .6px;
               text-transform: uppercase;
               color: #64748b;
               background: #f8fafc;
               border-bottom: 1px solid #f1f5f9;
               white-space: nowrap;
          }

          .customers-table tbody tr {
               border-bottom: 1px solid #f8fafc;
               transition: background .15s;
               cursor: pointer;
          }

          .customers-table tbody tr:last-child {
               border-bottom: none;
          }

          .customers-table tbody tr:hover {
               background: #fafbff;
          }

          .customers-table td {
               padding: 14px 16px;
               vertical-align: middle;
          }

          /* Customer avatar */
          .c-avatar {
               width: 40px;
               height: 40px;
               border-radius: 12px;
               display: flex;
               align-items: center;
               justify-content: center;
               font-weight: 700;
               font-size: .9rem;
               flex-shrink: 0;
               background: linear-gradient(135deg, #2563eb, #1e40af);
               color: #fff;
          }

          .c-avatar.corporate {
               background: linear-gradient(135deg, #3b82f6, #2563eb);
          }

          .c-name {
               font-weight: 600;
               color: #0f172a;
               font-size: .875rem;
          }

          .c-email {
               font-size: .78rem;
               color: #64748b;
          }

          /* Badges */
          .badge-status {
               display: inline-flex;
               align-items: center;
               gap: 5px;
               padding: 4px 10px;
               border-radius: 20px;
               font-size: .72rem;
               font-weight: 600;
          }

          .badge-status::before {
               content: '';
               width: 6px;
               height: 6px;
               border-radius: 50%;
          }

          .bs-active {
               background: #d1fae5;
               color: #065f46;
          }

          .bs-active::before {
               background: #10b981;
          }

          .bs-inactive {
               background: #f1f5f9;
               color: #475569;
          }

          .bs-inactive::before {
               background: #94a3b8;
          }

          .bs-blocked {
               background: #fee2e2;
               color: #991b1b;
          }

          .bs-blocked::before {
               background: #ef4444;
          }

          .bs-potential {
               background: #fef3c7;
               color: #92400e;
          }

          .bs-potential::before {
               background: #f59e0b;
          }

          .badge-priority {
               padding: 3px 9px;
               border-radius: 6px;
               font-size: .7rem;
               font-weight: 700;
               letter-spacing: .3px;
          }

          .bp-priority-true {
               background: linear-gradient(135deg, #ffd700, #ffa500);
               color: #451a03;
          }

          .bp-priority-false {
               background: #f1f5f9;
               color: #64748b;
          }

          /* Action buttons */
          .row-actions {
               display: flex;
               gap: 6px;
               opacity: 0;
               transition: opacity .15s;
          }

          .customers-table tbody tr:hover .row-actions {
               opacity: 1;
          }

          .btn-row {
               width: 32px;
               height: 32px;
               border-radius: 8px;
               border: none;
               display: flex;
               align-items: center;
               justify-content: center;
               font-size: 13px;
               transition: all .15s;
               cursor: pointer;
          }

          .btn-row-view {
               background: #eff6ff;
               color: #2563eb;
          }

          .btn-row-edit {
               background: #f0fdf4;
               color: #16a34a;
          }

          .btn-row-delete {
               background: #fff1f2;
               color: #e11d48;
          }

          .btn-row:hover {
               transform: scale(1.1);
          }

          /* Loyalty badge */
          .loyalty-badge {
               display: inline-flex;
               align-items: center;
               gap: 4px;
               padding: 3px 8px;
               border-radius: 6px;
               font-size: .72rem;
               font-weight: 600;
          }

          .lb-platinum {
               background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
               color: #3730a3;
          }

          .lb-gold {
               background: linear-gradient(135deg, #fef3c7, #fde68a);
               color: #92400e;
          }

          .lb-silver {
               background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
               color: #475569;
          }

          .lb-bronze {
               background: linear-gradient(135deg, #fef3c7, #fed7aa);
               color: #9a3412;
          }

          /* Pagination */
          .pagination-wrap {
               padding: 1rem 1.25rem;
               display: flex;
               justify-content: space-between;
               align-items: center;
               border-top: 1px solid #f1f5f9;
          }

          /* Bulk action bar */
          .bulk-bar {
               background: #2563eb;
               color: #fff;
               border-radius: 12px;
               padding: .75rem 1.25rem;
               display: none;
               align-items: center;
               gap: 1rem;
               margin-bottom: 1rem;
               box-shadow: 0 4px 20px rgba(99, 102, 241, .3);
          }

          .bulk-bar.show {
               display: flex;
          }

          .bulk-count {
               font-weight: 700;
               font-size: .9rem;
          }

          /* Empty state */
          .empty-state {
               text-align: center;
               padding: 4rem 2rem;
          }

          .empty-icon {
               font-size: 3.5rem;
               color: #cbd5e1;
               margin-bottom: 1rem;
          }

          .empty-title {
               font-size: 1.1rem;
               font-weight: 700;
               color: #475569;
          }

          .empty-desc {
               font-size: .875rem;
               color: #94a3b8;
               margin-top: .4rem;
          }

          @media(max-width:1100px) {
               .customer-stats {
                    grid-template-columns: repeat(2, 1fr);
               }
          }

          @media(max-width:700px) {
               .customer-stats {
                    grid-template-columns: 1fr;
               }
          }
     </style>
@endpush

@section('content')
     <div class="container-fluid">

          {{-- ─── STATS ─── --}}
          <div class="customer-stats">
               <div class="cstat-card">
                    <div class="cstat-icon indigo"><i class="fas fa-users"></i></div>
                    <div>
                         <div class="cstat-val">{{ number_format($stats['total']) }}</div>
                         <div class="cstat-lbl">TOPLAM MÜŞTERİ</div>
                    </div>
               </div>
               <div class="cstat-card">
                    <div class="cstat-icon green"><i class="fas fa-user-check"></i></div>
                    <div>
                         <div class="cstat-val">{{ number_format($stats['active']) }}</div>
                         <div class="cstat-lbl">AKTİF MÜŞTERİ</div>
                    </div>
               </div>
               <div class="cstat-card">
                    <div class="cstat-icon amber"><i class="fas fa-star"></i></div>
                    <div>
                         <div class="cstat-val">{{ number_format($stats['priority']) }}</div>
                         <div class="cstat-lbl">ÖNCELİKLİ MÜŞTERİ</div>
                    </div>
               </div>
               <div class="cstat-card">
                    <div class="cstat-icon purple"><i class="fas fa-user-clock"></i></div>
                    <div>
                         <div class="cstat-val">{{ number_format($stats['potential']) }}</div>
                         <div class="cstat-lbl">POTANSİYEL</div>
                    </div>
               </div>
          </div>

          {{-- ─── BULK ACTION BAR ─── --}}
          <div class="bulk-bar" id="bulkBar">
               <span class="bulk-count"><span id="bulkCount">0</span> müşteri seçildi</span>
               <div class="d-flex gap-2 ms-auto">
                    <button class="btn btn-sm btn-light" onclick="bulkStatus('active')"><i
                              class="fas fa-check me-1"></i>Aktif Et</button>
                    <button class="btn btn-sm btn-light" onclick="bulkStatus('inactive')"><i
                              class="fas fa-pause me-1"></i>Pasif Et</button>
                    <button class="btn btn-sm" style="background:#ef4444;color:#fff" onclick="bulkDelete()"><i
                              class="fas fa-trash me-1"></i>Sil</button>
               </div>
          </div>

          {{-- ─── TOOLBAR ─── --}}
          <form method="GET" action="{{ route('agency.customers.index') }}" id="filterForm">
               <div class="customers-toolbar">
                    <div class="search-wrap">
                         <i class="fas fa-search"></i>
                         <input type="text" name="search" value="{{ request('search') }}"
                              placeholder="İsim, e-posta, telefon ara…" id="searchInput">
                    </div>

                    <select name="status" class="filter-select" onchange="document.getElementById('filterForm').submit()">
                         <option value="">Tüm Durumlar</option>
                         <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Aktif</option>
                         <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Pasif</option>
                         <option value="blocked" {{ request('status') == 'blocked' ? 'selected' : '' }}>Engellenmiş</option>
                         <option value="potential" {{ request('status') == 'potential' ? 'selected' : '' }}>Potansiyel</option>
                    </select>

                    <select name="type" class="filter-select" onchange="document.getElementById('filterForm').submit()">
                         <option value="">Tüm Tipler</option>
                         <option value="individual" {{ request('type') == 'individual' ? 'selected' : '' }}>Kişiler</option>
                         <option value="corporate" {{ request('type') == 'corporate' ? 'selected' : '' }}>Şirketler</option>
                    </select>

                    <select name="priority" class="filter-select" onchange="document.getElementById('filterForm').submit()">
                         <option value="">Tüm Öncelikler</option>
                         <option value="1" {{ request('priority') == '1' ? 'selected' : '' }}>⭐ Öncelikli</option>
                         <option value="0" {{ request('priority') == '0' ? 'selected' : '' }}>⚪ Normal</option>
                    </select>

                    {{-- Özel Alan Filtreleri --}}
                    @foreach($filterableFields as $field)
                         <select name="cf_{{ $field->field_key }}" class="filter-select"
                              onchange="document.getElementById('filterForm').submit()">
                              <option value="">{{ $field->label }}</option>
                              @if($field->field_type === 'select' || $field->field_type === 'multiselect')
                                   @foreach($field->options ?? [] as $opt)
                                        <option value="{{ $opt['value'] }}" {{ request('cf_' . $field->field_key) == $opt['value'] ? 'selected' : '' }}>{{ $opt['label'] }}</option>
                                   @endforeach
                              @elseif($field->field_type === 'boolean')
                                   <option value="1" {{ request('cf_' . $field->field_key) == '1' ? 'selected' : '' }}>Evet</option>
                                   <option value="0" {{ request('cf_' . $field->field_key) == '0' ? 'selected' : '' }}>Hayır</option>
                              @endif
                         </select>
                    @endforeach

                    @php $cfFilterKeys = $filterableFields->map(fn($f) => 'cf_' . $f->field_key)->toArray(); @endphp
                    @if(request()->hasAny(array_merge(['search', 'status', 'type', 'priority', 'segment', 'loyalty_tier'], $cfFilterKeys)))
                         <a href="{{ route('agency.customers.index') }}" class="btn btn-sm btn-outline-secondary"
                              style="border-radius:10px;height:40px;white-space:nowrap">
                              <i class="fas fa-times me-1"></i>Temizle
                         </a>
                    @endif

                    <div class="ms-auto d-flex gap-2">
                         <a href="{{ route('agency.customers.fields.index') }}" class="btn btn-sm btn-outline-secondary"
                              style="border-radius:10px;height:40px;white-space:nowrap">
                              <i class="fas fa-sliders-h me-1"></i>Özel Alanlar
                         </a>
                         <a href="{{ route('agency.customers.create') }}" class="btn btn-sm text-white"
                              style="background:linear-gradient(135deg,#2563eb,#1e40af);border-radius:10px;height:40px;white-space:nowrap">
                              <i class="fas fa-plus me-1"></i>Yeni Müşteri
                         </a>
                    </div>
               </div>
          </form>

          {{-- ─── TABLE ─── --}}
          <div class="customers-table-wrap">
               @if($customers->isEmpty())
                    <div class="empty-state">
                         <i class="fas fa-users empty-icon"></i>
                         <div class="empty-title">Henüz müşteri yok</div>
                         <div class="empty-desc">İlk müşterinizi ekleyerek başlayın.</div>
                         <a href="{{ route('agency.customers.create') }}" class="btn mt-3 text-white"
                              style="background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:10px">
                              <i class="fas fa-plus me-1"></i>İlk Müşteriyi Ekle
                         </a>
                    </div>
               @else
                    <table class="customers-table">
                         <thead>
                              <tr>
                                   <th style="width:40px"><input type="checkbox" id="selectAll"
                                             style="width:16px;height:16px;cursor:pointer;accent-color:#2563eb"></th>
                                   <th>MÜŞTERİ</th>
                                   <th>İLETİŞİM</th>
                                   <th>TİP</th>
                                   <th>DURUM</th>
                                   <th>ÖNCELİK</th>
                                   <th>YOLCULAR</th>
                                   <th>SADAKAT</th>
                                   @foreach($listableFields as $field)
                                        <th>{{ strtoupper($field->label) }}</th>
                                   @endforeach
                                   <th>TEMSİLCİ</th>
                                   <th>KAYIT</th>
                                   <th style="width:100px">İŞLEMLER</th>
                              </tr>
                         </thead>
                         <tbody>
                              @foreach($customers as $customer)
                                   <tr class="customer-row" data-id="{{ $customer->id }}">
                                        <td onclick="event.stopPropagation()">
                                             <input type="checkbox" class="row-check" value="{{ $customer->id }}"
                                                  style="width:16px;height:16px;cursor:pointer;accent-color:#6366f1">
                                        </td>
                                        <td>
                                             <div class="d-flex align-items-center gap-3">
                                                  <div
                                                       class="c-avatar {{ $customer->customer_type === 'corporate' ? 'corporate' : '' }}">
                                                       {{ $customer->initials }}
                                                  </div>
                                                  <div>
                                                       <div class="c-name">
                                                            {{ $customer->full_name }}
                                                            @if($customer->blacklisted)
                                                                 <span style="color:#ef4444;font-size:11px" title="Kara listede"><i
                                                                           class="fas fa-ban"></i></span>
                                                            @endif
                                                       </div>
                                                       @if($customer->company_name)
                                                            <div class="c-email"><i class="fas fa-building me-1"
                                                                      style="color:#94a3b8"></i>{{ $customer->company_name }}</div>
                                                       @endif
                                                  </div>
                                             </div>
                                        </td>
                                        <td>
                                             @if($customer->email)
                                                  <div class="c-email"><i class="fas fa-envelope me-1"></i>{{ $customer->email }}</div>
                                             @endif
                                             @if($customer->phone)
                                                  <div class="c-email mt-1"><i class="fas fa-phone me-1"></i>{{ $customer->phone }}</div>
                                             @endif
                                        </td>
                                        <td>
                                             <span style="font-size:.78rem;color:#64748b">
                                                  {{ $customer->customer_type === 'corporate' ? '🏢 Şirket' : '👤 Kişi' }}
                                             </span>
                                        </td>
                                        <td>
                                             <span class="badge-status
                                                      @if($customer->status === 'active')    bs-active
                                                      @elseif($customer->status === 'blocked')  bs-blocked
                                                      @elseif($customer->status === 'potential') bs-potential
                                                      @else bs-inactive @endif">
                                                  {{ $customer->status_label }}
                                             </span>
                                        </td>
                                        <td>
                                              <span class="badge-priority bp-priority-{{ $customer->priority ? 'true' : 'false' }}">
                                                   {{ $customer->priority_label }}
                                              </span>
                                         </td>
                                        <td>
                                             <span style="font-size:.82rem;font-weight:700;color:#475569;background:#f8fafc;padding:4px 10px;border-radius:10px;border:1px solid #f1f5f9;">
                                                  <i class="fas fa-users me-1" style="color:#2563eb"></i> {{ $customer->passengers_count }}
                                             </span>
                                        </td>
                                        <td>
                                             @if($customer->loyalty_tier)
                                                  <span class="loyalty-badge
                                                                         @if($customer->loyalty_tier === 'platinum') lb-platinum
                                                                         @elseif($customer->loyalty_tier === 'gold') lb-gold
                                                                         @elseif($customer->loyalty_tier === 'silver') lb-silver
                                                                         @else lb-bronze @endif">
                                                       {{ $customer->loyalty_tier_label }}
                                                  </span>
                                             @else
                                                  <span style="color:#cbd5e1;font-size:.78rem">—</span>
                                             @endif
                                        </td>

                                        @foreach($listableFields as $field)
                                             <td style="font-size:.82rem;font-weight:600;color:#475569">
                                                  @php $val = $customer->getCustomFieldValue($field->field_key); @endphp
                                                  @if($val !== null && $val !== '')
                                                      {{ $field->formatValue($val) }}
                                                  @else
                                                      <span style="color:#cbd5e1">—</span>
                                                  @endif
                                             </td>
                                        @endforeach
                                        <td>
                                             @if($customer->assignedAgent)
                                                  <div style="display:flex;align-items:center;gap:6px">
                                                       <img src="https://ui-avatars.com/api/?name={{ $customer->assignedAgent->full_name }}&size=24&background=2563eb&color=fff"
                                                            style="width:24px;height:24px;border-radius:6px" alt="">
                                                       <span
                                                            style="font-size:.78rem;color:#475569">{{ $customer->assignedAgent->first_name }}</span>
                                                  </div>
                                             @else
                                                  <span style="color:#cbd5e1;font-size:.78rem">Atanmamış</span>
                                             @endif
                                        </td>
                                        <td>
                                             <span
                                                  style="font-size:.75rem;color:#94a3b8">{{ $customer->created_at->format('d.m.Y') }}</span>
                                        </td>
                                        <td onclick="event.stopPropagation()">
                                             <div class="row-actions">
                                                  <a href="{{ route('agency.customers.show', $customer) }}"
                                                       class="btn-row btn-row-view" title="Görüntüle">
                                                       <i class="fas fa-eye"></i>
                                                  </a>
                                                  <a href="{{ route('agency.customers.edit', $customer) }}"
                                                       class="btn-row btn-row-edit" title="Düzenle">
                                                       <i class="fas fa-pen"></i>
                                                  </a>
                                                  <button class="btn-row btn-row-delete" title="Sil"
                                                       onclick="deleteCustomer({{ $customer->id }})">
                                                       <i class="fas fa-trash"></i>
                                                  </button>
                                             </div>
                                        </td>
                                   </tr>
                              @endforeach
                         </tbody>
                    </table>

                    {{-- Pagination --}}
                    @if($customers->hasPages())
                         <div class="pagination-wrap">
                              <div style="font-size:.8rem;color:#64748b">
                                   {{ $customers->firstItem() }}–{{ $customers->lastItem() }} / {{ $customers->total() }} müşteri
                              </div>
                              {{ $customers->withQueryString()->links('vendor.pagination.bootstrap-5') }}
                         </div>
                    @endif
               @endif
          </div>

     </div>

     {{-- Delete Form --}}
     <form id="deleteForm" method="POST" style="display:none">
          @csrf @method('DELETE')
     </form>
@endsection

@push('scripts')
     <script>
          // ─── SELECT ALL ───────────────────────────────────
          const selectAll = document.getElementById('selectAll');
          const bulkBar = document.getElementById('bulkBar');
          const bulkCount = document.getElementById('bulkCount');

          function updateBulkBar() {
               const checked = document.querySelectorAll('.row-check:checked');
               if (checked.length > 0) {
                    bulkBar.classList.add('show');
                    bulkCount.textContent = checked.length;
               } else {
                    bulkBar.classList.remove('show');
               }
          }

          selectAll?.addEventListener('change', function () {
               document.querySelectorAll('.row-check').forEach(cb => cb.checked = this.checked);
               updateBulkBar();
          });

          document.querySelectorAll('.row-check').forEach(cb => {
               cb.addEventListener('change', updateBulkBar);
          });

          // ─── DELETE ───────────────────────────────────────
          function deleteCustomer(id) {
               if (!confirm('Bu müşteriyi silmek istediğinizden emin misiniz?')) return;
               const form = document.getElementById('deleteForm');
               form.action = `/agency/customers/${id}`;
               form.submit();
          }

          // ─── BULK DELETE ──────────────────────────────────
          function bulkDelete() {
               const ids = [...document.querySelectorAll('.row-check:checked')].map(cb => cb.value);
               if (!ids.length || !confirm(`${ids.length} müşteriyi silmek istediğinizden emin misiniz?`)) return;

               fetch('{{ route("agency.customers.bulk-delete") }}', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    body: JSON.stringify({ ids })
               }).then(r => r.json()).then(d => d.success && location.reload());
          }

          // ─── BULK STATUS ──────────────────────────────────
          function bulkStatus(status) {
               const ids = [...document.querySelectorAll('.row-check:checked')].map(cb => cb.value);
               if (!ids.length) return;

               fetch('{{ route("agency.customers.bulk-status") }}', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    body: JSON.stringify({ ids, status })
               }).then(r => r.json()).then(d => d.success && location.reload());
          }

          // ─── SEARCH DEBOUNCE ──────────────────────────────
          let searchTimer;
          document.getElementById('searchInput')?.addEventListener('input', function () {
               clearTimeout(searchTimer);
               searchTimer = setTimeout(() => document.getElementById('filterForm').submit(), 500);
          });

          // ─── AUTO OPEN DRAWER ───────────────────────────
          @if(request('open_customer_id'))
               document.addEventListener('DOMContentLoaded', () => {
                    setTimeout(() => {
                         openCustomerDrawer({{ request('open_customer_id') }}, '{{ request('tab', 'general') }}');
                    }, 500);
               });
          @endif
     </script>
@endpush