@extends('layouts.app')

@section('content')
    <div class="container mx-auto p-4">
        <h1 class="text-2xl font-bold mb-4">Users List</h1>
        <form method="GET" action="{{ route('users.index') }}" class="mb-4">
            <input type="text" name="search" value="{{ request()->input('search') }}" placeholder="Search..." class="border p-2 rounded" onkeyup="this.form.submit()">
        </form>
        <table class="w-full border-collapse border">
            <thead>
                <tr>
                    <th class="border p-2">
                        <a href="{{ route('users.index') }}?sort_field=name&sort_order={{ request()->input('sort_field') === 'name' && request()->input('sort_order') === 'asc' ? 'desc' : 'asc' }}" class="text-blue-500">
                            Name {{ request()->input('sort_field') === 'name' && request()->input('sort_order') === 'asc' ? '↓' : '↑' }}
                        </a>
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach ($paginatedData as $user)
                    <tr>
                        <td class="border p-2">{{ $user->name }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        {{ $paginatedData->links() }}
    </div>
@endsection