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

<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <h4 class="fw-bold mb-0">Roles &amp; Permissions</h4>
        <p class="text-muted small mb-0">{{ $total }} permissions available across the system.</p>
    </div>
    @can('roles.create')
    <a href="{{ route('admin.roles.create') }}" class="btn btn-primary">
        <i class="bi bi-plus-lg me-1"></i>New Role
    </a>
    @endcan
</div>

<div class="card border-0 shadow-sm">
    <div class="card-body p-0 table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th>Role</th>
                    <th>Permissions</th>
                    <th>Users</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($roles as $role)
                @php $isProtected = in_array($role->name, $protected, true); @endphp
                <tr>
                    <td>
                        <div class="fw-semibold">{{ ucwords(str_replace('_', ' ', $role->name)) }}</div>
                        <code class="small text-muted">{{ $role->name }}</code>
                        @if($isProtected)
                        <span class="badge bg-secondary-subtle text-secondary ms-1" title="Referenced by application logic">built-in</span>
                        @endif
                    </td>
                    <td>
                        @if($role->name === 'superadmin')
                        <span class="badge bg-danger">all {{ $total }}</span>
                        @else
                        <span class="badge bg-info-subtle text-info-emphasis">{{ $role->permissions_count }}</span>
                        @endif
                    </td>
                    <td><span class="badge bg-secondary">{{ $role->users_count }}</span></td>
                    <td class="text-end text-nowrap">
                        <a href="{{ route('admin.roles.show', $role) }}" class="btn btn-sm btn-outline-info"><i class="bi bi-eye"></i></a>
                        @can('roles.edit')
                        <a href="{{ route('admin.roles.edit', $role) }}" class="btn btn-sm btn-outline-primary"><i class="bi bi-pencil"></i></a>
                        @endcan
                        @can('roles.delete')
                        @unless($isProtected)
                        <form method="POST" action="{{ route('admin.roles.destroy', $role) }}" class="d-inline"
                              onsubmit="return confirm('Delete the role {{ $role->name }}?')">
                            @csrf @method('DELETE')
                            <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                        </form>
                        @endunless
                        @endcan
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div class="alert alert-light border mt-3 small text-muted">
    <i class="bi bi-info-circle me-1"></i>
    Built-in roles cannot be renamed or deleted because route middleware and application logic
    refer to them by name — but you can still change what they are allowed to do.
    <strong>Superadmin</strong> always holds every permission, including ones added later.
</div>
@endsection