<style>

	#map {
		min-height: 250px;
		height: 100%;
	}

	body {
		height: 100%;
		margin: 0;
		padding: 0;
	}

	.btn-center {
		text-align: center;
	}

	.img-center {
		display: block;
		margin-left: auto;
		margin-right: auto;
		/*width: 65%;*/
	}

</style>

<link rel="stylesheet"
	  href="<?= base_url('<link rel="stylesheet" 
	href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap.min.css">') ?>">
<link rel="stylesheet" href="<?= base_url('bower_components/toastr/toastr.css') ?>">
<div class="content-wrapper">

	<section class="content-header">

		<?php

		if ($alert == "ok") {

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

				<?php
			} else {
				?>
				<div class="alert alert-success alert-dismissible">
					<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
			}
		}
		?>
		<h1>
			<?= $this->lang->line('Carte des'); ?> <?= $map_title ?>
			<small><?= $this->lang->line('zoom'); ?><?= $map_title ?></small>
		</h1>
		<section class="content">
			<div id="map" style="width:100%;height:400px;"></div>
		</section>

		<section class="content">
			<div class="row">
				<div class="col-md-12">
					<div class="box">
						<div class="box-header with-border">
							<h3 class="box-title"><?= $this->lang->line('Tous les').' '.$map_title ?><?php //if($this->session->userdata('category')=='super'){ echo  "(".$numberGeo." ".$this->lang->line('Restant').")";} ?></h3>
						</div>
						<!-- /.box-header -->
						<div class="box-body" style="overflow-x:auto;">
							<table id="liste_users" class="table table-bordered table-striped table-modified">
								<thead>
								<tr class="label-primary">
									<th><?= $this->lang->line('Parrain'); ?></th>
									<th><?= $this->lang->line('Nom'); ?></th>
									<th><?= $this->lang->line('Adresse'); ?></th>
									<th><?= $this->lang->line('code membre'); ?></th>
									<th><?= $this->lang->line('Email'); ?></th>
									<th><?= $this->lang->line('Contact'); ?></th>
									<th><?= $this->lang->line('provider_class'); ?></th>
									<th><?= $this->lang->line('Active'); ?></th>
									<?php if($category == 'geolocated') { ?>
										<th>QR Code</th>
									<?php } ?>
									<?php if ($this->session->userdata("category") == "0" or $this->session->userdata("category") == "hyper") {
										echo "<th> Action </th>";
									}
									?>
								</tr>
								</thead>
							</table>

							<div class="modal fade" id="supervisorModal" role="dialog"
								 aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content box box-widget widget-user">
										<div class="widget-user-header label-primary">
											<h3 class="widget-user-username btn-center"><?= $this->lang->line("Parrain") ?></h3>
										</div>
										<div class="box-footer">
											<div class="row">
												<div class="col-sm-4 border-right">
													<div class="description-block">
														<h5 class="description-header">
															<strong><?= $this->lang->line("Catégorie") ?>: </strong>
														</h5>
														<span class="description-text" id="super_cateogy"></span>
													</div>
												</div>
												<div class="col-sm-4 border-right">
													<div class="description-block">
														<h5 class="description-header">
															<strong><?= $this->lang->line("Nom") ?>: </strong></h5>
														<span class="description-text" id="super_lastname"></span>
													</div>
												</div>
												<div class="col-sm-4 ">
													<div class="description-block">
														<h5 class="description-header">
															<strong><?= $this->lang->line("Reseau") ?> :</strong></h5>
														<span class="description-text" id="super_network"></span>
													</div>
												</div>
											</div>
											<div class="row">
												<div class="col-sm-6 border-right">
													<div class="description-block">
														<h5 class="description-header">
															<strong><?= $this->lang->line("code membre") ?> : </strong>
														</h5>
														<span id="super_code_membre"></span>
													</div>
												</div>
												<div class="col-sm-6 ">
													<div class="description-block">
														<h5 class="description-header">
															<strong><?= $this->lang->line("Code parrain") ?> : </strong>
														</h5>
														<span id="super_code_parrain"></span>
													</div>
												</div>
											</div>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-lg btn-default pull-left"
													data-dismiss="modal"><?= $this->lang->line("Fermer") ?></button>
										</div>
									</div>
								</div>
							</div>
							<div class="modal fade" id="editModal">
								<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>
											<h4 class="modal-title"><?= $this->lang->line('Mettre à jour des informations'); ?></h4>
										</div>
										<div class="modal-body">
											<form id="update-form" method="post" class="bottom-75 center-block">
												<div class="form-group">
													<label for="code"><?= $this->lang->line('code membre'); ?></label>
													<input type="text" class="form-control input-lg" name="code"
														   readonly id="code">
												</div>
												<div class="form-group">
													<label for="categorie"><?= $this->lang->line('Catégorie'); ?></label>
													<input type="text" class="form-control input-lg" name="categorie"
														   readonly id="categorie">
												</div>
												<div class="form-group">
													<label for="nom"><?= $this->lang->line('Nom'); ?></label>
													<input type="text" class="form-control input-lg" name="nom" required
														   id="nom">
												</div>
												<div class="form-group">
													<label for="adresse"><?= $this->lang->line('Adresse'); ?></label>
													<input type="text" class="form-control input-lg" name="adresse"
														   required id="adresse">
												</div>
												<div class="form-group">
													<label for="email"><?= $this->lang->line('Email'); ?></label>
													<input type="email" class="form-control input-lg" name="email"
														   required id="email">
												</div>
												<div class="form-group">
													<label for="contact"><?= $this->lang->line('Contact'); ?></label>
													<input type="text" class="form-control input-lg" name="contact"
														   required id="contact">
												</div>
												<div class="form-group">
													<label  class="col-form-label"><?= $this->lang->line('provider_class'); ?></label>
													<select class="form-control input-lg" name="provider_class_id" required id="provider_class_id">
														<?php
														foreach ($provider_classes->result() as $value) { ?>
															<option value="<?=$value->id?>"> <?=$value->name?> </option>
														<?php } ?>
													</select>
												</div>

												<div class="form-group">
													<input id="btn-update" type="submit" value="Confirmer"
														   class="btn btn-primary">
													<button type="button" class="btn btn-default pull-right"
															data-dismiss="modal"><?= $this->lang->line('Fermer'); ?></button>
												</div>
											</form>
										</div>
									</div>
								</div>
							</div>
							<div class="modal fade" id="suppreModal">
								<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>
											<h4 class="modal-title"><?= $this->lang->line('Suppression'); ?></h4>
										</div>
										<div class="modal-body">
											<p id="message"></p>
										</div>
										<div class="modal-footer">
											<button class="btn btn-danger pull-left" id="delete">Confirmer</button>
											<button type="button" class="btn btn-default pull-right"
													data-dismiss="modal"><?= $this->lang->line('Fermer'); ?></button>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
					<!-- /.box -->
				</div>
				<!-- /.col -->
				<div id='loader' class="center-div loader">
					<div class="center-div">
						<img style="text-align: center" class="img-center"
							 src="<?= base_url('dist/img/loading.gif') ?>" alt="Loading" height="50" width="50">
						<p style="text-align: center">Chargement</p>
					</div>
				</div>
			</div>
			<!-- /.row -->
		</section>
	</section>
