@extends('layouts.admin')

@section('title', 'Roles & Permissions')

@section('page-title', 'Roles & Permissions')

@section('breadcrumbs')
    <a href="{{ route('admin.settings.index') }}" class="hover:text-primary">Settings</a>
    <span class="material-symbols-outlined text-xs">chevron_right</span>
    <span class="text-primary font-medium">Roles & Permissions</span>
@endsection

@section('content')
<div class="max-w-7xl mx-auto">
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="mb-6">
            <h2 class="text-xl font-bold text-gray-900">Roles & Permissions</h2>
            <p class="text-sm text-gray-500 mt-1">System roles and their assigned permissions. Roles are protected and cannot be modified.</p>
            @if($isSaaSActive ?? false)
                <div class="mt-3 inline-flex items-center gap-2 px-3 py-1.5 bg-blue-50 border border-blue-200 rounded-lg">
                    <span class="material-symbols-outlined text-blue-600 text-sm">info</span>
                    <span class="text-xs text-blue-700">SaaS Plugin is active</span>
                </div>
            @endif
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-xs font-semibold text-gray-600 uppercase">Role</th>
                        <th class="px-6 py-3 text-xs font-semibold text-gray-600 uppercase">Description</th>
                        <th class="px-6 py-3 text-xs font-semibold text-gray-600 uppercase">Permissions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($roles as $role)
                        <tr class="hover:bg-gray-50/50 transition-colors">
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-2">
                                    <div>
                                        <div class="font-medium text-gray-900">{{ $role['name'] }}</div>
                                        <div class="text-xs text-gray-500 mt-0.5">{{ $role['slug'] }}</div>
                                    </div>
                                    @if($role['is_protected'])
                                        <span class="material-symbols-outlined text-gray-400 text-sm" title="Protected System Role">lock</span>
                                    @endif
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <p class="text-sm text-gray-600 max-w-md">{{ $role['description'] }}</p>
                            </td>
                            <td class="px-6 py-4">
                                @if($role['permissions']->count() > 0)
                                    <div class="flex flex-wrap gap-2">
                                        @foreach($role['permissions'] as $permission)
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                {{ $permission->name }}
                                            </span>
                                        @endforeach
                                    </div>
                                    <p class="text-xs text-gray-500 mt-2">{{ $role['permission_count'] }} permission(s)</p>
                                @else
                                    <span class="text-sm text-gray-400 italic">No permissions assigned</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="3" class="px-6 py-8 text-center text-gray-500">
                                <div class="flex flex-col items-center gap-2">
                                    <span class="material-symbols-outlined text-4xl text-gray-300">shield</span>
                                    <p>No roles found. Please run the seeder to create system roles.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
            <div class="flex items-start gap-3">
                <span class="material-symbols-outlined text-gray-400 text-lg">info</span>
                <div class="flex-1">
                    <h3 class="text-sm font-semibold text-gray-900 mb-1">About System Roles</h3>
                    <p class="text-xs text-gray-600 leading-relaxed">
                        System roles are predefined and cannot be created, modified, or deleted. Permissions are automatically assigned based on the SaaS plugin status. 
                        When the SaaS plugin is active, Super Admin has full control including SaaS management. When inactive, Administration role has full system control.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection