@extends('layouts.app')

@section('content')

    {{-- ── Page Header ── --}}
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
        <div>
            <h1 class="text-2xl font-bold tracking-tight">Users</h1>
            <p class="text-sm text-base-content/50 mt-0.5">Manage system users and their roles</p>
        </div>
        <div class="flex flex-wrap items-center gap-2 self-start">
            <a href="{{ route('roles.index') }}" class="btn btn-soft btn-secondary gap-2">
                <span class="icon-[tabler--shield] size-4"></span>
                Roles
            </a>
            <a href="{{ route('permissions.index') }}" class="btn btn-soft btn-warning gap-2">
                <span class="icon-[tabler--key] size-4"></span>
                Permissions
            </a>
            <a href="{{ route('users.create') }}" class="btn btn-primary gap-2">
                <span class="icon-[tabler--plus] size-4"></span>
                Add User
            </a>
        </div>
    </div>

    {{-- ── Table ── --}}
    <div class="card bg-base-100 border border-base-200 shadow-sm">
        <div class="card-body p-0">
            <div class="overflow-x-auto">
                <table class="table table-zebra w-full">
                    <thead>
                        <tr class="bg-base-200 text-base-content/70 text-sm">
                            <th><span class="icon-[tabler--user] size-4 inline me-1"></span>Name</th>
                            <th><span class="icon-[tabler--mail] size-4 inline me-1"></span>Email</th>
                            <th><span class="icon-[tabler--shield] size-4 inline me-1"></span>Roles</th>
                            <th><span class="icon-[tabler--calendar] size-4 inline me-1"></span>Joined</th>
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($users as $user)
                            <tr class="hover:bg-base-200/50 transition-colors">

                                {{-- Name --}}
                                <td>
                                    <div class="flex items-center gap-3">
                                        <div class="avatar avatar-placeholder">
                                            <div class="bg-primary/10 text-primary rounded-full size-9">
                                                <span class="text-sm font-bold">
                                                    {{ strtoupper(substr($user->name, 0, 1)) }}
                                                </span>
                                            </div>
                                        </div>
                                        <div>
                                            <p class="font-semibold text-sm">{{ $user->name }}</p>
                                            @if ($user->id === auth()->id())
                                                <span class="badge badge-primary badge-soft badge-xs">You</span>
                                            @endif
                                        </div>
                                    </div>
                                </td>

                                {{-- Email --}}
                                <td class="text-sm text-base-content/70">{{ $user->email }}</td>

                                {{-- Roles --}}
                                <td>
                                    @forelse ($user->roles as $role)
                                        <span class="badge badge-secondary badge-soft badge-sm capitalize">
                                            {{ $role->name }}
                                        </span>
                                    @empty
                                        <span class="text-base-content/30 text-sm">No role</span>
                                    @endforelse
                                </td>

                                {{-- Joined --}}
                                <td class="text-sm text-base-content/50">
                                    {{ $user->created_at->format('d M Y') }}
                                </td>

                                {{-- Actions --}}
                                <td>
                                    <div class="flex items-center justify-end gap-1">
                                        <a href="{{ route('users.edit', $user) }}"
                                            class="btn btn-soft btn-primary btn-xs btn-square" title="Edit">
                                            <span class="icon-[tabler--edit] size-4"></span>
                                        </a>
                                        @if (auth()->user()->hasRole('Super Admin') && $user->id !== auth()->id())
                                            <form method="POST" action="{{ route('users.destroy', $user) }}"
                                                onsubmit="return confirm('Delete this user?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-soft btn-error btn-xs btn-square"
                                                    title="Delete">
                                                    <span class="icon-[tabler--trash] size-4"></span>
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>

                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-16 text-base-content/40">
                                    <span class="icon-[tabler--users-group] size-12 mx-auto block mb-3 opacity-30"></span>
                                    <p class="font-semibold text-base">No users found</p>
                                    <a href="{{ route('users.create') }}" class="btn btn-primary btn-sm mt-4 gap-2">
                                        <span class="icon-[tabler--plus] size-4"></span>
                                        Add User
                                    </a>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Pagination --}}
            @if ($users->hasPages())
                <div class="px-5 py-4 border-t border-base-200">
                    {{ $users->links() }}
                </div>
            @endif

        </div>
    </div>

@endsection