@extends('layouts.app')

@section('page-title'){{ $role->name }}@endsection

@section('content')

@php($totalPermissions = collect($permissions)->flatten()->count())
@php($grantedCount = $role->permissions->count())

    
    <x-admin-hero-header :title="$role->name" subtitle="Review role details and assigned permissions">
        <x-slot:icon><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M12 3l7 3v5c0 4.6-2.9 8.7-7 10-4.1-1.3-7-5.4-7-10V6l7-3zm-3 9l2 2 4-4"/></svg></x-slot:icon>
        <x-slot:actions>
        <a href="{{ route('admin.roles.index') }}" class="btn border-white/15 bg-white/15 text-white backdrop-blur hover:bg-white/20 focus:ring-white/30"><svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>Back</a>
        @if($role->name !== 'Super Admin')
            @can('edit-roles')
                <a href="{{ route('admin.roles.edit', $role) }}" class="btn border-white/15 bg-white/15 text-white backdrop-blur hover:bg-white/20 focus:ring-white/30">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                    </svg>
                    Edit Role
                </a>
            @endcan
        @endif
        </x-slot:actions>
    </x-admin-hero-header>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

        
        <div class="lg:col-span-2 overflow-hidden rounded-2xl border border-surface-100 bg-white shadow-soft">
            <div class="flex items-center justify-between gap-3 border-b border-surface-100 bg-gradient-to-r from-surface-50/90 to-white px-6 py-4">
                <p class="section-label mb-0">Permissions</p>
                <div class="flex items-center gap-2">
                    <div class="hidden h-1.5 w-24 overflow-hidden rounded-full bg-surface-100 sm:block">
                        <div class="h-full rounded-full {{ $role->name === 'Super Admin' ? 'bg-emerald-500' : 'bg-primary-500' }}"
                             style="width: {{ $totalPermissions > 0 ? round(($grantedCount / $totalPermissions) * 100) : 0 }}%"></div>
                    </div>
                    <span class="whitespace-nowrap rounded-full bg-surface-100 px-2.5 py-1 text-xs font-bold tabular-nums text-surface-500">{{ $grantedCount }} / {{ $totalPermissions }}</span>
                </div>
            </div>

            <div class="grid grid-cols-1 gap-4 p-5">
                @foreach($permissions as $module => $perms)
                    @php($moduleGrantedCount = collect($perms)->filter(fn ($p) => $role->permissions->contains('name', $p->name))->count())
                    @php($managePermission = collect($perms)->first(fn ($p) => $p->name === "manage-{$module}"))
                    @php($actionPermissions = collect($perms)->reject(fn ($p) => $p->name === "manage-{$module}"))
                    @php($moduleOn = $managePermission && $role->permissions->contains('name', $managePermission->name))

                    <div class="overflow-hidden rounded-xl border border-surface-200">
                        <div class="flex items-center justify-between gap-3 border-b border-surface-100 bg-surface-50/60 px-4 py-3">
                            <div class="flex min-w-0 items-center gap-2.5">
                                <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary-50 text-primary-600">
                                    @include('admin.roles.partials.module-icon', ['module' => $module])
                                </div>
                                <span class="truncate text-sm font-bold text-surface-900">{{ ucfirst($module) }}</span>
                            </div>
                            <span class="shrink-0 rounded-full bg-white px-2 py-0.5 text-[11px] font-bold tabular-nums text-surface-500 ring-1 ring-surface-200">{{ $moduleGrantedCount }}/{{ count($perms) }}</span>
                        </div>

                        @if($managePermission)
                            <div class="flex items-center justify-between gap-3 border-b border-surface-100 px-4 py-2.5 {{ $moduleOn ? 'bg-emerald-50/60' : 'bg-surface-50/40' }}">
                                <span class="text-xs font-semibold {{ $moduleOn ? 'text-emerald-800' : 'text-surface-400' }}">
                                    {{ ucfirst($module) }} access for this role
                                </span>
                                <span class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-bold {{ $moduleOn ? 'bg-emerald-100 text-emerald-700' : 'bg-surface-100 text-surface-400' }}">
                                    <span class="h-1.5 w-1.5 rounded-full {{ $moduleOn ? 'bg-emerald-500' : 'bg-surface-300' }}"></span>
                                    {{ $moduleOn ? 'ON' : 'OFF' }}
                                </span>
                            </div>
                        @endif

                        @if($actionPermissions->isNotEmpty())
                            <div class="grid grid-cols-1 gap-2 p-3 sm:grid-cols-2">
                                @foreach($actionPermissions as $permission)
                                    @php($granted = $role->permissions->contains('name', $permission->name))
                                    @php($action = str($permission->name)->before('-')->title())
                                    <div class="flex items-center gap-2.5 rounded-lg border px-3 py-2 text-sm
                                                {{ $granted ? 'border-primary-200 bg-primary-50/60 text-primary-900' : 'border-surface-100 bg-surface-50/40 text-surface-400' }}">
                                        <span class="flex h-4 w-4 shrink-0 items-center justify-center rounded-md {{ $granted ? 'bg-primary-500' : 'bg-surface-200' }}">
                                            @if($granted)
                                                <svg class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                                            @else
                                                <svg class="h-3 w-3 text-surface-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                                            @endif
                                        </span>
                                        <span class="font-medium">{{ $action }}</span>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>

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

            
            <div class="card p-6">
                <div class="flex items-center justify-between mb-4">
                    <p class="section-label mb-0">Assigned Users</p>
                    <span class="text-xs font-semibold text-surface-500 bg-surface-100 px-2 py-0.5 rounded-full">
                        {{ $role->users->count() }}
                    </span>
                </div>
                @if($role->users->count())
                    <div class="space-y-3">
                        @foreach($role->users as $user)
                            <div class="flex items-center gap-3">
                                <x-avatar :user="$user" size="sm" class="ring-2 ring-surface-100 shrink-0" />
                                <div class="min-w-0">
                                    <p class="text-sm font-semibold text-surface-900 truncate">{{ $user->full_name }}</p>
                                    <p class="text-xs text-surface-400 truncate">
                                        {{ $user->email }}{{ $user->country ? ' - ' . $user->country->name : '' }}
                                    </p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-sm text-surface-400">No users assigned yet.</p>
                @endif
            </div>

            
            <div class="card p-6">
                <p class="section-label">Role Info</p>
                <div class="space-y-3">
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-surface-500">Created</span>
                        <span class="text-sm font-medium text-surface-800">{{ $role->created_at->format('M d, Y') }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-surface-500">Permissions</span>
                        <span class="text-sm font-semibold text-primary-600">{{ $role->permissions->count() }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-surface-500">Users</span>
                        <span class="text-sm font-semibold text-primary-600">{{ $role->users->count() }}</span>
                    </div>
                </div>
            </div>

        </div>

    </div>

@endsection