@extends('layouts.app')
@section('page-title', 'Users')
@section('styles')
<style>
.pg-card{background:#fff;border:1px solid #e6e9ef;border-radius:12px;overflow:hidden}
.pg-head{padding:1rem 1.5rem;border-bottom:1px solid #e6e9ef;display:flex;align-items:center;justify-content:space-between}
.pg-head-title{font-size:15px;font-weight:600;color:#1f2d3d;display:flex;align-items:center;gap:8px}
.pg-head-title i{font-size:18px;color:#0073ea}
.btn-primary{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;background:#0073ea;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;font-family:'Figtree',sans-serif}
.btn-primary:hover{background:#005ecb;color:#fff}
.btn-secondary{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;background:#fff;color:#333;border:1px solid #e6e9ef;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;font-family:'Figtree',sans-serif}
.btn-secondary:hover{background:#f6f7fb}
.search-bar{display:flex;gap:8px;padding:1rem 1.5rem;border-bottom:1px solid #e6e9ef;background:#f9fafb}
.search-bar input{flex:1;padding:7px 12px;border:1px solid #e6e9ef;border-radius:8px;font-size:13px;font-family:'Figtree',sans-serif;outline:none;color:#333}
.search-bar input:focus{border-color:#0073ea}
.search-bar-select{padding:7px 12px;border:1px solid #e6e9ef;border-radius:8px;font-size:13px;font-family:'Figtree',sans-serif;outline:none;color:#333;background:#fff}
.search-bar-select:focus{border-color:#0073ea}
.utable{width:100%;border-collapse:collapse}
.utable th{padding:10px 1.5rem;font-size:11.5px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #e6e9ef;background:#f9fafb;text-align:left}
.utable th a{color:#888;text-decoration:none;display:flex;align-items:center;gap:4px}
.utable th a:hover{color:#1f2d3d}
.utable td{padding:10px 1.5rem;font-size:13px;color:#333;border-bottom:1px solid #f0f2f8}
.utable tr:last-child td{border-bottom:none}
.utable tr:hover td{background:#f6f7fb}
.pill{display:inline-flex;align-items:center;padding:2px 10px;border-radius:20px;font-size:11.5px;font-weight:500}
.pill-green{background:#eaf3de;color:#27500a}
.pill-red{background:#fcebeb;color:#791f1f}
.pill-blue{background:#e6f1fb;color:#0c447c}
.edit-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1px solid #e6e9ef;border-radius:6px;font-size:12px;color:#555;text-decoration:none;transition:all .1s}
.edit-btn:hover{background:#0073ea;color:#fff;border-color:#0073ea}
.alert-success{background:#eaf3de;color:#27500a;padding:.75rem 1rem;border-radius:8px;font-size:13px;margin:1rem 1.5rem;display:flex;align-items:center;gap:8px}
.pagination-wrap{padding:.875rem 1.5rem;border-top:1px solid #e6e9ef;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#888}
.sort-icon{font-size:11px}
</style>
@endsection
@section('content')
<div class="pg-card">
  <div class="pg-head">
    <div class="pg-head-title"><i class="ti ti-users"></i>Users</div>
    <a href="{{ route('users.create') }}" class="btn-primary"><i class="ti ti-plus" style="font-size:14px"></i>New User</a>
  </div>

  @if(session('success'))
  <div class="alert-success"><i class="ti ti-check" style="font-size:16px"></i>{{ session('success') }}</div>
  @endif

  <form method="GET" action="{{ route('users.index') }}">
    <input type="hidden" name="sort" value="{{ $sort }}">
    <input type="hidden" name="dir" value="{{ $dir }}">
    <div class="search-bar">
      <input type="text" name="search" value="{{ request('search') }}" placeholder="Search name or email...">
      <select name="status" class="search-bar-select">
        <option value="">All Status</option>
        <option value="1" {{ request('status') === '1' ? 'selected' : '' }}>Active</option>
        <option value="0" {{ request('status') === '0' ? 'selected' : '' }}>Inactive</option>
      </select>
      <button type="submit" class="btn-primary" style="padding:7px 14px"><i class="ti ti-search" style="font-size:14px"></i></button>
      @if(request('search') || (request('status') !== null && request('status') !== ''))
      <a href="{{ route('users.index') }}" class="btn-secondary">Clear</a>
      @endif
    </div>
  </form>

  <table class="utable">
    <thead>
      <tr>
        <th>#</th>
        <th>
          <a href="{{ route('users.index', array_merge(request()->only(['search','status']), ['sort'=>'name','dir'=>$sort==='name'?$nextDir:'asc'])) }}">
            Name @if($sort==='name')<i class="ti ti-chevron-{{ $dir==='asc'?'up':'down' }} sort-icon"></i>@endif
          </a>
        </th>
        <th>Email</th>
        <th>
          <a href="{{ route('users.index', array_merge(request()->only(['search','status']), ['sort'=>'role','dir'=>$sort==='role'?$nextDir:'asc'])) }}">
            Role @if($sort==='role')<i class="ti ti-chevron-{{ $dir==='asc'?'up':'down' }} sort-icon"></i>@endif
          </a>
        </th>
        <th>
          <a href="{{ route('users.index', array_merge(request()->only(['search','status']), ['sort'=>'active','dir'=>$sort==='active'?$nextDir:'asc'])) }}">
            Status @if($sort==='active')<i class="ti ti-chevron-{{ $dir==='asc'?'up':'down' }} sort-icon"></i>@endif
          </a>
        </th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      @forelse($users as $user)
      <tr>
        <td style="color:#aaa;font-size:12px">{{ $user->id }}</td>
        <td style="font-weight:500">
          <div style="display:flex;align-items:center;gap:8px">
            <div style="width:28px;height:28px;border-radius:50%;background:#e6f1fb;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#0073ea;flex-shrink:0">{{ strtoupper(substr($user->name,0,2)) }}</div>
            {{ $user->name }}
          </div>
        </td>
        <td style="color:#666">{{ $user->email }}</td>
        <td><span class="pill pill-blue">{{ $user->role ?? '—' }}</span></td>
        <td><span class="pill {{ $user->active ? 'pill-green' : 'pill-red' }}">{{ $user->active ? 'Active' : 'Inactive' }}</span></td>
        <td><a href="{{ route('users.edit', $user->id) }}" class="edit-btn"><i class="ti ti-pencil" style="font-size:13px"></i>Edit</a></td>
      </tr>
      @empty
      <tr><td colspan="6" style="text-align:center;padding:2rem;color:#aaa">No users found.</td></tr>
      @endforelse
    </tbody>
  </table>

  <div class="pagination-wrap">
    <span>{{ $users->total() }} users</span>
    {{ $users->appends(request()->only(['search','status','sort','dir']))->links('pagination::simple-tailwind') }}
  </div>
</div>
@endsection