{{-- role/update_modal/permission_table_component --}}

<div class="row" style="margin-top: 1.5rem;">
    <div class="col-12">
        <table id="update-form-permission-table" class="table zero-configuration">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Guard Name</th>
                    <th>Assign</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@push('script-after-global')
    <script>
        setItems('updateFormPermissions', []);

        let updateFormPermissionTable = $('#update-form-permission-table').DataTable({
            data: getItems('updateFormPermissions', []),
            columnDefs: [
                { // name
                    data: 'name',
                    targets: 0,
                },
                { // guard_name
                    data: 'guard_name',
                    targets: 1,
                },
                { // actions
				    className: 'text-center',
			    	data: function(row, type, val, meta) {
                        const inputAttr = row.assign ? 'checked ' : '';

                        return `
                            <fieldset>
                                <div class="checkbox">
                                    <input type="checkbox" class="checkbox-input" id="update-form-permission-checkbox-${row.guard_name.replace(/ /g, '_')}-${row.name.replace(/ /g, '_')}" onchange="updateFormUpdatePermission('${row.name}', '${row.guard_name}')" ${inputAttr}/>
                                    <label for="update-form-permission-checkbox-${row.guard_name.replace(/ /g, '_')}-${row.name.replace(/ /g, '_')}"></label>
                                </div>
                            </fieldset>
                        `;
                    },
                    orderable: false,
                    searchable: false,
                    targets: 2,
                    width: '10%',
                },
            ],
            dom: `
                <"datatable-header"<"title-label">f><"datatable-scroll"t><"datatable-footer"p>
            `,
		    initComplete: function() {
                const wrapper = '#update-form-permission-table_wrapper';

                dtInitComplete('#update-form-permission-table');

                // title label
                $(`${wrapper} .title-label`).replaceWith(`
                    <div class="dt-label title-label">
                        Permission
                    </div>
                `);
            },
            drawCallback: function () {
                const wrapper = '#update-form-permission-table_wrapper';
                $(`${wrapper} [data-toggle="tooltip"]`).tooltip();
            },
            order: [
                [0, 'desc'],
            ],
            pageLength: 5,
            lengthMenu: [5, 10, 25, 50],
        });

        const updateFormReloadPermissionTable = () => {
            updateFormPermissionTable.clear().draw();
            updateFormPermissionTable.rows.add(getItems('updateFormPermissions', []))
            updateFormPermissionTable.columns.adjust().draw();
        };

        const updateFormResetPermissionTable = (guard_name = null) => {
            setItems('updateFormPermissions', []);
            updateFormReloadPermissionTable();

            axios({
                method: 'post',
                url: '{{ url('api/admin/role/fetch-permissions') }}',
                data: { guard_name },
                headers: {
                    Authorization: `Bearer ${getItems('token')}`,
                    Accept: 'application/json',
                },
            }).then((res) => {
                const permissions = res.data.permissions.map((permission) => {
                    permission.assign = false;

                    if (updateFormPermissions && permission.guard_name === guard_name && updateFormPermissions.includes(permission.name)) {
                        permission.assign = true;
                    }

                    return permission;
                });
                updateFormPermissions = null;

                setItems('updateFormPermissions', permissions);
                updateFormReloadPermissionTable();
            }).catch((err) => {
                handleErrorResponse(err.response);
            });
        };
        updateFormResetPermissionTable();

        const updateFormUpdatePermission = (name, guard_name) => {
            const assign = $(`#update-form-permission-checkbox-${guard_name.replace(/ /g, '_')}-${name.replace(/ /g, '_')}`).is(':checked');
            const items = getItems('updateFormPermissions', []).map((item) => {
                if (item.name === name) item.assign = assign;
                return item;
            });

            setItems('updateFormPermissions', items);
        };
    </script>
@endpush