</div>
<!-- jQuery 2.2.4 -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<!-- Bootstrap 3.3.7 -->
<script src="<?= base_url('bower_components/bootstrap/dist/js/bootstrap.min.js') ?>"></script>
<!-- DataTables -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/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/bootstrap-daterangepicker/daterangepicker.js') ?>"></script>
<script src="<?= base_url('bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.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">

	$(window).on('load', function () {
		$(".loader").fadeOut("1000");
	});
</script>

<script>
	$(function () {

		var table = $('#liste_users').DataTable({
			// Processing indicator
			"processing": true,
			"language": {
				"processing": "<?= $this->lang->line('loading') ?>"
			},
			// DataTables server-side processing mode
			"serverSide": true,
			// Initial no order.
			"order": [],
			// Load data from an Ajax source
			"ajax": {
				"url": "<?= base_url('pagination/GeolocatedUsers/getLists'); ?>",
				"data": {
					"code_parrain": "<?= $code_parrain ?? null ?>",
					"category": "<?= $category ?? null ?>",
					"town_id": "<?= $town_id ?? null ?>",
					"network_id": "<?= $network_id ?? null?>"
				},
				"type": "POST"
			}
		});
	})

</script>

<script>
	var member_code = null;
	var categorie = null;
	var networkAgentId = null;
	$(document).on("click", ".open-modal", function () {

		member_code = $(this).data('member_code');
		categorie = $(this).data('category');
		var nom = $(this).data('lastname');
		var adresse = $(this).data('adresse');
		var email = $(this).data('email');
		var contact = $(this).data('phone');
		var provider_class_id = $(this).data('provider_class_id');
		networkAgentId = $(this).data('network_agent_id');

		$(".modal-body #nom").val(nom);
		$(".modal-body #adresse").val(adresse);
		$(".modal-body #email").val(email);
		$(".modal-body #contact").val(contact);
		$(".modal-body #categorie").val(categorie);
		$(".modal-body #code").val(member_code);
		$(".modal-body #provider_class_id").val(provider_class_id);
	});

	$("#update-form").submit(function (event) {

		var m_nom = $('#update-form #nom').val();
		var m_adresse = $('#update-form #adresse').val();
		var m_email = $('#update-form #email').val();
		var m_contact = $('#update-form #contact').val();
		var m_code = $(".modal-body #code").val();
		var m_cat = $(".modal-body #categorie").val();
		var m_provider_class_id = $(".modal-body #provider_class_id").val();

		$.ajax({
			url: '<?= base_url('index.php/Admin/updateUser')?>',
			type: 'post',
			data: {code: m_code, nom: m_nom, adresse: m_adresse, email: m_email, contact: m_contact, cat: m_cat,
				provider_class_id : m_provider_class_id, network_agent_id : networkAgentId },
			dataType: 'json',
			success: function (data) {
				if (data === 'completed') {
					alert("Les informations ont été mises à jours");
					location.reload(true);
				} else {
					alert(data);
					location.reload(true);
				}
			}
		});

		event.preventDefault();
	});

	$(document).on("click", ".supre-modal", function () {

		member_code = $(this).data('member_code');
		categorie = $(this).data('category');
		var nom = $(this).data('lastname');

		var message = "Voulez-vous vraiment retirer " + nom + " (code membre " + member_code + ") ?";

		$(".modal-body #message").text(message);

	});

	$("#delete").click(function () {

		$.ajax({
			url: '<?= base_url('index.php/Admin/deleteUser')?>',
			type: 'post',
			data: {code: member_code, cat: categorie},
			dataType: 'json',
			success: function (data) {
				if (data === 'completed') {
					alert("L'utilisateur a été retiré");
					location.reload(true);
				} else {
					alert(data);
					location.reload(true);
				}
			}
		});

		event.preventDefault();
	});

	$(document).on("click", ".openSupervisorModal", function () {
		let code_parrain = $(this).data('code_parrain');
		$.ajax({
			url: '<?= base_url('index.php/Hyperviseur_dash/fetchSuper')?>',
			type: 'post',
			data: {code_membre: code_parrain},
			dataType: 'json',
			success: function (data) {
				$('#super_cateogy').html(data.category);
				$('#super_network').html(data.network);
				$('#super_lastname').html(data.lastname);
				$('#super_code_membre').html(data.code_membre);
				$('#super_code_parrain').html(data.code_parrain);
				$('#supervisorModal').modal('show')
			}
		});
	});

	$(document).on("click", ".generateQRCode", function () {
		let id_agent = $(this).data('id_agent');
		$.ajax({
			url: '<?= base_url('index.php/Hyperviseur_dash/generateQRCode')?>',
			type: 'POST',
			data: {'user_id': id_agent , 'type' : 'agent'},
			dataType: 'json',
			success: function (data) {
				if(data.status === 200){
					Swal.fire({
						icon: 'success',
						title: "<?= $this->lang->line('qr_code_generated')?>",
						text: "<?= $this->lang->line('informations_updated')?>",
						timer: 3000
					}).then(() => {
						location.reload();
					});
				}else{
					toastr.error(data.error , "<?= $this->lang->line('request_error')?>");
				}
			},
			error: function (error) {
				toastr.error("<?= $this->lang->line('error_message')?>", "<?= $this->lang->line('request_error')?>");
			}
		});
	});
