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

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item active">Roles &amp; Permissions</li>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Roles &amp; Permissions</h1>
        <p class="page-subtitle">Define what each role can access in the system</p>
    </div>
    @if(auth()->user()->hasPermission('users','create'))
    <a href="{{ route('admin.roles.create') }}" class="btn btn-primary">
        <i class="bi bi-plus-circle me-1"></i>Add Role
    </a>
    @endif
</div>

<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>Role Name</th>
                        <th>Description</th>
                        <th class="text-center">Users</th>
                        <th class="text-center">Permissions</th>
                        <th>Type</th>
                        <th style="width:100px">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($roles as $role)
                    <tr>
                        <td>
                            <div class="fw-semibold">{{ $role->display_name ?? $role->name }}</div>
                            <div class="text-muted" style="font-size:11.5px"><code>{{ $role->name }}</code></div>
                        </td>
                        <td class="text-muted" style="font-size:13px">{{ $role->description ?? '—' }}</td>
                        <td class="text-center">
                            <span class="badge bg-light text-dark">{{ $role->users_count }}</span>
                        </td>
                        <td class="text-center">
                            <span class="badge" style="background:#EBF3FB;color:#1B4F8A">
                                {{ $role->permissions->count() ?? 0 }}
                            </span>
                        </td>
                        <td>
                            @if($role->is_system)
                                <span class="badge" style="background:#f8d7da;color:#842029">System</span>
                            @else
                                <span class="badge bg-light text-dark">Custom</span>
                            @endif
                        </td>
                        <td>
                            <div class="d-flex gap-1">
                                @if(!$role->is_system && auth()->user()->hasPermission('users','edit'))
                                <a href="{{ route('admin.roles.edit', $role) }}"
                                   class="btn btn-outline-primary btn-sm" title="Edit">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                @if($role->users_count == 0)
                                <form method="POST" action="{{ route('admin.roles.destroy', $role) }}" id="del-role-{{ $role->id }}">
                                    @csrf @method('DELETE')
                                    <button type="button" class="btn btn-outline-danger btn-sm"
                                        data-confirm data-form="#del-role-{{ $role->id }}"
                                        data-confirm-title="Delete Role?"
                                        data-confirm-text="Delete role '{{ $role->name }}'? This cannot be undone."
                                        data-confirm-icon="warning"
                                        data-confirm-color="#E74C3C"
                                        data-confirm-btn="Delete"
                                        title="Delete">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                                @endif
                                @elseif($role->is_system)
                                    <span class="text-muted" style="font-size:12px">Protected</span>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center py-5">
                            <i class="bi bi-shield display-6 d-block text-muted mb-2"></i>
                            <span class="text-muted">No roles created yet.</span><br>
                            <a href="{{ route('admin.roles.create') }}" class="btn btn-primary btn-sm mt-3">Create First Role</a>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection