{% extends "base.html.twig" %}
{% block title %}
	Spa
{% 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 nouveau client -->
	<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>Spa
						</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" id="div__1">
							<h4>Chiffre d'affaire Spa
							</h4>
						</div>
						<form action="" class="tri">
							<select name="" id="mois_spa_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_spa_ca">
								{% for a in tab_annee %}
									<option value="{{ a }}">{{ a }}</option>
								{% endfor %}
							</select>
						</form>
					</div>
					<div>
						<canvas id="canvas_cas"></canvas>
					</div>
					<div id="chart-legends_cas"></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" id="div__3">
							<h4>Nombre d'abonné</h4>
						</div>
						<form action="" class="tri">
							<select name="" id="mois_spa_na">
								<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_spa_na">
								{% for a in tab_annee %}
									<option value="{{ a }}">{{ a }}</option>
								{% endfor %}
							</select>
						</form>
					</div>
					<div>
						<canvas id="canvas_na"></canvas>
					</div>
					<div id="chart-legends_na"></div>

				</section>
				<!-- fin chart2  -->

				<!-- debut chart 3 -->

				<section class="section_part tab_content margin_tab">
					<div class="chart_title">
						<div class="chart_title-part" id="div__5">
							<h4>Client Unique</h4>
						</div>
						<form action="" class="tri">
							<select name="" id="mois_spa_cu">
								<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_spa_cu">
								{% for a in tab_annee %}
									<option value="{{ a }}">{{ a }}</option>
								{% endfor %}
							</select>
						</form>
					</div>
					<div>
						<canvas id="canvas_cu"></canvas>
					</div>
					<div id="chart-legends_cu"></div>

				</section>
				<!-- fin chart 3  -->
			</div>


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


{% endblock %}

{% block javascripts %}
    
    <script>
         $(document).ready(function () {
            var ctx1 = document.getElementById('canvas_cas').getContext("2d");

            function draw_chart1(my_data, my_labels) {


            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: "Chiffre d'affaire",
                                fill: true,
                                backgroundColor: gradientfill_1,
                                borderColor: "#d29e00",

                                /* 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_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',

                                /* 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
                                margin: 0,
                                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 myChart1 = new Chart(ctx1, config1);
                // pour dire qu'on va utiliser notre propre légende html fenitra
                document.getElementById('chart-legends_cas').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_cas").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
            var ctx2 = document.getElementById('canvas_na').getContext("2d");

            function draw_chart2(my_data, my_labels) {


            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: "Nombre d'abonné",
                                            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 = "x' + 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: 500,
                                                    stepSize: 50,
                                                    callback: function (value) {
                                                        return value + " Abonnés"
                                                    }
                                                },
                                                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_na').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_na").on('click', "li span[data_leg=x0]", function () {

                            if (ev_click2 == false) {
                                $(".ul_2 li span[data_leg=x0]").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=x0]").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;
                }
                // fin chart 2

                var ctx3 = document.getElementById('canvas_cu').getContext("2d");

                function draw_chart3(my_data, my_labels) {

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

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

                    var config3 = {
                        type: 'line',
                            data: {
                                    datasets: [
                                            {
                                            label: "Client unique",
                                            fill: true,
                                            backgroundColor: gradientfill_1,
                                            borderColor: "#d29e00",

                                                /* 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_3">');
                                    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 = "d' + i + '" class="" 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: 500,
                                                stepSize: 50,
                                                callback: function (value) {
                                                    return value + " Clients";
                                                }
                                            },
                                            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 myChart3 = new Chart(ctx3, config3);
                    // pour dire qu'on va utiliser notre propre légende html fenitra
                    document.getElementById('chart-legends_cu').innerHTML = myChart3.generateLegend();

                    // legende 1

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

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

                    // fin legende 1


                    return myChart3;
                }

                // responsive pour les chart

                function add_resp_heb(myChart1, myChart2, myChart3) {
                    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;

                    myChart3.options.scales.yAxes[0].ticks.fontSize = 7;
                    myChart3.options.scales.yAxes[0].ticks.padding = 10;
                    myChart3.options.scales.yAxes[0].ticks.stepSize = 20;
                    myChart3.options.scales.xAxes[0].ticks.stepSize = 0;
                    myChart3.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();

                    myChart3.options.scales.yAxes[0].ticks.fontSize = 7;
                    myChart3.options.scales.xAxes[0].ticks.fontSize = 7;
                    for (var i = myChart3.data.datasets.length - 1; i >= 0; i--) {
                        myChart3.data.datasets[i].radius = '3';
                    }
                        myChart3.update();
                }

                // draw chart

                var my_data_spa_ca = [
                    {% for t in tab_spa_ca %}
                        {{ t }},
                    {% endfor %}
                ];

                var my_data_spa_na = [
                    {% for t in tab_spa_na %}
                        {{ t }},
                    {% endfor %}
                ];

                var my_data_spa_cu = [
                    {% for t in tab_spa_cu %}
                        {{ t }},
                    {% endfor %}
                ];

                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_spa_ca, my_labels);
                    var myChart2 = draw_chart2(my_data_spa_na, my_labels);
                    var myChart3 = draw_chart3(my_data_spa_cu, my_labels);
                    add_resp_heb(myChart1, myChart2, myChart3);
                } else {
                     var myChart1 = draw_chart1(my_data_spa_ca, my_labels);
                    var myChart2 = draw_chart2(my_data_spa_na, my_labels);
                    var myChart3 = draw_chart3(my_data_spa_cu, my_labels);
                }

                // triage chart heb_ca
					$('#mois_spa_ca').on('change', function(){
						//alert('io')
						var mois = $('#mois_spa_ca').val();
						var annee = $('#annee_spa_ca').val();
						var data = {'data' : mois+"-"+annee};
						$.ajax({
							url : "/admin/filtre/graph/spa_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 myChart1 = draw_chart1(my_data, my_labels);
											myChart2.update();
											//add_resp_heb(myChart1, myChart2);
										} else {
											var myChart1 = draw_chart1(my_data, my_labels);
											myChart1.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 myChart1 = draw_chart1(my_data, my_labels);
											myChart2.update();
											//add_resp_heb(myChart1, myChart2);
										} else {
											var myChart2 = draw_chart1(my_data, my_labels);
											myChart1.update();
											//add_resp_heb(myChart1, myChart2);
											
										}
									}
								}
							}, 
							error : function(error){
								alert('erreur server au niveau de triage chart heb_to '+pseudo_hotel)
							}
						})
					})

					$('#annee_spa_ca').on('change', function(){
						//alert('io')
						var mois = $('#mois_spa_ca').val();
						var annee = $('#annee_spa_ca').val();
						var data = {'data' : mois+"-"+annee};
						//alert(data.data);
						$.ajax({
							url : "/admin/filtre/graph/spa_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 myChart1 = draw_chart1(my_data, my_labels);
											myChart2.update();
											//add_resp_heb(myChart1, myChart2);
										} else {
											var myChart1 = draw_chart1(my_data, my_labels);
											myChart1.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 myChart1 = draw_chart1(my_data, my_labels);
											myChart2.update();
											//add_resp_heb(myChart1, myChart2);
										} else {
											var myChart2 = draw_chart1(my_data, my_labels);
											myChart1.update();
											//add_resp_heb(myChart1, myChart2);
											
										}
									}
								}
							}, 
							error : function(error){
								alert('erreur server au niveau de triage chart spa_ca '+pseudo_hotel)
							}
						})
					})



                // triage chart spa_na
                    var pseudo_hotel = "{{ hotel }}";
					$('#mois_spa_na').on('change', function(){
						//alert('io')
						var mois = $('#mois_spa_na').val();
						var annee = $('#annee_spa_na').val();
						var data = {'data' : mois+"-"+annee};
                       // alert(data.data);
						$.ajax({
							url : "/admin/filtre/graph/spa_na/"+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 myChart2 = draw_chart2(my_data, my_labels);
											myChart2.update();
											
										} else {
											var myChart2 = draw_chart2(my_data, my_labels);
											myChart2.update();
											
											
										}
									}
									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);
											myChart3.update();
											//add_resp_heb(myChart1, myChart2);
										} else {
											var myChart2 = draw_chart2(my_data, my_labels);
											myChart2.update();
										
										}
									}
								}
							}, 
							error : function(error){
								alert('erreur server au niveau de triage chart spa_cu '+pseudo_hotel)
							}
						})
					})

					$('#annee_spa_na').on('change', function(){
						//alert('io')
						var mois = $('#mois_spa_na').val();
						var annee = $('#annee_spa_na').val();
						var data = {'data' : mois+"-"+annee};
						$.ajax({
							url : "/admin/filtre/graph/spa_na/"+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 myChart2 = draw_chart2(my_data, my_labels);
											myChart2.update();
											
										} else {
											var myChart2 = draw_chart2(my_data, my_labels);
											myChart2.update();
											
											
										}
									}
									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);
											myChart3.update();
											//add_resp_heb(myChart1, myChart2);
										} else {
											var myChart2 = draw_chart2(my_data, my_labels);
											myChart2.update();
										
										}
									}
								}
							}, 
							error : function(error){
								alert('erreur server au niveau de triage chart spa_na '+pseudo_hotel)
							}
						})
					})




                // triage chart spa_cu
                    var pseudo_hotel = "{{ hotel }}";
					$('#mois_spa_cu').on('change', function(){
						//alert('io')
						var mois = $('#mois_spa_cu').val();
						var annee = $('#annee_spa_cu').val();
						var data = {'data' : mois+"-"+annee};
                       // alert(data.data);
						$.ajax({
							url : "/admin/filtre/graph/spa_cu/"+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 myChart3 = draw_chart3(my_data, my_labels);
											myChart3.update();
											
										} else {
											var myChart3 = draw_chart3(my_data, my_labels);
											myChart3.update();
											
											
										}
									}
									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 myChart3 = draw_chart3(my_data, my_labels);
											myChart3.update();
											//add_resp_heb(myChart1, myChart2);
										} else {
											var myChart3 = draw_chart3(my_data, my_labels);
											myChart3.update();
										
										}
									}
								}
							}, 
							error : function(error){
								alert('erreur server au niveau de triage chart spa_cu '+pseudo_hotel)
							}
						})
					})

					$('#annee_spa_cu').on('change', function(){
						//alert('io')
						var mois = $('#mois_spa_cu').val();
						var annee = $('#annee_spa_cu').val();
						var data = {'data' : mois+"-"+annee};
						$.ajax({
							url : "/admin/filtre/graph/spa_cu/"+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 myChart3 = draw_chart3(my_data, my_labels);
											myChart3.update();
											
										} else {
											var myChart3 = draw_chart3(my_data, my_labels);
											myChart3.update();
											
											
										}
									}
									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 myChart3 = draw_chart3(my_data, my_labels);
											myChart3.update();
											//add_resp_heb(myChart1, myChart2);
										} else {
											var myChart3 = draw_chart3(my_data, my_labels);
											myChart3.update();
										
										}
									}
								}
							}, 
							error : function(error){
								alert('erreur server au niveau de triage chart spa_cu '+pseudo_hotel)
							}
						})
					})

    })




    </script>


{% endblock %}