@extends('layouts.admin', ['heading' => 'Roles & Permissions', 'subheading' => 'Access control matrix'])

@section('content')
    <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
        <div class="admin-card p-5">
            <div class="mb-4 text-sm font-semibold text-slate-700">Create Role</div>
            <form method="POST" action="{{ route('admin.security.roles.store') }}" class="space-y-3">
                @csrf
                <input name="code" placeholder="role_code" class="w-full rounded border p-2" required>
                <input name="name" placeholder="Role Name" class="w-full rounded border p-2" required>
                <button class="w-full rounded bg-slate-900 px-4 py-2 text-sm text-white">Create Role</button>
            </form>
        </div>

        <div class="admin-card p-5 xl:col-span-2">
            <div class="mb-4 text-sm font-semibold text-slate-700">Role Permissions</div>
            <div class="space-y-6">
                @foreach($roles as $role)
                    <div class="rounded-xl border border-slate-200 p-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <div class="font-semibold">{{ $role->name }}</div>
                                <div class="text-xs text-slate-500">{{ $role->code }}</div>
                            </div>
                        </div>
                        <form method="POST" action="{{ route('admin.security.roles.permissions', $role) }}" class="mt-3">
                            @csrf
                            <div class="grid grid-cols-1 gap-2 md:grid-cols-2">
                                @foreach($permissions as $permission)
                                    <label class="flex items-center gap-2 text-xs text-slate-700">
                                        <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" {{ $role->permissions->contains($permission->id) ? 'checked' : '' }}>
                                        {{ $permission->module }}: {{ $permission->name }}
                                    </label>
                                @endforeach
                            </div>
                            <button class="mt-3 rounded bg-emerald-600 px-3 py-2 text-xs text-white">Update Permissions</button>
                        </form>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection