@extends('layouts.default')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card role-matrix-card">
                <div class="role-matrix-header">
                    <h4>Role Permission Matrix</h4>

                    <div class="role-matrix-selector">
                        <label for="compareRole">Select role to compare:</label>
                        <select id="compareRole" class="role-compare-native">
    <option selected>Security Guard</option>
    <option>Site Supervisor</option>
    <option>Site Manager</option>
    <option>Operations Manager</option>
    <option>Regional Manager</option>
    <option>HQ User</option>
    <option>JMB</option>
    <option>MC</option>
    <option>Property Manager</option>
    <option>SPV Administrator</option>
    <option>Sales Team</option>
    <option>Finance Team</option>
</select>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table role-matrix-table mb-0">
                        <thead>
                            <tr>
                                <th>MODULE</th>
                                <th>VIEW</th>
                                <th>CREATE</th>
                                <th>EDIT</th>
                                <th>APPROVE</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Dashboard</td>
                                <td><input class="permission-checkbox" type="checkbox" checked aria-label="Dashboard: View"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Dashboard: Create"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Dashboard: Edit"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Dashboard: Approve"></td>
                            </tr>
                            <tr>
                                <td>Guards</td>
                                <td><input class="permission-checkbox" type="checkbox" checked aria-label="Guards: View"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Guards: Create"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Guards: Edit"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Guards: Approve"></td>
                            </tr>
                            <tr>
                                <td>Attendance</td>
                                <td><input class="permission-checkbox" type="checkbox" checked aria-label="Attendance: View"></td>
                                <td><input class="permission-checkbox" type="checkbox" checked aria-label="Attendance: Create"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Attendance: Edit"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Attendance: Approve"></td>
                            </tr>
                            <tr>
                                <td>Patrol</td>
                                <td><input class="permission-checkbox" type="checkbox" checked aria-label="Patrol: View"></td>
                                <td><input class="permission-checkbox" type="checkbox" checked aria-label="Patrol: Create"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Patrol: Edit"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Patrol: Approve"></td>
                            </tr>
                            <tr>
                                <td>Incidents</td>
                                <td><input class="permission-checkbox" type="checkbox" checked aria-label="Incidents: View"></td>
                                <td><input class="permission-checkbox" type="checkbox" checked aria-label="Incidents: Create"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Incidents: Edit"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Incidents: Approve"></td>
                            </tr>
                            <tr>
                                <td>SOS</td>
                                <td><input class="permission-checkbox" type="checkbox" checked aria-label="SOS: View"></td>
                                <td><input class="permission-checkbox" type="checkbox" checked aria-label="SOS: Create"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="SOS: Edit"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="SOS: Approve"></td>
                            </tr>
                            <tr>
                                <td>Visitors</td>
                                <td><input class="permission-checkbox" type="checkbox" checked aria-label="Visitors: View"></td>
                                <td><input class="permission-checkbox" type="checkbox" checked aria-label="Visitors: Create"></td>
                                <td><input class="permission-checkbox" type="checkbox" checked aria-label="Visitors: Edit"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Visitors: Approve"></td>
                            </tr>
                            <tr>
                                <td>Complaints</td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Complaints: View"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Complaints: Create"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Complaints: Edit"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Complaints: Approve"></td>
                            </tr>
                            <tr>
                                <td>Reports</td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Reports: View"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Reports: Create"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Reports: Edit"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Reports: Approve"></td>
                            </tr>
                            <tr>
                                <td>Customers</td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Customers: View"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Customers: Create"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Customers: Edit"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Customers: Approve"></td>
                            </tr>
                            <tr>
                                <td>Billing</td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Billing: View"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Billing: Create"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Billing: Edit"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Billing: Approve"></td>
                            </tr>
                            <tr>
                                <td>Users</td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Users: View"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Users: Create"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Users: Edit"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Users: Approve"></td>
                            </tr>
                            <tr>
                                <td>Roles</td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Roles: View"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Roles: Create"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Roles: Edit"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Roles: Approve"></td>
                            </tr>
                            <tr>
                                <td>Audit</td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Audit: View"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Audit: Create"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Audit: Edit"></td>
                                <td><input class="permission-checkbox" type="checkbox" aria-label="Audit: Approve"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="role-matrix-legend">
                    <span><i class="legend-dot dot-view"></i> V = View</span>
                    <span><i class="legend-dot dot-create"></i> C = Create</span>
                    <span><i class="legend-dot dot-edit"></i> E = Edit</span>
                    <span><i class="legend-dot dot-approve"></i> A = Approve</span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(window).on('load', function () {
    const $roleSelect = $('#compareRole');
    const $checkboxes = $('.permission-checkbox');

    const modules = [
        'Dashboard', 'Guards', 'Attendance', 'Patrol', 'Incidents',
        'SOS', 'Visitors', 'Complaints', 'Reports', 'Customers',
        'Billing', 'Users', 'Roles', 'Audit'
    ];

    const actions = {
        V: 'View',
        C: 'Create',
        E: 'Edit',
        A: 'Approve'
    };

    // Each string is the permissions for the matching module above.
    const permissionCodes = {
        'Security Guard': [
            'V', 'V', 'VC', 'VC', 'VC', 'VC', 'VCE',
            '', '', '', '', '', '', ''
        ],
        'Site Supervisor': [
            'V', 'VE', 'VA', 'VA', 'VEA', 'VA', 'VEA',
            'V', 'V', '', '', '', '', 'V'
        ],
        'Operations Manager': [
            'V', 'VEA', 'VEA', 'VCE', 'VCEA', 'VA', 'VE',
            'VA', 'VE', 'V', 'V', 'VCE', 'V', 'VE'
        ],
        'SPV Administrator': [
            'V', 'VCEA', 'VCEA', 'VCEA', 'VCEA', 'VA', 'VCEA',
            'VCEA', 'VE', 'VCEA', 'VCEA', 'VCEA', 'VCEA', 'VE'
        ]
    };

    // Start all dropdown roles with no permissions.
    const permissionsByRole = {};

    $roleSelect.find('option').each(function () {
        permissionsByRole[$(this).val()] = new Set();
    });

    // Apply the four permission sets from the screenshots.
    Object.keys(permissionCodes).forEach(function (role) {
        const codesByModule = permissionCodes[role];
        const rolePermissions = new Set();

        modules.forEach(function (module, index) {
            codesByModule[index].split('').forEach(function (code) {
                rolePermissions.add(module + ': ' + actions[code]);
            });
        });

        permissionsByRole[role] = rolePermissions;
    });

    // Remove the theme's extra dropdown styling, if it was applied.
    if ($roleSelect.parent().hasClass('bootstrap-select')) {
        $roleSelect.selectpicker('destroy');
    }

    function showSelectedRole() {
        const role = $roleSelect.val();
        const allowedPermissions = permissionsByRole[role] || new Set();

        $checkboxes.each(function () {
            this.checked = allowedPermissions.has(this.getAttribute('aria-label'));
        });
    }

    // Keep checkbox edits for each role while switching roles on this page.
    $checkboxes.on('change', function () {
        const role = $roleSelect.val();
        const rolePermissions = permissionsByRole[role] || new Set();
        const permission = this.getAttribute('aria-label');

        if (this.checked) {
            rolePermissions.add(permission);
        } else {
            rolePermissions.delete(permission);
        }

        permissionsByRole[role] = rolePermissions;
    });

    $roleSelect.on('change', showSelectedRole);

    // Show Security Guard's permissions when the page opens.
    showSelectedRole();
});
</script>
@endpush