{{-- resources/views/roles/index.blade.php --}}
@extends('layouts.app')

@section('title', 'Role Management')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold">Role Management</h2>
            <small class="text-muted">Manage system roles and permissions</small>
        </div>
        @if(auth()->user()->isSuperAdmin())
        @can('roles.add')<a href="{{ route('roles.create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Create Role
        </a>@endcan
        @endif
    </div>

    {{-- Filters --}}
    <div class="card mb-4">
        <div class="card-body">
            <form method="GET" class="row g-3">
                <div class="col-md-5">
                    <input type="text" name="search" class="form-control" 
                           placeholder="Search by name, display name..." value="{{ request('search') }}">
                </div>
                <div class="col-md-3">
                    <select name="type" class="form-select">
                        <option value="">All Roles</option>
                        <option value="system" {{ request('type')=='system' ? 'selected' : '' }}>System Roles</option>
                        <option value="custom" {{ request('type')=='custom' ? 'selected' : '' }}>Custom Roles</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary w-100">
                        <i class="fas fa-search"></i> Filter
                    </button>
                </div>
                <div class="col-md-2">
                    <a href="{{ route('roles.index') }}" class="btn btn-secondary w-100">
                        <i class="fas fa-sync"></i> Reset
                    </a>
                </div>
            </form>
        </div>
    </div>

    {{-- Roles Table --}}
    <div class="card">
        <div class="card-body table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Role Name</th>
                        <th>Display Name</th>
                        <th>Description</th>
                        <th>Permissions</th>
                        <th>Users</th>
                        <th>Type</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($roles as $key => $role)
                    <tr>
                        <td>{{ $roles->firstItem() + $key }}</td>
                        <td><code>{{ $role->name }}</code></td>
                        <td><strong>{{ $role->display_name }}</strong></td>
                        <td>{{ Str::limit($role->description, 50) ?? '-' }}</td>
                        <td>
                            <span class="badge bg-info">{{ $role->permissions()->count() }}</span>
                        </td>
                        <td>
                            <span class="badge bg-primary">{{ $role->users_count }}</span>
                        </td>
                        <td>
                            @if($role->is_system)
                                <span class="badge bg-warning text-dark">System</span>
                            @else
                                <span class="badge bg-success">Custom</span>
                            @endif
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{{ route('roles.show', $role->id) }}" class="btn btn-info">
                                    <i class="fas fa-eye"></i>
                                </a>
                                @if(!$role->is_system && auth()->user()->isSuperAdmin())
                                    @can('roles.edit')<a href="{{ route('roles.edit', $role->id) }}" class="btn btn-warning">
                                        <i class="fas fa-edit"></i>
                                    </a>@endcan
                                    <a href="{{ route('roles.assign-permissions', $role->id) }}" class="btn btn-primary">
                                        <i class="fas fa-key"></i>
                                    </a>
                                    <form action="{{ route('roles.destroy', $role->id) }}" method="POST" class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger" 
                                                onclick="return confirm('Delete this role? This cannot be undone.')">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                @elseif($role->is_system)
                                    <span class="text-muted ms-2">System Role</span>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="text-center text-muted">No roles found</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>

            {{-- Bootstrap-styled pagination (prevents the oversized default SVG arrows) --}}
            <div class="d-flex justify-content-center mt-3">
                {{ $roles->onEachSide(1)->links('pagination::bootstrap-4') }}
            </div>
        </div>
    </div>
</div>
@endsection