
<div class="main-panel">
	<div class="content-wrapper">
			
			<div class="col-lg-12 grid-margin stretch-card">
			<form name="access_form" id="access_form" method="post" action="<?php echo base_url();?>dashboard/saveAccess">
                <section class="content pt-3">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card card-outline card-primary">
                               
                                    <div class="d-flex align-items-center">
                                        <div class="mr-3">
                                            <a href="index.html"></a>
                                        </div>
                                        <div>
                                            <h3 class="card-title">Change Password</h3>
                                        </div>
                                    </div>
                             
                                <div class="card-body">
                                    <div class="row">
                                        
                                        <div class="col-md-8">
                                            <div class="form-group row">
                                                <label class="col-md-6">New Password :</label>
                                                <div class="col-md-6 d-flex align-items-center">
                                                    <input type="text" class="form-control" name="new-password"
                                                        placeholder="New Password">
                                                    <a href="#" class="text-primary ml-2" data-toggle="tooltip"
                                                        data-placement="right"
                                                        title="Password should consists of upper and lower case letter, integer, special character(@/$_#) and 8-15 characters">	</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="form-group row">
                                                <label class="col-md-6">Conform Password :</label>
                                                <div class="col-md-6 d-flex align-items-cente">
                                                    <input type="text" class="form-control" name="confirm-password"
                                                        placeholder="Confirm Password">
                                                    <a href="#" class="text-white ml-2"><i
                                                            class="fas fa-info-circle"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <button class="btn btn-primary">Change Password</button>
                                            <button class="btn btn-danger">Reset</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- /.container-fluid -->
					</section>
				</form>
              </div>
             
		</div>
		
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function escapeSelector(s) {
    return s.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, "\\$1");
}

$('#role_id').on('change', function () {
    var roleId = $(this).val();

    if (roleId) {
        $.ajax({
            url: "<?php echo base_url('dashboard/getRoleAccess'); ?>",
            type: "POST",
            data: { role_id: roleId },
            dataType: "json",
            success: function (response) {
                // Clear all checkboxes
                $("input[type=checkbox]").prop("checked", false);

                // Check view permissions
                if (response.view) {
                    response.view.forEach(function (val) {
                        let safeVal = escapeSelector(val);
                        $("input[name='view[]'][value='" + safeVal + "']").prop("checked", true);
                    });
                }

                // Check edit permissions
                if (response.edit) {
                    response.edit.forEach(function (val) {
                        let safeVal = escapeSelector(val);
                        $("input[name='edit[]'][value='" + safeVal + "']").prop("checked", true);
                    });
                }
            }
        });
    } else {
        $("input[type=checkbox]").prop("checked", false);
    }
});
$(document).on('change', '.access-checkbox', function () {
    var roleId = $('#role_id').val();
    if (!roleId) return alert("Please select a role first");

    var module = $(this).data('module');
    var accessType = $(this).data('type'); // 'view' or 'edit'
    var checked = $(this).is(':checked') ? 1 : 0;

    $.ajax({
        url: "<?php echo base_url('dashboard/updateSingleAccess'); ?>",
        type: "POST",
        data: {
            role_id: roleId,
            module: module,
            access_type: accessType,
            value: checked
        },
        success: function (res) {
            console.log("Access updated");
        }
    });
});
</script>