@extends('layouts.app')

@section('title', 'Permissions')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-shield-check"></i> Permissions</h2>
    <a href="{{ route('roles.index') }}" class="btn btn-secondary"><i class="bi bi-person-badge"></i> Manage Roles</a>
</div>

<form method="POST" action="{{ route('permissions.update') }}" id="permissionsForm">
    @csrf
    <div class="card">
        <div class="card-header report-header d-flex justify-content-between align-items-center">
            <span><i class="bi bi-grid-3x3-gap me-2"></i>Permission Matrix</span>
            <span class="small text-muted">Toggle permissions for each role below</span>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-bordered table-hover mb-0 align-middle">
                    <thead class="table-light">
                        <tr>
                            <th style="min-width:260px;">Permission</th>
                            @foreach($roles as $role)
                            <th class="text-center permission-col" data-role="{{ $role->id }}" style="min-width:120px;">
                                <div>{{ $role->name }}</div>
                                <div class="small text-muted fw-normal">{{ $role->users_count }} user{{ $role->users_count == 1 ? '' : 's' }}</div>
                                @if($role->slug !== 'admin')
                                <div class="small mt-1">
                                    <a href="#" class="text-primary" onclick="toggleColumn({{ $role->id }}, true); return false;">All</a>
                                    <span> / </span>
                                    <a href="#" class="text-secondary" onclick="toggleColumn({{ $role->id }}, false); return false;">None</a>
                                </div>
                                @else
                                <div class="small text-danger">Full access</div>
                                @endif
                            </th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($modules as $module => $perms)
                        <tr class="table-warning">
                            <td colspan="{{ count($roles) + 1 }}">
                                <strong class="small"><i class="bi bi-folder2-open me-1"></i>{{ \App\Support\Permissions::moduleName($module) }}</strong>
                            </td>
                        </tr>
                        @foreach($perms as $key => $label)
                        <tr>
                            <td>
                                <span class="small">{{ $label }}</span>
                                <div class="text-muted" style="font-size:11px;"><code>{{ $key }}</code></div>
                            </td>
                            @foreach($roles as $role)
                            <td class="text-center">
                                @if($role->slug === 'admin')
                                <i class="bi bi-check-circle-fill text-success"></i>
                                @else
                                <input type="checkbox" class="form-check-input perm-check" name="perms[{{ $role->id }}][]"
                                    value="{{ $key }}" {{ in_array($key, $role->permissionKeys()) ? 'checked' : '' }}
                                    data-role="{{ $role->id }}">
                                @endif
                            </td>
                            @endforeach
                        </tr>
                        @endforeach
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer">
            <button type="submit" class="btn btn-yellow"><i class="bi bi-check-lg"></i> Save Permissions</button>
        </div>
    </div>
</form>

@push('scripts')
<script>
function toggleColumn(roleId, checked) {
    document.querySelectorAll('.perm-check[data-role="' + roleId + '"]').forEach(cb => cb.checked = checked);
}
</script>
@endpush
@endsection