@extends('layouts.app')

@section('title', 'Users')

@section('content')
<div class="container-fluid">
  @include('partials._flash')

  <div class="row mb-3">
    <div class="col-md-8">
      <h4 class="mb-0">Users</h4>
    </div>
    @can('create users')
        <div class="col-md-4 text-end">
        <a href="{{ route('users.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-lg"></i> Create User
        </a>
        </div>
    @endcan
  </div>

  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <form class="row g-2 col-md-8" method="GET" action="{{ route('users.index') }}">
        <div class="col-auto">
          <input type="text" name="q" value="{{ $q ?? '' }}" class="form-control" placeholder="Search name or email">
        </div>

        <div class="col-auto">
          <select name="per_page" class="form-select" onchange="this.form.submit()">
            @foreach([10,15,25,50,100] as $n)
              <option value="{{ $n }}" @if(($perPage ?? 15) == $n) selected @endif>{{ $n }} / page</option>
            @endforeach
          </select>
        </div>

        <div class="col-auto">
          <button class="btn btn-outline-secondary" type="submit"><i class="bi bi-search"></i> Search</button>
          <a href="{{ route('users.index') }}" class="btn btn-outline-secondary">Reset</a>
        </div>
      </form>

      <div class="col-auto">
        <div class="btn-group">
          <a href="{{ route('users.index', array_merge(request()->except('page'), ['sort' => 'name', 'direction' => ($sort == 'name' && $direction == 'asc') ? 'desc' : 'asc'])) }}"
             class="btn btn-sm btn-outline-secondary">Sort Name</a>

          <a href="{{ route('users.index', array_merge(request()->except('page'), ['sort' => 'email', 'direction' => ($sort == 'email' && $direction == 'asc') ? 'desc' : 'asc'])) }}"
             class="btn btn-sm btn-outline-secondary">Sort Email</a>

          <a href="{{ route('users.index', array_merge(request()->except('page'), ['sort' => 'created_at', 'direction' => ($sort == 'created_at' && $direction == 'asc') ? 'desc' : 'asc'])) }}"
             class="btn btn-sm btn-outline-secondary">Sort Created</a>
        </div>
      </div>
    </div>

    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-hover mb-0">
          <thead class="table-light">
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Email</th>
              <th>Roles</th>
              <th>Created</th>
              <th class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            @forelse ($users as $user)
              <tr>
                <td>{{ $user->id }}</td>
                <td><a href="{{ route('users.show', $user) }}">{{ $user->name }}</a></td>
                <td>{{ $user->email }}</td>
                <td>
                  @if($user->roles && $user->roles->isNotEmpty())
                    {{ $user->roles->pluck('name')->join(', ') }}
                  @else
                    <span class="text-muted">No roles</span>
                  @endif
                </td>
                <td>{{ optional($user->created_at)->format('Y-m-d') }}</td>
                <td class="text-end">
                    @can('edit users')
                        <a href="{{ route('users.edit', $user) }}" class="btn btn-sm btn-outline-primary">
                            <i class="bi bi-pencil"></i>
                        </a>
                    @endcan
                    @can('delete users')
                        <button onclick="confirmDelete('{{ route('users.destroy', $user) }}')" class="btn btn-sm btn-outline-danger">
                            <i class="bi bi-trash"></i>
                        </button>
                    @endcan
                </td>
              </tr>
            @empty
              <tr><td colspan="6" class="text-center">No users found.</td></tr>
            @endforelse
          </tbody>
        </table>
      </div>

      <div class="card-footer d-flex justify-content-between align-items-center">
        <div>
          Showing {{ $users->firstItem() ?? 0 }} to {{ $users->lastItem() ?? 0 }} of {{ $users->total() }} entries
        </div>
        <div>
          {{ $users->links() }}
        </div>
      </div>
    </div>
  </div>

  @include('partials._delete_modal')
</div>
@endsection