@extends('layouts.app')
@section('title', 'Role Management')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="page-title"><i class="bi bi-shield-lock me-2"></i>Role Management</h1>
        <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i> Users
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success fade-in"><i class="bi bi-check-circle me-1"></i> {{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger fade-in"><i class="bi bi-exclamation-triangle me-1"></i> {{ session('error') }}</div>
    @endif

    <div class="row g-4">
        @foreach($roles as $role)
            <div class="col-md-6 col-lg-4">
                <div class="card h-100 {{ strtolower($role->name) === 'admin' ? 'border-primary' : '' }}">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">
                            @if(strtolower($role->name) === 'admin')
                                <i class="bi bi-star-fill text-warning me-1"></i>
                            @endif
                            {{ $role->display_name }}
                        </h6>
                        <span class="badge bg-secondary">{{ $role->name }}</span>
                    </div>
                    <div class="card-body">
                        <p class="text-muted small mb-3">{{ $role->description ?? '—' }}</p>

                        <div class="row text-center g-2 mb-3">
                            <div class="col-6">
                                <div class="text-muted small">Permissions</div>
                                <div class="fs-5 fw-bold">{{ $role->permissions_count }}</div>
                            </div>
                            <div class="col-6">
                                <div class="text-muted small">Users</div>
                                <div class="fs-5 fw-bold">{{ $role->users_count }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        @if(strtolower($role->name) === 'admin')
                            <span class="text-muted small"><i class="bi bi-lock"></i> Full access — cannot be modified</span>
                        @else
                            <a href="{{ route('admin.roles.edit', $role) }}" class="btn btn-sm btn-outline-primary w-100">
                                <i class="bi bi-pencil me-1"></i> Edit Permissions
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@endsection