<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.jsgrid-table th, .table td, .jsgrid .jsgrid-table td {
  vertical-align: middle;
  font-size: 0.875rem;
  line-height: 1.9;
  white-space: nowrap;
}

</style>
<style>
    /* Optional: Stylish toggle switch */
    .switch {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 28px;
      margin-left: 10px;
    }
    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: #ccc;
      transition: 0.4s;
      border-radius: 34px;
    }
    .slider:before {
      position: absolute;
      content: "";
      height: 20px; width: 20px;
      left: 4px; bottom: 4px;
      background-color: white;
      transition: 0.4s;
      border-radius: 50%;
    }
    input:checked + .slider {
      background-color: #4CAF50;
    }
    input:checked + .slider:before {
      transform: translateX(22px);
    }
  </style>
<div class="main-panel">
	<div class="content-wrapper">
		<div class="page-header">
			<h3 class="page-title">Parameter Settings </h3>
			
		</div>
		<div class="row">
			<div class="col-lg-12 grid-margin stretch-card">
				<div class="card">
					<div class="card-body">
						
						<div class="table-responsive">
							<table class="table table-bordered" id="example">
								<thead>
									<tr>
										<th><b>Setting Name</b></th>
										<th><b>Visible User</b></th>
										<th><b>Modify User</b></th>
										<th><b>Visible Admin</b></th>
										<th><b>Modify Admin</b></th>
									</tr>
								</thead>
								<tbody>
									<?php $i=0;?>
									<?php foreach($fields as $key => $data) { ?>
									<?php if($data =='id' || $data=='name') { continue; }?>
									<tr>
										<td><?php echo $data;?></td>
										<?php $visible = variable_name($key,'visible');?>
										<?php $modify = variable_name($key,'modify');?>
										<?php $visible_admin = variable_name($key,'visible_admin');?>
										<?php $modify_admin = variable_name($key,'modify_admin');?>
										
										<?php if($visible=='1') { $visible_user = 'checked';} else { $visible_user='';} ?>
										<?php if($modify=='1') { $modify_user = 'checked';} else { $modify_user='';} ?>
										<?php if($visible_admin=='1') { $visible_admin = 'checked';} else { $visible_admin='';} ?>
										<?php if($modify_admin=='1') { $modify_admin = 'checked';} else { $modify_admin='';}  ?>
										<td>
											<label class="switch">
												<input type="checkbox" class="toggle-checkbox" name="visible_user[]" id="toggleCheckbox" data-id="<?php echo $key;?>" data-name="visible_user" <?php  echo $visible_user;?> ><span class="slider round"></span></label></td>
										<td><label class="switch"><input type="checkbox" class="toggle-checkbox" name="modify_user[]" id="toggleCheckbox" data-id="<?php  echo $key;?>" data-name="modify_user" <?php echo $modify_user;?>><span class="slider round"></span></label></td>
										<td><label class="switch"><input type="checkbox"  class="toggle-checkbox" name="visible_admin[]" id="toggleCheckbox" data-id="<?php echo $key;?>"  data-name="visible_admin" <?php echo $visible_admin;?>><span class="slider round"></span></label></td>
										<td><label class="switch"><input type="checkbox" class="toggle-checkbox" name="modify_admin[]" id="toggleCheckbox" data-id="<?php echo $key;?>"  data-name="modify_admin" <?php echo $modify_admin;?>><span class="slider round"></span></label></td>
									</tr>
									<?php $i++;} ?>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>	
	</div>	
</div>	

<script>
$(document).ready(function() {
    $('.toggle-checkbox').change(function() {
        var isChecked = $(this).is(':checked') ? 1 : 0;
        var id = $(this).data('id');
        var d_name = $(this).data('name');

        $.ajax({
            url: '<?php echo base_url();?>setting/saveData', // Your PHP endpoint
            method: 'POST',
            data: { 
                id: id, 
                status: isChecked, 
                d_name: d_name 
            },
            success: function(response) {
                console.log('Server response:', response);
            },
            error: function(xhr) {
                console.error('Error:', xhr.responseText);
            }
        });
    });
});
</script>