@extends('backend.layout.master-tailwind')
@section('title', __('Trash'))
@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];
@endphp

<div class="page">

  {{-- Page head --}}
  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('Trash') }}</h1>
      <p class="page-sub">{{ number_format($total) }} {{ __('deleted users') }}</p>
    </div>
    <div class="page-actions">
      <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>
        <form method="POST" action="{{ route('admin.user.permanent.delete.bulk.action') }}" id="bulk-delete-form"
              onsubmit="return confirm('{{ __('Permanently delete selected users? This cannot be undone.') }}')">
          @csrf
          <div id="bulk-ids"></div>
          <button type="submit" class="btn sm" style="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 permanently') }}
          </button>
        </form>
      </div>
    </div>
  </div>

  {{-- Notice --}}
  <div style="background:var(--danger-soft,oklch(0.97 0.02 20));border:1px solid color-mix(in oklch,var(--danger) 25%,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(--danger)" 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>{{ __('Permanently deleting a user is irreversible and removes all their associated data from the system. Use Restore to recover a soft-deleted account instead.') }}</div>
    </div>
  </div>

  <div class="card">

    {{-- Toolbar --}}
    <div class="toolbar">
      <div class="pop-wrap">
        <span class="filter-chip" id="usr-role-chip" data-pop="usr-role-pop">
          {{ __('Role') }}
          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
        </span>
        <div class="pop" id="usr-role-pop" style="min-width:160px;left:0;right:auto;z-index:200">
          <div class="pop-section">
            <label class="menu-item" style="gap:8px;cursor:pointer"><input type="checkbox" class="usr-role-check" value="freelancer"> {{ __('Freelancer') }}</label>
            <label class="menu-item" style="gap:8px;cursor:pointer"><input type="checkbox" class="usr-role-check" value="client"> {{ __('Client') }}</label>
          </div>
        </div>
      </div>
      <span style="flex:1"></span>
      <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 deleted') }}</span>
      </button>
    </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="trash" id="usr-master-check"></span>
            </th>
            <th>{{ __('User') }}</th>
            <th>{{ __('Role') }}</th>
            <th>{{ __('Email') }}</th>
            <th>{{ __('Phone') }}</th>
            <th>{{ __('Country') }}</th>
            <th>{{ __('Deleted') }}</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)) ?: 'U';
              $name     = trim($fn . ' ' . $ln) ?: ($user->username ?? '—');
              $roleKey  = $user->user_type == 2 ? 'freelancer' : 'client';
              $roleLabel = $user->user_type == 2 ? __('Freelancer') : __('Client');
            @endphp
            <tr class="row-link"
                data-role="{{ $roleKey }}"
                data-time="{{ $user->deleted_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="trash" data-id="{{ $user->id }}"></span>
              </td>
              <td>
                <div class="usercell">
                  <span class="av" style="background:oklch(0.6 0.15 {{ $hue }});color:white;border-color:transparent;opacity:0.65">{{ $initials }}</span>
                  <div style="min-width:0">
                    <div class="nm" style="opacity:0.7">{{ $name }}</div>
                    <div class="sub" style="font-family:var(--font-mono)">&#64;{{ $user->username ?? '—' }} · U-{{ $user->id }}</div>
                  </div>
                </div>
              </td>
              <td>{{ $roleLabel }}</td>
              <td class="dim" style="font-size:12px">{{ $user->email ?? '—' }}</td>
              <td class="dim" style="font-size:12px">{{ $user->phone ?? '—' }}</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="dim" style="font-size:12px">{{ \Carbon\Carbon::parse($user->deleted_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">
                      <form method="POST" action="{{ route('admin.user.restore', $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="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>
                          {{ __('Restore') }}
                        </button>
                      </form>
                    </div>
                    <div class="pop-section">
                      <form method="POST" action="{{ route('admin.user.permanent.delete', $user->id) }}"
                            onsubmit="return confirm('{{ __('Permanently delete this user? 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 permanently') }}
                        </button>
                      </form>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="8" style="text-align:center;padding:48px;color:var(--text-3)">
                <svg class="icon" style="width:32px;height:32px;margin-bottom:8px;display:block;margin-inline:auto;opacity:0.3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"/></svg>
                {{ __('Trash is empty.') }}
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
      <div id="usr-no-results" style="display:none;padding:32px;text-align:center;color:var(--text-3)">
        {{ __('No users match the selected filters.') }}
      </div>
    </div>

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

  </div>
</div>
@endsection

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

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

  // --- Checkbox selection + bulk delete ids ---
  var masterCheck = document.getElementById('usr-master-check');
  var selCount    = document.getElementById('usr-sel-count');
  var bulkActions = document.getElementById('usr-bulk-actions');
  var bulkIds     = document.getElementById('bulk-ids');

  function updateBulkUI() {
    var checked = document.querySelectorAll('.usr-row-check.on');
    var n = checked.length;
    if (selCount) selCount.textContent = n;
    if (bulkActions) bulkActions.style.display = n > 0 ? 'flex' : 'none';
    if (masterCheck) {
      masterCheck.classList.toggle('on', n > 0 && n === document.querySelectorAll('.usr-row-check').length);
    }
    if (bulkIds) {
      bulkIds.innerHTML = '';
      checked.forEach(function(cb) {
        var inp = document.createElement('input');
        inp.type = 'hidden'; inp.name = 'ids[]'; inp.value = cb.dataset.id;
        bulkIds.appendChild(inp);
      });
    }
  }

  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();
    });
  }

  // --- Role filter ---
  function applyFilters() {
    var roleChecks = Array.from(document.querySelectorAll('.usr-role-check:checked')).map(function(c) { return c.value; });
    var allRole = roleChecks.length === 0;
    var visible = 0;
    document.querySelectorAll('#usr-tbody tr').forEach(function(row) {
      var show = allRole || roleChecks.includes(row.dataset.role);
      row.style.display = show ? '' : 'none';
      if (show) visible++;
    });
    var noResults = document.getElementById('usr-no-results');
    if (noResults) noResults.style.display = visible === 0 ? '' : 'none';
    var rc = document.getElementById('usr-role-chip');
    if (rc) rc.classList.toggle('applied', !allRole);
  }

  document.querySelectorAll('.usr-role-check').forEach(function(cb) {
    cb.addEventListener('change', applyFilters);
  });

  // --- Sort by deleted date ---
  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 deleted' : 'Newest deleted';
      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