@extends('backend.layout.master-tailwind')
@section('title', __('Clients'))
@section('content')
<style>
  [data-row-check].on, [data-master-check].on {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: white;
  }
  [data-row-check].on::after, [data-master-check].on::after {
    content: "✓"; font-size: 10px; line-height: 1; font-weight: 600;
  }
</style>
@php
    $hues = [120, 260, 280, 220, 30, 180, 300, 60, 200, 340];
    $tabs = [
        'all'     => ['label' => __('All'),          'count' => $countAll],
        'pending' => ['label' => __('Needs review'), 'count' => $countPending],
    ];
@endphp

<div class="page">

  {{-- Page head --}}
  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('Clients') }}</h1>
      <p class="page-sub">
        {{ number_format($countAll) }} {{ __('total') }}
        · {{ number_format($countPending) }} {{ __('awaiting verification') }}
        @if($flaggedWeek > 0)· {{ $flaggedWeek }} {{ __('suspended this week') }}@endif
      </p>
    </div>
    <div class="page-actions">
      <a href="{{ route('admin.client.export', array_filter(['status' => $status])) }}" class="btn" style="text-decoration:none">
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M5 21h14"/></svg>
        {{ __('Export CSV') }}
      </a>
      <a href="{{ route('admin.user.add') }}" class="btn primary">
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
        {{ __('Add client') }}
      </a>
    </div>
  </div>

  {{-- Notice board --}}
  <div style="background:var(--warn-soft);border:1px solid color-mix(in oklch,var(--warn) 30%,transparent);border-radius:10px;padding:12px 16px;margin-bottom:14px;font-size:12px;color:var(--text-2);line-height:1.7">
    <div style="display:flex;gap:8px;align-items:flex-start">
      <svg style="flex:none;margin-top:2px;color:var(--warn)" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l9 16H3z"/><path d="M12 10v4"/><circle cx="12" cy="17" r="0.6" fill="currentColor"/></svg>
      <div>
        <div>{{ __('Suspended clients will complete their active orders but cannot place new ones.') }}</div>
        <div>{{ __('Deactivating an account hides all associated jobs from public view until reactivated.') }}</div>
        <div>{{ __('Identity verification confirms the client\'s identity via legal documents.') }}</div>
        <div>{{ __('Individual commission settings allow assigning a unique commission rate per client.') }}</div>
      </div>
    </div>
  </div>

  <div class="card">

    {{-- Tabs --}}
    <div class="tabs" style="border-bottom:1px solid var(--border)">
      @foreach($tabs as $key => $tab)
        <a class="tab {{ $role === $key ? 'on' : '' }}"
           href="{{ route('admin.client.all', ['role' => $key]) }}">
          {{ $tab['label'] }} <span class="ct">{{ number_format($tab['count']) }}</span>
        </a>
      @endforeach
    </div>

    {{-- Toolbar --}}
    <div class="toolbar">

      <div id="usr-bulk-actions" style="display:none;align-items:center;gap:8px">
        <span style="font-size:12px;color:var(--text-2);margin-right:4px">
          <span id="usr-sel-count">0</span> {{ __('selected') }}
        </span>
        <button class="btn sm" id="usr-bulk-verify">
          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/><path d="m9 12 2 2 4-4"/></svg>
          {{ __('Verify') }}
        </button>
        <button class="btn sm" id="usr-bulk-suspend">
          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
          {{ __('Suspend') }}
        </button>
      </div>

      <span style="flex:1"></span>

      <div id="usr-default-actions" style="display:flex;gap:8px;align-items:center">
        <select id="status-filter" class="input" style="height:32px;font-size:12px;padding:0 8px;min-width:130px">
          <option value="">{{ __('Any status') }}</option>
          <option value="verified"  {{ $status === 'verified'  ? 'selected' : '' }}>{{ __('Verified') }}</option>
          <option value="pending"   {{ $status === 'pending'   ? 'selected' : '' }}>{{ __('Pending') }}</option>
          <option value="suspended" {{ $status === 'suspended' ? 'selected' : '' }}>{{ __('Suspended') }}</option>
        </select>

        <button class="btn sm" id="usr-sort-btn">
          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4v16m0 0-3-3m3 3 3-3"/><path d="M17 20V4m0 0-3 3m3-3 3 3"/></svg>
          <span class="usr-sort-label">{{ __('Newest') }}</span>
        </button>
      </div>
    </div>

    {{-- Table --}}
    <div style="overflow-x:auto">
      <table class="tbl">
        <thead>
          <tr>
            <th style="width:28px">
              <span style="display:inline-grid;place-items:center;width:14px;height:14px;border-radius:3px;border:1px solid var(--border-strong);cursor:pointer;flex:none" data-master-check="clients" id="usr-master-check"></span>
            </th>
            <th>{{ __('Client') }}</th>
            <th>{{ __('Status') }}</th>
            <th>{{ __('Country') }}</th>
            <th class="num">{{ __('Orders') }}</th>
            <th class="num">{{ __('Total Spend') }}</th>
            <th>{{ __('Rating') }}</th>
            <th>{{ __('Joined') }}</th>
            <th style="width:36px"></th>
          </tr>
        </thead>
        <tbody id="usr-tbody">
          @forelse($users as $user)
            @php
              $hue      = $hues[$user->id % count($hues)];
              $fn       = $user->first_name ?? '';
              $ln       = $user->last_name  ?? '';
              $initials = strtoupper(substr($fn, 0, 1) . substr($ln, 0, 1)) ?: 'C';
              $name     = trim($fn . ' ' . $ln) ?: ($user->username ?? '—');

              if ($user->is_suspend) {
                  $stClass = 'danger'; $stLabel = __('Suspended'); $stKey = 'suspended';
              } elseif ($user->user_verified_status) {
                  $stClass = 'success'; $stLabel = __('Verified');  $stKey = 'verified';
              } else {
                  $stClass = 'warn';   $stLabel = __('Pending');   $stKey = 'pending';
              }

              $rating = $user->avg_rating > 0 ? number_format((float)$user->avg_rating, 1) : null;
            @endphp
            <tr class="row-link"
                data-status="{{ $stKey }}"
                data-country="{{ $user->country_name ?? '' }}"
                data-time="{{ $user->created_at }}"
                data-uid="{{ $user->id }}">
              <td>
                <span style="display:inline-grid;place-items:center;width:14px;height:14px;border-radius:3px;border:1px solid var(--border-strong);cursor:pointer;flex:none"
                      class="usr-row-check" data-row-check="clients"></span>
              </td>
              <td>
                <div class="usercell">
                  <span class="av" style="background:oklch(0.6 0.15 {{ $hue }});color:white;border-color:transparent">{{ $initials }}</span>
                  <div style="min-width:0">
                    <div class="nm">{{ $name }}</div>
                    <div class="sub" style="font-family:var(--font-mono)">&#64;{{ $user->username ?? '—' }} · U-{{ $user->id }}</div>
                  </div>
                </div>
              </td>
              <td><span class="tag {{ $stClass }}"><span class="dot"></span>{{ $stLabel }}</span></td>
              <td>
                @if($user->country_name)
                  <span class="tag">{{ Str::upper(substr($user->country_name, 0, 2)) }}</span>
                @else
                  <span class="dim">—</span>
                @endif
              </td>
              <td class="num">{{ number_format($user->cl_jobs) }}</td>
              <td class="num">${{ number_format($user->cl_spend, 0) }}</td>
              <td>
                @if($rating)
                  <span style="display:inline-flex;gap:4px;align-items:center;font-family:var(--font-mono);font-size:12px">
                    <span style="color:var(--warn)">★</span> {{ $rating }}
                  </span>
                @else
                  <span class="dim">—</span>
                @endif
              </td>
              <td class="dim">{{ \Carbon\Carbon::parse($user->created_at)->format('Y-m-d') }}</td>
              <td>
                <div class="pop-wrap">
                  <button class="icon-btn" data-pop="usr-pop-{{ $user->id }}">
                    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="12" r="1.2" fill="currentColor"/><circle cx="12" cy="12" r="1.2" fill="currentColor"/><circle cx="18" cy="12" r="1.2" fill="currentColor"/></svg>
                  </button>
                  <div class="pop" id="usr-pop-{{ $user->id }}" style="min-width:180px;right:0;left:auto;z-index:200">
                    <div class="pop-section">
                      @if($user->is_suspend)
                        <form method="POST" action="{{ route('admin.account.unsuspend', $user->id) }}">
                          @csrf
                          <button type="submit" class="menu-item" style="width:100%;text-align:left">
                            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/><path d="m9 12 2 2 4-4"/></svg>
                            {{ __('Unsuspend') }}
                          </button>
                        </form>
                      @else
                        <form method="POST" action="{{ route('admin.account.suspend', $user->id) }}">
                          @csrf
                          <button type="submit" class="menu-item" style="width:100%;text-align:left">
                            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
                            {{ __('Suspend') }}
                          </button>
                        </form>
                      @endif
                      @if(!$user->user_verified_status)
                        <form method="POST" action="{{ route('admin.user.verify.email', $user->id) }}">
                          @csrf
                          <button type="submit" class="menu-item" style="width:100%;text-align:left">
                            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/><path d="m9 12 2 2 4-4"/></svg>
                            {{ __('Verify email') }}
                          </button>
                        </form>
                      @endif
                      <form method="POST" action="{{ route('admin.user.status', $user->id) }}">
                        @csrf
                        <button type="submit" class="menu-item" style="width:100%;text-align:left">
                          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/></svg>
                          {{ $user->user_active_inactive_status ? __('Deactivate') : __('Activate') }}
                        </button>
                      </form>
                    </div>
                    <div class="pop-section">
                      <form method="POST" action="{{ route('admin.user.delete', $user->id) }}"
                            onsubmit="return confirm('{{ __('Delete this client? This cannot be undone.') }}')">
                        @csrf
                        <button type="submit" class="menu-item" style="width:100%;text-align:left;color:var(--danger)">
                          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"/></svg>
                          {{ __('Delete') }}
                        </button>
                      </form>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="9" style="text-align:center;padding:40px;color:var(--text-3)">
                {{ __('No clients found.') }}
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>

    {{-- Pagination --}}
    @include('backend.layout.partials.paginator', ['paginator' => $users, 'label' => __('clients')])

  </div>{{-- /card --}}
