{% extends "base.html.twig" %}
{% block title %}
	Hébergement
{% endblock %}

	{% block stylesheets %}
	<link rel="stylesheet" href="{{ asset('css/dashboard.css')}}">
	{% endblock %}
	{% block body %}

	<section id="contents" class="container-fluid">
	<!-- entete content -->
	<div id="top-content">
		<div id="entete_fixed">
			<ul>
				<li>
					<a href="#" id="btn_drop_side_menu">
						<i data-show="show-side-navigation1" class="fa fa-bars show-side-btn"></i>
					</a>
				</li>
				<li
								{% if hotel == "royal_beach" %}
									class="logo_active"
								{% endif %}
							>
								<a href="{{ path('royal_beach', {'current_page' : current_page }) }}">
									<div>
										<img src="{{asset('images/hazo1.png')}}" alt="logo1">
									</div>
								</a>
							</li>
							<li
								{% if hotel == "calypso" %}
									class="logo_active"
								{% endif %}
							>
								<a href="{{ path('calypso', {'current_page' : current_page }) }}">
									<div>
										<img src="{{ asset('images/hazo2.png') }}" alt="logo2">
									</div>
								</a>
							</li>
							<li 
								{% if hotel == "baobab_tree" %}
									class="logo_active"
								{% endif %}
							>
								<a href="{{ path('baobab_tree', {'current_page' : current_page }) }}">
									<div>
										<img src="{{ asset('images/hazo3.png') }}" alt="logo3">
									</div>
								</a>
							</li>
							<li
								{% if hotel == "vanila_hotel" %}
									class="logo_active"
								{% endif %}
							>
								<a href="{{ path('vanila_hotel', {'current_page' : current_page }) }}">
									<div>
										<img src="{{ asset('images/hazo4.png') }}" alt="logo4">
									</div>
								</a>
							</li>
				<li id="log_out_entete">
					<div>
						 <a href="{{ path('app_logout') }}">
							<span aria-hidden="true" class="fa fa-power-off fa-2x"></span>
						</a>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<!-- / entete content -->

	<!-- contenue  -->
	<div id="hrs_content">
		<div>
			<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12 col-xs-12">
				<section class="section_part" id="section_part_top">
					<div class="sous_titre">
						<h3>Hébergement</h3>
					</div>
				</section>
			</div>
			<div
				class="col-lg-12 col-md-12 col-sm-12 col-sm-12 col-xs-12">
				<!-- debut chart 1 -->
				<section class="section_part tab_content margin_tab">
					<div class="chart_title">
						<div class="chart_title-part">
							<h4>Taux d'occupation</h4>
						</div>
						<form action="" class="tri">
							<select name="" id="mois_heb_to">
								<option selected = "selected" value = "tous_les_mois">Tous les mois</option>
								<option value = "01">Janvier</option>
								<option value = "02">Février</option>
								<option value = "03">Mars</option>
								<option value = "04">Avril</option>
								<option value = "05">Mai</option>
								<option value = "06">Juin</option>
								<option value = "07">Juillet</option>
								<option value = "08">Août</option>
								<option value = "09">Septembre</option>
								<option value = "10">Octobre</option>
								<option value = "11">Novembre</option>
								<option value = "12">Décembre</option>
							</select>
							<select name="" class="annee" id="annee_heb_to">
								{% for a in tab_annee %}
									<option value="{{ a }}">{{ a }}</option>
								{% endfor %}
							</select>
						</form>
					</div>
					<div>
						<canvas id="canvas_to"></canvas>
					</div>
					<div id="chart-legends_to"></div>

				</section>
				<!-- fin chart 1 -->
				<!-- debut chart 2 -->
				<section class="section_part tab_content margin_tab">
					<div class="chart_title">
						<div class="chart_title-part">
							<h4>Chiffre d'affaire</h4>
						</div>
						<form action="" class="tri">
							<select name="" id="mois_heb_ca">
								<option selected = "selected" value = "tous_les_mois">Tous les mois</option>
								<option value = "01">Janvier</option>
								<option value = "02">Février</option>
								<option value = "03">Mars</option>
								<option value = "04">Avril</option>
								<option value = "05">Mai</option>
								<option value = "06">Juin</option>
								<option value = "07">Juillet</option>
								<option value = "08">Août</option>
								<option value = "09">Septembre</option>
								<option value = "10">Octobre</option>
								<option value = "11">Novembre</option>
								<option value = "12">Décembre</option>
							</select>
							<select name="" class="annee" id = "annee_heb_ca">
								{% for a in tab_annee %}
									<option value="{{ a }}">{{ a }}</option>
								{% endfor %}
							</select>
						</form>
					</div>
					<div>
						<canvas id="canvas_ca"></canvas>
					</div>
					<div id="chart-legends_ca"></div>

				</section>
				<!-- fin chart2  -->
			</div>
			<div class="col-lg-8 col-md-8 col-sm-12 col-sm-12 col-xs-12">
				<section class="section_part tab_content margin_tab tab_liste_client">
					<div class="tableau">
						<div class="sous_titre">
							<h4>Liste des clients hébergés</h4>
						</div>
						<section class=" filtre">
							<div class="sous_titre_filtre">
								<h3>Filtre</h3>
							</div>
							<form action="" class="tri">
								<input type="date">
								<input type="date">
							</form>
						</section>
						<div class="tableau tab_historique">
							<table class="display" id="tab_client_heb" style="width:100%">
								<thead>
									<tr>
										<td>
											<span>NOM</span>
										</td>
										<td>
											<span>DATE D'ARRIVEE</span>
										</td>
										<td>
											<span>DATE DE DEPART</span>
										</td>
										<td>
											<span>DUREE DU SEJOUR</span>
										</td>
										<td>
											<span>ACTIONS</span>
										</td>
									</tr>
								</thead>
								<tbody id ="tbody_load">
                                            
                                </tbody>
							</table>
						</div>
						<!-- Modal modif  -->
                    <div class="modal fade" id="modal_form" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog opacity-animate4">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <h3 class="modal-title" style="text-align: center;">Modification</h3>
                                </div>
                                <div class="modal-body modal_modif_client">
                                    
                                </div>

                            </div>
                        </div>
                    </div>
                    <!-- fin Modal modif  -->

                    <!-- Modal suppr  -->

                    <div class="modal fade" id="modal_form_confirme" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog opacity-animate4">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <h3 class="modal-title" style="text-align: center;">Voulez-vous vraiment supprimer cet élément ?</h3>
                                </div>
                                <div class="modal-body">
                                    <div id="div__conf">
                                        <button class="btn btn-warning supprimer" data-id = ""  data-dismiss="modal" data-confirm = "oui">Supprimer</button>
                                        <button class="btn btn-warning annuler" data-dismiss="modal" data-confirm = "non">Annuler</button>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <!-- fin Modal suppr  -->

					</div>
				</section>

			</div>
		</div>
	</div>
	<!-- / contenue  -->
	</section>

	{% endblock %}
	{% block javascripts %}

			<script>
				$(document).ready(function () {
					function draw_chart1(my_data, my_labels) {

					var ctx1 = document.getElementById('canvas_to').getContext("2d");

					var gradientfill_1 = ctx1.createLinearGradient(0, 0, 0, 320);
					gradientfill_1.addColorStop(0, '#d29e00');
					gradientfill_1.addColorStop(1, 'transparent');

					var gradientfill_2 = ctx1.createLinearGradient(0, 0, 0, 320);
					gradientfill_2.addColorStop(0, '#55d8ff');
					gradientfill_2.addColorStop(1, 'transparent');

					var config1 = {
					type: 'line',
					data: {
					datasets: [
					{
					label: "Taux d'occupation",
					fill: true,
					backgroundColor: gradientfill_1,
					borderColor: "#d29e00",

					/* insertion des données sur l'axe (oy) */

					data: my_data, // qui est un tableau simple

					/* / insertion des données sur l'axe (oy) */
					pointStyle: 'circle',
					pointBackgroundColor: "transparent",
					pointBorderWidth: '2',
					radius: '5',
					hoverRadius: '5',
					borderWidth: 2

					}
					]
					},
					options: {
						legend: {
							display: false,
							align: 'start',
							position: 'bottom'

						},

					legendCallback: function (chart) {
						var text = [];
						text.push('<ul class="my_liste_legend ul_1">');
							for (var i = 0; i < chart.data.datasets.length; i++) {
								console.log(chart.data.datasets[i]); // see what's inside the obj.
								text.push('<li>');
								text.push('<span data_leg = "' + i + '" style="background-color:' + chart.data.datasets[i].borderColor + '">' + '</span><b data_leg = "' + i + '">' + chart.data.datasets[i].label + '</b>');
								text.push('</li>');
							}
							text.push('</ul>');
						return text.join("");
					},
					responsive: true,
					title: {
					display: true,
					text: ''
					},
					tooltips: {
						mode: 'index',
						intersect: false
					},
					hover: {
						mode: 'nearest',
						intersect: true
					},

					scales: {

					xAxes: [
						{
						type: 'category',

						labels : my_labels, // qui est un tableau simple

						/* / insertion des données sur l'axe (ox) */
						gridLines: {
								drawOnChartArea: true,
								drawTicks: false,
								color: "#f0f2f4"
							},

							ticks: {
								padding: 20 // pour le marge % axe x
							}
						}
					],
					yAxes: [
					{
					gridLines: {
					drawOnChartArea: true,
					drawTicks: false,
					color: "#dddfe1"
					},
					ticks: {
					padding: 20, // pour le marge % axe y
					min: 0,
					max: 100,
					callback: function (value) {
					return value + "%"
					}
					},

					display: true,
					scaleLabel: {
					display: true,
					labelString: ''
					}
					}
					]
					}
					}

					};

					var myChart1 = new Chart(ctx1, config1);
					// pour dire qu'on va utiliser notre propre légende html fenitra
					document.getElementById('chart-legends_to').innerHTML = myChart1.generateLegend();

					// event pour data 1

					var ev_click = false;
					var tab_temp = [];
					for (var i = 0; i < myChart1.data.datasets[0].data.length; i++) { // myChart1.data.datasets[0].data[i]= -10;
					tab_temp[i] = myChart1.data.datasets[0].data[i];
					}
					$("#chart-legends_to").on('click', "li span[data_leg=0]", function () {

					if (ev_click == false) {
					$(".ul_1 li span[data_leg=0]").addClass("legende_click");
					for (var i = 0; i < myChart1.data.datasets[0].data.length; i++) {
					myChart1.data.datasets[0].data[i] = -10;
					}
					myChart1.update();
					ev_click = ! ev_click;
					// alert(ev_click) ;
					} else {
					$(".ul_1 li span[data_leg=0]").removeClass("legende_click");
					for (var i = 0; i < myChart1.data.datasets[0].data.length; i++) {
					myChart1.data.datasets[0].data[i] = tab_temp[i];
					}
					myChart1.update();
					ev_click = ! ev_click;
					// alert(ev_click) ;
					}
					});

					// fin event pour data 1


					// fin chart 1
					return myChart1;
					}

					// debut chart  2


					function draw_chart2(my_data, my_labels) {
					var ctx2 = document.getElementById('canvas_ca').getContext("2d");


					// var gradientstroke = ctx.createLinearGradient(700, 0, 0, 0);
					// gradientstroke.addColorStop(0, '#00d8c0');
					// gradientstroke.addColorStop(1, '#ff6a72');

					var gradientfill_1 = ctx2.createLinearGradient(0, 0, 0, 320);
					gradientfill_1.addColorStop(0, '#d29e00');
					gradientfill_1.addColorStop(1, 'transparent');

					var gradientfill_2 = ctx2.createLinearGradient(0, 0, 0, 320);
					gradientfill_2.addColorStop(0, '#55d8ff');
					gradientfill_2.addColorStop(1, 'transparent');

					var config2 = {
					type: 'line',
					data: {
					datasets: [
					{
					label: "Chiffre d'affaire",
					fill: true,
					backgroundColor: gradientfill_2,
					borderColor: "#55d8ff",

					/* insertion des données sur l'axe (oy) */

					data: my_data,

					/* insertion des données sur l'axe (oy) */
					pointStyle: 'circle',
					pointBackgroundColor: "transparent",
					pointBorderWidth: '2',
					radius: '5',
					hoverRadius: '5',
					borderWidth: 2
					}
					]
					},
					options: {
					legend: {
					display: false,
					align: 'start',
					position: 'bottom'

					},

					legendCallback: function (chart) {
					var text = [];
					text.push('<ul class="my_liste_legend ul_2">');
					for (var i = 0; i < chart.data.datasets.length; i++) {
					console.log(chart.data.datasets[i]); // see what's inside the obj.
					text.push('<li>');
					text.push('<span data_leg = "' + i + '" style="background-color:' + chart.data.datasets[i].borderColor + '">' + '</span><b data_leg = "' + i + '">' + chart.data.datasets[i].label + '</b>');
					text.push('</li>');
					}
					text.push('</ul>');
					return text.join("");
					},
					responsive: true,
					title: {
					display: true,
					text: ''
					},
					tooltips: {
					mode: 'index',
					intersect: false
					},
					hover: {
					mode: 'nearest',
					intersect: true
					},

					scales: {

					xAxes: [
					{
					type: 'category',

					/* insertion des données sur l'axe (ox) */

					labels: my_labels,
					/* /insertion des données sur l'axe (ox) */

					gridLines: {
					drawOnChartArea: true,
					drawTicks: false,
					color: "#f0f2f4"
					},

					ticks: {
					padding: 20, // pour le marge % axe x

					}
					}
					],
					yAxes: [
					{
					gridLines: {
					drawOnChartArea: true,
					drawTicks: false,
					color: "#dddfe1"
					},
					ticks: {
					padding: 20, // pour le marge % axe y
					min: 0,
					max: 100,
					stepSize: 20,

					callback: function (value) {
					return value + "M Ar"
					}
					},
					display: true,
					scaleLabel: {
					display: true,
					labelString: ''
					}
					}
					]
					}
					}

					};
					// si on veut ajouter un marge bottom des legendes
					// Chart.Legend.prototype.afterFit = function() {
					//     this.height = this.height + 150;

					// };
					var myChart2 = new Chart(ctx2, config2);
					// pour dire qu'on va utiliser notre propre légende html fenitra
					document.getElementById('chart-legends_ca').innerHTML = myChart2.generateLegend();


					// legende 2

					var ev_click2 = false;
					var tab_temp2 = [];
					for (var i = 0; i < myChart2.data.datasets[0].data.length; i++) { // myChart2.data.datasets[0].data[i]= -10;
					tab_temp2[i] = myChart2.data.datasets[0].data[i];
					}
					$("#chart-legends_ca").on('click', "li span[data_leg=0]", function () {

					if (ev_click2 == false) {
					$(".ul_2 li span[data_leg=0]").addClass("legende_click");
					for (var i = 0; i < myChart2.data.datasets[0].data.length; i++) {
					myChart2.data.datasets[0].data[i] = -10;
					}
					myChart2.update();
					ev_click2 = ! ev_click2;
					// alert(ev_click2) ;
					} else {
					$(".ul_2 li span[data_leg=0]").removeClass("legende_click");
					for (var i = 0; i < myChart2.data.datasets[0].data.length; i++) {
					myChart2.data.datasets[0].data[i] = tab_temp2[i];
					}
					myChart2.update();
					ev_click2 = ! ev_click2;
					// alert(ev_click2) ;
					}
					});

					// fin legende 2


					return myChart2;
					}


					// responsive pour les chart

					function add_resp_heb(myChart1, myChart2) {
						myChart1.options.scales.yAxes[0].ticks.fontSize = 7;
						myChart1.options.scales.yAxes[0].ticks.padding = 10;
						myChart1.options.scales.yAxes[0].ticks.stepSize = 20;
						myChart1.options.scales.xAxes[0].ticks.stepSize = 0;
						myChart1.options.scales.xAxes[0].ticks.fontSize = 8;

						myChart2.options.scales.yAxes[0].ticks.fontSize = 7;
						myChart2.options.scales.yAxes[0].ticks.padding = 10;
						myChart2.options.scales.yAxes[0].ticks.stepSize = 20;
						myChart2.options.scales.xAxes[0].ticks.stepSize = 0;
						myChart2.options.scales.xAxes[0].ticks.fontSize = 8;
						for (var i = myChart1.data.datasets.length - 1; i >= 0; i--) {
							myChart1.data.datasets[i].radius = '3';
						}
						myChart1.update();
						myChart2.options.scales.yAxes[0].ticks.fontSize = 7;
						myChart2.options.scales.xAxes[0].ticks.fontSize = 7;
						for (var i = myChart2.data.datasets.length - 1; i >= 0; i--) {
							myChart2.data.datasets[i].radius = '3';
						}
						myChart2.update();
					}

					// tracer
					var my_data_to = [
						{% for t in tab_heb_to %}
							{{ t }},
						{% endfor %}
					];

					var my_data_ca = [
						{% for tca in tab_heb_ca %}
							{{ tca }} ,
						{% endfor %}];

					var my_labels = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"];

					var w = $(window).width();
					var myChart1 = 0;
					var myChart2 = 0;
					if (w <= 768) {
						var myChart1 = draw_chart1(my_data_to, my_labels);
						var myChart2 = draw_chart2(my_data_ca, my_labels);
						add_resp_heb(myChart1, myChart2);
						
					} else {
						var myChart1 = draw_chart1(my_data_to, my_labels);
						var myChart2 = draw_chart2(my_data_ca, my_labels);
								
					}
					
					//console.log(myChart1);
					
					/* ajax pour loader le graph */

					/* debut dataTable */

						var pseudo_hotel = "{{ hotel }}" ;
						//alert(pseudo_hotel);
						var table = $('#tab_client_heb').DataTable({
									"language": {
										"sEmptyTable": "Aucune donnée disponible dans le tableau",
										"sInfo": "Affichage de l'élément _START_ à _END_ sur _TOTAL_ éléments",
										"sInfoEmpty": "Affichage de l'élément 0 à 0 sur 0 élément",
										"sInfoFiltered": "(filtré à partir de _MAX_ éléments au total)",
										"sInfoPostFix": "",
										"sInfoThousands": ",",
										"sLengthMenu": "Afficher _MENU_ éléments",
										"sLoadingRecords": "Chargement...",
										"sProcessing": "Traitement...",
										"sSearch": "Rechercher :",
										"sZeroRecords": "Aucun élément correspondant trouvé",
										"oPaginate": {
											"sFirst": "Premier",
											"sLast": "Dernier",
											"sNext": "Suivant",
											"sPrevious": "Précédent"
										},
										"oAria": {
											"sSortAscending": ": activer pour trier la colonne par ordre croissant",
											"sSortDescending": ": activer pour trier la colonne par ordre décroissant"
										},
										"select": {
											"rows": {
													"_": "%d lignes sélectionnées",
													"0": "Aucune ligne sélectionnée",
													"1": "1 ligne sélectionnée"
											}
										}
									},
	
									"ajax" : {
										url : "/profile/select_current_client", // any am Clientcontroller
										type : 'POST', 
										data : {'pseudo_hotel' : pseudo_hotel},
										// success : function(response){
										//     alert("nety");
										// }, 
										// error : function(){
										//     alert('erreur server');
										// },
										"dataSrc":"",
										
									},
	
									//annule le tri
									order : [[0 , 'asc']],
									ordering : false,
	
									responsive: true,
									scrollY: false, // raha scrollena de asina val ex 400
									scrollX: true,
									scrollCollapse: true,
									paging: true,
									autoFill: true
							});
	
								new $.fn.dataTable.FixedHeader(table);
	
							/*  fiun table */

					/* fin datatable */
					// suppression client présent 

					$(document).on('click', ".btn_client_suppr", function(ev){
						//ev.preventDefault();
						var id = $(this).attr('data-id');
						//alert(id);
						$('#div__conf button.supprimer').attr('data-id', id);
					})

					$('#div__conf button.supprimer').on('click', function(){
						var id = $(this).attr('data-id');
						//alert(id);
						// ajax
						$.ajax({
							url : "/admin/suprimer_client",
							data : {
								"client_id" : id,
								"pseudo_hotel" : pseudo_hotel,
							},
							type : "POST",
							success : function(response){
								if(response == "deleted"){
									table.ajax.reload(null, false);
								}
							},
							error : function(error){
								alert('erreur de server');
							},
						})
					})

					/* fin suppression client*/

					/* debut modif client */

					$(document).on('click', '.btn_client_modif', function(ev){
						ev.preventDefault();
						var id = $(this).attr('data-id');
						//alert(id);
						$.ajax({
							url : "/admin/check_client",
							data : {
								"client_id" : id,
							},
							type : "POST",
							
							success : function(response){
								$('.modal_modif_client').html(response);
								$('#modal_form').modal('show');
							},
							error : function(error){
								alert('erreur de server');
							},
						})
					})

					$(document).on('click', '#a_modal_modif_client', function(ev){
						ev.preventDefault();
						var id = $(this).attr("data-id");
						var nom = $('#modif_nom_client').val();
						var prenom = $('#modif_prenom_client').val();
						var date_arrivee = $('#modif_date_arrivee').val();
						var date_depart = $('#modif_date_depart').val();
						//alert(id+"/"+nom+"/"+date_depart+"/"+date_arrivee+"/"+prenom);
						// ajax
						$.ajax({
							url : "/admin/edit_client",
							data : {
								"id" : id,
								"nom" : nom,
								"prenom" : prenom,
								"date_arrivee" : date_arrivee,
								"date_depart" : date_depart,
							},
							type : "POST",
							beforeSend : function(){
							$('#a_modal_modif_client').html('<span>Patienter...</span>'); 
							},
							success : function(response){
								if(response == "ok"){
									table.ajax.reload(null, false);
									$('#modal_form').modal('hide');
								}
							},
							error : function(error){
								alert('erreur de server');
							},
							complete : function(){
								$('#a_modal_modif_client').html('<span>Enregistrer</span>'); 
							},
						})
					})


					// triage chart heb_to
					$('#mois_heb_to').on('change', function(){
						//alert('io')
						var mois = $('#mois_heb_to').val();
						var annee = $('#annee_heb_to').val();
						var data = {'data' : mois+"-"+annee};
						$.ajax({
							url : "/admin/filtre/graph/heb_to/"+pseudo_hotel,
							type : "POST",
							data : data,
							success : function(response){
								if(response){
									//console.log(response);
									if(mois != 'tous_les_mois'){
										var my_data = response;

										var my_labels = ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31"];

										var w = $(window).width();
										if (w <= 768) {
											
											var myChart1 = draw_chart1(my_data, my_labels);
											myChart1.update();
											//add_resp_heb(myChart1, myChart2);
										} else {
											
											var myChart1 = draw_chart1(my_data, my_labels);
											myChart1.update();
											
											
										}
									}
									else{
										var my_data = response;
										var my_labels = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"];
										var w = $(window).width();
										if (w <= 768) {
											
											var myChart1 = draw_chart1(my_data, my_labels);
											myChart1.update();
											//add_resp_heb(myChart1, myChart2);
										} else {
											
											var myChart1 = draw_chart1(my_data, my_labels);
											myChart1.update();
											
											
										}
									}
								}
							}, 
							error : function(error){
								alert('erreur server au niveau de triage chart heb_to '+pseudo_hotel)
							}
						})
					})

					$('#annee_heb_to').on('change', function(){
						//alert('io')
						var mois = $('#mois_heb_to').val();
						var annee = $('#annee_heb_to').val();
						var data = {'data' : mois+"-"+annee};
						$.ajax({
							url : "/admin/filtre/graph/heb_to/"+pseudo_hotel,
							type : "POST",
							data : data,
							success : function(response){
								if(response){
									//console.log(response);
									if(mois != 'tous_les_mois'){
										var my_data = response;

										var my_labels = ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31"];

										var w = $(window).width();
										if (w <= 768) {
											
											var myChart1 = draw_chart1(my_data, my_labels);
											myChart1.update();
											
											//add_resp_heb(myChart1, myChart2);
										} else {
											
											var myChart1 = draw_chart1(my_data, my_labels);
											myChart1.update();
											
											
										}
									}
									else{
										var my_data = response;
										var my_labels = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"];
										var w = $(window).width();
										if (w <= 768) {
											
											var myChart1 = draw_chart1(my_data, my_labels);
											myChart1.update();
											
											//add_resp_heb(myChart1, myChart2);
										} else {
											
											var myChart1 = draw_chart1(my_data, my_labels);
											myChart1.update();
											
											
										}
									}
								}
							}, 
							error : function(error){
								alert('erreur server au niveau de triage chart heb_to '+pseudo_hotel)
							}
						})
					})

					// triage chart heb_ca
					$('#mois_heb_ca').on('change', function(){
						//alert('io')
						var mois = $('#mois_heb_ca').val();
						var annee = $('#annee_heb_ca').val();
						var data = {'data' : mois+"-"+annee};
						$.ajax({
							url : "/admin/filtre/graph/heb_ca/"+pseudo_hotel,
							type : "POST",
							data : data,
							success : function(response){
								if(response){
									//console.log(response);
									if(mois != 'tous_les_mois'){
										var my_data = response;
										console.log(my_data);
										var my_labels = ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31"];

										var w = $(window).width();
										if (w <= 768) {
											var myChart2 = draw_chart2(my_data, my_labels);
											myChart2.update();
											//add_resp_heb(myChart1, myChart2);
										} else {
											var myChart2 = draw_chart2(my_data, my_labels);
											myChart2.update();
											//add_resp_heb(myChart1, myChart2);
											
										}
									}
									else{
										var my_data = response;
										console.log(my_data);
										var my_labels = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"];
										var w = $(window).width();
										if (w <= 768) {
											var myChart2 = draw_chart2(my_data, my_labels);
											myChart2.update();
											//add_resp_heb(myChart1, myChart2);
										} else {
											var myChart2 = draw_chart2(my_data, my_labels);
											myChart2.update();
											//add_resp_heb(myChart1, myChart2);
											
										}
									}
								}
							}, 
							error : function(error){
								alert('erreur server au niveau de triage chart heb_to '+pseudo_hotel)
							}
						})
					})

					$('#annee_heb_ca').on('change', function(){
						//alert('io')
						var mois = $('#mois_heb_ca').val();
						var annee = $('#annee_heb_ca').val();
						var data = {'data' : mois+"-"+annee};
						//alert(data.data);
						$.ajax({
							url : "/admin/filtre/graph/heb_ca/"+pseudo_hotel,
							type : "POST",
							data : data,
							success : function(response){
								
								if(response){
									//console.log(response);
									if(mois != 'tous_les_mois'){

										var my_data = response;
										//console.log(my_data);
										var my_labels = ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31"];

										var w = $(window).width();
										if (w <= 768) {
											var myChart2 = draw_chart2(my_data, my_labels);
											myChart2.update();
											//add_resp_heb(myChart1, myChart2);
										} else {
											var myChart2 = draw_chart2(my_data, my_labels);
											myChart2.update();
											//add_resp_heb(myChart1, myChart2);
											
										}
									}
									else{
										var my_data = response;
										//console.log(my_data);
										var my_labels = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"];
										var w = $(window).width();
										if (w <= 768) {
											var myChart2 = draw_chart2(my_data, my_labels);
											myChart2.update();
											//add_resp_heb(myChart1, myChart2);
										} else {
											var myChart2 = draw_chart2(my_data, my_labels);
											myChart2.update();
											//add_resp_heb(myChart1, myChart2);
											
										}
									}
								}
							}, 
							error : function(error){
								alert('erreur server au niveau de triage chart heb_ca '+pseudo_hotel)
							}
						})
					})


				})
			</script>



	{% endblock %}