@section("title", "BizMan | Show User")

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('User Details') }}
        </h2>
        <p class="text-gray-500 text-sm">{{ date('l, d M Y') }}</p> 
    </x-slot>

    <div>
        <div class="max-w-7xl flex flex-col gap-5 mx-auto sm:px-6 lg:px-8">
            <div class="flex items-center justify-between gap-2">
                <div class="flex flex-col gap-1">
                    <p class="font-semibold text-2xl text-black">User Details</p>
                    <p>Detail user dengan multi-role (1 user bisa memiliki beberapa role)</p>
                </div>
                <a href="{{ route('users.index') }}"
                    class="bg-gray-500 whitespace-nowrap hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
                    Back
                </a>
            </div>
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <div class="mb-6">
                        <h3 class="text-lg font-semibold mb-2">User Information</h3>
                        <div class="bg-gray-50 p-4 rounded">
                            <p class="mb-2"><strong>Name:</strong> {{ $user->name }}</p>
                            <p class="mb-2"><strong>Email:</strong> {{ $user->email }}</p>
                            <div class="mb-2">
                                <strong>Divisions:</strong>
                                @if ($user->divisions->count() > 0)
                                    <div class="flex flex-wrap gap-2 mt-1">
                                        @foreach ($user->divisions as $division)
                                            <span
                                                class="px-3 py-1 inline-flex text-sm leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                {{ $division->name }}
                                            </span>
                                        @endforeach
                                    </div>
                                @else
                                    <span class="text-gray-500">Not assigned to any division</span>
                                @endif
                            </div>
                            <p class="mb-2"><strong>Created at:</strong> {{ $user->created_at->format('d M Y H:i') }}
                            </p>
                        </div>
                    </div>

                    <div class="mb-6">
                        <h3 class="text-lg font-semibold mb-2">Assigned Roles</h3>
                        <div class="bg-gray-50 p-4 rounded">
                            @if ($user->roles->count() > 0)
                                <div class="flex flex-wrap gap-2">
                                    @foreach ($user->roles as $role)
                                        <span
                                            class="px-3 py-1 inline-flex text-sm leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                            {{ $role->name }}
                                        </span>
                                    @endforeach
                                </div>
                            @else
                                <p class="text-gray-500">No roles assigned to this user.</p>
                            @endif
                        </div>
                    </div>

                    <div class="mb-6">
                        <h3 class="text-lg font-semibold mb-2">Permissions (via Roles)</h3>
                        <div class="bg-gray-50 p-4 rounded">
                            @if ($user->getAllPermissions()->count() > 0)
                                <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
                                    @foreach ($user->getAllPermissions() as $permission)
                                        <div class="flex items-center">
                                            <svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor"
                                                viewBox="0 0 20 20">
                                                <path fill-rule="evenodd"
                                                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                                    clip-rule="evenodd"></path>
                                            </svg>
                                            <span class="text-sm">{{ $permission->name }}</span>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <p class="text-gray-500">No permissions assigned.</p>
                            @endif
                        </div>
                    </div>

                    <div class="flex items-center justify-between">
                        <a href="{{ route('users.index') }}"
                            class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
                            Back to Users
                        </a>
                        <a href="{{ route('users.edit', $user) }}"
                            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                            Edit User
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>