{% extends 'patient/base.html' %}
{% load static %}

{% block profile.image %}
<div class="col-lg-1 col-md-1 col-sm-0 col-xs-0">
    <div class="logo-area">
        <a href="{% url 'patient-image-crop' %}"><img class="img-circle" src="{% static '' %}{{ user.profile.image_address }}" alt="" /></a>
    </div>
</div>
{% endblock %}


{% block content %}

    <!-- End Header Top Area -->
	<div><br></div>
    <!-- Breadcomb area Start-->
	<div class="breadcomb-area">
		<div class="container">
			<div class="row">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="breadcomb-list">
						<div class="row">
							<div class="col-lg-6 col-md-6 col-sm-6 col-xs-3">
								<div class="breadcomb-report">
{#									<button data-toggle="tooltip" data-placement="left" title="Download Report" class="btn"><i class="notika-icon notika-sent"></i></button>#}
								</div>
							</div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
								<div class="breadcomb-wp">
									<div class="breadcomb-ctn">
										<h2 class="text-right">آنالیز اطلاعات بیمار</h2>
										<p dir="rtl">{{ user.profile.first_name }} عزیز خوش آمدید؛ <span class="bread-ntd" dir="rtl"> در این قسمت می توانید خلاصه عملکرد خود را در ماه اخیر مشاهده کنید و در صورت تمایل پرونده خود را با پزشک به اشتراک بگذارید و ...</span></p>
										<p dir="rtl"><span>پزشک شما آقای/خانم دکتر </span><span>{{ user.profile.doctor.first_name }}</span> <span>{{ user.profile.doctor.last_name }}</span><span> می باشد؛</span>   </p>
									</div>
                                    <div class="breadcomb-icon" style="margin-left: 30px;">
										<i class="notika-icon notika-house"></i>
									</div>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- Breadcomb area End-->

    <!-- Start Status area -->
    <div class="visitor-sv-tm-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
                    <div class="visitor-sv-tm-int">
                        <div class="contact-hd mg-bt-ant-inner">
                            <p style="align-content: right">تعداد هایپو در 30 روز اخیر</p>
                            <h2 class="text-center">{{ total_hypo }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
                    <div class="visitor-sv-tm-int">
                        <div class="contact-hd mg-bt-ant-inner">
                            <p style="align-content: right">تعداد هایپر در 30 روز اخیر</p>
                            <h2 class="text-center">{{ total_hyper }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <div class="visitor-sv-tm-int">
                        <div class="contact-hd mg-bt-ant-inner">
                            <p style="align-content: right">انسولین کوتاه اثر</p>
                            <h5 dir="rtl" class="text-center">{{ user.profile.insulin_short_effect.name }}</h5>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <div class="visitor-sv-tm-int">
                        <div class="contact-hd mg-bt-ant-inner">
                            <p style="align-content: right">انسولین بلند اثر</p>
                            <h5 dir="rtl" class="text-center">{{ user.profile.insulin_long_effect.name }}</h5>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
                    <div class="visitor-sv-tm-int">
                        <div class="contact-hd mg-bt-ant-inner">
                            <p style="align-content: right">نوع درمان</p>
                            <h6 dir="rtl" class="text-center">{{ type_of_treatment }}</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><br>
    <!-- End Status area -->


    <!-- Server time start-->
    <div class="visitor-sv-tm-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                    <div class="visitor-sv-tm-int">
                        <div class="contact-hd mg-bt-ant-inner">
                            <h2 style="font-family: IranSens">نمودار عملکرد</h2>
                            <p>امتیاز هر روز شما بیانگر عملکرد شما در آن روز می باشد، در این نمودار نحوه عملکرد خود در 30 روز اخیر را مشاهده می کنید</p>
                        </div>
                        <div class="visitor-sv-tm-ch">
                            <div id="chart-total-points" class="flot-chart"></div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                    <div class="visitor-sv-tm-int">
                        <div class="contact-hd mg-bt-ant-inner">
                            <h2>قند خون قبل غذا</h2>
                            <p>در این نمودار میانگین قند خون قبل از وعده های غذایی در 30 روز اخیر را مشاهده می کنید</p>
                        <br>
                        </div>
                        <div class="visitor-sv-tm-ch">
                            <div id="chart-sugar-before-food" class="flot-chart"></div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                    <div class="visitor-sv-tm-int">
                        <div class="contact-hd mg-bt-ant-inner">
                            <h2>قند خون بعد غذا</h2>
                            <p>در این نمودار میانگین قند خون بعد از وعده های غذایی در 30 روز اخیر را مشاهده می کنید</p>
                            <br>
                        </div>
                        <div class="visitor-sv-tm-ch">
                            <div id="chart-sugar-after-food" class="flot-chart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- row 2 -->
    <div><br></div>
    <div class="visitor-sv-tm-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="visitor-sv-tm-int sm-res-mg-t-30 tb-res-mg-t-30 tb-res-ds-n dk-res-ds">
                    <div class="contact-hd mg-bt-ant-inner">
                        <h2 class="text-center">میانگین قند خون و میزان تزریق انسولین</h2>
                        <p class="text-center">در این نمودار ستون های آبی و قرمز رنگ، به ترتیب نشان دهنده میانگین قند خون، قبل و بعد از مصرف غذا و تزریق انسولین، برای 30 روز اخیر است. همچنین ستون های سبز رنگ مجموع انسولین مصرفی هر روز را نشان می دهد.</p>
                    </div>
                    <div class="flot-chart-wp mg-t-30">
                        <div id="bar-chart" class="flot-chart flot-chr-pro"></div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
    <div><br></div>
    <!-- row 3 -->
    <div class="visitor-sv-tm-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
                    <div class="visitor-sv-tm-int sm-res-mg-t-30 tb-res-mg-t-30 tb-res-ds-n dk-res-ds">
                        <div class="contact-hd mg-bt-ant-inner">
                            <h2>کربوهیدات</h2>
                            <p>در این قسمت میزان کربوهیدات مورد نیاز و کربوهیدات مصرف شده برای 30 روز اخیر را مشاهده می کنید. نمودار سبز و آبی رنگ به ترتیب کربوهیدات مورد نیاز و کربوهیدات مصرف شده بر حسب گرم (g) را نشان می دهند.</p>
                        </div>
                        <div class="visitor-st-ch visitor-ov-ct">
                            <div id="visit-over-time" class="flot-chart"></div>
                            <div class="flc-visits"></div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <div class="email-statis-inner notika-shadow">
                        <div class="email-ctn-round">
                            <div class="email-rdn-hd">
								<h2 class="text-center">گزارش امروز</h2>
							</div>
                            <div class="email-statis-wrap">
                                <div class="email-round-nock">
                                    <input type="text" class="knob" value="0" data-rel="{{ this_day_point }}" data-linecap="round" data-width="130" data-bgcolor="#E4E4E4" data-fgcolor="#00c292" data-thickness=".10" data-readonly="true">
                                </div>
                                <div class="email-ctn-nock">
                                    <p class="text-center">امتیاز امروز</p>
                                </div>
                            </div>
                            <div class="email-round-gp">
                                <div class="email-round-pro">
                                    <div class="email-signle-gp">
                                        <input type="text" class="knob" value="0" data-rel="{{ totalCarboControlPoint }}" data-linecap="round" data-width="90" data-bgcolor="#E4E4E4" data-fgcolor="#00c292" data-thickness=".10" data-readonly="true" disabled>
                                    </div>
                                    <div class="email-ctn-nock">
                                        <p>کنترل کربوهیدرات</p>
                                    </div>
                                </div>
                                <div class="email-round-pro">
                                    <div class="email-signle-gp">
                                        <input type="text" class="knob" value="0" data-rel="{{ total_Calories_Point }}" data-linecap="round" data-width="90" data-bgcolor="#E4E4E4" data-fgcolor="#00c292" data-thickness=".10" data-readonly="true" disabled>
                                    </div>
                                    <div class="email-ctn-nock">
                                        <p>کنترل کالری</p>
                                    </div>
                                </div>
                                <div class="email-round-pro sm-res-ds-n lg-res-mg-bl">
                                    <div class="email-signle-gp">
                                        <input type="text" class="knob" value="0" data-rel="{{ totalSugarControlPoint }}" data-linecap="round" data-width="90" data-bgcolor="#E4E4E4" data-fgcolor="#00c292" data-thickness=".10" data-readonly="true" disabled>
                                    </div>
                                    <div class="email-ctn-nock">
                                        <p>کنترل قند خون</p>
                                    </div>
                                </div>
                            </div>
                            <div class="email-round-gp">
                                <div class="email-round-pro">
                                    <div class="email-signle-gp">
                                        <input type="text" class="knob" value="0" data-rel="{{ totalCooperationPoints }}" data-linecap="round" data-width="90" data-bgcolor="#E4E4E4" data-fgcolor="#00c292" data-thickness=".10" data-readonly="true" disabled>
                                    </div>
                                    <div class="email-ctn-nock">
                                        <p class="text-center">میزان همکاری</p>
                                    </div>
                                </div>
                                <div class="email-round-pro">
                                    <div class="email-signle-gp">
                                        <input type="text" class="knob" value="0" data-rel="{{ totalHypoHyperControlPoint }}" data-linecap="round" data-width="90" data-bgcolor="#E4E4E4" data-fgcolor="#00c292" data-thickness=".10" data-readonly="true" disabled>
                                    </div>
                                    <div class="email-ctn-nock">
                                        <p class="text-center">کنترل هایپو/هایپر</p>
                                    </div>
                                </div>
                                <div class="email-round-pro sm-res-ds-n lg-res-mg-bl">
                                    <div class="email-signle-gp">
                                        <input type="text" class="knob" value="0" data-rel="{{ total_Activity_Point }}" data-linecap="round" data-width="90" data-bgcolor="#E4E4E4" data-fgcolor="#00c292" data-thickness=".10" data-readonly="true" disabled>
                                    </div>
                                    <div class="email-ctn-nock">
                                        <p class="text-center">فعالیت ورزشی</p>
                                    </div>
                                </div>
                            </div>
                            <br><br><br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Server time End-->
{% endblock %}

{% block scripts %}
    <!-- End Footer area-->
    <!-- jquery
		============================================ -->
    <script src="{% static 'idia_site/patient/js/vendor/jquery-1.12.4.min.js'%}"></script>
    <!-- bootstrap JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/bootstrap.min.js'%}"></script>
    <!-- wow JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/wow.min.js'%}"></script>
    <!-- price-slider JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/jquery-price-slider.js'%}"></script>
    <!-- owl.carousel JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/owl.carousel.min.js'%}"></script>
    <!-- scrollUp JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/jquery.scrollUp.min.js'%}"></script>
    <!-- meanmenu JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/meanmenu/jquery.meanmenu.js'%}"></script>
    <!-- counterup JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/counterup/jquery.counterup.min.js'%}"></script>
    <script src="{% static 'idia_site/patient/js/counterup/waypoints.min.js'%}"></script>
    <script src="{% static 'idia_site/patient/js/counterup/counterup-active.js'%}"></script>
    <!-- sparkline JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/sparkline/jquery.sparkline.min.js'%}"></script>
    <script src="{% static 'idia_site/patient/js/sparkline/sparkline-active.js'%}"></script>
    <!-- knob JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/knob/jquery.knob.js'%}"></script>
    <script src="{% static 'idia_site/patient/js/knob/jquery.appear.js'%}"></script>
    <script src="{% static 'idia_site/patient/js/knob/knob-active.js'%}"></script>
    <!-- mCustomScrollbar JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/scrollbar/jquery.mCustomScrollbar.concat.min.js'%}"></script>
    <!-- flot JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/flot/jquery.flot.js'%}"></script>
    <script src="{% static 'idia_site/patient/js/flot/jquery.flot.resize.js'%}"></script>
    <script src="{% static 'idia_site/patient/js/flot/jquery.flot.time.js'%}"></script>
    <script src="{% static 'idia_site/patient/js/flot/jquery.flot.tooltip.min.js'%}"></script>
    <script type="text/javascript">
         (function ($) {
         "use strict";

            var date_array = {{ date | safe }};
            var points = {{ points_list | safe }};
            var average_sugar_befor_food = {{ average_sugar_befor_food | safe }};
            var average_sugar_after_food = {{ average_sugar_after_food | safe }};
            var carbo_need = {{ carbo_need | safe }};
            var carbo_used = {{ carbo_used | safe }};

            function getBarChartData(arr) {
                var output = [];
                var i;
                for (i = 0; i < arr.length; i++) {
                  output.push([i, arr[i]]);
                }
                return output;
            }

            var data = getBarChartData(points),
                dataset = [{
                    data: data,
                    label: "امتیاز شما",
                    bars: {
                        show: !0,
                        barWidth: .6,
                        order: 1,
                        lineWidth: 0,
                        fillColor: "#005ec2"
                    }
                }],
                options = {
                    grid: {
                        borderWidth: 1,
                        borderColor: "#f3f3f3",
                        show: !0,
                        hoverable: !0,
                        clickable: !0,
                        labelMargin: 10
                    },
                    yaxis: {
                        tickColor: "#f3f3f3",
                        tickDecimals: 0,
                        font: {
                            lineHeight: 13,
                            style: "normal",
                            color: "#9f9f9f"
                        },
                        shadowSize: 0
                    },
                    xaxis: {
                        tickFormatter: function(value, axis) {
                            if (value == 0)
                                return "یکماه قبل";
                            else if (value == data.length -1)
                                return "امروز";
                            return data.length - value - 1 + "";
                        },
                        tickColor: "#fff",
                        tickDecimals: 0,
                        font: {
                            lineHeight: 13,
                            style: "normal",
                            color: "#9f9f9f"
                        },
                        shadowSize: 0
                    },
                    legend: {
                        show: !1
                    }
                };
            $("#chart-total-points")[0] && $.plot($("#chart-total-points"), dataset, options),$(".flot-chart")[0] && ($(".flot-chart").bind("plothover", function(event, pos, item) {
                if (item) {
                    var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);
                    $(".flot-tooltip").html(item.series.label + " در " + Math.round(30 - x) + " روز پیش " + " = " + y).css({
                        top: item.pageY + 5,
                        left: item.pageX + 5
                    }).show()
                } else $(".flot-tooltip").hide()
            }), $("<div class='flot-tooltip' class='chart-tooltip'></div>").appendTo("body"))


            var data = getBarChartData(average_sugar_befor_food),
                dataset = [{
                    data: data,
                    label: "میانگین قند خون قبل از وعده های غذایی",
                    bars: {
                        show: !0,
                        barWidth: .6,
                        order: 1,
                        lineWidth: 0,
                        fillColor: "#005ec2"
                    }
                }],
                options = {
                    grid: {
                        borderWidth: 1,
                        borderColor: "#f3f3f3",
                        show: !0,
                        hoverable: !0,
                        clickable: !0,
                        labelMargin: 10
                    },
                    yaxis: {
                        tickColor: "#f3f3f3",
                        tickDecimals: 0,
                        font: {
                            lineHeight: 13,
                            style: "normal",
                            color: "#9f9f9f"
                        },
                        shadowSize: 0
                    },
                    xaxis: {
                        tickFormatter: function(value, axis) {
                            if (value == 0)
                                return "یکماه قبل";
                            else if (value == data.length -1)
                                return "امروز";
                            return data.length - value - 1 + "";
                        },
                        tickColor: "#fff",
                        tickDecimals: 0,
                        font: {
                            lineHeight: 13,
                            style: "normal",
                            color: "#9f9f9f"
                        },
                        shadowSize: 0
                    },
                    legend: {
                        show: !1
                    }
                };
            $("#chart-sugar-before-food")[0] && $.plot($("#chart-sugar-before-food"), dataset, options),$(".flot-chart")[0] && ($(".flot-chart").bind("plothover", function(event, pos, item) {
                if (item) {
                    var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);
                    $(".flot-tooltip").html(item.series.label + " در " + Math.round(30 - x) + " روز پیش " + " = " + Math.round(y)).css({
                        top: item.pageY + 5,
                        left: item.pageX + 5
                    }).show()
                } else $(".flot-tooltip").hide()
            }), $("<div class='flot-tooltip' class='chart-tooltip'></div>").appendTo("body"))


            var data = getBarChartData(average_sugar_after_food),
                dataset = [{
                    data: data,
                    label: "میانگین قند خون بعد از وعده های غذایی",
                    bars: {
                        show: !0,
                        barWidth: .6,
                        order: 1,
                        lineWidth: 0,
                        fillColor: "#005ec2"
                    }
                }],
                options = {
                    grid: {
                        borderWidth: 1,
                        borderColor: "#f3f3f3",
                        show: !0,
                        hoverable: !0,
                        clickable: !0,
                        labelMargin: 10
                    },
                    yaxis: {
                        tickColor: "#f3f3f3",
                        tickDecimals: 0,
                        font: {
                            lineHeight: 13,
                            style: "normal",
                            color: "#9f9f9f"
                        },
                        shadowSize: 0
                    },
                    xaxis: {
                        tickFormatter: function(value, axis) {
                            if (value == 0)
                                return "یکماه قبل";
                            else if (value == data.length -1)
                                return "امروز";
                            return data.length - value - 1 + "";
                        },
                        tickColor: "#fff",
                        tickDecimals: 0,
                        font: {
                            lineHeight: 13,
                            style: "normal",
                            color: "#9f9f9f"
                        },
                        shadowSize: 0
                    },
                    legend: {
                        show: !1
                    }
                };
            $("#chart-sugar-after-food")[0] && $.plot($("#chart-sugar-after-food"), dataset, options),$(".flot-chart")[0] && ($(".flot-chart").bind("plothover", function(event, pos, item) {
                if (item) {
                    var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);
                    $(".flot-tooltip").html(item.series.label + " در " + Math.round(date_array.length - x) + " روز پیش " + " = " + y).css({
                        top: item.pageY + 5,
                        left: item.pageX + 5
                    }).show()
                } else $(".flot-tooltip").hide()
            }), $("<div class='flot-tooltip' class='chart-tooltip'></div>").appendTo("body"))




            function getRandomData() {
                for (data.length > 0 && (data = data.slice(1)); data.length < totalPoints;) {
                    var prev = data.length > 0 ? data[data.length - 1] : 50,
                        y = prev + 10 * Math.random() - 5;
                    0 > y ? y = 0 : y > 90 && (y = 90), data.push(y)
                }
                for (var res = [], i = 0; i < data.length; ++i) res.push([i, data[i]]);
                return res
            }

            function update() {
                plot.setData([getRandomData()]), plot.draw(), setTimeout(update, updateInterval)
            }
            var data = [],
                totalPoints = 300,
                updateInterval = 30;
            if ($("#dynamic-chart")[0]) {
                var plot = $.plot("#dynamic-chart", [getRandomData()], {
                    series: {
                        label: "Server Process Data",
                        lines: {
                            show: !0,
                            lineWidth: .2,
                            fill: .6
                        },
                        color: "#005ec2",
                        shadowSize: 0
                    },
                    yaxis: {
                        min: 0,
                        max: 100,
                        tickColor: "#eee",
                        font: {
                            lineHeight: 13,
                            style: "normal",
                            color: "#9f9f9f"
                        },
                        shadowSize: 0
                    },
                    xaxis: {
                        tickColor: "#eee",
                        show: !0,
                        font: {
                            lineHeight: 13,
                            style: "normal",
                            color: "#9f9f9f"
                        },
                        shadowSize: 0,
                        min: 0,
                        max: 250
                    },
                    grid: {
                        borderWidth: 1,
                        borderColor: "#eee",
                        labelMargin: 10,
                        hoverable: !0,
                        clickable: !0,
                        mouseActiveRadius: 6
                    },
                    legend: {
                        show: !1
                    }
                });
                update()
            }



            function getChartData(date_array, arr) {
                var output = [];
                var x = 0;
                for(x in date_array){
                    var el = [new Date(date_array[x]).getTime(), arr[x]];
                    output.push(el);
                }
                return output;
            }

            var carbo_need = getChartData(date_array, carbo_need);
            var carbo_used = getChartData(date_array, carbo_used);

            function gd(year, month, day) {
                return new Date(year, month - 1, day).getTime()
            }
            var data1 = carbo_need,
                data2 = carbo_used,

                dataset = [{
                    label: "کربوهیدات مورد نیاز",
                    data: data1,
                    color: "#00c292",
                    points: {
                        fillColor: "#00c292",
                        show: !0,
                        radius: 2
                    },
                    lines: {
                        show: !0,
                        lineWidth: 1
                    }
                }, {
                    label: "کربوهیدات مصرف شده",
                    data: data2,
                    xaxis: 2,
                    color: "#03A9F4",
                    points: {
                        fillColor: "#03A9F4",
                        show: !0,
                        radius: 2
                    },
                    lines: {
                        show: !0,
                        lineWidth: 1
                    }
                }],
                dayOfWeek = ["یکشنبه", "دوشنبه", "سه شنبه", "چهارشنبه", "پنجشنبه", "جمعه", "شنبه"],
                options = {
                    series: {
                        shadowSize: 0
                    },
                    grid: {
                        borderWidth: 1,
                        borderColor: "#f3f3f3",
                        show: !0,
                        clickable: !0,
                        hoverable: !0,
                        mouseActiveRadius: 20,
                        labelMargin: 10
                    },
                    xaxes: [{
                        color: "#f3f3f3",
                        mode: "time",
                        tickFormatter: function(val, axis) {
                            return dayOfWeek[new Date(val).getDay()]
                        },
                        position: "top",
                        font: {
                            lineHeight: 13,
                            style: "normal",
                            color: "#9f9f9f"
                        }
                    }, {
                        color: "#f3f3f3",
                        mode: "time",
                        timeformat: "%m/%d",
                        font: {
                            lineHeight: 13,
                            style: "normal",
                            color: "#9f9f9f"
                        }
                    }],
                    yaxis: {
                        ticks: 2,
                        color: "#f3f3f3",
                        tickDecimals: 0,
                        font: {
                            lineHeight: 13,
                            style: "normal",
                            color: "#9f9f9f"
                        }
                    },
                    legend: {
                        container: ".flc-visits",
                        backgroundOpacity: .5,
                        noColumns: 0,
                        font: {
                            lineHeight: 13,
                            style: "normal",
                            color: "#9f9f9f"
                        }
                    }
                };
            $("#visit-over-time")[0] && $.plot($("#visit-over-time"), dataset, options)


        })(jQuery);

    </script>
    <script src="{% static 'idia_site/patient/js/flot/jquery.flot.orderBars.js'%}"></script>
    <script type="text/javascript">
        (function ($) {
         "use strict";


                /*--------------------------
                 Bar chart Active Class
                ---------------------------- */
            var average_sugar_befor_food = {{ average_sugar_befor_food | safe }};
            var average_sugar_after_food = {{ average_sugar_after_food | safe }};
            var sum_of_insulin_usage = {{ sum_of_insulin_usage | safe }};
            var date_array = {{ date | safe }};

            function getBarChartData(arr) {
                var output = [];
                var i;
                for (i = 0; i < arr.length; i++) {
                  output.push([i, arr[i]]);
                }
                return output;
            }
            var asbf = getBarChartData(average_sugar_befor_food),
                asaf = getBarChartData(average_sugar_after_food),
                soiu = getBarChartData(sum_of_insulin_usage),
                barData = [{
                    label: "میانگین قندخون قبل از غذا",
                    data: asbf,
                    position: "left",
                    color: "#00828d",
                    yaxis: 1
                }, {
                    label: "مجموع انسولین مصرفی",
                    data: soiu,
                    position: "right",
                    color: "#00c739",
                    yaxis: 2
                }, {
                    label: "میانگین قندخون بعد از غذا",
                    data: asaf,
                    position: "left",
                    color: "#d75d5d",
                    yaxis: 1
                }];
            $("#bar-chart")[0] && $.plot($("#bar-chart"), barData, {
                series: {
                    bars: {
                        show: !0,
                        barWidth: .1,
                        order: 1,
                        fill: 1
                    }
                },
                grid: {
                    borderWidth: 1,
                    borderColor: "#eee",
                    show: !0,
                    hoverable: !0,
                    clickable: !0
                },
                yAxis: [{
                    tickColor: "#eee",
                    tickDecimals: 0,
                    font: {
                        lineHeight: 14,
                        style: "normal",
                        color: "#00c292"
                    },
                    shadowSize: 0,
                },{
                    tickColor: "#eee",
                    tickDecimals: 0,
                    font: {
                        lineHeight: 14,
                        style: "normal",
                        color: "#c25053"
                    },
                    shadowSize: 0,
                    position: "right",
                }],
                xaxis: {
                    tickFormatter: function(value, axis) {
                            if (value == 0)
                                return "یکماه قبل";
                            else if (value == asbf.length -1)
                                return "امروز";
                            return asbf.length - value - 1 + "";
                        },
                    tickColor: "#fff",
                    tickDecimals: 0,
                    font: {
                        lineHeight: 14,
                        style: "normal",
                        color: "#00c292"
                    },
                    shadowSize: 0
                },
                legend: {
                    container: ".flc-bar",
                    backgroundOpacity: .5,
                    noColumns: 0,
                    backgroundColor: "white",
                    lineWidth: 0
                }
            }), $(".flot-chart")[0] && ($(".flot-chart").bind("plothover", function(event, pos, item) {
                if (item) {
                    if ((item.series.label == "کربوهیدات مورد نیاز") | (item.series.label == "کربوهیدات مصرف شده")){
                        var x = date_array[item.dataIndex],
                        y = item.datapoint[1].toFixed(1);
                    $(".flot-tooltip").html(item.series.label + " در تاریخ " + x + " = " + y).css({
                        top: item.pageY + 5,
                        left: item.pageX + 5
                        }).show()
                    }else {
                        var x = item.datapoint[0],
                        y = item.datapoint[1];
                    $(".flot-tooltip").html(item.series.label + " در " + Math.round(asbf.length - x -1) + " روز پیش " + " = " + y).css({
                        top: item.pageY + 5,
                        left: item.pageX + 5
                        }).show()
                    }
                } else $(".flot-tooltip").hide()
            }), $("<div class='flot-tooltip' class='chart-tooltip'></div>").appendTo("body"))

        })(jQuery);
    </script>
    <!--  wave JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/wave/waves.min.js'%}"></script>
    <script src="{% static 'idia_site/patient/js/wave/wave-active.js'%}"></script>
    <!-- plugins JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/plugins.js'%}"></script>
    <!-- main JS
		============================================ -->
    <script src="{% static 'idia_site/patient/js/main.js'%}"></script>
	<!-- tawk chat JS
		============================================ -->
{#    <script src="{% static 'idia_site/patient/js/tawk-chat.js'%}"></script>#}
{% endblock %}