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

{% block header.scripts %}

{% endblock %}

{% block profile.image %}
    <div class="col-lg-1 col-md-1 d-none d-lg-block" style="width: 10%">
        <div class="logo-area">
            <a href="#"><img src="{% static '' %}{{ patient.profile.image_address }}" alt="" /></a>
        </div>
    </div>
{% endblock %}


{% block header.button %}
    <a class="text-right" href="{% url 'doctor' %}"><button class="btn btn-gray gray-icon-notika btn-reco-mg btn-button-mg waves-effect">بازگشت</button></a>
{% 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"><span>آنالیز اطلاعات بیمار، </span><span>{{ profile.first_name }} </span><span>{{ profile.last_name }}</span></h2>
										<p dir="rtl"><span class="bread-ntd" dir="rtl"> در این قسمت می توانید خلاصه عملکرد بیمار در ماه اخیر را مشاهده کنید</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-4 col-md-4 col-sm-6 col-xs-12">
                    <div class="col-lg-12 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-12 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-12 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">{{ patient.profile.insulin_short_effect.name }}</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 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">{{ patient.profile.insulin_long_effect.name }}</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 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">{{ type_of_treatment }}</h5>
                        </div>
                    </div><br>
                    <div class="visitor-sv-tm-int">
                        <div class="contact-hd mg-bt-ant-inner">
                            <p style="align-content: right">جنسیت</p>
                            {% if profile.gender is True %}
                                <h5 dir="rtl" class="text-center">زن</h5>
                            {% else %}
                                <h5 dir="rtl" class="text-center">مرد</h5>
                            {% endif %}
                        </div>
                    </div>
                    <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">{{ profile.CR }}</h5>
                        </div>
                    </div>
                    <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">{{ birth_date }}</h5>
                        </div>
                    </div>
                    <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">{{ age }}</h5>
                        </div>
                    </div>
                    <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">{{ profile.height }}</h5>
                        </div>
                    </div>
                    <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">{{ profile.weight}}</h5>
                            <h5 dir="rtl" class="text-center">{{ profile.weight_state}}</h5>
                        </div>
                    </div>
                    <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">{{ profile.goal_weight}}</h5>
                        </div>
                    </div>
                    <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">{{ profile.maximum_sugar}}</h5>
                        </div>
                    </div>
                    <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">{{ profile.minimum_sugar}}</h5>
                        </div>
                    </div>
                    <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">{{ profile.insulin_sensitivity}}</h5>
                        </div>
                    </div>
                    <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">{{ pills }}</h5>
                        </div>
                    </div>
                </div>
                </div>

                <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
                    <div class="visitor-sv-tm-int">
                        <div>
                            <h4 class="text-center">اجزای مواد غذایی مصرف شده</h4>
                        </div>
                        <div class="email-round-gp row">
                            <div class="text-center col-lg-4 col-md-6 col-sm-6 col-xs-12">
                                <div class="email-signle-gp">
                                    <input type="text" class="knob" value="0" data-rel="{{ HEI_Vegetables }}" 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 col-lg-6">
                                    <img title="سبزیجات" src="{% static 'idia_site/doctor/img/Vegetables.png' %}">
                                </div>
                            </div>
                            <div class="text-center col-lg-4 col-md-6 col-sm-6 col-xs-12">
                                <div class="email-signle-gp">
                                    <input type="text" class="knob" value="0" data-rel="{{ HEI_Dairy }}" 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 col-lg-6">
                                    <img title="لبنیات" src="{% static 'idia_site/doctor/img/Dairy.png' %}">
                                </div>
                            </div>
                            <div class="text-center col-lg-4 col-md-6 col-sm-6 col-xs-12">
                                <div class="email-signle-gp">
                                    <input type="text" class="knob" value="0" data-rel="{{ HEI_Grain }}" 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 col-lg-6">
                                    <img title="غلات" src="{% static 'idia_site/doctor/img/Grain.png' %}">
                                </div>
                            </div>
                        </div>
                        <div class="email-round-gp row">
                            <div class="email-round-pro text-center col-lg-4 col-md-6 col-sm-6 col-xs-12">
                                <div class="email-signle-gp">
                                    <input type="text" class="knob" value="0" data-rel="{{ HEI_Protein }}" 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 col-lg-6">
                                    <img title="گوشت و پروتئین" src="{% static 'idia_site/doctor/img/Protein.png' %}">
                                </div>
                            </div>
                            <div class="email-round-pro text-center col-lg-4 col-md-6 col-sm-6 col-xs-12">
                                <div class="email-signle-gp">
                                    <input type="text" class="knob" value="0" data-rel="{{ HEI_Fat }}" 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 col-lg-6">
                                    <img title="چربی ها" src="{% static 'idia_site/doctor/img/Fat.png' %}">
                                </div>
                            </div>
                            <div class="email-round-pro text-center col-lg-4 col-md-6 col-sm-6 col-xs-12">
                                <div class="email-signle-gp">
                                    <input type="text" class="knob" value="0" data-rel="{{ HEI_Fruit }}" 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 col-lg-6">
                                    <img title="میوه ها" src="{% static 'idia_site/doctor/img/Fruit.png' %}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="notika-chat-list notika-shadow mg-t-30 tb-res-ds-n dk-res-ds">
                        <h3 class="text-center">گفت و گو ها</h3>
                        <div class="card-box">
                            <div class="chat-conversation">
                                <div class="widgets-chat-scrollbar">
                                    <ul class="conversation-list">
                                        {% for message in messages %}
                                            {% if message.direction %}
                                                <li class="clearfix odd">
                                                    <div class="chat-avatar">
                                                        {% if not doctor.image_address %}
                                                            <img src="{% static 'assets/profile_image/doctors/doctor.png' %}" alt="Avatar">
                                                        {% else %}
                                                            <img src="{% static '' %}{{ doctor.image_address }}" alt="Avatar">
                                                        {% endif %}
                                                        <i>{{ message.time.time }}</i>
                                                    </div>
                                                    <div class="conversation-text">
                                                        <div class="ctext-wrap chat-widgets-cn">
                                                            <i class="text-right">شما</i>
                                                            <p>
                                                                {{ message.request_text }}
                                                            </p>
                                                        </div>
                                                    </div>
                                                </li>
                                            {% else %}
                                                <li class="clearfix">
                                                    <div class="chat-avatar">
                                                        {% if not patient.profile.image_address %}
                                                            <img src="{% static 'assets/profile_image/patients/patiet-avatar.png' %}" alt="Avatar">
                                                        {% else %}
                                                            <img src="{% static '' %}{{ patient.profile.image_address }}" alt="Avatar">
                                                        {% endif %}
                                                        <i>{{ message.time.time }}</i>
                                                    </div>
                                                    <div class="conversation-text">
                                                        <div class="ctext-wrap">
                                                            <i class="text-right">{{ patient.profile.first_name }} {{ patient.profile.last_name }}</i>
                                                            <p>
                                                                {{ message.request_text }}
                                                            </p>
                                                        </div>
                                                    </div>
                                                </li>
                                            {% endif %}

                                            {% if message.is_answered %}
                                                {% if message.direction %}
                                                    <li class="clearfix">
                                                        <div class="chat-avatar">
                                                            {% if not patient.profile.image_address %}
                                                                <img src="{% static 'assets/profile_image/patients/patiet-avatar.png' %}" alt="Avatar">
                                                            {% else %}
                                                                <img src="{% static '' %}{{ patient.profile.image_address }}" alt="Avatar">
                                                            {% endif %}
                                                            <i>{{ message.response_time.time }}</i>
                                                        </div>
                                                        <div class="conversation-text">
                                                            <div class="ctext-wrap">
                                                                <i class="text-right">{{ patient.profile.first_name }} {{ patient.profile.last_name }}</i>
                                                                <p>
                                                                    {{ message.response_text }}
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </li>
                                                {% else %}
                                                    <li class="clearfix odd">
                                                        <div class="chat-avatar">
                                                            {% if not doctor.image_address %}
                                                                <img src="{% static 'assets/profile_image/doctors/doctor.png' %}" alt="Avatar">
                                                            {% else %}
                                                                <img src="{% static '' %}{{ doctor.image_address }}" alt="Avatar">
                                                            {% endif %}
                                                            <i>{{ message.response_time.time }}</i>
                                                        </div>
                                                        <div class="conversation-text">
                                                            <div class="ctext-wrap chat-widgets-cn">
                                                                <i class="text-right">شما</i>
                                                                <p>
                                                                    {{ message.response_text }}
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </li>
                                                {% endif %}
                                            {% endif %}
                                        {% endfor %}
                                    </ul>
                                </div>
                                <div class="chat-widget-input">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12 col-sm-12 col-xs-12 chat-inputbar">
                                            <div class="form-group todo-flex">
                                                <div class="nk-int-st">
                                                    <input type="text" class="form-control chat-input text-right" dir="rtl" placeholder="بنویسید...">
                                                </div>
                                                <div class="chat-send">
                                                    <button type="submit" class="btn btn-md btn-primary btn-block notika-chat-btn">ارسال</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="notika-shadow mg-t-30 tb-res-ds-n dk-res-ds">
                        <div class="notika-shadow mg-t-30 tb-res-ds-n dk-res-ds" id="chartContainer" style="height: 300px; width: 100%; font-family: IranSens;"></div>
                    </div>
                    <div class="notika-shadow mg-t-30 tb-res-ds-n dk-res-ds">
                        <div class="row">
                            <div class="visitor-sv-tm-int col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                <div class="contact-hd mg-bt-ant-inner">
                                    <p style="align-content: right">سطح فعالیت</p>
                                    <h5 dir="rtl" class="text-center">{{ profile.activity_level }}</h5>
                                </div>
                            </div>
                            <div class="visitor-sv-tm-int col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                <div class="contact-hd mg-bt-ant-inner">
                                    <p style="align-content: right">کل کربوهیدارت مورد نیاز در روز</p>
                                    <h5 dir="rtl" class="text-center">{{ profile.Carbohydrates_g }} (گرم) </h5>
                                </div>
                            </div>
                            <div class="visitor-sv-tm-int col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                <div class="contact-hd mg-bt-ant-inner">
                                    <p style="align-content: right">کل پروتئین مورد نیاز در روز</p>
                                    <h5 dir="rtl" class="text-center">{{ profile.Protein_g }} (گرم) </h5>
                                </div>
                            </div>
                            <div class="visitor-sv-tm-int col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                <div class="contact-hd mg-bt-ant-inner">
                                    <p style="align-content: right">کل چربی مورد نیاز در روز</p>
                                    <h5 dir="rtl" class="text-center">{{ profile.Fat_g }} (گرم) </h5>
                                </div>
                            </div>
                        </div>
                    </div>



{#                    <div class="visitor-sv-tm-int">#}
{#                        <div class="contact-hd mg-bt-ant-inner">#}
{#                            <p class="text-center">گفت و گو</p>#}
{#                            <div id="chat-box">#}
{#                                {% for message in messages %}#}
{#                                    {% if message.direction %}#}
{#                                        <div class="row">#}
{#                                            <div class="col-lg-2"></div>#}
{#                                            <div class="col-lg-10">#}
{#                                                <div class="row message darker">#}
{#                                                  <img class="col-lg-1 right" src="{% static '' %}{{ doctor.image_address }}" alt="Avatar" style="width:100%;">#}
{#                                                  <pre dir="rtl" class="col-lg-11 text-right">{{ message.request_text }}</pre>#}
{#                                                  <span class="time-left">{{ message.time }}</span>#}
{#                                                </div>#}
{#                                            </div>#}
{#                                        </div>#}
{#                                    {% else %}#}
{#                                        <div class="row">#}
{#                                            <div class="col-lg-10">#}
{#                                                <div class="message">#}
{#                                                    {% if not patient.profile.image_address %}#}
{#                                                        <img class="col-lg-1" src="{% static 'assets/profile_image/patients/patiet-avatar.png' %}" alt="Avatar" style="width:100%;">#}
{#                                                    {% else %}#}
{#                                                        <img class="col-lg-1" src="{% static '' %}{{ patient.profile.image_address }}" alt="Avatar" style="width:100%;">#}
{#                                                    {% endif %}#}
{#                                                  <pre dir="rtl" class="col-lg-11 text-right">{{ message.request_text }}</pre>#}
{#                                                  <span class="time-right">{{ message.time }}</span>#}
{#                                                </div>#}
{#                                            </div>#}
{#                                            <div class="col-lg-2">#}
{##}
{#                                            </div>#}
{##}
{#                                        </div>#}
{#                                    {% endif %}#}
{##}
{#                                    {% if message.is_answered %}#}
{#                                        {% if message.direction %}#}
{#                                            <div class="row">#}
{#                                                <div class="col-lg-10">#}
{#                                                    <div class="message">#}
{#                                                      {% if not patient.profile.image_address %}#}
{#                                                          <img class="col-lg-1" src="{% static 'assets/profile_image/patients/patiet-avatar.png' %}" alt="Avatar" style="width:100%;">#}
{#                                                      {% else %}#}
{#                                                          <img class="col-lg-1" src="{% static '' %}{{ patient.profile.image_address }}" alt="Avatar" style="width:100%;">#}
{#                                                      {% endif %}#}
{#                                                      <pre dir="rtl" class="col-lg-11 text-right">{{ message.response_text }}</pre>#}
{#                                                      <span class="time-right">{{ message.response_time }}</span>#}
{#                                                    </div>#}
{#                                                </div>#}
{#                                                <div class="col-lg-2">#}
{##}
{#                                                </div>#}
{#                                            </div>#}
{#                                        {% else %}#}
{#                                            <div class="row">#}
{#                                                <div class="col-lg-2">#}
{#                                                </div>#}
{#                                                <div class="col-lg-10 message darker">#}
{#                                                  <img class="col-lg-1 right" src="{% static '' %}{{ doctor.image_address }}" alt="Avatar" style="width:100%;">#}
{#                                                  <pre dir="rtl" class="col-lg-11 text-right">{{ message.response_text }}</pre>#}
{#                                                  <span class="time-left">{{ message.response_time }}</span>#}
{#                                                </div>#}
{#                                            </div>#}
{#                                        {% endif %}#}
{#                                    {% endif %}#}
{#                                {% endfor %}#}
{#                            </div>#}
{#                            <div id="sending" class="message darker">#}
{#                                <div class="row">#}
{#                                    <div class="col-lg-10">#}
{#                                        <h5 class="mt-0 font-weight-bold blue-text">شما:</h5>#}
{#                                        <div class="form-group basic-textarea rounded-corners">#}
{#                                          <textarea id="message_text" class="form-control text-right" dir="rtl" rows="4" name="message_text" placeholder="بنویسید..." required></textarea>#}
{#                                        </div>#}
{#                                    </div>#}
{#                                    <div class="col-lg-2">#}
{#                                        <button id="send" style="background-color: transparent; border: none;">#}
{#                                            <img class="d-flex rounded-circle mr-3 right" src="{% static 'idia_site/doctor/img/send.png' %}">#}
{#                                        </button>#}
{#                                    </div>#}
{#                                </div>#}
{#                            </div>#}
{#                        </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 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="{{ 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 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="{{ 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 class="text-center">کنترل قند خون</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>#}

    <!--  Chat JS
	============================================ -->
    <script type="text/javascript">
        var temp = "{{ doctor.image_address }}";

        if ((temp  == null) ||(temp  == "") || (temp == "None")){
            temp = "https://i-dia.ir/static/assets/profile_image/doctors/doctor.png";
            console.log(temp);
            console.log("if");
        }
        else {
            temp = "{% static '' %}" + temp;
            console.log(temp);
            console.log("else");
        }
        var doctor_image_url = temp;
        var patient_id = {{ patient.id }};
    </script>
    <script src="{% static 'idia_site/doctor/js/chat/moment.min.js'%}"></script>
    <script src="{% static 'idia_site/doctor/js/chat/jquery.chat.js'%}"></script>
    <!-- AJAX
        ====================== -->

    <script>
        (function ($) {
            "use strict";

            var image_adress = "{% static '' %}"  + '{{ doctor.image_address }}';
            var div = $('#chat-box').html();
            $("#send").click(function (e) {
                e.preventDefault();
                var message_text = $('#message_text').val();
                if (message_text.length < 2){
                    alert("empty message!!!");
                }else {
                    var $crf_token = $('[name="csrfmiddlewaretoken"]').attr('value');
                    var data = {"message_text":message_text};
                    const url = "../../../message/to/{{ patient.id }}/";
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: data,
                        headers:{"X-CSRFToken": $crf_token},
                        success: function(data){
                            div = div + '<div class="row">\n' +
                                        '    <div class="col-lg-2"></div>\n' +
                                        '    <div class="col-lg-10">\n' +
                                        '        <div class="row message darker">\n' +
                                        '          <img class="col-lg-1 right" src=' + image_adress + ' alt="Avatar" style="width:100%;">\n' +
                                        '          <pre dir="rtl" class="col-lg-11 text-right">' + message_text + '</pre>\n' +
                                        '          <span class="time-left">now</span>\n' +
                                        '        </div>\n' +
                                        '    </div>\n' +
                                        '</div>'
                            $('#chat-box').html(div);

                            var top = document.getElementById("sending").offsetTop; //Getting Y of target element
                            $('#message_text').val('');
                            window.scrollTo(0, top);
                            },
                        error: function(error){
                            console.log(error);
                        }
                    });

                }

            });

            })(jQuery);
    </script>
    <script src="{% static 'idia_site/doctor/js/jquery.canvasjs.min.js' %}"></script>
    <script type="text/javascript">

    var MinMaxSugarDate = {{ MinMaxSugarDate | safe }};
    var MinMaxSugar = {{ MinMaxSugar | safe }};

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

    var dataPoints = getChartData(MinMaxSugarDate, MinMaxSugar)

        window.onload = function () {
            var chart = new CanvasJS.Chart("chartContainer", {
                exportEnabled: true,
                animationEnabled: true,
                title:{
                    text: "میزان کمینه/بیشینه میزان قند خون در یک ماه گذشته",
                    fontFamily: "IranSens",
                    fontSize: 20,
                },
                axisX: {
                    valueFormatString: "YYYY/M/D",
                    titleFontFamily: "IranSens",
                    fontSize:2,
                },
                axisY: {
                    title: "میزان قند خون",
                    suffix: "",
                    titleFontFamily: "IranSens",
                    fontSize:2
                },
                toolTip: {
                    fontFamily: "IranSens",
                    backgroundColor: "#f4d5a6",
                    cornerRadius: 5,
                    content: '{x} </br> <strong class="text-right" style="font-family: IranSens;">قندخون </strong> </br> کمینه: {y[0]} , بیشینه: {y[1]}',
                },
                data: [{
                    type: "rangeSplineArea",
                    color: "#c85f00",
                    borderColor: "#5f9800",
                    indexLabel: "{y[#index]}",
                    xValueFormatString: "YYYY/M/D",
                    dataPoints: dataPoints
                }]
            });
            chart.render();
        }
    </script>
{% endblock %}