@extends('layouts.app')

@section('title', 'Role Details')

@section('page-title', 'Role Details')

@section('content')

View role information, assigned permissions, and users associated with this role.

{{-- Page Actions --}}
<div class="mb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-end">

    @can('roles.edit')
        @if ($role->name !== 'Super Admin')
            <a
                href="{{ route('roles.edit', $role) }}"
                class="btn btn-primary"
            >
                <i class="fa-regular fa-pen-to-square"></i>
                Edit Role
            </a>
        @endif
    @endcan

    <a
        href="{{ route('roles.index') }}"
        class="btn btn-secondary"
    >
        <i class="fa-solid fa-arrow-left"></i>
        Back
    </a>

</div>


{{-- Role Information --}}
<div class="card overflow-hidden">

    {{-- Header --}}
    <div class="border-b border-border px-5 py-4">

        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">

            <div class="flex items-center gap-3">

                <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-sky-50 text-sky-600">
                    <i class="fa-solid fa-user-shield text-lg"></i>
                </div>

                <div>

                    <h2 class="text-base font-semibold text-text">
                        {{ $role->name }}
                    </h2>

                    <p class="mt-0.5 text-xs text-muted">
                        Role information and access configuration.
                    </p>

                </div>

            </div>


            {{-- Role Type --}}
            <div>

                @if ($role->name === 'Super Admin')

                    <span class="inline-flex items-center gap-1.5 rounded-full bg-amber-50 px-3 py-1.5 text-xs font-medium text-amber-700">
                        <i class="fa-solid fa-lock text-[10px]"></i>
                        System Role
                    </span>

                @else

                    <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-3 py-1.5 text-xs font-medium text-emerald-700">
                        <i class="fa-solid fa-check text-[10px]"></i>
                        Custom Role
                    </span>

                @endif

            </div>

        </div>

    </div>


    {{-- Information --}}
    <div class="grid grid-cols-1 gap-px bg-border sm:grid-cols-2 lg:grid-cols-4">

        {{-- Role Name --}}
        <div class="bg-card p-5">

            <p class="text-xs font-medium uppercase tracking-wide text-muted">
                Role Name
            </p>

            <p class="mt-2 text-sm font-semibold text-text">
                {{ $role->name }}
            </p>

        </div>


        {{-- Guard --}}
        <div class="bg-card p-5">

            <p class="text-xs font-medium uppercase tracking-wide text-muted">
                Guard
            </p>

            <p class="mt-2 text-sm font-semibold text-text">
                {{ $role->guard_name }}
            </p>

        </div>


        {{-- Permissions --}}
        <div class="bg-card p-5">

            <p class="text-xs font-medium uppercase tracking-wide text-muted">
                Permissions
            </p>

            <div class="mt-2 flex items-center gap-2">

                <span class="text-xl font-semibold text-text">
                    {{ $role->permissions->count() }}
                </span>

                <span class="text-xs text-muted">
                    {{ Str::plural(
                        'permission',
                        $role->permissions->count()
                    ) }}
                </span>

            </div>

        </div>


        {{-- Users --}}
        <div class="bg-card p-5">

            <p class="text-xs font-medium uppercase tracking-wide text-muted">
                Assigned Users
            </p>

            <div class="mt-2 flex items-center gap-2">

                <span class="text-xl font-semibold text-text">
                    {{ $role->users->count() }}
                </span>

                <span class="text-xs text-muted">
                    {{ Str::plural(
                        'user',
                        $role->users->count()
                    ) }}
                </span>

            </div>

        </div>

    </div>


    {{-- Additional Information --}}
    <div class="grid grid-cols-1 gap-px border-t border-border bg-border sm:grid-cols-2">

        {{-- Created --}}
        <div class="bg-card p-5">

            <p class="text-xs font-medium uppercase tracking-wide text-muted">
                Created At
            </p>

            <p class="mt-2 text-sm font-medium text-text">
                {{ $role->created_at?->format('d M Y, h:i A') ?? '—' }}
            </p>

        </div>


        {{-- Updated --}}
        <div class="bg-card p-5">

            <p class="text-xs font-medium uppercase tracking-wide text-muted">
                Last Updated
            </p>

            <p class="mt-2 text-sm font-medium text-text">
                {{ $role->updated_at?->format('d M Y, h:i A') ?? '—' }}
            </p>

        </div>

    </div>

</div>


{{-- Permissions --}}
<div class="card mt-5 overflow-hidden">

    {{-- Header --}}
    <div class="border-b border-border px-5 py-4">

        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">

            <div>

                <h2 class="text-base font-semibold text-text">
                    Assigned Permissions
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Permissions currently granted to this role.
                </p>

            </div>


            <span class="inline-flex w-fit items-center rounded-full bg-sky-50 px-3 py-1.5 text-xs font-medium text-sky-700">

                {{ $role->permissions->count() }}

                {{ Str::plural(
                    'Permission',
                    $role->permissions->count()
                ) }}

            </span>

        </div>

    </div>


    {{-- Permission Content --}}
    <div class="p-5 lg:p-6">

        @if ($role->permissions->isNotEmpty())

            @php

                $groupedPermissions = $role->permissions
                    ->groupBy(function ($permission) {

                        $parts = explode(
                            '.',
                            $permission->name
                        );

                        return $parts[0] ?? 'other';

                    });

            @endphp


            <div class="space-y-4">

                @foreach ($groupedPermissions as $module => $permissions)

                    <div class="overflow-hidden rounded-xl border border-border">

                        {{-- Module Header --}}
                        <div class="flex items-center justify-between border-b border-border bg-background/50 px-4 py-3">

                            <div>

                                <h3 class="text-sm font-semibold text-text">
                                    {{ Str::headline($module) }}
                                </h3>

                                <p class="mt-0.5 text-xs text-muted">
                                    {{ $permissions->count() }}

                                    {{ Str::plural(
                                        'permission',
                                        $permissions->count()
                                    ) }}
                                </p>

                            </div>


                            <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-sky-50 text-sky-600">
                                <i class="fa-solid fa-key text-xs"></i>
                            </div>

                        </div>


                        {{-- Permissions --}}
                        <div class="grid grid-cols-1 gap-px bg-border sm:grid-cols-2 lg:grid-cols-4">

                            @foreach ($permissions as $permission)

                                @php

                                    $parts = explode(
                                        '.',
                                        $permission->name
                                    );

                                    $action = $parts[1]
                                        ?? $permission->name;

                                @endphp


                                <div class="flex items-center gap-3 bg-card p-4">

                                    <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600">

                                        <i class="fa-solid fa-check text-xs"></i>

                                    </div>


                                    <div class="min-w-0">

                                        <p class="text-sm font-medium text-text">
                                            {{ Str::headline($action) }}
                                        </p>

                                        <p class="mt-0.5 break-all text-xs text-muted">
                                            {{ $permission->name }}
                                        </p>

                                    </div>

                                </div>

                            @endforeach

                        </div>

                    </div>

                @endforeach

            </div>

        @else

            {{-- Empty Permissions --}}
            <div class="py-12 text-center">

                <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-background text-muted">

                    <i class="fa-solid fa-key text-lg"></i>

                </div>

                <h3 class="mt-4 text-sm font-semibold text-text">
                    No permissions assigned
                </h3>

                <p class="mx-auto mt-1 max-w-md text-xs leading-5 text-muted">
                    This role currently does not have any permissions assigned.
                </p>

                @can('roles.edit')

                    @if ($role->name !== 'Super Admin')

                        <a
                            href="{{ route('roles.edit', $role) }}"
                            class="btn btn-primary mt-4"
                        >
                            <i class="fa-solid fa-key"></i>

                            Assign Permissions
                        </a>

                    @endif

                @endcan

            </div>

        @endif

    </div>

</div>


{{-- Assigned Users --}}
<div class="card mt-5 overflow-hidden">

    {{-- Header --}}
    <div class="border-b border-border px-5 py-4">

        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">

            <div>

                <h2 class="text-base font-semibold text-text">
                    Assigned Users
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Users currently assigned to this role.
                </p>

            </div>


            <span class="inline-flex w-fit items-center rounded-full bg-background px-3 py-1.5 text-xs font-medium text-text">

                {{ $role->users->count() }}

                {{ Str::plural(
                    'User',
                    $role->users->count()
                ) }}

            </span>

        </div>

    </div>


    @if ($role->users->isNotEmpty())

        <div class="overflow-x-auto">

            <table class="w-full text-left">

                <thead class="border-b border-border bg-background/50">

                    <tr class="text-xs font-semibold uppercase tracking-wide text-muted">

                        <th class="px-5 py-3">
                            #
                        </th>

                        <th class="px-5 py-3">
                            User
                        </th>

                        <th class="px-5 py-3">
                            Email
                        </th>

                        <th class="px-5 py-3">
                            Assigned Role
                        </th>

                    </tr>

                </thead>


                <tbody class="divide-y divide-border">

                    @foreach ($role->users as $user)

                        <tr class="transition hover:bg-background/40">

                            {{-- Number --}}
                            <td class="whitespace-nowrap px-5 py-4 text-sm text-muted">
                                {{ $loop->iteration }}
                            </td>


                            {{-- User --}}
                            <td class="px-5 py-4">

                                <div class="flex items-center gap-3">

                                    <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-sky-50 text-sm font-semibold text-sky-600">

                                        {{ strtoupper(
                                            substr(
                                                $user->name,
                                                0,
                                                1
                                            )
                                        ) }}

                                    </div>


                                    <div>

                                        <p class="text-sm font-semibold text-text">
                                            {{ $user->name }}
                                        </p>

                                        <p class="mt-0.5 text-xs text-muted">
                                            User #{{ $user->id }}
                                        </p>

                                    </div>

                                </div>

                            </td>


                            {{-- Email --}}
                            <td class="px-5 py-4">

                                <span class="text-sm text-text">
                                    {{ $user->email }}
                                </span>

                            </td>


                            {{-- Role --}}
                            <td class="px-5 py-4">

                                <span class="inline-flex items-center rounded-full bg-sky-50 px-2.5 py-1 text-xs font-medium text-sky-700">
                                    {{ $role->name }}
                                </span>

                            </td>

                        </tr>

                    @endforeach

                </tbody>

            </table>

        </div>

    @else

        {{-- Empty Users --}}
        <div class="px-5 py-12 text-center">

            <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-background text-muted">

                <i class="fa-solid fa-users text-lg"></i>

            </div>

            <h3 class="mt-4 text-sm font-semibold text-text">
                No users assigned
            </h3>

            <p class="mx-auto mt-1 max-w-md text-xs leading-5 text-muted">
                No users are currently assigned to this role.
            </p>

        </div>

    @endif

</div>


{{-- Bottom Actions --}}
<div class="mt-5 flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-end">

    <a
        href="{{ route('roles.index') }}"
        class="btn btn-secondary"
    >
        <i class="fa-solid fa-arrow-left"></i>
        Back to Roles
    </a>


    @can('roles.edit')

        @if ($role->name !== 'Super Admin')

            <a
                href="{{ route('roles.edit', $role) }}"
                class="btn btn-primary"
            >
                <i class="fa-regular fa-pen-to-square"></i>
                Edit Role
            </a>

        @endif

    @endcan

</div>

@endsection