</script>

<script>
    function myMap() {
        var mapProp = {
            center: new google.maps.LatLng(<?= $latitude; ?>, <?= $longitude; ?>),
            zoom: <?= $this->session->userdata('category') != 'admin' ? 10 : 1; ?>,
            mapId: "DEMO_MAP_ID" // Remplacez par votre propre Map ID si nécessaire
        };

        var myLatLng = {lat: <?= $latitude; ?>, lng: <?= $longitude; ?>};
        var map = new google.maps.Map(document.getElementById("map"), mapProp);

        <?php if($this->session->userdata('category') != 'admin'): ?>
            var myPosition = new google.maps.marker.AdvancedMarkerElement({
                map: map,
                position: myLatLng,
                title: '<?= $this->lang->line('Vous'); ?>'
            });
        <?php endif; ?>

        <?php
        $result = $positions;
        if ($result != false) {
            $numrows = $result->num_rows();
            $num = 0;
            if ($numrows > 0) {
                $site_url = base_url();
                foreach ($result->result() as $row) {
                    $num++;
                    $mlat = (float)$row->latitude;
                    $mlng = (float)$row->longitude;
                    echo "var marker = new google.maps.marker.AdvancedMarkerElement({
                        map: map,
                        position: {lat: " . $mlat . ", lng: " . $mlng . "},
                        title: '" . addslashes($row->lastname) . "'
                    });";
                }
            }
        }
        ?>
    }

        function loadScript() {
            var script = document.createElement("script");
            script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDwljY6bNBeL6ZsY-1Lz9imVCAshEXVkNc&callback=myMap&libraries=marker";
            script.async = true;
            script.defer = true;
            document.body.appendChild(script);
        }

        window.onload = loadScript;

</script>

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
