@extends('layouts.app')

@section('title', 'Roles & Permissions')
@section('kicker', 'Assign module access per role')

@section('content')
    <div class="module-tabs">
        <a href="{{ route('users.index') }}"><i data-lucide="users"></i><span>Users</span></a>
        <a href="{{ route('users.permissions') }}" class="active"><i data-lucide="shield-check"></i><span>Roles & Permissions</span></a>
        <a href="{{ route('settings.user-positions') }}"><i data-lucide="briefcase-business"></i><span>User Positions</span></a>
        <a href="{{ route('reports.user-activity') }}"><i data-lucide="activity"></i><span>Activity</span></a>
    </div>

    <div class="row g-4">
        @foreach ($roles as $role)
            <div class="col-xl-6">
                <div class="content-card h-100">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <div class="section-title">{{ $role->name }}</div>
                            <div class="text-muted small">{{ $role->description }}</div>
                        </div>
                        <span class="badge badge-soft">{{ $role->permissions->count() }} permissions</span>
                    </div>
                    <form method="POST" action="{{ route('users.permissions.sync', $role) }}">
                        @csrf
                        <div class="row g-2">
                            @foreach ($permissions as $permission)
                                <div class="col-md-6">
                                    <label class="form-check">
                                        <input class="form-check-input" type="checkbox" name="permissions[]" value="{{ $permission->id }}" @checked($role->permissions->contains($permission))>
                                        <span class="form-check-label">{{ $permission->label }}</span>
                                    </label>
                                </div>
                            @endforeach
                        </div>
                        <button class="btn btn-primary mt-3"><i data-lucide="save"></i><span>Save Role</span></button>
                    </form>
                </div>
            </div>
        @endforeach
    </div>
@endsection
