{% extends "base.html.twig" %}
{% block title %}
	Restaurant
{% 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>Restaurant
							</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</h4>
							</div>
							<form action="" class="tri">
								<select name="" id="mois_res_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_res_ca">
									{% for a in tab_annee %}
										<option value="{{ a }}">{{ a }}</option>
									{% endfor %}
								</select>
							</form>
						</div>
						<div>
							<canvas id="canvas_nc"></canvas>
						</div>
						<div id="chart-legends_nc"></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 de couvert</h4>
							</div>
							<form action="" class="tri">
								<select name="" id="mois_res_couvert">
									<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_res_couvert">
									{% for a in tab_annee %}
										<option value="{{ a }}">{{ a }}</option>
									{% endfor %}
								</select>
							</form>
						</div>
						<div>
							<canvas id="canvas_car"></canvas>
						</div>
						<div id="chart-legends_car"></div>


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

				</div>


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

{% endblock %}

{% block javascripts %}
    <script>
        $(document).ready(function () {
                    function draw_chart1(my_data, my_labels) {

                        var ctx1 = document.getElementById('canvas_nc').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: "Chiffre d'affaire",
                                        fill: true,
                                        backgroundColor: gradientfill_1,
                                        borderColor: "#d29e00",

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

                                        data: my_data,

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

                                        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
                                                    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_nc').innerHTML = myChart1.generateLegend();

                        // legende 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_nc").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 legende 1


                        // fin chart 1

                        return myChart1;
                    }


                    // debut chart  2


                    function draw_chart2(my_data_pd, my_data_d, my_data_di, my_data_t, my_labels) {

                        var ctx2 = document.getElementById('canvas_car').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 gradientfill_3 = ctx2.createLinearGradient(0, 0, 0, 350);
                        gradientfill_3.addColorStop(0, '#3bc40a');
                        gradientfill_3.addColorStop(1, 'transparent');


                        var gradientfill_4 = ctx2.createLinearGradient(0, 0, 0, 350);
                        gradientfill_4.addColorStop(0, '#6e6e6e');
                        gradientfill_4.addColorStop(1, 'transparent');

                        var config2 = {
                            type: 'line',
                            data: {
                                datasets: [
                                {
                                    label: "Petit déjeuner",
                                    fill: true,
                                    backgroundColor: gradientfill_1,
                                    borderColor: "#d29e00",

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

                                    data: my_data_pd,

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

                                        pointStyle: 'circle',
                                        pointBackgroundColor: "transparent",
                                        pointBorderWidth: '2',
                                        radius: '5',
                                        hoverRadius: '5',
                                        borderWidth: 2

                                    }, 
                                    {
                                        label: "Déjeuner",
                                        fill: true,
                                        backgroundColor: gradientfill_2,
                                        borderColor: "#55d8ff",

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

                                        data: my_data_d,

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

                                            pointStyle: 'circle',
                                            pointBackgroundColor: "transparent",
                                            pointBorderWidth: '2',
                                            radius: '5',
                                            hoverRadius: '5',
                                            borderWidth: 2
                                        }, 
                                        {
                                            label: "Dinner",
                                            fill: true,
                                            backgroundColor: gradientfill_3,
                                            borderColor: "#3bc40a",

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

                                            data: my_data_di,

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

                                                pointStyle: 'circle',
                                                pointBackgroundColor: "transparent",
                                                pointBorderWidth: '2',
                                                radius: '5',
                                                hoverRadius: '5',
                                                borderWidth: 2
                                            }, 
                                            {
                                                label: "Total",
                                                fill: true,
                                                backgroundColor: gradientfill_4,
                                                borderColor: "#6e6e6e",

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

                                                data: my_data_t,

                                            /* / 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: 300,
                                                stepSize : 50,
                                                callback: function (value) {
                                                    return value + " Couverts"
                                                }
                                            },
                                            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_car').innerHTML = myChart2.generateLegend();

                    // legende 1

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

                        if (ev_click == 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_click = ! ev_click;
                            // alert(ev_click) ;
                        } 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_temp[i];
                            }
                            myChart2.update();
                            ev_click = ! ev_click;
                            // alert(ev_click) ;
                        }
                    });

                    // fin legende 1

                    // legende 2

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

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

                    // fin legende 2

                    // legende 3

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

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

                    // fin legende 3

                    // legende 4

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

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

                    // fin legende 4


                    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
                    // tracer
					var my_data_ca = [
						{% for t in tab_res_ca %}
							{{ t }},
						{% endfor %}
					];

                    var my_data_pd = [
                        {% for t in tab_res_pd %}
							{{ t }},
						{% endfor %}
                    ]

                    var my_data_d = [
                        {% for t in tab_res_d %}
							{{ t }},
						{% endfor %}
                    ]

                    var my_data_di = [
                        {% for t in tab_res_di %}
							{{ t }},
						{% endfor %}
                    ]

                    var my_data_total = [
                        {% for t in tab_res_total %}
							{{ 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_ca, my_labels);
                        var myChart2 = draw_chart2(my_data_pd, my_data_d, my_data_di, my_data_total, my_labels);
                        add_resp_heb(myChart1, myChart2);
                    } else {
                        var myChart1 = draw_chart1(my_data_ca, my_labels);
                        var myChart2 = draw_chart2(my_data_pd, my_data_d, my_data_di, my_data_total, my_labels);
                    }
                
                /* tri graph res  */

                // triage chart res_ca
                    var pseudo_hotel = "{{ hotel }}" ;

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

					$('#annee_res_ca').on('change', function(){
						//alert('io')
						var mois = $('#mois_res_ca').val();
						var annee = $('#annee_res_ca').val();
						var data = {'data' : mois+"-"+annee};
						//alert(data.data);
						$.ajax({
							url : "/admin/filtre/graph/res_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);
											myChart1.update();
											//add_resp_heb(myChart1, myChart1);
										} else {
											var myChart1 = draw_chart1(my_data, my_labels);
											myChart1.update();
											//add_resp_heb(myChart1, myChart1);
											
										}
									}
									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);
											myChart1.update();
											//add_resp_heb(myChart1, myChart1);
										} else {
											var myChart1 = draw_chart1(my_data, my_labels);
											myChart1.update();
											//add_resp_heb(myChart1, myChart1);
											
										}
									}
								}
							}, 
							error : function(error){
								alert('erreur server au niveau de triage chart res_ca annee'+pseudo_hotel)
							}
						})
                    })
                    
                        /*  couverts */
	
						$('#mois_res_couvert').on('change', function(){
							//alert('io')
							var mois = $('#mois_res_couvert').val();
							var annee = $('#annee_res_couvert').val();
	                        var data = {'data' : mois+"-"+annee};
	                        //alert(data.data);
							$.ajax({
								url : "/admin/filtre/graph/res_couvert/"+pseudo_hotel,
								type : "POST",
								data : data,
								success : function(response){
									if(response){
									    console.log(response);
										if(mois != 'tous_les_mois'){
	
											var my_data_pd = response[0];
                                            var my_data_d = response[1];
                                            var my_data_di = response[2];
                                            var my_data_total = response[3];
											//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_pd, my_data_d, my_data_di, my_data_total, my_labels);
                                                myChart2.update();
                                            } else {
 
                                                var myChart2 = draw_chart2(my_data_pd, my_data_d, my_data_di, my_data_total, my_labels);
                                                myChart2.update();
                                            }
										}
										else{
											var my_data_pd = response[0];
                                            var my_data_d = response[1];
                                            var my_data_di = response[2];
                                            var my_data_total = response[3];
											//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_pd, my_data_d, my_data_di, my_data_total, my_labels);
                                                myChart2.update();
                                            } else {
 
                                                var myChart2 = draw_chart2(my_data_pd, my_data_d, my_data_di, my_data_total, my_labels);
                                                myChart2.update();
                                            }
										}
									}
								}, 
								error : function(error){
									alert('erreur server au niveau de triage chart res_couvert mois '+pseudo_hotel)
								}
							})
						})
	
						$('#annee_res_couvert').on('change', function(){
							//alert('io')
							var mois = $('#mois_res_couvert').val();
							var annee = $('#annee_res_couvert').val();
	                        var data = {'data' : mois+"-"+annee};
	                        //alert(data.data);
							$.ajax({
								url : "/admin/filtre/graph/res_couvert/"+pseudo_hotel,
								type : "POST",
								data : data,
								success : function(response){
									if(response){
									    console.log(response);
										if(mois != 'tous_les_mois'){
	
											var my_data_pd = response[0];
                                            var my_data_d = response[1];
                                            var my_data_di = response[2];
                                            var my_data_total = response[3];
											//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_pd, my_data_d, my_data_di, my_data_total, my_labels);
                                                myChart2.update();
                                            } else {
 
                                                var myChart2 = draw_chart2(my_data_pd, my_data_d, my_data_di, my_data_total, my_labels);
                                                myChart2.update();
                                            }
										}
										else{
											var my_data_pd = response[0];
                                            var my_data_d = response[1];
                                            var my_data_di = response[2];
                                            var my_data_total = response[3];
											//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_pd, my_data_d, my_data_di, my_data_total, my_labels);
                                                myChart2.update();
                                            } else {
 
                                                var myChart2 = draw_chart2(my_data_pd, my_data_d, my_data_di, my_data_total, my_labels);
                                                myChart2.update();
                                            }
										}
									}
								}, 
								error : function(error){
									alert('erreur server au niveau de triage chart res_couvert mois '+pseudo_hotel)
								}
							})
						})


        })
	</script>


{% endblock %}