@extends('admin.layouts.app')
@section('title','Users')
@section('page-title','Users')
@section('page-subtitle','Employers, professionals, agents & enterprise accounts')
@section('content')
<div class="toolbar">
    <form class="filters" method="GET">
        <input class="input" type="search" name="q" value="{{ request('q') }}" placeholder="Search name, email, phone">
        <select class="input" name="account_type">
            <option value="">All types</option>
            @foreach(['employer','professional','agent','agency','enterprise'] as $t)
                <option value="{{ $t }}" @selected(request('account_type')===$t)>{{ ucfirst($t) }}</option>
            @endforeach
        </select>
        <select class="input" name="status">
            <option value="">All statuses</option>
            @foreach(['active','suspended','frozen','pending'] as $s)
                <option value="{{ $s }}" @selected(request('status')===$s)>{{ ucfirst($s) }}</option>
            @endforeach
        </select>
        <button class="btn" type="submit">@include('admin.partials.icon', ['name' => 'filter']) Filter</button>
    </form>
    <a class="btn" href="{{ route('admin.users.create') }}">@include('admin.partials.icon', ['name' => 'plus']) Add</a>
</div>
<div class="card table-wrap">
<table class="data">
<thead><tr><th>Name</th><th>Contact</th><th>KYC Status</th><th>Status</th><th>Actions</th></tr></thead>
<tbody>
@forelse($users as $user)
@php
    $kycStatus = $user->kycStatus();
    $kycBadge = match ($kycStatus) {
        'approved' => 'badge-success',
        'rejected', 'failed' => 'badge-danger',
        'duplicate' => 'badge-warning',
        default => 'badge-danger',
    };
    $statusBadge = match ($user->status) {
        'active' => 'badge-success',
        'pending' => 'badge-warning',
        'suspended' => 'badge-danger',
        'frozen' => 'badge-info',
        default => 'badge-muted',
    };
@endphp
<tr>
<td><strong>{{ $user->name }}</strong></td>
<td>
    <div class="contact-block">
        <div class="contact-line">@include('admin.partials.icon', ['name' => 'mail']) <span>{{ $user->email }}</span></div>
        <div class="contact-line">@include('admin.partials.icon', ['name' => 'phone']) <span>{{ $user->phone ?: '—' }}</span></div>
    </div>
</td>
<td>
    <div class="kyc-status">
        <span class="badge {{ $kycBadge }}">{{ $user->kycStatusLabel() }}</span>
        <form method="POST" action="{{ route('admin.users.kyc',$user) }}" class="switch-form">
            @csrf @method('PATCH')
            <input type="hidden" name="verified" value="{{ $user->isKycVerified() ? 0 : 1 }}">
            <label class="switch" title="{{ $user->isKycVerified() ? 'Mark KYC pending' : 'Mark KYC approved' }}">
                <input type="checkbox" @checked($user->isKycVerified()) onchange="this.form.submit()">
                <span class="switch-slider"></span>
            </label>
        </form>
    </div>
</td>
<td><span class="badge {{ $statusBadge }}">{{ ucfirst($user->status) }}</span></td>
<td>
<div class="actions-menu" data-actions-menu>
    <button type="button" class="actions-trigger" aria-label="Actions" aria-expanded="false" data-actions-toggle>
        @include('admin.partials.icon', ['name' => 'more'])
    </button>
    <div class="actions-panel row-actions" hidden data-actions-panel>
        <a class="btn btn-ghost btn-sm" href="{{ route('admin.users.show',$user) }}" title="View">@include('admin.partials.icon', ['name' => 'eye']) View</a>
        <a class="btn btn-ghost btn-sm" href="{{ route('admin.users.edit',$user) }}" title="Edit">@include('admin.partials.icon', ['name' => 'edit']) Edit</a>
        <form method="POST" action="{{ route('admin.users.destroy',$user) }}">
            @csrf @method('DELETE')
            <button class="btn btn-sm" type="submit" title="Delete" data-confirm-delete data-confirm-name="{{ $user->name }}">@include('admin.partials.icon', ['name' => 'trash']) Delete</button>
        </form>
    </div>
</div>
</td>
</tr>
@empty<tr><td colspan="5">No users found.</td></tr>@endforelse
</tbody>
</table>
<div class="pagination-wrap">{{ $users->links('admin.partials.pagination') }}</div>
</div>
@push('scripts')
<script>
(() => {
  const closeAll = (except) => {
    document.querySelectorAll('[data-actions-menu].is-open').forEach((menu) => {
      if (menu === except) return;
      menu.classList.remove('is-open');
      const toggle = menu.querySelector('[data-actions-toggle]');
      const panel = menu.querySelector('[data-actions-panel]');
      if (toggle) toggle.setAttribute('aria-expanded', 'false');
      if (panel) panel.hidden = true;
    });
  };

  document.addEventListener('click', (event) => {
    const toggle = event.target.closest('[data-actions-toggle]');
    if (toggle) {
      const menu = toggle.closest('[data-actions-menu]');
      const panel = menu?.querySelector('[data-actions-panel]');
      if (!menu || !panel) return;
      const willOpen = !menu.classList.contains('is-open');
      closeAll(willOpen ? menu : null);
      menu.classList.toggle('is-open', willOpen);
      toggle.setAttribute('aria-expanded', willOpen ? 'true' : 'false');
      panel.hidden = !willOpen;
      return;
    }
    if (!event.target.closest('[data-actions-menu]')) closeAll();
  });

  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') closeAll();
  });
})();
</script>
@endpush
@endsection