Customize #can() to show a permissions overlay for pages/sections - laravel-5

Question

At work I maintain a fairly complex Laravel application which is still growing as new features are implemented and improved upon.
We have non-technical administrators in this system who manage other users permissions and sometimes it can be hard to know what permission ends up blocking a user from accessing a certain page or what might give a user too much access. Better descriptions for permissions and the ability to simulate a user to see what they have access to is already something we have done.
In addition to this we would like to toggle overlays for permissions defined in blade templates, we might defines this permissions with
#can('update', $post)
<!-- Menu button to update a $post -->
#endcan
or
#can('manage_user_roles_and_permissions')
<!-- A table with many different functions
for managing user roles + permissions -->
#endcan
Is there a way I can modify the way the #can() works in blade templates so that I can add some javascript to show a popover for where a section starts and ends, like "The permission 'Show Post' is needed for this menu button to show" or "To see the following section a user needs the 'Manage user roles and permissions' permissions". Or even better if I could add a div with a red border around the section.
How can I append additional javascript/html where #can() is used in a blade template to show an overlay.

Answer 1

To solve this issue I need to extend blade, see Extending Blade in the Laravel documentation.
The following is a quick test that I did just to see if this was possible. $value in this case is a string which contains the content of a blade file before being processed. So I can use preg_match_all() to find the #can statements and then append my javascript where needed. I can find the #endcan in the same way but it is harder to know which #endcan belongs to which #can but it should be fairly easy to match from this point on.
<?php
namespace App\Providers;
use Blade;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
{
public function boot()
{
Blade::extend(function($value)
{
$can_array = array();
preg_match_all('/(\s*)#(can)\(([^\)]*)\)(\s*)/', $value, $matches);
if (count($matches) > 0 && isset($matches[3])) {
foreach ($matches[3] as $match) {
if (!in_array($match, $can_array)) {
$can_array[] = $match;
}
}
}
foreach ($can_array as $ca) {
$value = str_replace("#can(" . $ca . ")", "#can(" . $ca . ") \r\n <!-- My javascript code goes here! -->", $value);
}
// TODO need to figure out a better way to handle this
$value = str_replace("#endcan", "#endcan \r\n <!-- Section ended here -->", $value);
return $value;
});
}
...
My source code now looks like this when viewing it, goal achieved!