@extends('layouts.users.main')

@section('content')
    <div class="content-wrapper">
        <div class="container-xxl flex-grow-1 container-p-y">

            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-4">
                <div>
                    <h4 class="mb-1">{{ __('Roles and permissions') }}</h4>
                    <p class="text-muted mb-0">
                        {{ __('Roles are defined in code. Here you only change which permissions each one grants.') }}
                    </p>
                </div>
                <span class="badge bg-label-secondary">
                    <i class="ti tabler-shield-lock me-1"></i>{{ __('Superadmin only') }}
                </span>
            </div>

            {{-- The one thing that must be understood before touching anything here. --}}
            <div class="alert alert-warning d-flex align-items-start" role="alert">
                <i class="ti tabler-alert-triangle ti-md me-2 mt-1"></i>
                <div>
                    <h6 class="alert-heading mb-1">{{ __('Changing a role affects every user holding it') }}</h6>
                    <span>
                        {{ __('There is no per-user exception: a permission granted by a role reaches all of its users at once. Running the permission seeder restores the original setup.') }}
                    </span>
                </div>
            </div>

            <div class="card">
                <div class="card-datatable table-responsive">
                    <table class="table table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>{{ __('Role') }}</th>
                                <th class="text-center">{{ __('Rank') }}</th>
                                <th class="text-center">{{ __('Users') }}</th>
                                <th class="text-center">{{ __('Permissions') }}</th>
                                <th class="text-end">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($roles as $role)
                                @php
                                    $isSuperadmin = $role->name === 'superadmin';
                                    $rank = $hierarchy[$role->name] ?? null;
                                @endphp
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar avatar-sm me-3">
                                                <span class="avatar-initial rounded-circle {{ $isSuperadmin ? 'bg-label-danger' : 'bg-label-primary' }}">
                                                    <i class="ti tabler-shield-check"></i>
                                                </span>
                                            </div>
                                            <div>
                                                <span class="fw-medium text-capitalize">
                                                    {{ __(ucfirst(str_replace('_', ' ', $role->name))) }}
                                                </span>
                                                <small class="d-block text-muted">{{ $role->name }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        @if ($rank !== null)
                                            <span class="badge bg-label-secondary">{{ $rank }}</span>
                                        @else
                                            {{-- Not in config/roles.php: roleRank() would return 0 for its users. --}}
                                            <span class="badge bg-label-warning" title="{{ __('Not listed in the role hierarchy') }}">
                                                <i class="ti tabler-alert-triangle"></i>
                                            </span>
                                        @endif
                                    </td>
                                    <td class="text-center">{{ $role->users_count }}</td>
                                    <td class="text-center">{{ $role->permissions_count }}</td>
                                    <td class="text-end">
                                        {{-- Read-only: permissions come from PermissionSeeder, which the deploy
                                             re-runs. Every role is viewable, superadmin included. --}}
                                        <a href="{{ route('roles.permissions', $role) }}" class="btn btn-sm btn-outline-primary">
                                            <i class="ti tabler-eye me-1"></i>{{ __('View permissions') }}
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
@endsection