@extends('admin.layout')
@section('title', 'Kelola User - LapFinder Admin')

@section('content')
<x-admin.page-header
    title="Kelola User"
    subtitle="{{ number_format($users->total()) }} user sesuai filter aktif"
/>

<x-admin.card title="Filter user" description="Kelola akses admin, status akun, dan aktivitas user.">
    <form method="GET" class="grid gap-3 md:grid-cols-2 xl:grid-cols-6">
        <div class="xl:col-span-2">
            <label class="form-label" for="search">Search</label>
            <input id="search" name="search" type="search" value="{{ request('search') }}" class="form-control" placeholder="Nama atau email">
        </div>
        <div>
            <label class="form-label" for="role">Role</label>
            <select id="role" name="role" class="form-control">
                <option value="">Semua</option>
                <option value="admin" @selected(request('role') === 'admin')>Admin</option>
                <option value="user" @selected(request('role') === 'user')>User</option>
            </select>
        </div>
        <div>
            <label class="form-label" for="status">Status</label>
            <select id="status" name="status" class="form-control">
                <option value="">Semua</option>
                <option value="active" @selected(request('status') === 'active')>Active</option>
                <option value="blocked" @selected(request('status') === 'blocked')>Blocked</option>
            </select>
        </div>
        <div>
            <label class="form-label" for="per_page">Per halaman</label>
            <select id="per_page" name="per_page" class="form-control">
                @foreach([15, 25, 50, 100] as $size)
                    <option value="{{ $size }}" @selected((int) request('per_page', 15) === $size)>{{ $size }}</option>
                @endforeach
            </select>
        </div>
        <div class="flex items-end gap-2">
            <button type="submit" class="btn-primary">
                <i class="fa-solid fa-filter"></i>
                Terapkan
            </button>
            <a href="{{ route('users.index') }}" class="btn-secondary">Reset</a>
        </div>
    </form>
</x-admin.card>

<x-admin.card class="mt-6">
    <div class="overflow-x-auto">
        <table class="data-table">
            <thead>
                <tr>
                    <th>User</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th>Review</th>
                    <th>Favorit</th>
                    <th>Terdaftar</th>
                    <th class="text-right">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($users as $user)
                    <tr>
                        <td>
                            <div class="flex items-center gap-3">
                                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-slate-900 text-sm font-bold text-white dark:bg-white dark:text-slate-900">
                                    {{ strtoupper(substr($user->name, 0, 1)) }}
                                </div>
                                <div class="min-w-0">
                                    <p class="truncate font-bold text-slate-950 dark:text-white">{{ $user->name }}</p>
                                    <p class="truncate text-xs text-slate-500 dark:text-slate-400">{{ $user->email }}</p>
                                </div>
                            </div>
                        </td>
                        <td>
                            @if($user->role === 'admin')
                                <span class="badge-red">Admin</span>
                            @else
                                <span class="badge-blue">User</span>
                            @endif
                        </td>
                        <td>
                            @if(($user->status ?? 'active') === 'blocked')
                                <span class="badge-red"><i class="fa-solid fa-ban"></i> Blocked</span>
                            @else
                                <span class="badge-green"><i class="fa-solid fa-circle-check"></i> Active</span>
                            @endif
                        </td>
                        <td class="font-semibold text-slate-800 dark:text-slate-100">{{ number_format($user->reviews_count) }}</td>
                        <td class="font-semibold text-slate-800 dark:text-slate-100">{{ number_format($user->favorites_count) }}</td>
                        <td class="text-slate-500 dark:text-slate-400">{{ $user->created_at->format('d M Y') }}</td>
                        <td>
                            @if(auth()->id() === $user->id)
                                <div class="flex justify-end">
                                    <span class="badge-slate">Akun sedang dipakai</span>
                                </div>
                            @else
                                <form method="POST" action="{{ route('users.update', $user) }}" class="flex flex-wrap justify-end gap-2">
                                    @csrf
                                    @method('PUT')
                                    <select name="role" class="form-control w-32">
                                        <option value="user" @selected($user->role === 'user')>User</option>
                                        <option value="admin" @selected($user->role === 'admin')>Admin</option>
                                    </select>
                                    <select name="status" class="form-control w-32">
                                        <option value="active" @selected(($user->status ?? 'active') === 'active')>Active</option>
                                        <option value="blocked" @selected(($user->status ?? 'active') === 'blocked')>Blocked</option>
                                    </select>
                                    <button type="submit" class="btn-secondary px-3 py-2">
                                        <i class="fa-solid fa-floppy-disk"></i>
                                        Simpan
                                    </button>
                                </form>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7">
                            <x-admin.empty-state icon="fa-user-slash" title="User tidak ditemukan" description="Ubah filter pencarian untuk melihat data lain." />
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($users->hasPages())
        <div class="mt-4 border-t border-slate-100 pt-4 dark:border-slate-800">
            {{ $users->withQueryString()->links() }}
        </div>
    @endif
</x-admin.card>
@endsection