@extends('layouts.app')
@section('title', 'Roles & Permissions')

@section('breadcrumb')
<li class="breadcrumb-item active">Roles</li>
@endsection

@section('content')

<div class="page-header d-flex justify-content-between align-items-center">
    <div>
        <h1 class="page-title"><i class="bi bi-shield-lock me-2" style="color:#1d4ed8;"></i>Roles &amp; Permissions</h1>
        <p class="page-subtitle">Manage user roles and access control</p>
    </div>
    @can_permission('users.create')
    <a href="{{ route('roles.create') }}" class="btn btn-primary">
        <i class="bi bi-plus-circle me-1"></i> Add Role
    </a>
    @endcan_permission
</div>

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show"><i class="bi bi-check-circle me-1"></i>{{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
@endif
@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show"><i class="bi bi-x-circle me-1"></i>{{ session('error') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
@endif

<div class="card">
    <div class="card-body p-0">
        @if($roles->isEmpty())
        <div class="text-center py-5 text-muted">
            <i class="bi bi-shield-lock" style="font-size:3rem;"></i>
            <p class="mt-2">No roles found.</p>
        </div>
        @else
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Role Name</th>
                        <th>Internal Key</th>
                        <th class="text-center">Permissions</th>
                        <th class="text-center">Users</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($roles as $role)
                    <tr>
                        <td class="fw-semibold">{{ $role->display_name }}</td>
                        <td>
                            <code style="font-size:.78rem;background:#f1f5f9;padding:2px 6px;border-radius:4px;">{{ $role->name }}</code>
                        </td>
                        <td class="text-center">
                            @if(in_array('*', $role->permissions ?? []))
                            <span class="badge bg-success">All Permissions</span>
                            @else
                            <span class="badge bg-secondary">{{ count($role->permissions ?? []) }} permission(s)</span>
                            @endif
                        </td>
                        <td class="text-center">{{ $role->users_count }}</td>
                        <td class="text-end">
                            @can_permission('users.edit')
                            <a href="{{ route('roles.edit', $role) }}" class="btn btn-sm btn-outline-warning" title="Edit">
                                <i class="bi bi-pencil"></i>
                            </a>
                            @endcan_permission
                            @can_permission('users.delete')
                            <form method="POST" action="{{ route('roles.destroy', $role) }}" class="d-inline"
                                  onsubmit="return confirm('Delete role {{ $role->display_name }}?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger" title="Delete" {{ $role->users_count > 0 ? 'disabled' : '' }}>
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                            @endcan_permission
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif
    </div>
</div>

@endsection