<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>Sr.No</b></th>
										<th><b>Variable Name</b></th>
										<th><b>Description</b></th>
										<th><b>Pico Chart Pertinence</b></th>
										<th><b>Pico Map Pertinence</b></th>
									</tr>
								</thead>
								<tbody>
									<?php $i=1;?>
									<?php foreach($data as $dat) { ?>
									
									<tr>
										<td><?php echo $i;?>
										<td><?php echo $dat['variable'];?></td>
										<td><?php echo $dat['description'];?></td>
										<?php $graph = $dat['graph'];?>
										<?php $maps = $dat['maps'];?>
										<?php if($graph=='1') { $visible_graph = 'checked';} else { $visible_graph='';} ?>
										<?php if($maps=='1') { $visible_maps = 'checked';} else { $visible_maps='';} ?>
										<td><label class="switch">
												<input type="checkbox" class="toggle-checkbox" name="visible_chart[]" id="toggleCheckbox" data-id="<?php echo $dat['id'];?>" data-name="visible_chart" <?php echo $visible_graph;?> ><span class="slider round"></span></label></td>
										<td>
											<label class="switch">
												<input type="checkbox" class="toggle-checkbox" name="visible_map[]" id="toggleCheckbox" data-id="<?php echo $dat['id'];?>" data-name="visible_map" <?php echo $visible_maps;?> ><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/saveAccessData', // 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>