@extends('backend.layout.exposcale')

@section('page_title', 'Customers')

@section('topbar_actions')
  <button class="bpurple">+ New Customer</button>
@endsection

@section('content')
<div class="page-body">
  <!-- Filters -->
  <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;">
    <input class="cust-filter-input" id="cust-search" placeholder="🔍 Search by name or company…" oninput="filterCusts()" style="min-width:200px;"/>
    <select class="cust-filter-select" id="cust-plan-filter" onchange="filterCusts()">
      <option value="">All Plans</option>
      <option value="Growth">Growth</option>
      <option value="Starter">Starter</option>
      <option value="Enterprise">Enterprise</option>
      <option value="Student">Student</option>
    </select>
    <select class="cust-filter-select" id="cust-sort" onchange="filterCusts()">
      <option value="">Sort by…</option>
      <option value="topup-desc">Total Top-ups: Highest</option>
      <option value="topup-asc">Total Top-ups: Lowest</option>
      <option value="balance-desc">Balance: Highest</option>
      <option value="balance-asc">Balance: Lowest</option>
      <option value="accounts-desc">Most Ad Accounts</option>
      <option value="accounts-asc">Fewest Ad Accounts</option>
    </select>
    <div id="cust-sort-pills" style="display:flex;gap:5px;flex-wrap:wrap;margin-left:auto;align-items:center;">
      <span style="font-size:10px;color:var(--muted);">Quick rank:</span>
      <button class="cust-rank-btn" onclick="quickSort('topup-desc')">🏆 Biggest Clients</button>
      <button class="cust-rank-btn" onclick="quickSort('accounts-desc')">📊 Most Accounts</button>
    </div>
  </div>

  <!-- Table -->
  <div class="panel">
    <table id="cust-table">
      <thead>
        <tr>
          <th>Customer</th>
          <th>Plan</th>
          <th style="cursor:pointer;" onclick="quickSort('topup-desc')" title="Sort by total top-ups">Total Top-ups ↕</th>
          <th>Ad Accounts</th>
          <th style="cursor:pointer;" onclick="quickSort('balance-desc')" title="Sort by balance">Current Balance ↕</th>
          <th>Company</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="cust-tbody">
        @forelse($users as $user)
        @php
            $initials = strtoupper(substr($user->first_name ?? '', 0, 1) . substr($user->last_name ?? '', 0, 1));
            if (!$initials) $initials = strtoupper(substr($user->name ?? 'U', 0, 2));
            $fullName = trim(($user->first_name ?? '') . ' ' . ($user->last_name ?? ''));
            if (!$fullName) $fullName = $user->name ?? 'Unknown User';
            $company = $user->company ?? 'No Company';
        
            $adAccounts = $user->adAccounts;
            $totalAccounts = $adAccounts->count();
            $activeAccounts = $adAccounts->whereIn('status', ['approved', 'active', 'accepted'])->count();
            $disabledAccounts = $adAccounts->whereIn('status', ['disabled', 'suspended', 'inactive', 'rejected', 'deleted', 'banned'])->count();
            $processingAccounts = $adAccounts->whereIn('status', ['pending', 'processing', 'in_review', 'review'])->count();
            $totalBalance = $adAccounts->sum('balance');
        @endphp
        <tr data-plan="Growth" data-balance="{{ $totalBalance }}" data-topup="3030" data-accounts="{{ $totalAccounts }}" data-id="{{ $user->id }}" data-name="{{ $fullName }}" data-company="{{ $company }}">
          <td>
            <div style="display:flex;align-items:center;gap:8px;">
              @if(!empty($user->avatar))
                @php
                  try {
                      $avatarUrl = \App\Helpers\helpers::generateTempURL($user->avatar, config('app.file_system'));
                  } catch (\Exception $e) {
                      $avatarUrl = asset('storage/' . $user->avatar);
                  }
                @endphp
                <img src="{{ $avatarUrl }}" alt="{{ $fullName }}" style="width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid var(--purple);flex-shrink:0;">
              @else
                <div style="width:30px;height:30px;border-radius:50%;background:var(--pbg);border:1px solid var(--purple);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--pl);flex-shrink:0;">{{ $initials }}</div>
              @endif
              <div style="font-weight:600;font-size:12px;">{{ $fullName }}</div>
            </div>
          </td>
          <td><span class="badge bgrowth">Growth</span></td>
          <td><div style="font-weight:700;color:var(--text);">€ 3,030.00</div></td>
          <td>
            <div style="display:flex; align-items:center; gap:6px;">
              <span style="font-size:16px;font-weight:700;">{{ $totalAccounts }}</span>
              <div>
                <div style="font-size:9px;color:var(--green);">{{ $activeAccounts }} active</div>
                <div style="font-size:9px;color:{{ $processingAccounts > 0 ? 'var(--orange, orange)' : 'var(--muted)' }};">{{ $processingAccounts }} processing</div>
                <div style="font-size:9px;color:{{ $disabledAccounts > 0 ? 'var(--red)' : 'var(--muted)' }};">{{ $disabledAccounts }} disabled</div>
              </div>
            </div>
          </td>
          <td style="font-weight:700;color:var(--green);">€ {{ number_format($totalBalance, 2) }}</td>
          <td><div style="font-size:11px;">{{ $company }}</div></td>
          <td><a href="{{ route('exposcale.customer-detail', $user->id) }}" class="tbtn">View →</a></td>
        </tr>
        @empty
        <tr><td colspan="7" style="text-align:center; padding:30px; color:var(--muted);">No customers found.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>
@endsection

@section('page_scripts')
<script>
function filterCusts() {
  const q = (document.getElementById('cust-search')?.value || '').toLowerCase();
  const plan = document.getElementById('cust-plan-filter')?.value || '';
  const sort = document.getElementById('cust-sort')?.value || '';
  const tbody = document.getElementById('cust-tbody');
  const rows = Array.from(tbody.querySelectorAll('tr'));
  rows.forEach(r => {
    const nm = (r.dataset.name || '').toLowerCase();
    const co = (r.dataset.company || '').toLowerCase();
    const pl = r.dataset.plan || '';
    const qm = !q || nm.includes(q) || co.includes(q);
    const pm = !plan || pl === plan;
    r.style.display = (qm && pm) ? '' : 'none';
  });
  if (sort) sortRows(rows, sort, tbody);
}
function sortRows(rows, sort, tbody) {
  const visible = rows.filter(r => r.style.display !== 'none');
  visible.sort((a, b) => {
    if (sort === 'topup-desc') return parseInt(b.dataset.topup) - parseInt(a.dataset.topup);
    if (sort === 'topup-asc') return parseInt(a.dataset.topup) - parseInt(b.dataset.topup);
    if (sort === 'balance-desc') return parseInt(b.dataset.balance) - parseInt(a.dataset.balance);
    if (sort === 'balance-asc') return parseInt(a.dataset.balance) - parseInt(b.dataset.balance);
    if (sort === 'accounts-desc') return parseInt(b.dataset.accounts) - parseInt(a.dataset.accounts);
    if (sort === 'accounts-asc') return parseInt(a.dataset.accounts) - parseInt(b.dataset.accounts);
    return 0;
  });
  visible.forEach(r => tbody.appendChild(r));
}
function quickSort(sort) {
  const sel = document.getElementById('cust-sort');
  if (sel) sel.value = sort;
  filterCusts();
  document.querySelectorAll('.cust-rank-btn').forEach(b => b.classList.remove('active'));
  event.target.classList.add('active');
}
</script>
@endsection