</div>
@endsection

@section('script')
<script>
(function () {

  // Pop open/close is handled globally by admin.js — no duplicate handler here.

  var masterCheck = document.getElementById('usr-master-check');
  var selCount    = document.getElementById('usr-sel-count');
  var bulkActions = document.getElementById('usr-bulk-actions');
  var defActions  = document.getElementById('usr-default-actions');

  function updateBulkUI() {
    var n = document.querySelectorAll('.usr-row-check.on').length;
    if (selCount) selCount.textContent = n;
    if (bulkActions) bulkActions.style.display = n > 0 ? 'flex' : 'none';
    if (defActions)  defActions.style.display  = n > 0 ? 'none' : 'flex';
    if (masterCheck) {
      var allChecks = document.querySelectorAll('.usr-row-check');
      masterCheck.classList.toggle('on', n > 0 && n === allChecks.length);
    }
  }

  document.querySelectorAll('.usr-row-check').forEach(function(cb) {
    cb.addEventListener('click', function() { cb.classList.toggle('on'); updateBulkUI(); });
  });

  if (masterCheck) {
    masterCheck.addEventListener('click', function() {
      var checks = document.querySelectorAll('.usr-row-check');
      var allOn  = masterCheck.classList.contains('on');
      checks.forEach(function(c) { allOn ? c.classList.remove('on') : c.classList.add('on'); });
      masterCheck.classList.toggle('on', !allOn);
      updateBulkUI();
    });
  }

  var statusFilter = document.getElementById('status-filter');
  if (statusFilter) {
    statusFilter.addEventListener('change', function () {
      var params = new URLSearchParams(window.location.search);
      params.delete('page');
      if (this.value) {
        params.set('status', this.value);
      } else {
        params.delete('status');
      }
      window.location.href = window.location.pathname + '?' + params.toString();
    });
  }

  var sortAsc = false;
  var sortBtn = document.getElementById('usr-sort-btn');
  if (sortBtn) {
    sortBtn.addEventListener('click', function() {
      sortAsc = !sortAsc;
      var lbl = sortBtn.querySelector('.usr-sort-label');
      if (lbl) lbl.textContent = sortAsc ? 'Oldest' : 'Newest';
      var tbody = document.getElementById('usr-tbody');
      if (!tbody) return;
      var rows = Array.from(tbody.querySelectorAll('tr[data-time]'));
      rows.sort(function(a, b) {
        var ta = a.dataset.time || '', tb = b.dataset.time || '';
        return sortAsc ? ta.localeCompare(tb) : tb.localeCompare(ta);
      });
      rows.forEach(function(r) { tbody.appendChild(r); });
    });
  }

})();
</script>
@endsection