backoffice/application/views/gestion_settings.php

<link rel="stylesheet" href="<?= base_url('bower_components/toastr/toastr.css') ?>">
<!-- Date Picker -->
<link rel="stylesheet" href="<?= base_url('bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css') ?>">
<link rel="stylesheet" href="<?= base_url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.css') ?>">
<link rel="stylesheet" href="<?= base_url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css') ?>">

<style type="text/css">
	/*@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css');*/
	/*@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.css');*/
	.datepicker table tr td.disabled,
	.datepicker table tr td.disabled:hover {
		color: #b90000;
	}
</style>
<?php
?>

<div class="content-wrapper">
	<!-- Content Header (Page header) -->
	<section class="content-header">

		<h1>
			<?= $this->lang->line('settings'); ?>
		</h1>
		<?php
		$site_url = base_url();

		if ($alert == "ok") {

			if (!$success == "ok") {
				?>
				<div class='alert alert-danger alert-dismissible col-xs-6'>
					<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>
					<h4><i class='icon fa fa-ban'></i> Erreur!</h4>
					<?= $message; ?>
				</div>

				<?php
			} else {
				?>
				<div class="alert alert-success alert-dismissible col-xs-6">
					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
					<h4><i class="icon fa fa-check"></i> Success!</h4>
					<?= $message; ?>
				</div>

				<?php
			}
		}
		?>

	</section>

	<section class="content">
		<div class="row">
			<div class="margin">
				<button type="button" class="btn btn-primary open-modal" data-toggle="modal" data-target="#modal-update"
						style="width: 100%"><?= $this->lang->line('Modifier la configuration') ?></button>
			</div>
		</div>

		<div class="row">
			<div class="col-lg-3 col-xs-6">
				<!-- small box -->
				<div class="small-box bg-aqua">
					<div class="inner">
						<h3><?= $pas_chargement ?></h3>

						<p><?= $this->lang->line('steps_map_loading'); ?></p>
					</div>
					<div class="icon">
						<i class="fa fa-map"></i>
					</div>
				</div>
			</div>
<!--			<div class="col-lg-3 col-xs-6">-->
<!--				<div class="small-box bg-blue">-->
<!--					<div class="inner">-->
<!--						<h3>--><?php //= $this->lang->line($active_pub ? 'Oui' : 'Non')?><!--</h3>-->
<!--						<p>--><?php //echo $this->lang->line('sms_notifications'); ?><!--</p>-->
<!--					</div>-->
<!--					<div class="icon">-->
<!--						<i class="fa fa-send-o"></i>-->
<!--					</div>-->
<!--				</div>-->
<!--			</div>-->
		</div>
		<div class="modal fade" id="modal-update">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h3 class="modal-title"><?= $this->lang->line('settings'); ?></h3>
					</div>
					<div class="modal-body">
						<form id="settingsForm">
							<div class="form-group">
								<label
										class="col-form-label"><?= $this->lang->line('steps_map_loading'); ?></label>
								<input type="number" min="0" required class="form-control"
									   id="pas" name="pas" value="<?= $pas_chargement ?>">
							</div>
							

<!--							<div class="form-group" style="margin-bottom: 40px">-->
<!--								<input type="checkbox" name="sms_notifications"  id="sms_notifications">-->
<!--								<label for="sms_notifications">--><?php //echo $this->lang->line('sms_notifications'); ?><!--</label>-->
<!--							</div>-->

						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default pull-left"
								data-dismiss="modal"><?= $this->lang->line('Fermer'); ?></button>
						<button type="button" id="updateSettings"
								class="btn btn-primary"><?= $this->lang->line('Continuer'); ?></button>
					</div>
				</div>
			</div>
		</div>

	</section>
</div>
<!-- jQuery 3 -->
<script src="<?= base_url('bower_components/jquery/dist/jquery.min.js') ?>"></script>
<!-- Bootstrap 3.3.7 -->
<script src="<?= base_url('bower_components/bootstrap/dist/js/bootstrap.min.js') ?>"></script>
<!-- DataTables -->
<script src="<?= base_url('bower_components/datatables.net/js/jquery.dataTables.min.js') ?>"></script>
<script src="<?= base_url('bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js') ?>"></script>
<!-- Slimscroll -->
<script src="<?= base_url('bower_components/jquery-slimscroll/jquery.slimscroll.min.js') ?>"></script>
<!-- FastClick -->
<script src="<?= base_url('bower_components/fastclick/lib/fastclick.js') ?>"></script>
<!-- AdminLTE App -->
<script src="<?= base_url('dist/js/adminlte.min.js') ?>"></script>
<!-- AdminLTE for demo purposes -->
<script src="<?= base_url('dist/js/demo.js') ?>"></script>

<script src="<?= base_url('bower_components/moment/min/moment.min.js') ?>"></script>
<script src="<?= base_url('bower_components/toastr/toastr.js') ?>"></script>
<script src="<?= base_url('dist/js/sweetalert2.js') ?>"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment-with-locales.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="<?= base_url('bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js') ?>"> </script>

<script>
	toastr.options.closeButton = true;
	toastr.options.closeMethod = 'fadeOut';
	toastr.options.closeDuration = 5000;
	toastr.options.closeEasing = 'swing';

	//const format = "<?//=$this->session->userdata('site_lang')?>//" === 'french' ? 'fr' : 'en';
	//moment.updateLocale(moment.locale(format), {invalidDate: ""}); // Blank text when is invalid date

	//$(document).on("click", ".open-modal", function () {
	//	const default_locality = $(this).data('default_locality');
	//
	//	$(".modal-body #default_locality").val(default_locality);
	//	$(".modal-body #sms_notifications").prop('checked', <?//=$active_pub?>//);
	//});

	$('#updateSettings').click(function () {
		if ($('#settingsForm')[0].checkValidity()) {
			var pas = parseInt($('#pas').val());
			// var active_pub = $("#sms_notifications").is(':checked') ? 1 : 0;

			$.ajax({
				url: '<?= base_url('Gestion/update_settings')?>',
				type: 'POST',
				dataType: 'json',
				data: {pas: pas},
				success: function (data) {
					if (data == '200') {
						Swal.fire({
							icon: 'success',
							title: "<?= $this->lang->line('settings_updated')?>",
							text: "<?= $this->lang->line('informations_updated')?>",
							timer: 3000
						}).then(() => {
							location.reload();
						});
					} else {
						toastr.error("<?= $this->lang->line('error_message')?>", "<?= $this->lang->line('request_error')?>");
					}
				},

				error: function (resultat, statut, error) {
					console.log(resultat + " " + error);
					toastr.error("<?= $this->lang->line('error_message')?>", "<?= $this->lang->line('request_error')?>");
				}
			});

		} else {
			$('#settingsForm')[0].reportValidity();
		}
	});

	//$.fn.datepicker.dates.en.titleFormat="MM";
	//$(document).ready(function(){
	//	$('#payment_deadline').text(moment("<?//=$payment_deadline_date?>//", 'DD/MM').format('D MMMM'));
	//	$('#payment_deadline_date').datepicker({
	//		format: 'dd/mm',
	//		autoclose: true,
	//		startView: 1,
	//		maxViewMode: "months",
	//		orientation: "bottom left",
	//	});
	//});
</script>