@extends('layouts.app')

@section('title','Data Pengguna')

@section('content')

<div class="card-dark">


    <div class="d-flex justify-content-between align-items-center mb-4">

        <h4 class="text-white">
            <i class="bi bi-people-fill"></i>
            Data Pengguna
        </h4>

        <form method="GET" action="{{ route('users.index') }}" class="d-flex gap-2">
            <input name="search" class="form-control-dark" placeholder="Cari nama atau email" value="{{ request('search') }}" data-live-search="true">
            <select name="perpage" class="form-control-dark">
                <option value="10" {{ request('perpage', 10) == 10 ? 'selected' : '' }}>10</option>
                <option value="25" {{ request('perpage') == 25 ? 'selected' : '' }}>25</option>
                <option value="50" {{ request('perpage') == 50 ? 'selected' : '' }}>50</option>
            </select>
            <button class="btn-primary-glow">Cari</button>
        </form>

    </div>

    <table class="table table-dark table-hover">

        <thead>

            <tr>
                <th>ID</th>
                <th>Nama</th>
                <th>Email</th>
                <th>Role</th>
            </tr>

        </thead>

        <tbody>
        @forelse($users as $user)
            <tr>
                <td>{{ $user->id }}</td>
                <td>{{ $user->name }}</td>
                <td>{{ $user->email }}</td>
                <td>{{ $user->role }}</td>
            </tr>
        @empty
            <tr>
                <td colspan="4">
                    <div class="empty-state">Belum ada pengguna.</div>
                </td>
            </tr>
        @endforelse
        </tbody>

    </table>

    <div class="d-flex justify-content-center mt-4">{{ $users->appends(request()->except('page'))->links() }}</div>

</div>

@endsection