@extends('layouts.admin')

@section('title', 'Roles')

@section('content')
<div class="admin-page-header">
    <h1>Roles</h1>
    @can('roles.create')
    <a href="{{ route('admin.roles.create') }}" class="admin-btn-primary">
        <i class="bi bi-shield-plus"></i> New Role
    </a>
    @endcan
</div>

<div class="admin-card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="admin-table table table-hover align-middle">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Users Assigned</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($roles as $role)
                        <tr>
                            <td>
                                <strong>{{ ucfirst($role->name) }}</strong>
                            </td>
                            <td>
                                <span class="badge-modern badge-modern-primary">{{ $role->users_count }}</span>
                            </td>
                            <td>
                                <div class="d-flex gap-2">
                                    @can('roles.update')
                                    <a href="{{ route('admin.roles.edit', $role) }}" class="admin-action-btn admin-action-btn-sm admin-btn-primary" title="View & Edit Role">
                                        <i class="bi bi-pencil-square"></i>
                                    </a>
                                    @endcan
                                    @can('roles.delete')
                                    <form action="{{ route('admin.roles.destroy', $role) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this role? This action cannot be undone.');" class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <button class="admin-action-btn admin-action-btn-sm" 
                                                style="background: #ef4444; height: -webkit-fill-available; color: white; @if($role->users_count > 0) opacity: 0.5; cursor: not-allowed; @endif" 
                                                type="submit" 
                                                @if($role->users_count > 0) disabled title="Cannot delete role assigned to users" @else title="Delete Role" @endif>
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="3" class="text-center py-5">
                                <div class="admin-empty-state">
                                    <i class="bi bi-shield-lock"></i>
                                    <h3>No Roles Found</h3>
                                    <p>Get started by creating your first role.</p>
                                    @if(auth()->user()->hasRole('admin') || auth()->user()->can('roles.create'))
                                    <a href="{{ route('admin.roles.create') }}" class="admin-btn-primary">
                                        <i class="bi bi-shield-plus"></i> New Role
                                    </a>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination - Right Aligned -->
        @if($roles->hasPages())
        <div class="pagination-wrapper mt-4">
            <div class="d-flex justify-content-end align-items-center gap-3 flex-wrap">
                <div class="pagination-info-text">
                    Showing <strong>{{ $roles->firstItem() ?? 0 }}</strong>–<strong>{{ $roles->lastItem() ?? 0 }}</strong> 
                    of <strong>{{ $roles->total() }}</strong> roles
                </div>
                <div class="pagination-controls">
                    {{ $roles->links('vendor.pagination.admin-categories') }}
                </div>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection