<?php
include('config/config.inc.php');
include('include/agenda.inc.php');
include('config/lib.inc.php');
$maCleDeCryptage = getCleDeCryptage();	


$query="SELECT * 
		FROM jpo
		INNER JOIN eta ON jpo.id_eta = eta.id_eta";
$db = connect_base();
$queryRequest = $db->prepare( $query );
$queryRequest->execute();
$data=$queryRequest->fetchAll();

$info=array();



foreach($data as $cle=>$val){
	$info[$val['id_eta']]['eta']=decrypter($maCleDeCryptage,$val['nom_eta']);
	$info[$val['id_eta']]['adr1']=decrypter($maCleDeCryptage,$val['adresse1']);
	$info[$val['id_eta']]['adr2']=decrypter($maCleDeCryptage,$val['adresse2']);
	$info[$val['id_eta']]['cp']=decrypter($maCleDeCryptage,$val['cp']);
	$info[$val['id_eta']]['ville']=decrypter($maCleDeCryptage,$val['ville']);
	$info[$val['id_eta']]['lat']=$val['lat'];
	$info[$val['id_eta']]['lon']=$val['lon'];
	$info[$val['id_eta']]['jpo']=decrypter($maCleDeCryptage,$val['details_jpo']);
}

?>
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="css/style.css">
		<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAD8dr4sS_iFafcU_AowzS9p9B306iQEZQ"></script>				
		<script src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="js/fonctions.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<title>Deciday!</title>
		<script>
			jQuery(document).ready(function(){

				<?php
				if(isset($_SESSION['msg']) && !empty($_SESSION['msg'])){
					?>
				alert('<?php print addslashes($_SESSION['msg']);?>');
				<?php
					$_SESSION['msg']="";
				}
				?>
				
			});
		</script>
		<style>
			.lienCarte{color: #87318b;font-family: "Myriad Pro Bold";}
			.lienCarte:hover{ text-decoration: none;color: #87318b;}
			.filtreCarte{ text-align: center;font-size: 16px;color: #87318b;text-align: center;font-family: "Myriad Pro Bold";text-transform: uppercase; padding:16px 0 10px 0;}
			.filtreCarte select{ color:#000; margin-top:6px;}
		</style>
		<script>
			function pinSymbol(color) {
				return {
					path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
					fillColor: color,
					fillOpacity: 1,
					strokeColor: '#000',
					strokeWeight: 2,
					scale: 1,
			   };
			}	
			//#FFA64D on
			//#CACAD9 off
			function initialisation(){
				var optionsCarte = {
					zoom: 5,
					center: new google.maps.LatLng(46.52863469527167,2.43896484375)
				};
				var maCarte = new google.maps.Map(document.getElementById("divCarte"), optionsCarte);
				<?php
				$color="#FFA64D";
				
				foreach($info as $key => $value){
					$text="";
					$text.="<b>".$value['eta']."</b><br />".$value['adr1']."<br />".$value['adr2']."<br />".$value['cp']."&nbsp;".$value['ville']."<br />";
				?>
					
				var optionsMarqueur = {
					position: new google.maps.LatLng(<?=$value['lat']?>,<?=$value['lon']?>),
					map: maCarte,
					title:'<?=addslashes($value['eta'])?>',
					icon: pinSymbol("<?=$color?>"),
					};
				
				var marqueur<?=$key?> = new google.maps.Marker(optionsMarqueur);
				var infowindow<?=$key?> = new google.maps.InfoWindow({
					content: ''
				  });
				var divDetail<?=$key?> = $('#divDetail<?=$key?>');
				var alldivDetail = $('.divDetail');
				var allInfoWindows = [];
				
					  
					  
				marqueur<?=$key?>.addListener('click', function() {
					allInfoWindows.push(infowindow<?=$key?>);
					
					infowindow<?=$key?>.setContent('<?=addslashes($text)?>');
					infowindow<?=$key?>.open(maCarte, this);
					alldivDetail.addClass('hidden');
					divDetail<?=$key?>.removeClass('hidden');
							
					  });
				
  				google.maps.event.addListener(maCarte, 'click', function() {
					alldivDetail.addClass('hidden');
					
					for(var i=0; i<alldivDetail.length; i++){
						allInfoWindows[i].close();
					}
    			
  				});
				<?php
					
				}
				?>
				
			}
			$(document).ready(function() {
				initialisation();
			});
		</script>
		
	</head>
	<body>
	<?php include('include/header.php');?>
		<div class="container-fluid" style="margin-top: -20px;">
			<div class="row" style="background-color: #5B2050;">
				<a href="#" style="cursor:auto">
					<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 noPad">
					<img class="visible-sm visible-md visible-lg img-responsive imageBandeau" src="img/slide/deciday_decouvrez_deciday_slider.jpg" alt="Métiers Hotel-Resto">
					<img class="hidden-lg hidden-md hidden-sm img-responsive imageBandeau" src="img/slide/slider_new_resp.jpg" alt="Métiers Hotel-Resto">
				</div>
				</a>
			</div>
		</div>
		<div class="container contenuTxt"><br>
			<div class="col-lg-2 col-md-2 col-sm-1 hidden-xs bgTitrePage"></div>
			<div class="col-lg-8 col-md-8 col-sm-10 col-xs-12 titreContenuPage">Portes ouvertes</div>
			<div class="col-lg-2 col-md-2 col-sm-1 hidden-xs bgTitrePage"></div>
			<div class="clearfix"></div>
	    	<div class="col-lg-8 col-md-8 col-sm-10 col-xs-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 txtChapeau">
    			<p>Retrouvez les établissements qui vous accueillerons lors de leurs journées portes ouvertes.<br /><br /></p>    
			</div>
		
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12 col-lg-offset-4 col-md-offset-2">
				<div id="divCarte" style='height:500px;'></div><br /><br />
		</div>
		<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 ">
			<?php foreach($info as $key => $value){
			$detail = "<b style=\"color:#e54c52;font-family:'Myriad Pro Bold'; font-size:22px; line-height:28px;\">".$value['eta']."</b><br/><br/>".nl2br(strip_tags(utf8_decode($value['jpo']),"<b><u><br><ul><li><div>"));
			?>
				<div id="divDetail<?=$key?>" style='height:500px; font-size: 16px; color: #58595b; border: 1px solid rgba(200,200,200,0.20); padding: 5px; border-radius: 5px;' class="divDetail hidden">
					<?=$detail?>
				</div>
			<?php } ?>

		</div>
		
    <div class="container " style="padding-top:20px; margin-top:8px; ">
        <div class="col-lg-2 col-md-2 col-sm-1 hidden-xs">
        </div>
        <div class="col-lg-8 col-md-8 col-sm-10 col-xs-12 titreContenuPage">
            En savoir plus :
        </div>
        <div class="col-lg-2 col-md-2 col-sm-1 hidden-xs">
        </div>
		
	</div>			
	    	<div class="col-lg-8 col-md-8 col-sm-10 col-xs-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-1 txtIntro contenuTxt">
    	<p>Rendez-vous sur <a href="http://www.metiers-hotel-resto.fr/" target="_blank" class="lienContent">www.metiers-hotel-resto.fr</a> pour découvrir :</p>
			<ul class="liste">
				<li><span>des fiches détaillées sur tous les métiers du secteur</span></li>	
				<li><span>les différentes formations du CAP au master 2</span></li>
				<li><span>des témoignages vidéo de professionnels</span></li>
			</ul>
				<p>et suivez-nous sur les réseaux sociaux : <a href="https://www.facebook.com/metiers.hotel.resto/" target="_blank"><img src="images/facebook.jpg" alt="Facebook" style="width: 20px; height:auto;" /></a>&nbsp;<a href="https://www.youtube.com/channel/UCY_U2kN3Wzg5HY_d7bOlOGg" target="_blank"><img src="images/youtube.jpg" alt="Youtube" style="width: 20px; height:auto;" /></a></p>
			</div>
			<div class="clearfix"></div>
		
		</div><!-- RESEAUX SOCIAUX -->
		<?php include('include/footer.php');?>
	</body>
</html>