@extends('layouts.admin')
@section('title', 'Roles & Permissions')
@section('page-title', 'Roles & Permissions')
@section('page-subtitle', 'Manage system roles and access control')

@section('content')
<div class="mb-6 flex items-center justify-between">
    <div>
        <h2 class="font-cinzel text-xl font-bold text-[var(--text-primary)]">All Roles</h2>
        <p class="text-sm text-[var(--text-secondary)]">Manage user roles and their permissions</p>
    </div>
    <a href="{{ route('admin.roles.create') }}" class="btn-royal px-4 py-2 rounded-lg text-white flex items-center gap-2">
        <i class="fas fa-plus"></i> Add Role
    </a>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    @forelse($roles as $role)
    <div class="card-royal p-6 hover:shadow-lg transition-shadow">
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 rounded-lg {{ $role->name === 'super-admin' ? 'bg-red-500/20 text-red-400' : ($role->name === 'admin' ? 'bg-gold-500/20 text-gold-500' : 'bg-royal-500/20 text-royal-400') }} flex items-center justify-center">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <div>
                    <h3 class="font-semibold text-[var(--text-primary)]">{{ ucfirst(str_replace('-', ' ', $role->name)) }}</h3>
                    <p class="text-xs text-[var(--text-secondary)]">Guard: {{ $role->guard_name }}</p>
                </div>
            </div>
        </div>

        <div class="mb-4">
            <p class="text-xs text-[var(--text-secondary)] mb-2">Permissions ({{ $role->permissions->count() }})</p>
            <div class="flex flex-wrap gap-1">
                @forelse($role->permissions->take(4) as $permission)
                    <span class="px-2 py-0.5 text-xs rounded bg-[var(--bg-primary)] text-[var(--text-secondary)]">
                        {{ str_replace('manage-church-', '', $permission->name) }}
                    </span>
                @empty
                    <span class="text-xs text-[var(--text-secondary)]">No permissions</span>
                @endforelse
                @if($role->permissions->count() > 4)
                    <span class="px-2 py-0.5 text-xs rounded bg-[var(--bg-primary)] text-[var(--text-secondary)]">
                        +{{ $role->permissions->count() - 4 }} more
                    </span>
                @endif
            </div>
        </div>

        <div class="flex items-center justify-between pt-4 border-t border-[var(--border-color)]">
            <span class="text-xs text-[var(--text-secondary)]">
                {{ $role->users_count }} users
            </span>
            <div class="flex items-center gap-2">
                <a href="{{ route('admin.roles.show', $role) }}" class="p-2 rounded-lg hover:bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:text-gold-500">
                    <i class="fas fa-eye"></i>
                </a>
                <a href="{{ route('admin.roles.edit', $role) }}" class="p-2 rounded-lg hover:bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:text-gold-500">
                    <i class="fas fa-edit"></i>
                </a>
                @if(!in_array($role->name, ['super-admin', 'admin', 'branch-admin']))
                    <form action="{{ route('admin.roles.destroy', $role) }}" method="POST" class="inline" onsubmit="return confirm('Delete this role?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="p-2 rounded-lg hover:bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:text-red-500">
                            <i class="fas fa-trash"></i>
                        </button>
                    </form>
                @endif
            </div>
        </div>
    </div>
    @empty
    <div class="col-span-full card-royal p-12 text-center">
        <i class="fas fa-shield-alt text-4xl text-[var(--text-secondary)] mb-3 opacity-50"></i>
        <p class="text-[var(--text-secondary)]">No roles found.</p>
    </div>
    @endforelse
</div>
@endsection