@extends('layouts.app')

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

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

@section('content')

View user account information, assigned role, and system access permissions.

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

    @can('users.edit')
        <a
            href="{{ route('users.edit', $user) }}"
            class="btn btn-primary"
        >
            <i class="fa-regular fa-pen-to-square"></i>
            Edit User
        </a>
    @endcan

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

</div>


@php

    $role = $user->roles->first();

    $roleClasses = match ($role?->name) {
        'Super Admin' =>
            'bg-purple-50 text-purple-700',

        'Admin' =>
            'bg-sky-50 text-sky-700',

        'Teacher' =>
            'bg-emerald-50 text-emerald-700',

        'Parent' =>
            'bg-amber-50 text-amber-700',

        'Student' =>
            'bg-indigo-50 text-indigo-700',

        default =>
            'bg-background text-muted',
    };


    /*
    |--------------------------------------------------------------------------
    | Effective Permissions
    |--------------------------------------------------------------------------
    |
    | getAllPermissions() includes permissions inherited through roles
    | as well as any direct permissions assigned to the user.
    |
    */

    $permissions = $user
        ->getAllPermissions()
        ->sortBy('name')
        ->values();


    /*
    |--------------------------------------------------------------------------
    | Group Permissions
    |--------------------------------------------------------------------------
    |
    | Example:
    |
    | students.view
    | students.create
    |
    | becomes:
    |
    | students
    |     view
    |     create
    |
    */

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

            return explode(
                '.',
                $permission->name,
                2
            )[0];

        }
    );

@endphp


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

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

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

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

                {{-- Avatar --}}
                <div class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-sky-50 text-xl font-semibold uppercase text-sky-700">

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

                </div>


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

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

                        <h2 class="truncate text-lg font-semibold text-text">
                            {{ $user->name }}
                        </h2>


                        @if (auth()->id() === $user->id)

                            <span class="inline-flex rounded-full bg-sky-50 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-sky-700">
                                You
                            </span>

                        @endif

                    </div>


                    <p class="mt-1 break-all text-sm text-muted">
                        {{ $user->email }}
                    </p>

                </div>

            </div>


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

                {{-- Role --}}
                @if ($role)

                    <span class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium {{ $roleClasses }}">

                        <i class="fa-solid fa-user-shield"></i>

                        {{ $role->name }}

                    </span>

                @else

                    <span class="inline-flex items-center rounded-full bg-background px-3 py-1.5 text-xs font-medium text-muted">
                        No Role
                    </span>

                @endif


                {{-- Status --}}
                @if ($user->is_active)

                    <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">

                        <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>

                        Active

                    </span>

                @else

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

                        <span class="h-1.5 w-1.5 rounded-full bg-red-500"></span>

                        Inactive

                    </span>

                @endif

            </div>

        </div>

    </div>


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

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

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

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

        </div>


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

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

            <p class="mt-2 break-all text-sm font-semibold text-text">
                {{ $user->email }}
            </p>

        </div>


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

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

            <div class="mt-2">

                @if ($role)

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

                @else

                    <span class="text-sm text-muted">
                        No role assigned
                    </span>

                @endif

            </div>

        </div>


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

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

            <div class="mt-2">

                @if ($user->is_active)

                    <span class="inline-flex items-center gap-1.5 text-sm font-semibold text-emerald-600">

                        <i class="fa-solid fa-circle-check"></i>

                        Active

                    </span>

                @else

                    <span class="inline-flex items-center gap-1.5 text-sm font-semibold text-red-600">

                        <i class="fa-solid fa-circle-xmark"></i>

                        Inactive

                    </span>

                @endif

            </div>

        </div>

    </div>


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

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

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

            <div class="mt-2">

                @if ($user->email_verified_at)

                    <span class="inline-flex items-center gap-1.5 text-sm font-medium text-emerald-600">

                        <i class="fa-solid fa-circle-check"></i>

                        Verified

                    </span>

                @else

                    <span class="inline-flex items-center gap-1.5 text-sm font-medium text-amber-600">

                        <i class="fa-regular fa-clock"></i>

                        Not Verified

                    </span>

                @endif

            </div>

        </div>


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

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

            <p class="mt-2 text-sm font-medium text-text">

                {{ $user->email_verified_at
                    ? $user->email_verified_at->format('d M Y, h:i A')
                    : '—'
                }}

            </p>

        </div>


        {{-- 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">

                {{ $user->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">

                {{ $user->updated_at?->format('d M Y, h:i A') ?? '—' }}

            </p>

        </div>

    </div>

</div>


{{-- Access Summary --}}
<div class="mt-5 grid grid-cols-1 gap-5 md:grid-cols-3">

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

        <div class="flex items-center justify-between">

            <div>

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

                <p class="mt-2 text-2xl font-semibold text-text">
                    {{ $user->roles->count() }}
                </p>

            </div>

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

        </div>

    </div>


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

        <div class="flex items-center justify-between">

            <div>

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

                <p class="mt-2 text-2xl font-semibold text-text">
                    {{ $permissions->count() }}
                </p>

            </div>

            <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600">
                <i class="fa-solid fa-key"></i>
            </div>

        </div>

    </div>


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

        <div class="flex items-center justify-between">

            <div>

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

                <p class="mt-2 text-sm font-semibold {{ $user->is_active ? 'text-emerald-600' : 'text-red-600' }}">

                    {{ $user->is_active
                        ? 'Active'
                        : 'Inactive'
                    }}

                </p>

            </div>

            <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-amber-50 text-amber-600">
                <i class="fa-solid fa-user-lock"></i>
            </div>

        </div>

    </div>

</div>


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

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

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

        <p class="mt-1 text-xs text-muted">
            The role assigned to this user controls their system access.
        </p>

    </div>


    @if ($role)

        <div class="p-5">

            <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"></i>

                    </div>


                    <div>

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

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

                    </div>

                </div>


                @can('roles.view')

                    <a
                        href="{{ route('roles.show', $role) }}"
                        class="btn btn-secondary"
                    >
                        <i class="fa-regular fa-eye"></i>
                        View Role
                    </a>

                @endcan

            </div>

        </div>

    @else

        <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-user-shield"></i>
            </div>

            <h3 class="mt-4 text-sm font-semibold text-text">
                No Role Assigned
            </h3>

            <p class="mt-1 text-xs text-muted">
                This user currently has no system role assigned.
            </p>

        </div>

    @endif

</div>


{{-- Effective 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">
                    Effective Permissions
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Permissions currently available to this user through their assigned 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">

                {{ $permissions->count() }}

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

            </span>

        </div>

    </div>


    @if ($groupedPermissions->isNotEmpty())

        <div class="grid grid-cols-1 gap-px bg-border md:grid-cols-2 xl:grid-cols-3">

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

                <div class="bg-card p-5">

                    {{-- Module --}}
                    <div class="mb-4 flex items-center justify-between">

                        <div>

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

                            <p class="mt-0.5 text-xs text-muted">
                                {{ $modulePermissions->count() }}
                                {{ Str::plural(
                                    'permission',
                                    $modulePermissions->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="space-y-2">

                        @foreach ($modulePermissions as $permission)

                            @php

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

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

                                $permissionClasses = match ($action) {
                                    'view' =>
                                        'bg-sky-50 text-sky-700',

                                    'create' =>
                                        'bg-emerald-50 text-emerald-700',

                                    'edit' =>
                                        'bg-amber-50 text-amber-700',

                                    'delete' =>
                                        'bg-red-50 text-red-700',

                                    default =>
                                        'bg-background text-muted',
                                };

                            @endphp


                            <div class="flex items-center justify-between gap-3 rounded-lg border border-border px-3 py-2">

                                <span class="min-w-0 truncate text-xs font-medium text-text">
                                    {{ $permission->name }}
                                </span>


                                <span class="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold {{ $permissionClasses }}">

                                    {{ Str::headline($action) }}

                                </span>

                            </div>

                        @endforeach

                    </div>

                </div>

            @endforeach

        </div>

    @else

        {{-- Empty Permissions --}}
        <div class="px-5 py-14 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"></i>

            </div>


            <h3 class="mt-4 text-sm font-semibold text-text">
                No Permissions Available
            </h3>


            <p class="mx-auto mt-1 max-w-md text-xs leading-5 text-muted">
                This user does not currently have any effective system permissions.
                Assign an appropriate role to provide system access.
            </p>

        </div>

    @endif

</div>


{{-- Security Information --}}
<div class="mt-5 rounded-xl border border-sky-200 bg-sky-50 p-4">

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

        <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-sky-100 text-sky-600">

            <i class="fa-solid fa-shield-halved"></i>

        </div>


        <div>

            <h3 class="text-sm font-semibold text-sky-800">
                Role-Based Access Control
            </h3>

            <p class="mt-1 text-xs leading-5 text-sky-700">
                This user's effective permissions are determined by the assigned
                role. Permission changes should normally be managed through Role
                Management so access remains consistent between users with the
                same responsibilities.
            </p>

        </div>

    </div>

</div>


{{-- Super Admin Warning --}}
@if ($user->hasRole('Super Admin'))

    <div class="mt-4 rounded-xl border border-amber-200 bg-amber-50 p-4">

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

            <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-amber-100 text-amber-600">

                <i class="fa-solid fa-crown"></i>

            </div>


            <div>

                <h3 class="text-sm font-semibold text-amber-800">
                    Super Admin Account
                </h3>

                <p class="mt-1 text-xs leading-5 text-amber-700">
                    This account has the highest administrative role. Changes
                    to its role, status, or account access should be made carefully.
                </p>

            </div>

        </div>

    </div>

@endif


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

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


    @can('users.edit')

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

    @endcan

</div>

@endsection