{% extends 'assistant/base.html' %}
{% load static %}
{% load i18n %}


{% block header.add_script %}
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <!-- Chart.js Library for Nutrition Chart -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <!-- Add these links in the head section of your HTML -->
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

{% endblock %}


{% block sidebar.dashboard %} {% endblock %}

{% block sidebar.patients %} class="active" {% endblock %}


{% block content %}
<div class="content">
    <h3 class="titles" style="position: fixed; z-index: 100; top: 55px; right: 50px; background-color: #009a6e17; padding: 5px; border-radius: 10px">{% trans "اطلاعات پرونده ای " %}({{ patient.profile.first_name }} {{ patient.profile.last_name }})</h3>
    {% if patient.phone_number %}
        <h3 class="titles" style="position: fixed; z-index: 100; top: 55px; left: 250px; background-color: #009a6e17; padding: 5px; border-radius: 10px">{{ patient.phone_number }}</h3>
    {% endif %}
    <h3 class="titles text-center">{% trans "اطلاعات قندخون" %}</h3>
    <hr>
    <div style="display: block;">
        <div class="row">
        <div class="col-12 col-md-12 col-lg-12 col-xl-12">
            <div class="card-box" style="border-radius: 20px;">
                <h3 class="text-center">{% trans "آمار قندخون" %}</h3>
                <ul class="nav nav-tabs nav-tabs-solid nav-tabs-rounded nav-justified">
                    <li class="nav-item"><a class="nav-link active" href="#solid-rounded-tab1" data-toggle="tab">{% trans "ناشتا" %}</a></li>
                    <li class="nav-item"><a class="nav-link" href="#solid-rounded-tab2" data-toggle="tab">{% trans "بعد صبحانه" %}</a></li>
                    <li class="nav-item"><a class="nav-link" href="#solid-rounded-tab3" data-toggle="tab">{% trans "بعد ناهار" %}</a></li>
                    <li class="nav-item"><a class="nav-link" href="#solid-rounded-tab4" data-toggle="tab">{% trans "بعد شام" %}</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane show active" id="solid-rounded-tab1">
                        <h4 class="text-right" style="color: #00aced; direction: rtl;">{% trans "صدروزه" %}</h4>
                        <div class="row mb-0">
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg1"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="fasting_100day_blood_sugar_average" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title1">{% trans "میانگین " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg1"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="fasting_100day_blood_sugar_variant" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title1">{% trans "انحراف معیار" %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg1"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="fasting_100day_blood_sugar_max" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title1">{% trans "بیشینه " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg1"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="fasting_100day_blood_sugar_min" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title1">{% trans "کمینه " %}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h4 class="rtl text-right" style="color: #1bd172;">{% trans "یک ماهه" %}</h4>
                        <div class="row mb-0">
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg2"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="fasting_1month_blood_sugar_average" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title2">{% trans "میانگین " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg2"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="fasting_1month_blood_sugar_variant" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title2">{% trans "انحراف معیار " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg2"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="fasting_1month_blood_sugar_max" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title2">{% trans "بیشینه " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg2"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="fasting_1month_blood_sugar_min" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title2">{% trans "کمینه " %}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h4 class="rtl text-right" style="color: #5a6268;">{% trans "دوهفته" %}</h4>
                        <div class="row mb-0">
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg3"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="fasting_2week_blood_sugar_average" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title3">{% trans "میانگین " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg3"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="fasting_2week_blood_sugar_variant" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title3">{% trans "انحراف معیار " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg3"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="fasting_2week_blood_sugar_max" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title3">{% trans "بیشینه " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg3"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="fasting_2week_blood_sugar_min" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title3">{% trans "کمینه " %}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="solid-rounded-tab2">
                        <h4 class="text-right" style="color: #00aced; direction: rtl;">{% trans "صدروزه" %}</h4>
                        <div class="row mb-0">
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg1"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_breakfast_100day_blood_sugar_average" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title1">{% trans "میانگین " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg1"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_breakfast_100day_blood_sugar_variant" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title1">{% trans "انحراف معیار" %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg1"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_breakfast_100day_blood_sugar_max" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title1">{% trans "بیشینه " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg1"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_breakfast_100day_blood_sugar_min" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title1">{% trans "کمینه " %}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h4 class="rtl text-right" style="color: #1bd172;">{% trans "یک ماهه" %}</h4>
                        <div class="row mb-0">
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg2"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_breakfast_1month_blood_sugar_average" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title2">{% trans "میانگین " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg2"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_breakfast_1month_blood_sugar_variant" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title2">{% trans "انحراف معیار " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg2"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_breakfast_1month_blood_sugar_max" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title2">{% trans "بیشینه " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg2"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_breakfast_1month_blood_sugar_min" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title2">{% trans "کمینه " %}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h4 class="rtl text-right" style="color: #5a6268;">{% trans "دوهفته" %}</h4>
                        <div class="row mb-0">
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg3"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_breakfast_2week_blood_sugar_average" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title3">{% trans "میانگین " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg3"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_breakfast_2week_blood_sugar_variant" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title3">{% trans "انحراف معیار " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg3"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_breakfast_2week_blood_sugar_max" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title3">{% trans "بیشینه " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg3"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_breakfast_2week_blood_sugar_min" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title3">{% trans "کمینه " %}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="solid-rounded-tab3">
                        <h4 class="text-right" style="color: #00aced; direction: rtl;">{% trans "صدروزه" %}</h4>
                        <div class="row mb-0">
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg1"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_lunch_100day_blood_sugar_average" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title1">{% trans "میانگین " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg1"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_lunch_100day_blood_sugar_variant" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title1">{% trans "انحراف معیار" %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg1"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_lunch_100day_blood_sugar_max" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title1">{% trans "بیشینه " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg1"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_lunch_100day_blood_sugar_min" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title1">{% trans "کمینه " %}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h4 class="rtl text-right" style="color: #1bd172;">{% trans "یک ماهه" %}</h4>
                        <div class="row mb-0">
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg2"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_lunch_1month_blood_sugar_average" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title2">{% trans "میانگین " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg2"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_lunch_1month_blood_sugar_variant" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title2">{% trans "انحراف معیار " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg2"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_lunch_1month_blood_sugar_max" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title2">{% trans "بیشینه " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg2"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_lunch_1month_blood_sugar_min" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title2">{% trans "کمینه " %}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h4 class="rtl text-right" style="color: #5a6268;">{% trans "دوهفته" %}</h4>
                        <div class="row mb-0">
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg3"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_lunch_2week_blood_sugar_average" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title3">{% trans "میانگین " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg3"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_lunch_2week_blood_sugar_variant" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title3">{% trans "انحراف معیار " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg3"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_lunch_2week_blood_sugar_max" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title3">{% trans "بیشینه " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg3"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_lunch_2week_blood_sugar_min" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title3">{% trans "کمینه " %}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="solid-rounded-tab4">
                        <h4 class="text-right" style="color: #00aced; direction: rtl;">{% trans "صدروزه" %}</h4>
                        <div class="row mb-0">
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg1"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_dinner_100day_blood_sugar_average" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title1">{% trans "میانگین " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg1"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_dinner_100day_blood_sugar_variant" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title1">{% trans "انحراف معیار" %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg1"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_dinner_100day_blood_sugar_max" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title1">{% trans "بیشینه " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg1"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_dinner_100day_blood_sugar_min" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title1">{% trans "کمینه " %}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h4 class="rtl text-right" style="color: #1bd172;">{% trans "یک ماهه" %}</h4>
                        <div class="row mb-0">
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg2"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_dinner_1month_blood_sugar_average" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title2">{% trans "میانگین " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg2"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_dinner_1month_blood_sugar_variant" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title2">{% trans "انحراف معیار " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg2"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_dinner_1month_blood_sugar_max" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title2">{% trans "بیشینه " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg2"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_dinner_1month_blood_sugar_min" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title2">{% trans "کمینه " %}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h4 class="rtl text-right" style="color: #5a6268;">{% trans "دوهفته" %}</h4>
                        <div class="row mb-0">
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg3"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_dinner_2week_blood_sugar_average" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title3">{% trans "میانگین " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg3"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_dinner_2week_blood_sugar_variant" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title3">{% trans "انحراف معیار " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg3"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_dinner_2week_blood_sugar_max" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title3">{% trans "بیشینه " %}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                                <div class="dash-widget">
                                    <span class="dash-widget-bg3"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
                                    <div class="dash-widget-info text-right">
                                        <h5 id="after_dinner_2week_blood_sugar_min" style="direction: rtl; font-weight: bold;"></h5>
                                        <span class="widget-title3">{% trans "کمینه " %}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

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

    <div style="display: block;">
        <div class="row">
            <div class="col-12 col-md-12 col-lg-12 col-xl-12">
                <div class="card-box" style="border-radius: 20px;">
                    <h3 class="text-center">{% trans "نمودار های قندخون" %}</h3>
                    <ul class="nav nav-tabs nav-tabs-solid nav-tabs-rounded nav-justified">
                        <li class="nav-item"><a class="nav-link active" href="#chart-tab1" data-toggle="tab" id="sugar_chart_three_month_button">{% trans "صد روزه" %}</a></li>
                        <li class="nav-item"><a class="nav-link" href="#chart-tab2" data-toggle="tab" id="sugar_chart_one_month_button">{% trans "یک ماهه" %}</a></li>
                        <li class="nav-item"><a class="nav-link" href="#chart-tab3" data-toggle="tab" id="sugar_chart_two_weeks_button">{% trans "دوهفته" %}</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane show active" id="chart-tab1">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div id="three_month_sugar_chart_div" style="width: 100%;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="chart-tab2">
                            <div id="one_month_sugar_chart_div" style="width: 100%;"></div>
                        </div>
                        <div class="tab-pane" id="chart-tab3">
                            <div id="two_weeks_sugar_chart_div" style="width: 100%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="m-5"></div>

    <!-- Nutrition Chart Section -->
    <div class="nutrition-chart-section" style="margin-top:40px;">
        <h3 class="titles text-center mb-4">نمودار تغذیه</h3>
        <hr>
        
        <div class="chart-container" style="background: white; padding: 30px; border-radius: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
            <!-- Period Selector -->
            <div class="text-center mb-4">
                <div class="btn-group" role="group" aria-label="Period selector">
                    <button type="button" class="btn btn-outline-success period-btn active" data-period="7" onclick="switchChartPeriod(7)" style="border-radius: 10px 0 0 10px; padding: 10px 30px;">
                        ۷ روز گذشته
                    </button>
                    <button type="button" class="btn btn-outline-success period-btn" data-period="30" onclick="switchChartPeriod(30)" style="border-radius: 0 10px 10px 0; padding: 10px 30px;">
                        ۳۰ روز گذشته
                    </button>
                </div>
            </div>
            
            <!-- Chart Canvas -->
            <div style="position: relative; height: 400px;">
                <canvas id="nutritionChart"></canvas>
            </div>
            
            <!-- Legend -->
            <div class="chart-legend text-center mt-4" dir="rtl" style="display: flex; justify-content: center; gap: 30px; flex-wrap: wrap;">
                <div style="display: flex; align-items: center; gap: 8px;">
                    <div style="width: 20px; height: 20px; background: #FF6384; border-radius: 3px;"></div>
                    <span>کالری</span>
                </div>
                <div style="display: flex; align-items: center; gap: 8px;">
                    <div style="width: 20px; height: 20px; background: #36A2EB; border-radius: 3px;"></div>
                    <span>پروتئین (گرم)</span>
                </div>
                <div style="display: flex; align-items: center; gap: 8px;">
                    <div style="width: 20px; height: 20px; background: #FFCE56; border-radius: 3px;"></div>
                    <span>چربی (گرم)</span>
                </div>
                <div style="display: flex; align-items: center; gap: 8px;">
                    <div style="width: 20px; height: 20px; background: #4BC0C0; border-radius: 3px;"></div>
                    <span>کربوهیدرات (گرم)</span>
                </div>
            </div>
        </div>
    </div>
    
    <div class="m-5"></div>

    <!-- Enhanced Eating Logs Section with Collapsible Days -->
    <div class="weekly-eating" style="margin-top:40px;">
        <h3 class="titles text-center mb-4">{% trans "گزارش تغذیه هفتگی" %}</h3>
        <hr>
        
        {% if day_list %}
            <div class="eating-logs-container" style="max-width: 1200px; margin: 0 auto;">
                {% for day_item in day_list %}
                    <div class="day-card mb-3" style="border-radius: 15px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
                        <!-- Clickable Day Header -->
                        <div class="day-header clickable-day-header" 
                             data-toggle="collapse" 
                             data-target="#day-{{ forloop.counter }}" 
                             aria-expanded="false" 
                             aria-controls="day-{{ forloop.counter }}"
                             role="button"
                             style="background: linear-gradient(135deg, #009A6E 0%, #00BF87 100%); 
                                    padding: 20px; 
                                    cursor: pointer; 
                                    transition: all 0.3s ease;
                                    position: relative;">
                            <div class="row align-items-center" dir="rtl">
                                <div class="col-md-4">
                                    <h4 style="color: white; margin: 0; font-weight: bold;">
                                        <i class="fas fa-calendar-day" style="margin-left: 10px;"></i>
                                        {{ day_item.day_label }}
                                    </h4>
                                    <p style="color: rgba(255,255,255,0.9); margin: 5px 0 0 0; font-size: 14px;">
                                        {{ day_item.jalali_date }}
                                    </p>
                                </div>
                                <div class="col-md-8">
                                    <div class="row text-center">
                                        <div class="col-3">
                                            <div style="background: rgba(255,255,255,0.2); padding: 10px; border-radius: 10px;">
                                                <p style="color: white; margin: 0; font-size: 12px;">کالری</p>
                                                <p style="color: white; margin: 0; font-weight: bold; font-size: 16px;">{{ day_item.daily_calories }}</p>
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <div style="background: rgba(255,255,255,0.2); padding: 10px; border-radius: 10px;">
                                                <p style="color: white; margin: 0; font-size: 12px;">پروتئین</p>
                                                <p style="color: white; margin: 0; font-weight: bold; font-size: 16px;">{{ day_item.daily_protein }}g</p>
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <div style="background: rgba(255,255,255,0.2); padding: 10px; border-radius: 10px;">
                                                <p style="color: white; margin: 0; font-size: 12px;">چربی</p>
                                                <p style="color: white; margin: 0; font-weight: bold; font-size: 16px;">{{ day_item.daily_fat }}g</p>
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <div style="background: rgba(255,255,255,0.2); padding: 10px; border-radius: 10px;">
                                                <p style="color: white; margin: 0; font-size: 12px;">کربوهیدرات</p>
                                                <p style="color: white; margin: 0; font-weight: bold; font-size: 16px;">{{ day_item.daily_carbs }}g</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <i class="fas fa-chevron-down" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: white; font-size: 20px; transition: transform 0.3s ease;"></i>
                        </div>
                        
                        <!-- Collapsible Day Content -->
                        <div id="day-{{ forloop.counter }}" class="collapse">
                            <div class="day-content" style="padding: 20px; background: #f8f9fa;">
                                {% for meal_key, records in day_item.foods_by_meal.items %}
                                    <div class="meal-section mb-4" style="background: white; padding: 15px; border-radius: 10px; border-right: 4px solid #FF9900;">
                                        <h5 dir="rtl" style="color: #FF9900; font-weight: bold; margin-bottom: 15px;">
                                            <i class="fas fa-utensils" style="margin-left: 8px;"></i>
                                            {% if meal_key == 0 %}
                                                صبحانه
                                            {% elif meal_key == 1 %}
                                                ناهار
                                            {% elif meal_key == 2 %}
                                                شام
                                            {% elif meal_key == 3 %}
                                                میان وعده ۱
                                            {% elif meal_key == 4 %}
                                                میان وعده ۲
                                            {% else %}
                                                وعده غذایی
                                            {% endif %}
                                        </h5>
                                        
                                        <div class="food-list">
                                            {% for eat_record in records %}
                                                {% if eat_record.food %}
                                                    <div class="food-item" dir="rtl" style="padding: 12px; margin-bottom: 8px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef;">
                                                        <div class="row align-items-center">
                                                            <div class="col-md-5">
                                                                <strong style="color: #009A6E; font-size: 15px;">
                                                                    <i class="fas fa-apple-alt" style="margin-left: 5px; color: #FF9900;"></i>
                                                                    {{ eat_record.food.FA_Name }}
                                                                </strong>
                                                            </div>
                                                            <div class="col-md-2">
                                                                <span style="color: #666; font-size: 14px;">
                                                                    <i class="fas fa-weight" style="margin-left: 5px;"></i>
                                                                    {{ eat_record.amount|floatformat:0 }} گرم
                                                                </span>
                                                            </div>
                                                            <div class="col-md-5">
                                                                <div class="row text-center" style="font-size: 12px;">
                                                                    <div class="col-3">
                                                                        <span style="color: #999;">کالری:</span>
                                                                        {% widthratio eat_record.food.Calories 100 eat_record.amount as calories %}
                                                                        <strong style="color: #333;">{{ calories|floatformat:0 }}</strong>
                                                                    </div>
                                                                    <div class="col-3">
                                                                        <span style="color: #999;">پ:</span>
                                                                        {% widthratio eat_record.food.Protein_g 100 eat_record.amount as protein %}
                                                                        <strong style="color: #333;">{{ protein|floatformat:1 }}g</strong>
                                                                    </div>
                                                                    <div class="col-3">
                                                                        <span style="color: #999;">چ:</span>
                                                                        {% widthratio eat_record.food.Fat_g 100 eat_record.amount as fat %}
                                                                        <strong style="color: #333;">{{ fat|floatformat:1 }}g</strong>
                                                                    </div>
                                                                    <div class="col-3">
                                                                        <span style="color: #999;">ک:</span>
                                                                        {% widthratio eat_record.food.Carbohydrates_g 100 eat_record.amount as carbs %}
                                                                        <strong style="color: #333;">{{ carbs|floatformat:1 }}g</strong>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row mt-2" dir="rtl">
                                                            <div class="col-12">
                                                                <small style="color: #999;">
                                                                    <i class="far fa-clock" style="margin-left: 5px;"></i>
                                                                    زمان: {{ eat_record.date_time|date:"H:i" }}
                                                                </small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                {% else %}
                                                    <div class="food-item" dir="rtl" style="padding: 12px; margin-bottom: 8px; background: #fff3cd; border-radius: 8px; border: 1px solid #ffc107;">
                                                        <p style="margin: 0; color: #856404;">
                                                            <i class="fas fa-exclamation-triangle" style="margin-left: 5px;"></i>
                                                            غذای حذف شده - {{ eat_record.amount|floatformat:0 }} گرم در {{ eat_record.date_time|date:"H:i" }}
                                                        </p>
                                                    </div>
                                                {% endif %}
                                            {% empty %}
                                                <p style="color: #999; text-align: center; margin: 10px 0;">
                                                    هیچ غذایی در این وعده ثبت نشده است.
                                                </p>
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="alert alert-info text-center" role="alert" dir="rtl">
                <i class="fas fa-info-circle" style="margin-left: 10px;"></i>
                هیچ گزارش تغذیه‌ای در هفته گذشته ثبت نشده است.
            </div>
        {% endif %}
    </div>
    
    <div class="m-5"></div>

    <h3 class="titles text-center">{% trans "جلسات من" %}</h3>
    <hr>
    <div class="card-box mb-0" style="border-radius: 20px;">
        <div class="experience-box">
            <ul class="experience-list">
                <!-- Upcoming sessions -->
                <h4 class="titles-appointment">{% trans "جلسات پیش رو" %}</h4>
                {% for session in upcoming_assistant %}
                    <li class="session-item upcoming">
                        <!-- Meeting Link Section -->
                        {% if session.appointment_link %}
                            <a href="{{ session.appointment_link }}" class="btn btn-primary btn-join" target="_blank">{% trans "پیوستن به جلسه" %}</a>
                        {% else %}
                            <!-- Button to toggle the meeting link form -->
                            <button class="btn btn-secondary btn-add-meeting" onclick="toggleMeetingLinkForm({{ session.id }})">{% trans "افزودن لینک جلسه" %}</button>
                            <!-- Form to add a meeting link, initially hidden -->
                            <div id="add-link-form-{{ session.id }}" style="display: none;">
                                <form method="POST" action="{% url 'panel-assistant-add-meeting-link' session.id %}" onsubmit="submitMeetingLinkForm(event, this, {{ session.id }})">
                                    {% csrf_token %}
                                    <input type="hidden" name="session_id" value="{{ session.id }}">
                                    <input type="url" name="appointment_link" style="direction: rtl; font-size: 14px; background-color: #cfd8e6; border-color: #009A6E50; border-width: thin;  border-radius: 5px; margin-left: 25px; min-height: 30px; " placeholder="{% trans "لینک جلسه ..." %}" required>
                                    <button type="submit" class="btn btn-primary btn-save">{% trans "ذخیره لینک" %}</button>
                                </form>
                            </div>
                        {% endif %}
                        <!-- Display session details here -->
                        <div class="session-content">
                            <div class="session-details">
                                <div class="day-info">
                                    {% if session.days_of_week == 0 %}
                                        <h5 class="text-right text-appointment">{% trans "شنبه" %}</h5>
                                    {% elif session.days_of_week == 1 %}
                                        <h5 class="text-right text-appointment">{% trans "یکشنبه" %}</h5>
                                    {% elif session.days_of_week == 2 %}
                                        <h5 class="text-right text-appointment">{% trans "دوشنبه" %}</h5>
                                    {% elif session.days_of_week == 3 %}
                                        <h5 class="text-right text-appointment">{% trans "سه شنبه" %}</h5>
                                    {% elif session.days_of_week == 4 %}
                                        <h5 class="text-right text-appointment">{% trans "چهارشنبه" %}</h5>
                                    {% elif session.days_of_week == 5 %}
                                        <h5 class="text-right text-appointment">{% trans "پنجشنبه" %}</h5>
                                    {% elif session.days_of_week == 6 %}
                                        <h5 class="text-right text-appointment">{% trans "جمعه" %}</h5>
                                    {% else %}
                                        <h5 class="text-right text-appointment">{% trans "نامشخص" %}</h5>
                                    {% endif %}
                                </div>
                                <div class="time-info">
                                    <h5 class="text-right text-time">{{ session.start_time }}</h5>
                                </div>
                                <div class="time-info">
                                    <h5 class="text-right text-time">{% trans "مربی : " %}{{ session.therapist }}</h5>
                                </div>
                                {% if session.appointment_link %}
                                    <div class="time-info">
                                        <h5 class="text-right text-time">{% trans "لینک : " %}{{ session.appointment_link }}</h5>
                                    </div>
                                {% else %}
                                    <div class="time-info">
                                        <h5 class="text-right text-time" dir="rtl" style="color: red">{% trans "لینک جلسه مشخص نشده است." %}</h5>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="experience-user">
                            <div class="before-circle"></div>
                        </div>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>

    <div class="m-3"></div>

    <div class="card-box mb-0" style="border-radius: 20px;">
        <div class="experience-box">
            <ul class="experience-list">
                <!-- Expired sessions -->
                <h4 class="titles-appointment">{% trans "جلسات گذشته" %}</h4>
                {% for session in expired_assistant %}
                    <li class="session-item">
                        <!-- Display session details here -->
                        <div class="session-content">
                            <div class="session-details">
                                <div class="day-info">
                                    {% if session.days_of_week == 0 %}
                                        <h5 class="text-right text-appointment">{% trans "شنبه" %}</h5>
                                    {% elif session.days_of_week == 1 %}
                                        <h5 class="text-right text-appointment">{% trans "یکشنبه" %}</h5>
                                    {% elif session.days_of_week == 2 %}
                                        <h5 class="text-right text-appointment">{% trans "دوشنبه" %}</h5>
                                    {% elif session.days_of_week == 3 %}
                                        <h5 class="text-right text-appointment">{% trans "سه شنبه" %}</h5>
                                    {% elif session.days_of_week == 4 %}
                                        <h5 class="text-right text-appointment">{% trans "چهارشنبه" %}</h5>
                                    {% elif session.days_of_week == 5 %}
                                        <h5 class="text-right text-appointment">{% trans "پنجشنبه" %}</h5>
                                    {% elif session.days_of_week == 6 %}
                                        <h5 class="text-right text-appointment">{% trans "جمعه" %}</h5>
                                    {% else %}
                                        <h5 class="text-right text-appointment">{% trans "نامشخص" %}</h5>
                                    {% endif %}
                                </div>
                                <div class="time-info">
                                    <h5 class="text-right text-time">{{ session.start_time }}</h5>
                                </div>
                                <div class="time-info">
                                    <h5 class="text-right text-time">{% trans "مربی : " %}{{ session.therapist }}</h5>
                                </div>
                            </div>
                        </div>
                        <div class="experience-user">
                            <div class="before-circle"></div>
                        </div>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>

    <div class="m-3"></div>

    <div class="card-box mb-0" style="border-radius: 20px;">
        <div class="experience-box">
            <ul class="experience-list">
                <!-- Canceled sessions -->
                <h4 class="titles-appointment">{% trans "جلسات کنسل شده" %}</h4>
                {% for session in canceled_assistant %}
                    <li class="session-item canceled">
                        <!-- Display session details here -->
                        <div class="session-content">
                            <div class="session-details">
                                <div class="day-info">
                                    {% if session.days_of_week == 0 %}
                                        <h5 class="text-right text-appointment">{% trans "شنبه" %}</h5>
                                    {% elif session.days_of_week == 1 %}
                                        <h5 class="text-right text-appointment">{% trans "یکشنبه" %}</h5>
                                    {% elif session.days_of_week == 2 %}
                                        <h5 class="text-right text-appointment">{% trans "دوشنبه" %}</h5>
                                    {% elif session.days_of_week == 3 %}
                                        <h5 class="text-right text-appointment">{% trans "سه شنبه" %}</h5>
                                    {% elif session.days_of_week == 4 %}
                                        <h5 class="text-right text-appointment">{% trans "چهارشنبه" %}</h5>
                                    {% elif session.days_of_week == 5 %}
                                        <h5 class="text-right text-appointment">{% trans "پنجشنبه" %}</h5>
                                    {% elif session.days_of_week == 6 %}
                                        <h5 class="text-right text-appointment">{% trans "جمعه" %}</h5>
                                    {% else %}
                                        <h5 class="text-right text-appointment">{% trans "نامشخص" %}</h5>
                                    {% endif %}
                                </div>
                                <div class="time-info">
                                    <h5 class="text-right text-time">{{ session.start_time }}</h5>
                                </div>
                                <div class="time-info">
                                    <h5 class="text-right text-time">{% trans "مربی : " %}{{ session.therapist }}</h5>
                                </div>
                            </div>
                        </div>
                        <div class="experience-user">
                            <div class="before-circle"></div>
                        </div>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>

    <div class="m-5"></div>

    <h3 class="titles text-center my-4" style="font-size: 1.8rem; color: #009A6E; font-weight: bold;">
    {% trans "سوالات و پاسخ‌ها" %}
    </h3>
    <hr>
    
    <!-- UserQuestionnaire Section -->
    {% if user_qanda %}
    <div class="container mb-5">
        <h4 class="titles text-right my-3" style="font-size: 1.5rem; color: #009A6E; font-weight: bold;">
            {% trans "پرسشنامه کاربر" %}
        </h4>
        <div class="row">
            {% for q, a in user_qanda %}
                <div class="col-md-6 col-lg-3 mb-4">
                    <div class="qa-card shadow-sm p-3" style="border-radius: 15px; background-color: #e8f5f1;">
                        <h5 class="qa-question text-right" style="font-size: 1.0rem; font-weight: bold; color: #333; margin-bottom: 10px;" dir="rtl">
                            {{ q }}
                        </h5>
                        <p class="qa-answer text-right" style="font-size: 0.9rem; color: #555; margin-bottom: 0;" dir="rtl">
                            {{ a }}
                        </p>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
    
    <!-- MicrobiomeQuestionnaire Section -->
    {% if microbiome_qanda %}
    <div class="container mb-5">
        <h4 class="titles text-right my-3" style="font-size: 1.5rem; color: #009A6E; font-weight: bold;">
            {% trans "پرسشنامه میکروبیوم" %}
        </h4>
        <div class="row">
            {% for q, a in microbiome_qanda %}
                <div class="col-md-6 col-lg-3 mb-4">
                    <div class="qa-card shadow-sm p-3" style="border-radius: 15px; background-color: #f0f4ff;">
                        <h5 class="qa-question text-right" style="font-size: 1.0rem; font-weight: bold; color: #333; margin-bottom: 10px;" dir="rtl">
                            {{ q }}
                        </h5>
                        <p class="qa-answer text-right" style="font-size: 0.9rem; color: #555; margin-bottom: 0;" dir="rtl">
                            {{ a }}
                        </p>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
    
    <!-- LifestyleQuestionnaire Section -->
    {% if lifestyle_qanda %}
    <div class="container mb-5">
        <h4 class="titles text-right my-3" style="font-size: 1.5rem; color: #009A6E; font-weight: bold;">
            {% trans "پرسشنامه سبک زندگی" %}
        </h4>
        <div class="row">
            {% for q, a in lifestyle_qanda %}
                <div class="col-md-6 col-lg-3 mb-4">
                    <div class="qa-card shadow-sm p-3" style="border-radius: 15px; background-color: #fff8e8;">
                        <h5 class="qa-question text-right" style="font-size: 1.0rem; font-weight: bold; color: #333; margin-bottom: 10px;" dir="rtl">
                            {{ q }}
                        </h5>
                        <p class="qa-answer text-right" style="font-size: 0.9rem; color: #555; margin-bottom: 0;" dir="rtl">
                            {{ a }}
                        </p>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
    
    <!-- Empty State Message -->
    {% if not user_qanda and not microbiome_qanda and not lifestyle_qanda %}
    <div class="container">
        <div class="alert alert-info text-center" role="alert" dir="rtl">
            {% trans "هیچ پرسشنامه‌ای برای این کاربر ثبت نشده است." %}
        </div>
    </div>
    {% endif %}
    
    <div class="m-5"></div>
</div>

<style>

    .container {
        max-width: 1400px; /* Increase max width for better spacing */
        margin: auto;
        padding: 20px;
    }

    .qa-card {
        border: 1px solid #ddd;
        border-radius: 15px;
        background-color: #ffffff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .qa-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    }

    .qa-question {
        font-size: 1.1rem;
        font-weight: bold;
        color: #009A6E;
        margin-bottom: 10px;
    }

    .qa-answer {
        font-size: 1rem;
        color: #555;
    }

    @media (max-width: 992px) {
        .qa-card {
            margin-bottom: 20px; /* Add spacing for smaller devices */
        }
    }

    @media (max-width: 768px) {
        .qa-question {
            font-size: 1rem;
        }
        .qa-answer {
            font-size: 0.9rem;
        }
    }



    .dash-widget {
            background-color: #f1f5f9;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            margin-bottom: 15px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }


        .session-item {
            align-items: center;
            justify-content: space-between;
            /*border-bottom: 1px solid #ccc;*/
            padding: 10px;
        }

        .session-item.expired {
            opacity: 0.5;
        }

        .session-item.upcoming {
            color: red;
        }

        .day-info,
        .time-info {
            width: 100%;
            text-align: right;
            direction: rtl;
            display: flex;
            align-items: start;
            justify-content: start;
        }

        .before-circle {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #ccc;
            margin-right: 10px;
        }

        .experience-content h5 {
            line-height: 2;
        }

        .btn-join {
            background-color: #009A6E; /* Blue color, you can customize */
            /*border-color: #009A6E;*/
            color: #fff; /* Text color */
            /*padding: 10px 20px; !* Adjust padding for better spacing *!*/
            border-radius: 10px; /* Rounded corners */
            text-decoration: none; /* Remove underline from link */
            transition: background-color 0.3s ease; /* Smooth transition on hover */
            display: inline-flex; /* Align icon and text horizontally */
            align-items: center; /* Center alignment for icon and text */
            margin-left: 50px;
            margin-top: 40px;
            position: absolute;
        }
        .btn-save {
            background-color: #009A6E; /* Blue color, you can customize */
            /*border-color: #009A6E;*/
            color: #fff; /* Text color */
            /*padding: 10px 20px; !* Adjust padding for better spacing *!*/
            border-radius: 10px; /* Rounded corners */
            text-decoration: none; /* Remove underline from link */
            transition: background-color 0.3s ease; /* Smooth transition on hover */
            display: inline-flex; /* Align icon and text horizontally */
            align-items: center; /* Center alignment for icon and text */
            margin-left: 20px;
        }
        .btn-add-meeting {
            background-color: #27AE60; /* Blue color, you can customize */
            /*border-color: #009A6E;*/
            color: #ffffff; /* Text color */
            /*padding: 10px 20px; !* Adjust padding for better spacing *!*/
            border-radius: 10px; /* Rounded corners */
            text-decoration: none; /* Remove underline from link */
            transition: background-color 0.3s ease; /* Smooth transition on hover */
            display: inline-flex; /* Align icon and text horizontally */
            align-items: center; /* Center alignment for icon and text */
            margin-left: 50px;
            margin-top: 40px;
            position: absolute;
        }

        /* Hover effect */
        .btn-chat:hover {
            background-color: #009A6Eda; /* Darker shade of blue */
            color: #fff; /* Text color on hover */
        }

        .btn-edit:hover {
            background-color: #009A6Eda; /* Darker shade of blue */
            color: #fff; /* Text color on hover */
            border: none;
        }
        .btn-join:hover {
            background-color: #009A6Eda; /* Darker shade of blue */
            color: #fff; /* Text color on hover */
            border: none;
        }
        .btn-join:focus {
            background-color: #009A6Eda; /* Darker shade of blue */
            color: #fff; /* Text color on hover */
            border: none;
        }
        .btn-save:hover {
            background-color: #009A6Eda; /* Darker shade of blue */
            color: #fff; /* Text color on hover */
            border: none;
        }
        .btn-save:focus {
            background-color: #009A6Eda; /* Darker shade of blue */
            color: #fff; /* Text color on hover */
            border: none;
        }

        .btn-add-meeting:hover {
            background-color: rgba(39, 174, 96, 0.7); /* Darker shade of blue */
            color: #009A6E; /* Text color on hover */
            border: none;
        }

        .btn-delete:hover {
            background-color: red; /* Darker shade of blue */
            color: #fff; /* Text color on hover */
            border: none;
        }

        /* Add the CSS styles for each box here */
        body{
        background-color: #e3e4e7;
        }

        .text-appointment,
        .text-time,
        .span {
        position: absolute;
        font-family:'IranSansWeb';
        font-weight: 500;
        color: #000000;
        font-size: 16px;
        letter-spacing: 0;
        line-height: normal;
        white-space: nowrap;
        }

        .titles{
        text-align: right;
        font-size: 24px;
        margin-bottom: 10px;
        color: #009A6E;
        }

      .titles-appointment{
        text-align: right;
        font-size: 18px;
        margin-bottom: 10px;
        color: #009A6E;
      }

        .text-appointment {
            position: relative;
        }

        .text-time {
            font-size: 14px;
            position: relative;
        }

        .frame3 .element {
        position: absolute;
        top: 0;
        left: 0;
        font-family: "Inter-semiBold", Helvetica;
        font-weight: 400;
        color: transparent;
        font-size: 30px;
        text-align: center;
        letter-spacing: 0;
        line-height: normal;
        white-space: nowrap;
        }

        .frame3 .overlap-group {
        position: absolute;
        width: 250px;
        height: 53px;
        top: 90px;
        left: 30px;
        }

        .frame3 .used {
        font-weight: 600;
        color: #000000;
        }

        .frame3 .sh-used {
        font-family: "Inter-Medium", Helvetica;
        font-weight: 500;
        color: #000000b2;
        font-size: 15px;
        top: 82px;

        }

        .nutrient-info h4 {
        font-size: 18px;
        color: #333;
        margin-bottom: 8px;
        }

        hr {
        border: 1px solid #ddd;
        margin-top: 20px;
        margin-bottom: 20px;
        }

        .table th, .table td {
        padding: 10px;
        border: 1px solid #aeaeae;
        text-align: center;
        }

        .table th {
            background-color: rgba(159, 157, 234, 0.44);
            font-weight: bold;
        }

        .table tr:nth-child(even) {
            background-color: #e1e0e0;
        }

        .table tr:hover {
            background-color: rgba(153, 192, 159, 0.8);
        }

    </style>
{% endblock %}


{% block script.add %}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        var getList = function(python_list){
            var temp = [];
            for(var i = 0; i < python_list.length; i++){
                if (python_list[i] == "null"){
                    temp.push(null);
                } else {
                    temp.push(python_list[i]);
                }
            }
            return temp;
        };
        var fasting_sugar_list = getList({{ fasting_sugar_list | safe }});
        var after_breakfast_sugar_list = getList({{ after_breakfast_sugar_list | safe }});
        var after_lunch_sugar_list = getList({{ after_lunch_sugar_list | safe }});
        var after_dinner_sugar_list = getList({{ after_dinner_sugar_list | safe }});
        var hyper = parseInt({{ patient.profile.hyper | safe }});
        var hypo = parseInt({{ patient.profile.hypo | safe }});

    </script>

    <script>
        // JavaScript
        document.addEventListener("DOMContentLoaded", function() {
            const dietTitles = document.querySelectorAll(".diet-title");
    
            dietTitles.forEach(function(title) {
                title.addEventListener("click", function() {
                    const dietId = this.getAttribute("data-diet-id");
                    const dietTable = document.getElementById(`diet-${dietId}`);
                    const arrowIcon = this.querySelector(".arrow-icon");
    
                    // Toggle visibility of diet table
                    dietTable.classList.toggle("hidden");
    
                    // Rotate arrow icon based on visibility
                    arrowIcon.classList.toggle("rotate-icon");
                });
            });
        });
    </script>
    
    <script type="text/javascript" src="{% static 'panel/assistant/js/sugarCharts.js' %}"></script>
    
    <script>
        // Handle expandable containers collapse/expand functionality
        jQuery(document).ready(function() {
            // Update aria-expanded when collapse state changes (for accessibility)
            jQuery('.collapse').on('shown.bs.collapse', function() {
                var dayId = jQuery(this).attr('id');
                var header = jQuery('[data-target="#' + dayId + '"]');
                header.attr('aria-expanded', 'true');
                header.find('.fa-chevron-down').css('transform', 'translateY(-50%) rotate(180deg)');
            });
            
            jQuery('.collapse').on('hidden.bs.collapse', function() {
                var dayId = jQuery(this).attr('id');
                var header = jQuery('[data-target="#' + dayId + '"]');
                header.attr('aria-expanded', 'false');
                header.find('.fa-chevron-down').css('transform', 'translateY(-50%) rotate(0deg)');
            });
        });
        
        // Nutrition Chart
        console.log('Loading nutrition chart...');
        var chart7daysDataRaw = {{ chart_data_7days|safe }};
        var chart30daysDataRaw = {{ chart_data_30days|safe }};
        
        // Parse JSON data if it's a string, otherwise use as-is
        var chart7daysData = typeof chart7daysDataRaw === 'string' ? JSON.parse(chart7daysDataRaw) : chart7daysDataRaw;
        var chart30daysData = typeof chart30daysDataRaw === 'string' ? JSON.parse(chart30daysDataRaw) : chart30daysDataRaw;
        
        console.log('7 days data:', chart7daysData);
        console.log('30 days data:', chart30daysData);
        var currentChart = null;
        var currentPeriod = 7;
        
        function createNutritionChart(period) {
            var chartData = period === 7 ? chart7daysData : chart30daysData;
            
            // Validate data
            if (!chartData || !Array.isArray(chartData) || chartData.length === 0) {
                console.warn('No chart data available for period:', period);
                return;
            }
            
            // Extract data and ensure all values are numbers
            var labels = chartData.map(item => item.jalali_date || '');
            var calories = chartData.map(item => {
                var val = parseFloat(item.calories);
                return isNaN(val) ? 0 : val;
            });
            var protein = chartData.map(item => {
                var val = parseFloat(item.protein);
                return isNaN(val) ? 0 : val;
            });
            var fat = chartData.map(item => {
                var val = parseFloat(item.fat);
                return isNaN(val) ? 0 : val;
            });
            var carbs = chartData.map(item => {
                var val = parseFloat(item.carbs);
                return isNaN(val) ? 0 : val;
            });
            
            // Calculate max values with proper fallbacks
            var maxCalories = Math.max.apply(null, calories);
            if (isNaN(maxCalories) || maxCalories <= 0) maxCalories = 1000;
            else maxCalories = maxCalories * 1.2; // Add 20% padding
            
            var maxNutrients = Math.max.apply(null, [].concat(protein, fat, carbs));
            if (isNaN(maxNutrients) || maxNutrients <= 0) maxNutrients = 100;
            else maxNutrients = maxNutrients * 1.2; // Add 20% padding
            
            var canvas = document.getElementById('nutritionChart');
            if (!canvas) {
                console.error('Canvas element not found!');
                return;
            }
            
            var ctx = canvas.getContext('2d');
            if (!ctx) {
                console.error('Could not get 2d context from canvas!');
                return;
            }
            
            // Destroy existing chart if it exists
            if (currentChart) {
                currentChart.destroy();
                currentChart = null;
            }
            
            // Ensure canvas is properly sized
            var container = canvas.parentElement;
            if (container && container.offsetHeight === 0) {
                console.warn('Chart container has zero height, setting default height');
                container.style.height = '400px';
            }
            
            try {
                var chartConfig = {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [
                            {
                                label: 'کالری',
                                data: calories,
                                borderColor: '#FF6384',
                                backgroundColor: 'rgba(255, 99, 132, 0.1)',
                                borderWidth: 2,
                                tension: 0.4,
                                fill: false
                            },
                            {
                                label: 'پروتئین (g)',
                                data: protein,
                                borderColor: '#36A2EB',
                                backgroundColor: 'rgba(54, 162, 235, 0.1)',
                                borderWidth: 2,
                                tension: 0.4,
                                fill: false
                            },
                            {
                                label: 'چربی (g)',
                                data: fat,
                                borderColor: '#FFCE56',
                                backgroundColor: 'rgba(255, 206, 86, 0.1)',
                                borderWidth: 2,
                                tension: 0.4,
                                fill: false
                            },
                            {
                                label: 'کربوهیدرات (g)',
                                data: carbs,
                                borderColor: '#4BC0C0',
                                backgroundColor: 'rgba(75, 192, 192, 0.1)',
                                borderWidth: 2,
                                tension: 0.4,
                                fill: false
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
                        interaction: {
                            mode: 'index',
                            intersect: false,
                            includeInvisible: false,
                        },
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: {
                                rtl: true,
                                textDirection: 'rtl',
                                callbacks: {
                                    title: function(tooltipItems) {
                                        return 'تاریخ: ' + tooltipItems[0].label;
                                    },
                                    label: function(context) {
                                        var label = context.dataset.label || '';
                                        if (label) {
                                            label += ': ';
                                        }
                                        if (context.parsed.y !== null) {
                                            label += context.parsed.y.toFixed(1);
                                        }
                                        return label;
                                    }
                                }
                            }
                        },
                        scales: {
                            x: {
                                grid: {
                                    display: false
                                },
                                ticks: {
                                    font: {
                                        family: 'IRANSans, Tahoma, sans-serif'
                                    }
                                }
                            },
                            y: {
                                type: 'linear',
                                beginAtZero: true,
                                min: 0,
                                title: {
                                    display: true,
                                    text: 'مقدار (کالری و گرم)',
                                    font: {
                                        family: 'IRANSans, Tahoma, sans-serif',
                                        size: 12
                                    }
                                },
                                grid: {
                                    display: true,
                                    color: 'rgba(0, 0, 0, 0.1)'
                                },
                                ticks: {
                                    font: {
                                        family: 'IRANSans, Tahoma, sans-serif'
                                    }
                                }
                            }
                        }
                    }
                };
                
                if (!chartConfig.options || !chartConfig.options.scales) {
                    console.error('Scales object not found in chart config!');
                    return;
                }
                
                currentChart = new Chart(ctx, chartConfig);
                console.log('Chart created successfully');
            } catch (error) {
                console.error('Error creating chart:', error);
            }
        }
        
        function switchChartPeriod(period) {
            currentPeriod = period;
            jQuery('.period-btn').removeClass('active');
            jQuery('.period-btn[data-period="' + period + '"]').addClass('active');
            createNutritionChart(period);
        }
        
        // Initialize chart on page load
        jQuery(document).ready(function() {
            if (typeof Chart === 'undefined') {
                console.error('Chart.js not loaded!');
                setTimeout(function() {
                    if (typeof Chart !== 'undefined') {
                        initializeChart();
                    }
                }, 500);
                return;
            }
            initializeChart();
        });
        
        function initializeChart() {
            var canvas = document.getElementById('nutritionChart');
            if (!canvas) {
                console.error('Canvas element not found!');
                return;
            }
            setTimeout(function() {
                createNutritionChart(7);
            }, 100);
        }
    </script>
    
    <style>
        .day-header:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 154, 110, 0.3) !important;
        }
        
        .day-header[aria-expanded="true"] .fa-chevron-down {
            transform: translateY(-50%) rotate(180deg);
        }
        
        .food-item:hover {
            background: #e8f5e9 !important;
            border-color: #009A6E !important;
            transition: all 0.2s ease;
        }
        
        .meal-section {
            animation: fadeIn 0.3s ease-in;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .period-btn {
            transition: all 0.3s ease;
        }
        
        .period-btn.active {
            background-color: #009A6E !important;
            color: white !important;
            border-color: #009A6E !important;
        }
    </style>
    
{% endblock %}