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

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

{% block content %}
      <div class="content">
        <div class="full-width-container">
          <div class="row">
            <div class="col-md-8">
              <h2 class="titles text-center" style="font-family:'IranSansWeb'; font-size: 24px">{% trans "جدول غذایی" %} - {{ patient.profile.first_name }} {{ patient.profile.last_name }}</h2>
                <div class="card-box mb-0" style="border-radius: 20px;">
                  <div class="card-box">
                    <div class="text-center" dir="rtl">
                      <table id="mealTable">
                        <thead>
                          <tr style="color: #FFFFFF; background-color: #6a6aee; font-size: medium">
                            <th></th>
                            <th>{% trans "شماره" %}</th>
                            <th>{% trans "صبحانه" %}</th>
                            <th>{% trans "ناهار" %}</th>
                            <th>{% trans "شام" %}</th>
                            <th>{% trans "اسنک اول" %}</th>
                            <th>{% trans "اسنک دوم" %}</th>
                            <th>{% trans "جمع کل" %}</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr class="table-row">
                            <td class="toggle-icon" onclick="event.stopPropagation(); toggleRow(this)">
                                <i class="fa fa-minus"></i> <!-- Plus icon for collapsed state -->
                            </td>
                            <td class="non-droppable" style="color: #009A6E; background-color: #d0eeda; cursor: pointer" onclick="showNutrientDetails(1)">{% trans "یک" %}</td>
                            <td id="first-breakfast"></td>
                            <td id="first-lunch"></td>
                            <td id="first-dinner"></td>
                            <td id="first-snack-1"></td>
                            <td id="first-snack-2"></td>
                            <td id="first-nutrient-summary" class="nutrient-summary"></td>
                          </tr>
                          <tr class="table-row">
                          <td class="toggle-icon" onclick="event.stopPropagation(); toggleRow(this)">
                                <i class="fa fa-minus"></i> <!-- Plus icon for collapsed state -->
                            </td>
                            <td class="non-droppable" style="color: #009A6E; background-color: #d0eeda; cursor: pointer" onclick="showNutrientDetails(2)">{% trans "دو" %}</td>
                            <td id="second-breakfast"></td>
                            <td id="second-lunch"></td>
                            <td id="second-dinner"></td>
                            <td id="second-snack-1"></td>
                            <td id="second-snack-2"></td>
                            <td id="first-nutrient-summary" class="nutrient-summary"></td>
                          </tr>
                          <tr class="table-row">
                          <td class="toggle-icon" onclick="event.stopPropagation(); toggleRow(this)">
                                <i class="fa fa-minus"></i> <!-- Plus icon for collapsed state -->
                            </td>
                            <td class="non-droppable" style="color: #009A6E; background-color: #d0eeda; cursor: pointer" onclick="showNutrientDetails(3)">{% trans "سه" %}</td>
                            <td id="third-breakfast"></td>
                            <td id="third-lunch"></td>
                            <td id="third-dinner"></td>
                            <td id="third-snack-1"></td>
                            <td id="third-snack-2"></td>
                            <td id="first-nutrient-summary" class="nutrient-summary"></td>
                          </tr>
                          <tr class="table-row">
                          <td class="toggle-icon" onclick="event.stopPropagation(); toggleRow(this)">
                                <i class="fa fa-minus"></i> <!-- Plus icon for collapsed state -->
                            </td>
                            <td class="non-droppable" style="color: #009A6E; background-color: #d0eeda; cursor: pointer" onclick="showNutrientDetails(4)">{% trans "چهار" %}</td>
                            <td id="fourth-breakfast"></td>
                            <td id="fourth-lunch"></td>
                            <td id="fourth-dinner"></td>
                            <td id="fourth-snack-1"></td>
                            <td id="fourth-snack-2"></td>
                            <td id="first-nutrient-summary" class="nutrient-summary"></td>
                          </tr>
                          <tr class="table-row">
                          <td class="toggle-icon" onclick="event.stopPropagation(); toggleRow(this)">
                                <i class="fa fa-minus"></i> <!-- Plus icon for collapsed state -->
                            </td>
                            <td class="non-droppable" style="color: #009A6E; background-color: #d0eeda; cursor: pointer" onclick="showNutrientDetails(5)">{% trans "پنج" %}</td>
                            <td id="fifth-breakfast"></td>
                            <td id="fifth-lunch"></td>
                            <td id="fifth-dinner"></td>
                            <td id="fifth-snack-1"></td>
                            <td id="fifth-snack-2"></td>
                            <td id="first-nutrient-summary" class="nutrient-summary"></td>
                          </tr>
                          <tr class="table-row">
                          <td class="toggle-icon" onclick="event.stopPropagation(); toggleRow(this)">
                                <i class="fa fa-minus"></i> <!-- Plus icon for collapsed state -->
                            </td>
                            <td class="non-droppable" style="color: #009A6E; background-color: #d0eeda; cursor: pointer" onclick="showNutrientDetails(6)">{% trans "شش" %}</td>
                            <td id="sixth-breakfast"></td>
                            <td id="sixth-lunch"></td>
                            <td id="sixth-dinner"></td>
                            <td id="sixth-snack-1"></td>
                            <td id="sixth-snack-2"></td>
                            <td id="first-nutrient-summary" class="nutrient-summary"></td>
                          </tr>
                          <tr class="table-row">
                          <td class="toggle-icon" onclick="event.stopPropagation(); toggleRow(this)">
                                <i class="fa fa-minus"></i> <!-- Plus icon for collapsed state -->
                            </td>
                            <td class="non-droppable" style="color: #009A6E; background-color: #d0eeda; cursor: pointer" onclick="showNutrientDetails(7)">{% trans "هفت" %}</td>
                            <td id="seventh-breakfast"></td>
                            <td id="seventh-lunch"></td>
                            <td id="seventh-dinner"></td>
                            <td id="seventh-snack-1"></td>
                            <td id="seventh-snack-2"></td>
                            <td id="first-nutrient-summary" class="nutrient-summary"></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>

                        <div id="nutrientDetails" class="nutrient-details text-center" >
                            <h4>{% trans "اطلاعات کارت" %}</h4>
                            <div id="nutrientContent"></div>
                        </div>

                    <hr>
                    <div class="align-items-center submit-time-slots" style="margin-bottom: 20px">
                        <button id="submitMealPlan" class="submit-btn">{% trans "ثبت رژیم برای کاربر" %}</button>
                    </div>
                    <div class="form-group">
                        <label class="text-center" for="dietStartDate">--- تعیین تاریخ شروع رژیم ---</label>
                        <input type="date" id="dietStartDate" name="dietStartDate" class="form-control stylish-input">
                    </div>
                    <hr>
{#                    <div class="align-items-center" style="margin-bottom: 20px">#}
{#                        <select id="dietTemplateDropdown"></select>#}
{#                        <label for="dietTemplateDropdown" class="titles" dir="rtl" style="margin-left: 20px; font-size: 16px; padding-top: 10px">{% trans "انتخاب از رژیم های موجود : " %}</label>#}
{#                        <button id="editTemplateBtn" class="btn-edit" onclick="editTemplateName()">تغییر نام</button>#}
{#                        <button id="deleteTemplateBtn" class="btn-delete" onclick="deleteTemplate()">حذف</button>#}
{#                    </div>#}
                      <div class="align-items-center">
                          <button id="saveTemplateButton" class="save-btn">{% trans "ذخیره رژیم" %}</button>
                          <button id="loadTemplateButton" class="load-btn">{% trans "بارگذاری رژیم" %}</button>
                      </div>
                  </div>
                </div>
                  <hr>
                  <div class="disease-list-container">
                    {% for disease in diseases_list %}
                        <span class="disease-item">{{ disease }}</span>
                    {% endfor %}
                  </div>
                  <h3 class="titles text-center">{% trans "یادداشت های من" %}</h3>
                  <div class="card-box mb-0" dir="rtl" style="border-radius: 20px;">
                    <div class="experience-box">
                        <ul class="experience-list">
                            {% for note in medical_notes %}
                                <li>
                                    <div class="experience-content text-right">
                                        <div class="questionnaire timeline-content">
                                            <h5 style="color: black; font-size: 16px; line-height: normal">{{ note.text|safe }}</h5>
                                            <span class="time" style="color: rgba(78,79,235,0.85)">{{ note.time }}, [{{ note.writer_name }}]</span>
                                        </div>
                                    </div>
                                    <div class="experience-user">
                                        <div class="before-circle"></div>
                                    </div>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                  </div>
                  <hr>
                  <h3 class="titles text-center my-4" style="font-size: 1.8rem; color: #009A6E; font-weight: bold;">
                    {% trans "سوالات و پاسخ‌ها" %}
                    </h3>
                    <hr>
                    <div class="container">
                        <div class="row">
                            {% for q, a in 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: #f9f9f9;">
                                        <h5 class="qa-question text-right" style="font-size: 0.9rem; 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>
            </div>
            <div class="col-md-4">
              <h2 class="titles text-center" style="font-family:'IranSansWeb'; font-size: 24px">{% trans "لیست غذا ها" %}</h2>
              <div class="card-box mb-0" style="border-radius: 40px;">
                  <div class="card-box">
                      <div class="text-right">
                          <label class="titles" for="toggleButton" style="cursor: pointer;">{% trans "کارت های غذایی" %}</label>
                          <input type="checkbox" id="toggleButton" checked="checked" style="cursor: pointer">
                      </div>
                      <div id="element1" style="display: block;">
                          <div class="search-container">
                              <input type="text" dir="rtl" id="cardSearch" placeholder="{% trans "جستجو در کارت ها..." %}" class="search-bar">
                              <button type="button" id="cardSearchButton">{% trans "جستجو" %}</button>
                            </div>

                          <div id="selectedTagsContainer" class="selected-tags-container"></div>
                          <!-- Dropdown Menus for Card Categories -->
                            <div class="filter-container">
                                <div class="search-box">
                                    <input type="text" id="tag-search" placeholder="جستجوی تگ‌ها..." dir="rtl">
                                </div>
                                <!-- Search Results -->
                                <div class="search-results" id="search-results"></div>
                                <div class="filter-categories" id="filter-categories">
                                    <!-- وعده غذایی (Meals) -->
                                    <div class="filter-group">
                                        <button class="filter-btn" data-category="meals">وعده غذایی</button>
                                        <div class="filter-content" data-category="meals">
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="is_breakfast" data-action="include" onclick="filterCards('is_breakfast', 'include')">شامل صبحانه</button>
                                                <button class="tag-btn exclude" data-tag="is_breakfast" data-action="exclude" onclick="filterCards('is_breakfast', 'exclude')">حذف صبحانه</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="is_lunch" data-action="include" onclick="filterCards('is_lunch', 'include')">شامل ناهار</button>
                                                <button class="tag-btn exclude" data-tag="is_lunch" data-action="exclude" onclick="filterCards('is_lunch', 'exclude')">حذف ناهار</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="is_dinner" data-action="include" onclick="filterCards('is_dinner', 'include')">شامل شام</button>
                                                <button class="tag-btn exclude" data-tag="is_dinner" data-action="exclude" onclick="filterCards('is_dinner', 'exclude')">حذف شام</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="is_snack" data-action="include" onclick="filterCards('is_snack', 'include')">شامل میان وعده‌ها</button>
                                                <button class="tag-btn exclude" data-tag="is_snack" data-action="exclude" onclick="filterCards('is_snack', 'exclude')">حذف میان وعده‌ها</button>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- رژیم غذایی (Diets) -->
                                    <div class="filter-group">
                                        <button class="filter-btn" data-category="diets">رژیم غذایی</button>
                                        <div class="filter-content" data-category="diets">
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="is_keto" data-action="include" onclick="filterCards('is_keto', 'include')">شامل Keto</button>
                                                <button class="tag-btn exclude" data-tag="is_keto" data-action="exclude" onclick="filterCards('is_keto', 'exclude')">حذف Keto</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="is_med" data-action="include" onclick="filterCards('is_med', 'include')">شامل Med</button>
                                                <button class="tag-btn exclude" data-tag="is_med" data-action="exclude" onclick="filterCards('is_med', 'exclude')">حذف Med</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="is_mind" data-action="include" onclick="filterCards('is_mind', 'include')">شامل Mind</button>
                                                <button class="tag-btn exclude" data-tag="is_mind" data-action="exclude" onclick="filterCards('is_mind', 'exclude')">حذف Mind</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="is_low_fodmap" data-action="include" onclick="filterCards('is_low_fodmap', 'include')">شامل Low-FODMAP</button>
                                                <button class="tag-btn exclude" data-tag="is_low_fodmap" data-action="exclude" onclick="filterCards('is_low_fodmap', 'exclude')">حذف Low-FODMAP</button>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- گروه غذایی (Food Groups) -->
                                    <div class="filter-group">
                                        <button class="filter-btn" data-category="food-groups">گروه غذایی</button>
                                        <div class="filter-content" data-category="food-groups">
                                            <!-- Placeholder for now, as original had no active tags -->
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="is_lowcarb" data-action="include" onclick="filterCards('is_lowcarb', 'include')">شامل Low-Carb</button>
                                                <button class="tag-btn exclude" data-tag="is_lowcarb" data-action="exclude" onclick="filterCards('is_lowcarb', 'exclude')">حذف Low-Carb</button>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- نوترینت (Nutrients) -->
                                    <div class="filter-group">
                                        <button class="filter-btn" data-category="nutrients">نوترینت</button>
                                        <div class="filter-content" data-category="nutrients">
                                            <button class="collapse-btn" data-collapse="carbs">کربوهیدرات‌ها</button>
                                            <div class="collapse-content" data-collapse="carbs">
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="is_highcarb" data-action="include" onclick="filterCards('is_highcarb', 'include')">شامل HighCarb</button>
                                                    <button class="tag-btn exclude" data-tag="is_highcarb" data-action="exclude" onclick="filterCards('is_highcarb', 'exclude')">حذف HighCarb</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="is_mediumcarb" data-action="include" onclick="filterCards('is_mediumcarb', 'include')">شامل MediumCarb</button>
                                                    <button class="tag-btn exclude" data-tag="is_mediumcarb" data-action="exclude" onclick="filterCards('is_mediumcarb', 'exclude')">حذف MediumCarb</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="is_lowcarb" data-action="include" onclick="filterCards('is_lowcarb', 'include')">شامل LowCarb</button>
                                                    <button class="tag-btn exclude" data-tag="is_lowcarb" data-action="exclude" onclick="filterCards('is_lowcarb', 'exclude')">حذف LowCarb</button>
                                                </div>
                                            </div>
                                            <button class="collapse-btn" data-collapse="proteins">پروتئین‌ها</button>
                                            <div class="collapse-content" data-collapse="proteins">
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="is_highprotein" data-action="include" onclick="filterCards('is_highprotein', 'include')">شامل HighProtein</button>
                                                    <button class="tag-btn exclude" data-tag="is_highprotein" data-action="exclude" onclick="filterCards('is_highprotein', 'exclude')">حذف HighProtein</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="is_mediumprotein" data-action="include" onclick="filterCards('is_mediumprotein', 'include')">شامل MediumProtein</button>
                                                    <button class="tag-btn exclude" data-tag="is_mediumprotein" data-action="exclude" onclick="filterCards('is_mediumprotein', 'exclude')">حذف MediumProtein</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="is_lowprotein" data-action="include" onclick="filterCards('is_lowprotein', 'include')">شامل LowProtein</button>
                                                    <button class="tag-btn exclude" data-tag="is_lowprotein" data-action="exclude" onclick="filterCards('is_lowprotein', 'exclude')">حذف LowProtein</button>
                                                </div>
                                            </div>
                                            <button class="collapse-btn" data-collapse="fats">چربی‌ها</button>
                                            <div class="collapse-content" data-collapse="fats">
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="is_highfat" data-action="include" onclick="filterCards('is_highfat', 'include')">شامل HighFat</button>
                                                    <button class="tag-btn exclude" data-tag="is_highfat" data-action="exclude" onclick="filterCards('is_highfat', 'exclude')">حذف HighFat</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="is_mediumfat" data-action="include" onclick="filterCards('is_mediumfat', 'include')">شامل MediumFat</button>
                                                    <button class="tag-btn exclude" data-tag="is_mediumfat" data-action="exclude" onclick="filterCards('is_mediumfat', 'exclude')">حذف MediumFat</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="is_lowfat" data-action="include" onclick="filterCards('is_lowfat', 'include')">شامل LowFat</button>
                                                    <button class="tag-btn exclude" data-tag="is_lowfat" data-action="exclude" onclick="filterCards('is_lowfat', 'exclude')">حذف LowFat</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- سایر (Others) -->
                                    <div class="filter-group">
                                        <button class="filter-btn" data-category="others">سایر</button>
                                        <div class="filter-content" data-category="others">
                                            <button class="collapse-btn" data-collapse="food-types">انواع غذا</button>
                                            <div class="collapse-content" data-collapse="food-types">
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Dessert" data-action="include" onclick="filterCards('Dessert', 'include')">شامل Dessert</button>
                                                    <button class="tag-btn exclude" data-tag="Dessert" data-action="exclude" onclick="filterCards('Dessert', 'exclude')">حذف Dessert</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Added_Meat" data-action="include" onclick="filterCards('Added_Meat', 'include')">شامل Added_Meat</button>
                                                    <button class="tag-btn exclude" data-tag="Added_Meat" data-action="exclude" onclick="filterCards('Added_Meat', 'exclude')">حذف Added_Meat</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Ing_Main" data-action="include" onclick="filterCards('Ing_Main', 'include')">شامل Ing_Main</button>
                                                    <button class="tag-btn exclude" data-tag="Ing_Main" data-action="exclude" onclick="filterCards('Ing_Main', 'exclude')">حذف Ing_Main</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Beverage" data-action="include" onclick="filterCards('Beverage', 'include')">شامل Beverage</button>
                                                    <button class="tag-btn exclude" data-tag="Beverage" data-action="exclude" onclick="filterCards('Beverage', 'exclude')">حذف Beverage</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Sandwich" data-action="include" onclick="filterCards('Sandwich', 'include')">شامل Sandwich</button>
                                                    <button class="tag-btn exclude" data-tag="Sandwich" data-action="exclude" onclick="filterCards('Sandwich', 'exclude')">حذف Sandwich</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Condiment" data-action="include" onclick="filterCards('Condiment', 'include')">شامل Condiment</button>
                                                    <button class="tag-btn exclude" data-tag="Condiment" data-action="exclude" onclick="filterCards('Condiment', 'exclude')">حذف Condiment</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Lunch" data-action="include" onclick="filterCards('Lunch', 'include')">شامل Lunch</button>
                                                    <button class="tag-btn exclude" data-tag="Lunch" data-action="exclude" onclick="filterCards('Lunch', 'exclude')">حذف Lunch</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Snack" data-action="include" onclick="filterCards('Snack', 'include')">شامل Snack</button>
                                                    <button class="tag-btn exclude" data-tag="Snack" data-action="exclude" onclick="filterCards('Snack', 'exclude')">حذف Snack</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Bread" data-action="include" onclick="filterCards('Bread', 'include')">شامل Bread</button>
                                                    <button class="tag-btn exclude" data-tag="Bread" data-action="exclude" onclick="filterCards('Bread', 'exclude')">حذف Bread</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Entree" data-action="include" onclick="filterCards('Entree', 'include')">شامل Entree</button>
                                                    <button class="tag-btn exclude" data-tag="Entree" data-action="exclude" onclick="filterCards('Entree', 'exclude')">حذف Entree</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Soup" data-action="include" onclick="filterCards('Soup', 'include')">شامل Soup</button>
                                                    <button class="tag-btn exclude" data-tag="Soup" data-action="exclude" onclick="filterCards('Soup', 'exclude')">حذف Soup</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Side_Dish" data-action="include" onclick="filterCards('Side_Dish', 'include')">شامل Side_Dish</button>
                                                    <button class="tag-btn exclude" data-tag="Side_Dish" data-action="exclude" onclick="filterCards('Side_Dish', 'exclude')">حذف Side_Dish</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Appetizer" data-action="include" onclick="filterCards('Appetizer', 'include')">شامل Appetizer</button>
                                                    <button class="tag-btn exclude" data-tag="Appetizer" data-action="exclude" onclick="filterCards('Appetizer', 'exclude')">حذف Appetizer</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Dinner" data-action="include" onclick="filterCards('Dinner', 'include')">شامل Dinner</button>
                                                    <button class="tag-btn exclude" data-tag="Dinner" data-action="exclude" onclick="filterCards('Dinner', 'exclude')">حذف Dinner</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Pasta" data-action="include" onclick="filterCards('Pasta', 'include')">شامل Pasta</button>
                                                    <button class="tag-btn exclude" data-tag="Pasta" data-action="exclude" onclick="filterCards('Pasta', 'exclude')">حذف Pasta</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Breakfast" data-action="include" onclick="filterCards('Breakfast', 'include')">شامل Breakfast</button>
                                                    <button class="tag-btn exclude" data-tag="Breakfast" data-action="exclude" onclick="filterCards('Breakfast', 'exclude')">حذف Breakfast</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Salad" data-action="include" onclick="filterCards('Salad', 'include')">شامل Salad</button>
                                                    <button class="tag-btn exclude" data-tag="Salad" data-action="exclude" onclick="filterCards('Salad', 'exclude')">حذف Salad</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Ingredient" data-action="include" onclick="filterCards('Ingredient', 'include')">شامل Ingredient</button>
                                                    <button class="tag-btn exclude" data-tag="Ingredient" data-action="exclude" onclick="filterCards('Ingredient', 'exclude')">حذف Ingredient</button>
                                                </div>
                                            </div>
                                            <button class="collapse-btn" data-collapse="bacteria">باکتری‌ها</button>
                                            <div class="collapse-content" data-collapse="bacteria">
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Bacteria_Acidaminococcus" data-action="include" onclick="filterCards('Bacteria_Acidaminococcus', 'include')">شامل Bacteria_Acidaminococcus</button>
                                                    <button class="tag-btn exclude" data-tag="Bacteria_Acidaminococcus" data-action="exclude" onclick="filterCards('Bacteria_Acidaminococcus', 'exclude')">حذف Bacteria_Acidaminococcus</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Bacteria_Bacteroidetes" data-action="include" onclick="filterCards('Bacteria_Bacteroidetes', 'include')">شامل Bacteria_Bacteroidetes</button>
                                                    <button class="tag-btn exclude" data-tag="Bacteria_Bacteroidetes" data-action="exclude" onclick="filterCards('Bacteria_Bacteroidetes', 'exclude')">حذف Bacteria_Bacteroidetes</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Bacteria_Alistipes" data-action="include" onclick="filterCards('Bacteria_Alistipes', 'include')">شامل Bacteria_Alistipes</button>
                                                    <button class="tag-btn exclude" data-tag="Bacteria_Alistipes" data-action="exclude" onclick="filterCards('Bacteria_Alistipes', 'exclude')">حذف Bacteria_Alistipes</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Bacteria_Bifidobacterium" data-action="include" onclick="filterCards('Bacteria_Bifidobacterium', 'include')">شامل Bacteria_Bifidobacterium</button>
                                                    <button class="tag-btn exclude" data-tag="Bacteria_Bifidobacterium" data-action="exclude" onclick="filterCards('Bacteria_Bifidobacterium', 'exclude')">حذف Bacteria_Bifidobacterium</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Bacteria_Akkermansia" data-action="include" onclick="filterCards('Bacteria_Akkermansia', 'include')">شامل Bacteria_Akkermansia</button>
                                                    <button class="tag-btn exclude" data-tag="Bacteria_Akkermansia" data-action="exclude" onclick="filterCards('Bacteria_Akkermansia', 'exclude')">حذف Bacteria_Akkermansia</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Bacteria_Blautia" data-action="include" onclick="filterCards('Bacteria_Blautia', 'include')">شامل Bacteria_Blautia</button>
                                                    <button class="tag-btn exclude" data-tag="Bacteria_Blautia" data-action="exclude" onclick="filterCards('Bacteria_Blautia', 'exclude')">حذف Bacteria_Blautia</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Bacteria_Fecalibacterium" data-action="include" onclick="filterCards('Bacteria_Fecalibacterium', 'include')">شامل Bacteria_Fecalibacterium</button>
                                                    <button class="tag-btn exclude" data-tag="Bacteria_Fecalibacterium" data-action="exclude" onclick="filterCards('Bacteria_Fecalibacterium', 'exclude')">حذف Bacteria_Fecalibacterium</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Bacteria_Lawsonibacter_asaccharolyticus" data-action="include" onclick="filterCards('Bacteria_Lawsonibacter_asaccharolyticus', 'include')">شامل Bacteria_Lawsonibacter_asaccharolyticus</button>
                                                    <button class="tag-btn exclude" data-tag="Bacteria_Lawsonibacter_asaccharolyticus" data-action="exclude" onclick="filterCards('Bacteria_Lawsonibacter_asaccharolyticus', 'exclude')">حذف Bacteria_Lawsonibacter_asaccharolyticus</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Bacteria_Lactobacillus" data-action="include" onclick="filterCards('Bacteria_Lactobacillus', 'include')">شامل Bacteria_Lactobacillus</button>
                                                    <button class="tag-btn exclude" data-tag="Bacteria_Lactobacillus" data-action="exclude" onclick="filterCards('Bacteria_Lactobacillus', 'exclude')">حذف Bacteria_Lactobacillus</button>
                                                </div>
                                            </div>
                                            <button class="collapse-btn" data-collapse="properties">ویژگی‌ها</button>
                                            <div class="collapse-content" data-collapse="properties">
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Vegan" data-action="include" onclick="filterCards('Vegan', 'include')">شامل Vegan</button>
                                                    <button class="tag-btn exclude" data-tag="Vegan" data-action="exclude" onclick="filterCards('Vegan', 'exclude')">حذف Vegan</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Umami" data-action="include" onclick="filterCards('Umami', 'include')">شامل Umami</button>
                                                    <button class="tag-btn exclude" data-tag="Umami" data-action="exclude" onclick="filterCards('Umami', 'exclude')">حذف Umami</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Slow_cooked" data-action="include" onclick="filterCards('Slow_cooked', 'include')">شامل Slow_cooked</button>
                                                    <button class="tag-btn exclude" data-tag="Slow_cooked" data-action="exclude" onclick="filterCards('Slow_cooked', 'exclude')">حذف Slow_cooked</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Spicy" data-action="include" onclick="filterCards('Spicy', 'include')">شامل Spicy</button>
                                                    <button class="tag-btn exclude" data-tag="Spicy" data-action="exclude" onclick="filterCards('Spicy', 'exclude')">حذف Spicy</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Baked" data-action="include" onclick="filterCards('Baked', 'include')">شامل Baked</button>
                                                    <button class="tag-btn exclude" data-tag="Baked" data-action="exclude" onclick="filterCards('Baked', 'exclude')">حذف Baked</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Pickled" data-action="include" onclick="filterCards('Pickled', 'include')">شامل Pickled</button>
                                                    <button class="tag-btn exclude" data-tag="Pickled" data-action="exclude" onclick="filterCards('Pickled', 'exclude')">حذف Pickled</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Low_calorie" data-action="include" onclick="filterCards('Low_calorie', 'include')">شامل Low_calorie</button>
                                                    <button class="tag-btn exclude" data-tag="Low_calorie" data-action="exclude" onclick="filterCards('Low_calorie', 'exclude')">حذف Low_calorie</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Grilled" data-action="include" onclick="filterCards('Grilled', 'include')">شامل Grilled</button>
                                                    <button class="tag-btn exclude" data-tag="Grilled" data-action="exclude" onclick="filterCards('Grilled', 'exclude')">حذف Grilled</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Roasted" data-action="include" onclick="filterCards('Roasted', 'include')">شامل Roasted</button>
                                                    <button class="tag-btn exclude" data-tag="Roasted" data-action="exclude" onclick="filterCards('Roasted', 'exclude')">حذف Roasted</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="High_protein" data-action="include" onclick="filterCards('High_protein', 'include')">شامل High_protein</button>
                                                    <button class="tag-btn exclude" data-tag="High_protein" data-action="exclude" onclick="filterCards('High_protein', 'exclude')">حذف High_protein</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Fried" data-action="include" onclick="filterCards('Fried', 'include')">شامل Fried</button>
                                                    <button class="tag-btn exclude" data-tag="Fried" data-action="exclude" onclick="filterCards('Fried', 'exclude')">حذف Fried</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Sweet" data-action="include" onclick="filterCards('Sweet', 'include')">شامل Sweet</button>
                                                    <button class="tag-btn exclude" data-tag="Sweet" data-action="exclude" onclick="filterCards('Sweet', 'exclude')">حذف Sweet</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Salty" data-action="include" onclick="filterCards('Salty', 'include')">شامل Salty</button>
                                                    <button class="tag-btn exclude" data-tag="Salty" data-action="exclude" onclick="filterCards('Salty', 'exclude')">حذف Salty</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Lactose_free" data-action="include" onclick="filterCards('Lactose_free', 'include')">شامل Lactose_free</button>
                                                    <button class="tag-btn exclude" data-tag="Lactose_free" data-action="exclude" onclick="filterCards('Lactose_free', 'exclude')">حذف Lactose_free</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Low_carb" data-action="include" onclick="filterCards('Low_carb', 'include')">شامل Low_carb</button>
                                                    <button class="tag-btn exclude" data-tag="Low_carb" data-action="exclude" onclick="filterCards('Low_carb', 'exclude')">حذف Low_carb</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Cold" data-action="include" onclick="filterCards('Cold', 'include')">شامل Cold</button>
                                                    <button class="tag-btn exclude" data-tag="Cold" data-action="exclude" onclick="filterCards('Cold', 'exclude')">حذف Cold</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Vegetarian" data-action="include" onclick="filterCards('Vegetarian', 'include')">شامل Vegetarian</button>
                                                    <button class="tag-btn exclude" data-tag="Vegetarian" data-action="exclude" onclick="filterCards('Vegetarian', 'exclude')">حذف Vegetarian</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Sour" data-action="include" onclick="filterCards('Sour', 'include')">شامل Sour</button>
                                                    <button class="tag-btn exclude" data-tag="Sour" data-action="exclude" onclick="filterCards('Sour', 'exclude')">حذف Sour</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Sweet_Sour" data-action="include" onclick="filterCards('Sweet_Sour', 'include')">شامل Sweet_Sour</button>
                                                    <button class="tag-btn exclude" data-tag="Sweet_Sour" data-action="exclude" onclick="filterCards('Sweet_Sour', 'exclude')">حذف Sweet_Sour</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Raw" data-action="include" onclick="filterCards('Raw', 'include')">شامل Raw</button>
                                                    <button class="tag-btn exclude" data-tag="Raw" data-action="exclude" onclick="filterCards('Raw', 'exclude')">حذف Raw</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Gluten_free" data-action="include" onclick="filterCards('Gluten_free', 'include')">شامل Gluten_free</button>
                                                    <button class="tag-btn exclude" data-tag="Gluten_free" data-action="exclude" onclick="filterCards('Gluten_free', 'exclude')">حذف Gluten_free</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Boiled" data-action="include" onclick="filterCards('Boiled', 'include')">شامل Boiled</button>
                                                    <button class="tag-btn exclude" data-tag="Boiled" data-action="exclude" onclick="filterCards('Boiled', 'exclude')">حذف Boiled</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Steamed" data-action="include" onclick="filterCards('Steamed', 'include')">شامل Steamed</button>
                                                    <button class="tag-btn exclude" data-tag="Steamed" data-action="exclude" onclick="filterCards('Steamed', 'exclude')">حذف Steamed</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Low_fat" data-action="include" onclick="filterCards('Low_fat', 'include')">شامل Low_fat</button>
                                                    <button class="tag-btn exclude" data-tag="Low_fat" data-action="exclude" onclick="filterCards('Low_fat', 'exclude')">حذف Low_fat</button>
                                                </div>
                                            </div>
                                            <button class="collapse-btn" data-collapse="categories">دسته‌بندی‌ها</button>
                                            <div class="collapse-content" data-collapse="categories">
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Prepared_Meals" data-action="include" onclick="filterCards('Prepared_Meals', 'include')">شامل Prepared_Meals</button>
                                                    <button class="tag-btn exclude" data-tag="Prepared_Meals" data-action="exclude" onclick="filterCards('Prepared_Meals', 'exclude')">حذف Prepared_Meals</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Meats" data-action="include" onclick="filterCards('Meats', 'include')">شامل Meats</button>
                                                    <button class="tag-btn exclude" data-tag="Meats" data-action="exclude" onclick="filterCards('Meats', 'exclude')">حذف Meats</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Sweets" data-action="include" onclick="filterCards('Sweets', 'include')">شامل Sweets</button>
                                                    <button class="tag-btn exclude" data-tag="Sweets" data-action="exclude" onclick="filterCards('Sweets', 'exclude')">حذف Sweets</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Beans_and_Lentils" data-action="include" onclick="filterCards('Beans_and_Lentils', 'include')">شامل Beans_and_Lentils</button>
                                                    <button class="tag-btn exclude" data-tag="Beans_and_Lentils" data-action="exclude" onclick="filterCards('Beans_and_Lentils', 'exclude')">حذف Beans_and_Lentils</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Snacks" data-action="include" onclick="filterCards('Snacks', 'include')">شامل Snacks</button>
                                                    <button class="tag-btn exclude" data-tag="Snacks" data-action="exclude" onclick="filterCards('Snacks', 'exclude')">حذف Snacks</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Grains_and_Pasta" data-action="include" onclick="filterCards('Grains_and_Pasta', 'include')">شامل Grains_and_Pasta</button>
                                                    <button class="tag-btn exclude" data-tag="Grains_and_Pasta" data-action="exclude" onclick="filterCards('Grains_and_Pasta', 'exclude')">حذف Grains_and_Pasta</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Nuts_and_Seeds" data-action="include" onclick="filterCards('Nuts_and_Seeds', 'include')">شامل Nuts_and_Seeds</button>
                                                    <button class="tag-btn exclude" data-tag="Nuts_and_Seeds" data-action="exclude" onclick="filterCards('Nuts_and_Seeds', 'exclude')">حذف Nuts_and_Seeds</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Fruits" data-action="include" onclick="filterCards('Fruits', 'include')">شامل Fruits</button>
                                                    <button class="tag-btn exclude" data-tag="Fruits" data-action="exclude" onclick="filterCards('Fruits', 'exclude')">حذف Fruits</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Beverages" data-action="include" onclick="filterCards('Beverages', 'include')">شامل Beverages</button>
                                                    <button class="tag-btn exclude" data-tag="Beverages" data-action="exclude" onclick="filterCards('Beverages', 'exclude')">حذف Beverages</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Fish" data-action="include" onclick="filterCards('Fish', 'include')">شامل Fish</button>
                                                    <button class="tag-btn exclude" data-tag="Fish" data-action="exclude" onclick="filterCards('Fish', 'exclude')">حذف Fish</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Baked_Foods" data-action="include" onclick="filterCards('Baked_Foods', 'include')">شامل Baked_Foods</button>
                                                    <button class="tag-btn exclude" data-tag="Baked_Foods" data-action="exclude" onclick="filterCards('Baked_Foods', 'exclude')">حذف Baked_Foods</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Breakfast_Cereals" data-action="include" onclick="filterCards('Breakfast_Cereals', 'include')">شامل Breakfast_Cereals</button>
                                                    <button class="tag-btn exclude" data-tag="Breakfast_Cereals" data-action="exclude" onclick="filterCards('Breakfast_Cereals', 'exclude')">حذف Breakfast_Cereals</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Vegetables" data-action="include" onclick="filterCards('Vegetables', 'include')">شامل Vegetables</button>
                                                    <button class="tag-btn exclude" data-tag="Vegetables" data-action="exclude" onclick="filterCards('Vegetables', 'exclude')">حذف Vegetables</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Spices_and_Herbs" data-action="include" onclick="filterCards('Spices_and_Herbs', 'include')">شامل Spices_and_Herbs</button>
                                                    <button class="tag-btn exclude" data-tag="Spices_and_Herbs" data-action="exclude" onclick="filterCards('Spices_and_Herbs', 'exclude')">حذف Spices_and_Herbs</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Soups_and_Sauces" data-action="include" onclick="filterCards('Soups_and_Sauces', 'include')">شامل Soups_and_Sauces</button>
                                                    <button class="tag-btn exclude" data-tag="Soups_and_Sauces" data-action="exclude" onclick="filterCards('Soups_and_Sauces', 'exclude')">حذف Soups_and_Sauces</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Dairy_and_Egg_Products" data-action="include" onclick="filterCards('Dairy_and_Egg_Products', 'include')">شامل Dairy_and_Egg_Products</button>
                                                    <button class="tag-btn exclude" data-tag="Dairy_and_Egg_Products" data-action="exclude" onclick="filterCards('Dairy_and_Egg_Products', 'exclude')">حذف Dairy_and_Egg_Products</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Fats_and_Oils" data-action="include" onclick="filterCards('Fats_and_Oils', 'include')">شامل Fats_and_Oils</button>
                                                    <button class="tag-btn exclude" data-tag="Fats_and_Oils" data-action="exclude" onclick="filterCards('Fats_and_Oils', 'exclude')">حذف Fats_and_Oils</button>
                                                </div>
                                            </div>
                                            <button class="collapse-btn" data-collapse="special">ویژه</button>
                                            <div class="collapse-content" data-collapse="special">
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Prebiotic" data-action="include" onclick="filterCards('Prebiotic', 'include')">شامل Prebiotic</button>
                                                    <button class="tag-btn exclude" data-tag="Prebiotic" data-action="exclude" onclick="filterCards('Prebiotic', 'exclude')">حذف Prebiotic</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Probiotic" data-action="include" onclick="filterCards('Probiotic', 'include')">شامل Probiotic</button>
                                                    <button class="tag-btn exclude" data-tag="Probiotic" data-action="exclude" onclick="filterCards('Probiotic', 'exclude')">حذف Probiotic</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Low_Inflammatory" data-action="include" onclick="filterCards('Low_Inflammatory', 'include')">شامل Low_Inflammatory</button>
                                                    <button class="tag-btn exclude" data-tag="Low_Inflammatory" data-action="exclude" onclick="filterCards('Low_Inflammatory', 'exclude')">حذف Low_Inflammatory</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Diverse" data-action="include" onclick="filterCards('Diverse', 'include')">شامل Diverse</button>
                                                    <button class="tag-btn exclude" data-tag="Diverse" data-action="exclude" onclick="filterCards('Diverse', 'exclude')">حذف Diverse</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Polyphenol_Rich" data-action="include" onclick="filterCards('Polyphenol_Rich', 'include')">شامل Polyphenol_Rich</button>
                                                    <button class="tag-btn exclude" data-tag="Polyphenol_Rich" data-action="exclude" onclick="filterCards('Polyphenol_Rich', 'exclude')">حذف Polyphenol_Rich</button>
                                                </div>
                                            </div>
                                            <button class="collapse-btn" data-collapse="traditional">سنتی و بین‌المللی</button>
                                            <div class="collapse-content" data-collapse="traditional">
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Stews" data-action="include" onclick="filterCards('Stews', 'include')">شامل Stews</button>
                                                    <button class="tag-btn exclude" data-tag="Stews" data-action="exclude" onclick="filterCards('Stews', 'exclude')">حذف Stews</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Mixed_Rice" data-action="include" onclick="filterCards('Mixed_Rice', 'include')">شامل Mixed_Rice</button>
                                                    <button class="tag-btn exclude" data-tag="Mixed_Rice" data-action="exclude" onclick="filterCards('Mixed_Rice', 'exclude')">حذف Mixed_Rice</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Soups_and_Aashes" data-action="include" onclick="filterCards('Soups_and_Aashes', 'include')">شامل Soups_and_Aashes</button>
                                                    <button class="tag-btn exclude" data-tag="Soups_and_Aashes" data-action="exclude" onclick="filterCards('Soups_and_Aashes', 'exclude')">حذف Soups_and_Aashes</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Traditional_Foods" data-action="include" onclick="filterCards('Traditional_Foods', 'include')">شامل Traditional_Foods</button>
                                                    <button class="tag-btn exclude" data-tag="Traditional_Foods" data-action="exclude" onclick="filterCards('Traditional_Foods', 'exclude')">حذف Traditional_Foods</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="International_Foods" data-action="include" onclick="filterCards('International_Foods', 'include')">شامل International_Foods</button>
                                                    <button class="tag-btn exclude" data-tag="International_Foods" data-action="exclude" onclick="filterCards('International_Foods', 'exclude')">حذف International_Foods</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Vegetarian_Foods" data-action="include" onclick="filterCards('Vegetarian_Foods', 'include')">شامل Vegetarian_Foods</button>
                                                    <button class="tag-btn exclude" data-tag="Vegetarian_Foods" data-action="exclude" onclick="filterCards('Vegetarian_Foods', 'exclude')">حذف Vegetarian_Foods</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Simple_Dishes" data-action="include" onclick="filterCards('Simple_Dishes', 'include')">شامل Simple_Dishes</button>
                                                    <button class="tag-btn exclude" data-tag="Simple_Dishes" data-action="exclude" onclick="filterCards('Simple_Dishes', 'exclude')">حذف Simple_Dishes</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Main_Salads" data-action="include" onclick="filterCards('Main_Salads', 'include')">شامل Main_Salads</button>
                                                    <button class="tag-btn exclude" data-tag="Main_Salads" data-action="exclude" onclick="filterCards('Main_Salads', 'exclude')">حذف Main_Salads</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Fast_Foods" data-action="include" onclick="filterCards('Fast_Foods', 'include')">شامل Fast_Foods</button>
                                                    <button class="tag-btn exclude" data-tag="Fast_Foods" data-action="exclude" onclick="filterCards('Fast_Foods', 'exclude')">حذف Fast_Foods</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- مریضی‌ها (Diseases) -->
                                    <div class="filter-group">
                                        <button class="filter-btn" data-category="diseases">مریضی‌ها</button>
                                        <div class="filter-content" data-category="diseases">
                                            <button class="collapse-btn" data-collapse="allergens">آلرژی ها</button>
                                            <div class="collapse-content" data-collapse="allergens">
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Peanut" data-action="include" onclick="filterCards('Allergens_Peanut', 'include')">شامل Allergens_Peanut</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Peanut" data-action="exclude" onclick="filterCards('Allergens_Peanut', 'exclude')">حذف Allergens_Peanut</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Wheat" data-action="include" onclick="filterCards('Allergens_Wheat', 'include')">شامل Allergens_Wheat</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Wheat" data-action="exclude" onclick="filterCards('Allergens_Wheat', 'exclude')">حذف Allergens_Wheat</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Shrimp" data-action="include" onclick="filterCards('Allergens_Shrimp', 'include')">شامل Allergens_Shrimp</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Shrimp" data-action="exclude" onclick="filterCards('Allergens_Shrimp', 'exclude')">حذف Allergens_Shrimp</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Mushroom" data-action="include" onclick="filterCards('Allergens_Mushroom', 'include')">شامل Allergens_Mushroom</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Mushroom" data-action="exclude" onclick="filterCards('Allergens_Mushroom', 'exclude')">حذف Allergens_Mushroom</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Eggplant" data-action="include" onclick="filterCards('Allergens_Eggplant', 'include')">شامل Allergens_Eggplant</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Eggplant" data-action="exclude" onclick="filterCards('Allergens_Eggplant', 'exclude')">حذف Allergens_Eggplant</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Dried_fruits" data-action="include" onclick="filterCards('Allergens_Dried_fruits', 'include')">شامل Allergens_Dried_fruits</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Dried_fruits" data-action="exclude" onclick="filterCards('Allergens_Dried_fruits', 'exclude')">حذف Allergens_Dried_fruits</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Gluten" data-action="include" onclick="filterCards('Allergens_Gluten', 'include')">شامل Allergens_Gluten</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Gluten" data-action="exclude" onclick="filterCards('Allergens_Gluten', 'exclude')">حذف Allergens_Gluten</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Fish" data-action="include" onclick="filterCards('Allergens_Fish', 'include')">شامل Allergens_Fish</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Fish" data-action="exclude" onclick="filterCards('Allergens_Fish', 'exclude')">حذف Allergens_Fish</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Sesame" data-action="include" onclick="filterCards('Allergens_Sesame', 'include')">شامل Allergens_Sesame</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Sesame" data-action="exclude" onclick="filterCards('Allergens_Sesame', 'exclude')">حذف Allergens_Sesame</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Shellfish" data-action="include" onclick="filterCards('Allergens_Shellfish', 'include')">شامل Allergens_Shellfish</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Shellfish" data-action="exclude" onclick="filterCards('Allergens_Shellfish', 'exclude')">حذف Allergens_Shellfish</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Nuts" data-action="include" onclick="filterCards('Allergens_Nuts', 'include')">شامل Allergens_Nuts</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Nuts" data-action="exclude" onclick="filterCards('Allergens_Nuts', 'exclude')">حذف Allergens_Nuts</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Soy" data-action="include" onclick="filterCards('Allergens_Soy', 'include')">شامل Allergens_Soy</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Soy" data-action="exclude" onclick="filterCards('Allergens_Soy', 'exclude')">حذف Allergens_Soy</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Eggs" data-action="include" onclick="filterCards('Allergens_Eggs', 'include')">شامل Allergens_Eggs</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Eggs" data-action="exclude" onclick="filterCards('Allergens_Eggs', 'exclude')">حذف Allergens_Eggs</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Peanuts" data-action="include" onclick="filterCards('Allergens_Peanuts', 'include')">شامل Allergens_Peanuts</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Peanuts" data-action="exclude" onclick="filterCards('Allergens_Peanuts', 'exclude')">حذف Allergens_Peanuts</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Dairy" data-action="include" onclick="filterCards('Allergens_Dairy', 'include')">شامل Allergens_Dairy</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Dairy" data-action="exclude" onclick="filterCards('Allergens_Dairy', 'exclude')">حذف Allergens_Dairy</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Legumes" data-action="include" onclick="filterCards('Allergens_Legumes', 'include')">شامل Allergens_Legumes</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Legumes" data-action="exclude" onclick="filterCards('Allergens_Legumes', 'exclude')">حذف Allergens_Legumes</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Depends_on_filling_ingredients" data-action="include" onclick="filterCards('Allergens_Depends_on_filling_ingredients', 'include')">شامل Allergens_Depends_on_filling_ingredients</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Depends_on_filling_ingredients" data-action="exclude" onclick="filterCards('Allergens_Depends_on_filling_ingredients', 'exclude')">حذف Allergens_Depends_on_filling_ingredients</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Milk" data-action="include" onclick="filterCards('Allergens_Milk', 'include')">شامل Allergens_Milk</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Milk" data-action="exclude" onclick="filterCards('Allergens_Milk', 'exclude')">حذف Allergens_Milk</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Celery" data-action="include" onclick="filterCards('Allergens_Celery', 'include')">شامل Allergens_Celery</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Celery" data-action="exclude" onclick="filterCards('Allergens_Celery', 'exclude')">حذف Allergens_Celery</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Mustard" data-action="include" onclick="filterCards('Allergens_Mustard', 'include')">شامل Allergens_Mustard</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Mustard" data-action="exclude" onclick="filterCards('Allergens_Mustard', 'exclude')">حذف Allergens_Mustard</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Sulphites" data-action="include" onclick="filterCards('Allergens_Sulphites', 'include')">شامل Allergens_Sulphites</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Sulphites" data-action="exclude" onclick="filterCards('Allergens_Sulphites', 'exclude')">حذف Allergens_Sulphites</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Lupin" data-action="include" onclick="filterCards('Allergens_Lupin', 'include')">شامل Allergens_Lupin</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Lupin" data-action="exclude" onclick="filterCards('Allergens_Lupin', 'exclude')">حذف Allergens_Lupin</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Allergens_Molluscs" data-action="include" onclick="filterCards('Allergens_Molluscs', 'include')">شامل Allergens_Molluscs</button>
                                                    <button class="tag-btn exclude" data-tag="Allergens_Molluscs" data-action="exclude" onclick="filterCards('Allergens_Molluscs', 'exclude')">حذف Allergens_Molluscs</button>
                                                </div>
                                            </div>
                                            <button class="collapse-btn" data-collapse="diets">رژیم‌های خاص</button>
                                            <div class="collapse-content" data-collapse="diets">
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Diet_Low_Sugar" data-action="include" onclick="filterCards('Diet_Low_Sugar', 'include')">شامل Diet_Low_Sugar</button>
                                                    <button class="tag-btn exclude" data-tag="Diet_Low_Sugar" data-action="exclude" onclick="filterCards('Diet_Low_Sugar', 'exclude')">حذف Diet_Low_Sugar</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Diet_Mediterranean" data-action="include" onclick="filterCards('Diet_Mediterranean', 'include')">شامل Diet_Mediterranean</button>
                                                    <button class="tag-btn exclude" data-tag="Diet_Mediterranean" data-action="exclude" onclick="filterCards('Diet_Mediterranean', 'exclude')">حذف Diet_Mediterranean</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Diet_High_Protein" data-action="include" onclick="filterCards('Diet_High_Protein', 'include')">شامل Diet_High_Protein</button>
                                                    <button class="tag-btn exclude" data-tag="Diet_High_Protein" data-action="exclude" onclick="filterCards('Diet_High_Protein', 'exclude')">حذف Diet_High_Protein</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Diet_Low_Fat" data-action="include" onclick="filterCards('Diet_Low_Fat', 'include')">شامل Diet_Low_Fat</button>
                                                    <button class="tag-btn exclude" data-tag="Diet_Low_Fat" data-action="exclude" onclick="filterCards('Diet_Low_Fat', 'exclude')">حذف Diet_Low_Fat</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Diet_Low_Calorie" data-action="include" onclick="filterCards('Diet_Low_Calorie', 'include')">شامل Diet_Low_Calorie</button>
                                                    <button class="tag-btn exclude" data-tag="Diet_Low_Calorie" data-action="exclude" onclick="filterCards('Diet_Low_Calorie', 'exclude')">حذف Diet_Low_Calorie</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Diet_Anti_Inflammatory" data-action="include" onclick="filterCards('Diet_Anti_Inflammatory', 'include')">شامل Diet_Anti_Inflammatory</button>
                                                    <button class="tag-btn exclude" data-tag="Diet_Anti_Inflammatory" data-action="exclude" onclick="filterCards('Diet_Anti_Inflammatory', 'exclude')">حذف Diet_Anti_Inflammatory</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Diet_Paleo" data-action="include" onclick="filterCards('Diet_Paleo', 'include')">شامل Diet_Paleo</button>
                                                    <button class="tag-btn exclude" data-tag="Diet_Paleo" data-action="exclude" onclick="filterCards('Diet_Paleo', 'exclude')">حذف Diet_Paleo</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Diet_Diabetic" data-action="include" onclick="filterCards('Diet_Diabetic', 'include')">شامل Diet_Diabetic</button>
                                                    <button class="tag-btn exclude" data-tag="Diet_Diabetic" data-action="exclude" onclick="filterCards('Diet_Diabetic', 'exclude')">حذف Diet_Diabetic</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Diet_Low_Carb" data-action="include" onclick="filterCards('Diet_Low_Carb', 'include')">شامل Diet_Low_Carb</button>
                                                    <button class="tag-btn exclude" data-tag="Diet_Low_Carb" data-action="exclude" onclick="filterCards('Diet_Low_Carb', 'exclude')">حذف Diet_Low_Carb</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Diet_Bodybuilding" data-action="include" onclick="filterCards('Diet_Bodybuilding', 'include')">شامل Diet_Bodybuilding</button>
                                                    <button class="tag-btn exclude" data-tag="Diet_Bodybuilding" data-action="exclude" onclick="filterCards('Diet_Bodybuilding', 'exclude')">حذف Diet_Bodybuilding</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Diet_Vegan" data-action="include" onclick="filterCards('Diet_Vegan', 'include')">شامل Diet_Vegan</button>
                                                    <button class="tag-btn exclude" data-tag="Diet_Vegan" data-action="exclude" onclick="filterCards('Diet_Vegan', 'exclude')">حذف Diet_Vegan</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Diet_Vegetarian" data-action="include" onclick="filterCards('Diet_Vegetarian', 'include')">شامل Diet_Vegetarian</button>
                                                    <button class="tag-btn exclude" data-tag="Diet_Vegetarian" data-action="exclude" onclick="filterCards('Diet_Vegetarian', 'exclude')">حذف Diet_Vegetarian</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Diet_Plant_Based" data-action="include" onclick="filterCards('Diet_Plant_Based', 'include')">شامل Diet_Plant_Based</button>
                                                    <button class="tag-btn exclude" data-tag="Diet_Plant_Based" data-action="exclude" onclick="filterCards('Diet_Plant_Based', 'exclude')">حذف Diet_Plant_Based</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Diet_Gluten_Free" data-action="include" onclick="filterCards('Diet_Gluten_Free', 'include')">شامل Diet_Gluten_Free</button>
                                                    <button class="tag-btn exclude" data-tag="Diet_Gluten_Free" data-action="exclude" onclick="filterCards('Diet_Gluten_Free', 'exclude')">حذف Diet_Gluten_Free</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Diet_Keto" data-action="include" onclick="filterCards('Diet_Keto', 'include')">شامل Diet_Keto</button>
                                                    <button class="tag-btn exclude" data-tag="Diet_Keto" data-action="exclude" onclick="filterCards('Diet_Keto', 'exclude')">حذف Diet_Keto</button>
                                                </div>
                                            </div>
                                            <button class="collapse-btn" data-collapse="conditions">بیماری‌ها</button>
                                            <div class="collapse-content" data-collapse="conditions">
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_Kidney" data-action="include" onclick="filterCards('Disease_Kidney', 'include')">شامل Disease_Kidney</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_Kidney" data-action="exclude" onclick="filterCards('Disease_Kidney', 'exclude')">حذف Disease_Kidney</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_Kidney_stones" data-action="include" onclick="filterCards('Disease_Kidney_stones', 'include')">شامل Disease_Kidney_stones</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_Kidney_stones" data-action="exclude" onclick="filterCards('Disease_Kidney_stones', 'exclude')">حذف Disease_Kidney_stones</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_Acid_reflux" data-action="include" onclick="filterCards('Disease_Acid_reflux', 'include')">شامل Disease_Acid_reflux</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_Acid_reflux" data-action="exclude" onclick="filterCards('Disease_Acid_reflux', 'exclude')">حذف Disease_Acid_reflux</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_Gout" data-action="include" onclick="filterCards('Disease_Gout', 'include')">شامل Disease_Gout</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_Gout" data-action="exclude" onclick="filterCards('Disease_Gout', 'exclude')">حذف Disease_Gout</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_Celiac" data-action="include" onclick="filterCards('Disease_Celiac', 'include')">شامل Disease_Celiac</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_Celiac" data-action="exclude" onclick="filterCards('Disease_Celiac', 'exclude')">حذف Disease_Celiac</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_IBS" data-action="include" onclick="filterCards('Disease_IBS', 'include')">شامل Disease_IBS</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_IBS" data-action="exclude" onclick="filterCards('Disease_IBS', 'exclude')">حذف Disease_IBS</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_Diverticulitis" data-action="include" onclick="filterCards('Disease_Diverticulitis', 'include')">شامل Disease_Diverticulitis</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_Diverticulitis" data-action="exclude" onclick="filterCards('Disease_Diverticulitis', 'exclude')">حذف Disease_Diverticulitis</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_Hypothyroidism" data-action="include" onclick="filterCards('Disease_Hypothyroidism', 'include')">شامل Disease_Hypothyroidism</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_Hypothyroidism" data-action="exclude" onclick="filterCards('Disease_Hypothyroidism', 'exclude')">حذف Disease_Hypothyroidism</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_Gastroesophageal_Reflux" data-action="include" onclick="filterCards('Disease_Gastroesophageal_Reflux', 'include')">شامل Disease_Gastroesophageal_Reflux</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_Gastroesophageal_Reflux" data-action="exclude" onclick="filterCards('Disease_Gastroesophageal_Reflux', 'exclude')">حذف Disease_Gastroesophageal_Reflux</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_Foodborne_Illness" data-action="include" onclick="filterCards('Disease_Foodborne_Illness', 'include')">شامل Disease_Foodborne_Illness</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_Foodborne_Illness" data-action="exclude" onclick="filterCards('Disease_Foodborne_Illness', 'exclude')">حذف Disease_Foodborne_Illness</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_High_blood_pressure" data-action="include" onclick="filterCards('Disease_High_blood_pressure', 'include')">شامل Disease_High_blood_pressure</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_High_blood_pressure" data-action="exclude" onclick="filterCards('Disease_High_blood_pressure', 'exclude')">حذف Disease_High_blood_pressure</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_High_cholesterol" data-action="include" onclick="filterCards('Disease_High_cholesterol', 'include')">شامل Disease_High_cholesterol</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_High_cholesterol" data-action="exclude" onclick="filterCards('Disease_High_cholesterol', 'exclude')">حذف Disease_High_cholesterol</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_Diabetes" data-action="include" onclick="filterCards('Disease_Diabetes', 'include')">شامل Disease_Diabetes</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_Diabetes" data-action="exclude" onclick="filterCards('Disease_Diabetes', 'exclude')">حذف Disease_Diabetes</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_Hypercholesterolemia" data-action="include" onclick="filterCards('Disease_Hypercholesterolemia', 'include')">شامل Disease_Hypercholesterolemia</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_Hypercholesterolemia" data-action="exclude" onclick="filterCards('Disease_Hypercholesterolemia', 'exclude')">حذف Disease_Hypercholesterolemia</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_G6PD_Deficiency" data-action="include" onclick="filterCards('Disease_G6PD_Deficiency', 'include')">شامل Disease_G6PD_Deficiency</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_G6PD_Deficiency" data-action="exclude" onclick="filterCards('Disease_G6PD_Deficiency', 'exclude')">حذف Disease_G6PD_Deficiency</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_Constipation" data-action="include" onclick="filterCards('Disease_Constipation', 'include')">شامل Disease_Constipation</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_Constipation" data-action="exclude" onclick="filterCards('Disease_Constipation', 'exclude')">حذف Disease_Constipation</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_Gallbladder" data-action="include" onclick="filterCards('Disease_Gallbladder', 'include')">شامل Disease_Gallbladder</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_Gallbladder" data-action="exclude" onclick="filterCards('Disease_Gallbladder', 'exclude')">حذف Disease_Gallbladder</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_Latex_Fruit_Syndrome" data-action="include" onclick="filterCards('Disease_Latex_Fruit_Syndrome', 'include')">شامل Disease_Latex_Fruit_Syndrome</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_Latex_Fruit_Syndrome" data-action="exclude" onclick="filterCards('Disease_Latex_Fruit_Syndrome', 'exclude')">حذف Disease_Latex_Fruit_Syndrome</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_Obesity" data-action="include" onclick="filterCards('Disease_Obesity', 'include')">شامل Disease_Obesity</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_Obesity" data-action="exclude" onclick="filterCards('Disease_Obesity', 'exclude')">حذف Disease_Obesity</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_CVD" data-action="include" onclick="filterCards('Disease_CVD', 'include')">شامل Disease_CVD</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_CVD" data-action="exclude" onclick="filterCards('Disease_CVD', 'exclude')">حذف Disease_CVD</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_IBD" data-action="include" onclick="filterCards('Disease_IBD', 'include')">شامل Disease_IBD</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_IBD" data-action="exclude" onclick="filterCards('Disease_IBD', 'exclude')">حذف Disease_IBD</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_Lactose_Intolerance" data-action="include" onclick="filterCards('Disease_Lactose_Intolerance', 'include')">شامل Disease_Lactose_Intolerance</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_Lactose_Intolerance" data-action="exclude" onclick="filterCards('Disease_Lactose_Intolerance', 'exclude')">حذف Disease_Lactose_Intolerance</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_NAFLD" data-action="include" onclick="filterCards('Disease_NAFLD', 'include')">شامل Disease_NAFLD</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_NAFLD" data-action="exclude" onclick="filterCards('Disease_NAFLD', 'exclude')">حذف Disease_NAFLD</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_Anemia" data-action="include" onclick="filterCards('Disease_Anemia', 'include')">شامل Disease_Anemia</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_Anemia" data-action="exclude" onclick="filterCards('Disease_Anemia', 'exclude')">حذف Disease_Anemia</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_Osteoporosis" data-action="include" onclick="filterCards('Disease_Osteoporosis', 'include')">شامل Disease_Osteoporosis</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_Osteoporosis" data-action="exclude" onclick="filterCards('Disease_Osteoporosis', 'exclude')">حذف Disease_Osteoporosis</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_Arthritis" data-action="include" onclick="filterCards('Disease_Arthritis', 'include')">شامل Disease_Arthritis</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_Arthritis" data-action="exclude" onclick="filterCards('Disease_Arthritis', 'exclude')">حذف Disease_Arthritis</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_Autoimmune" data-action="include" onclick="filterCards('Disease_Autoimmune', 'include')">شامل Disease_Autoimmune</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_Autoimmune" data-action="exclude" onclick="filterCards('Disease_Autoimmune', 'exclude')">حذف Disease_Autoimmune</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_CancerPrevention" data-action="include" onclick="filterCards('Disease_CancerPrevention', 'include')">شامل Disease_CancerPrevention</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_CancerPrevention" data-action="exclude" onclick="filterCards('Disease_CancerPrevention', 'exclude')">حذف Disease_CancerPrevention</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Disease_MentalHealth" data-action="include" onclick="filterCards('Disease_MentalHealth', 'include')">شامل Disease_MentalHealth</button>
                                                    <button class="tag-btn exclude" data-tag="Disease_MentalHealth" data-action="exclude" onclick="filterCards('Disease_MentalHealth', 'exclude')">حذف Disease_MentalHealth</button>
                                                </div>
                                            </div>
                                            <button class="collapse-btn" data-collapse="others">سایر</button>
                                            <div class="collapse-content" data-collapse="others">
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="Whole_Foods" data-action="include" onclick="filterCards('Whole_Foods', 'include')">شامل Whole_Foods</button>
                                                    <button class="tag-btn exclude" data-tag="Whole_Foods" data-action="exclude" onclick="filterCards('Whole_Foods', 'exclude')">حذف Whole_Foods</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="cooked_rice" data-action="include" onclick="filterCards('cooked_rice', 'include')">شامل cooked_rice</button>
                                                    <button class="tag-btn exclude" data-tag="cooked_rice" data-action="exclude" onclick="filterCards('cooked_rice', 'exclude')">حذف cooked_rice</button>
                                                </div>
                                                <div class="tag-group">
                                                    <button class="tag-btn include" data-tag="main_dish" data-action="include" onclick="filterCards('main_dish', 'include')">شامل main_dish</button>
                                                    <button class="tag-btn exclude" data-tag="main_dish" data-action="exclude" onclick="filterCards('main_dish', 'exclude')">حذف main_dish</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                          <hr>
                          <div class="button-container">
                              <button class="sort-cards" onclick="sortCards('FA_Name')">نام</button>
                              <button class="sort-cards" onclick="sortCards('id')">زمان</button>
                              <button class="sort-btn" style="border-radius: 20px" onclick="openCalorieModal()">{% trans "فیلتر کالری" %}</button>
                              <button class="reset-btn" onclick="resetFilters()">{% trans "حذف فیلتر ها" %}</button>
                          </div>

                        <div class="scrollable-list-container" id="cardsList">
                            <!-- Cards will be loaded here via AJAX -->
                        </div>

                        <!-- Pagination -->
                        <div class="pagination" id="cardsPagination">
                            <!-- Pagination will be loaded here via AJAX -->
                        </div>
                      </div>
                  </div>
                  <div class="card-box">
                    <div class="text-right">
                        <label class="titles" for="toggleButton2" style="cursor: pointer;">{% trans "اقلام غذایی" %}</label>
                        <input type="checkbox" id="toggleButton2" checked="checked" style="cursor: pointer;">
                    </div>
                    <div id="element2" style="display: block;">
                      <label for="foodSearch"></label>
                      <input type="text" dir="rtl" id="foodSearch" placeholder="{% trans "جستجو غذا..." %}" class="search-bar"
                        oninput="debouncedSearchFoods()">
{#                      <div class="button-container">#}
{#                        <button class="sort-btn" style="background-color: #5CC936" onclick="sortFoodList('fat')">{% trans "چربی" %}</button>#}
{#                        <button class="sort-btn" style="background-color: #7366E3" onclick="sortFoodList('calories')">{% trans "کالری" %}</button>#}
{#                        <button class="sort-btn" style="background-color: #FF9900" onclick="sortFoodList('protein')">{% trans "پروتئین" %}</button>#}
{#                        <button class="sort-btn" style="background-color: #28CCF7" onclick="sortFoodList('carbohydrate')">{% trans "کربوهیدرات" %}</button>#}
{#                      </div>#}
{#                      <div class="button-container">#}
{#                        <button class="sort-btn" style="background-color: #5CC936" onclick="openNutritionRangeModal('fat')">{% trans "فیلتر" %}</button>#}
{#                        <button class="sort-btn" style="background-color: #7366E3" onclick="openNutritionRangeModal('calories')">{% trans "فیلتر" %}</button>#}
{#                        <button class="sort-btn" style="background-color: #FF9900" onclick="openNutritionRangeModal('protein')">{% trans "فیلتر" %}</button>#}
{#                        <button class="sort-btn" style="background-color: #28CCF7" onclick="openNutritionRangeModal('carbohydrate')">{% trans "فیلتر" %}</button>#}
{#                      </div>#}
                      <div class="scrollable-list-container" id="foodsList">
                            <!-- Foods will be loaded here via AJAX -->
                        </div>
                        <!-- Pagination -->
                        <div class="pagination" id="foodsPagination">
                            <!-- Pagination will be loaded here via AJAX -->
                        </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    <!-- Calorie Filter Modal -->
    <div id="calorieModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeCalorieModal()">&times;</span>
            <h3>{% trans "فیلتر کالری" %}</h3>
            <label for="minCalories" dir="rtl">{% trans "از :" %}</label>
            <input type="number" id="minCalories" name="minCalories" min="0">
            <label for="maxCalories" dir="rtl">{% trans "تا :" %}</label>
            <input type="number" id="maxCalories" name="maxCalories" min="0">
            <button onclick="filterByCalories()" style="margin-top: 10px; border-radius: 10px; background-color: #009A6E; color: white">{% trans "فیلتر کردن" %}</button>
        </div>
    </div>

    <!-- Modal for amount input -->
    <div id="amountModal" class="modal">
      <div class="modal-content">
        <span class="close text-right">&times;</span>
        <p id="foodName" class="text-center titles" style="font-size: 24px; margin-top: 20px"></p>
          <hr>
        <div id="titleContainer" dir="rtl" style="display: none;">
            <label for="title" dir="rtl" class="text-center titles" style="font-size: 18px">{% trans "نام کارت :" %}</label>
            <input type="text" id="title" dir="rtl" class="form-control" style="font-size: 15px; background-color: #CFD8E6; border-radius: 5px">
        </div>
          <hr>
        <label for="homeUnitSelect" dir="rtl" class="text-center titles" style="font-size: 18px">{% trans "انتخاب واحد خانگی :" %}</label>
        <select id="homeUnitSelect" class="form-control" dir="rtl" style="font-size: 15px; background-color: #CFD8E6; border-radius: 5px">
        </select>
          <hr>
        <label for="amount" dir="rtl" class="text-center titles" style="font-size: 18px">{% trans "مقدار مورد نظر را وارد کنید :" %}</label>
        <input type="number" id="amount" class="form-control" min="1" style="font-size: 15px; background-color: #CFD8E6; border-radius: 5px" required>
          <hr>
        <button id="amountSubmit" class="btn-submit">{% trans "ثبت" %}</button>
      </div>
    </div>

    <!-- Modal for nutrition range input -->
    <div id="nutritionRangeModal" class="modal">
      <div class="modal-content">
        <span class="close text-right">&times;</span>
        <h2 class="titles text-center" dir="rtl" style="margin-bottom: 20px">{% trans "محدوده مورد نظر را وارد کنید :" %}</h2>
        <div class="form-group">
          <label for="minValue" dir="rtl" style="font-size: 18px">{% trans "کمترین مقدار :" %}</label>
          <input type="number" id="minValue" class="form-control" style="font-size: 15px; background-color: #CFD8E6; border-radius: 10px" dir="rtl" placeholder="{% trans "از :" %}" required>
        </div>
        <div class="form-group">
          <label for="maxValue" dir="rtl" style="font-size: 18px">{% trans "بیشترین مقدار :" %}</label>
          <input type="number" id="maxValue" dir="rtl" class="form-control" style="font-size: 15px; background-color: #CFD8E6; border-radius: 10px" placeholder="{% trans "تا :" %}" required>
        </div>
        <button id="applyFilterBtn" class="submit-btn">{% trans "ثبت فیلتر" %}</button>
      </div>
    </div>

    <!-- Modal for type input -->
    <div id="typeModal" class="modal">
      <div class="modal-content">
        <span class="close text-right">&times;</span>
        <label for="dietType" dir="rtl" class="text-center titles" style="margin-bottom: 20px">{% trans "نوع رژیم :" %}</label>
        <input type="text" id="dietType" class="form-control" dir="rtl" placeholder="{% trans "نوع رژیم را وارد کنید ..." %}" style="font-size: 15px; background-color: #CFD8E6; border-radius: 10px">
          <hr>
        <button id="typeSubmitBtn" class="submit-btn">{% trans "ثبت" %}</button>
      </div>
    </div>

    <!-- The Modal -->
    <div id="editModal" class="modal">
      <div class="modal-dialog">
        <div class="modal-content">
          <!-- Modal Header -->
          <div class="modal-header">
            <h5 class="modal-title text-center" id="modalTitle">{% trans "ویرایش اطلاعات" %}</h5>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <!-- Modal Body -->
          <div class="modal-body">
            <div class="unit-switch">
              <button id="homeUnit" class="unit-btn active">{% trans "واحد خانگی" %}</button>
              <button id="gramUnit" class="unit-btn">{% trans "گرم" %}</button>
            </div>
            <div class="nutrition-info">
              <div class="info-item">
                <span id="fat">0</span>
                <p>{% trans "چربی" %}</p>
              </div>
              <div class="info-item">
                <span id="calories">0</span>
                <p>{% trans "کالری" %}</p>
              </div>
              <div class="info-item">
                <span id="protein">0</span>
                <p>{% trans "پروتئین" %}</p>
              </div>
              <div class="info-item">
                <span id="carbohydrate">0</span>
                <p>{% trans "کربوهیدرات" %}</p>
              </div>
            </div>
            <h5>{% trans "محتویات" %}</h5>
            <ul class="text-right" dir="rtl" id="meal-contents-list">
              <!-- Dynamically filled contents will appear here -->
            </ul>
          </div>
          <!-- Modal Footer -->
          <div class="modal-footer">
            <button id="deleteContent" class="btn btn-danger">{% trans "حذف" %}</button>
            <button id="saveChanges" class="btn btn-primary">{% trans "ذخیره" %}</button>
            <button id="initCreateCardFromModal" class="btn btn-success">{% trans "ساخت کارت" %}</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal for saving diet templates -->
    <div id="templateModal2" class="modal">
        <div class="modal-content">
            <span class="close text-right">&times;</span>
            <h4 class="titles text-center" style="padding-bottom: 15px; font-weight: bolder">ذخیره رژیم</h4>

            <!-- Diet Name and Calorie Range -->
            <div class="form-group">
                <label class="titles text-center" for="dietName">نام رژیم</label>
                <input type="text" id="dietName" name="dietName" class="form-control stylish-input" required>
            </div>

            <div class="form-group">
                <label class="titles text-center" for="calorieRange">محدوده کالری</label>
                <input type="number" id="calorieRange" name="calorieRange" class="form-control stylish-input" required>
            </div>
            
            <!-- Company Name -->
            <div class="form-group">
                <label class="titles text-center" for="companyName">نام شرکت</label>
                <select id="companyName" name="companyName" class="form-control stylish-input">
                    <option value="" disabled selected>انتخاب شرکت</option>
                    <option value="Nestle">نستله</option>
                </select>
            </div>
    
            <!-- City -->
            <div class="form-group">
                <label class="titles text-center" for="city">شهر</label>
                <select id="city" name="city" class="form-control stylish-input">
                    <option value="" disabled selected>انتخاب شهر</option>
                    <option value="Tehran">تهران</option>
                    <option value="Qazvin">قزوین</option>
                </select>
            </div>
    
            <!-- User Template Checkbox -->
            <div class="form-group">
                <label class="titles text-center" for="isUserTemplate">آیا این قالب کاربر است؟</label>
                <input type="checkbox" id="isUserTemplate" name="isUserTemplate">
            </div>

            <!-- Combined Bacteria Type, Diet Type, and Diseases Section with Buttons -->
            <div class="form-group">
                <label class="titles text-center" style="margin-top: 10px" for="allCategories">انتخاب از دسته‌ها</label>

                <!-- Bacteria Type Section -->
                <h5 class="type_titles">نوع باکتری (Bacteria Type)</h5>
                <div id="bacteriaTypeButtons" class="button-container2">
                    <button class="category-btn" data-category="bacteriaType" value="akkermansia">Akkermansia</button>
                    <button class="category-btn" data-category="bacteriaType" value="bacteroides">Bacteroides</button>
                    <button class="category-btn" data-category="bacteriaType" value="bifidobacterium">Bifidobacterium</button>
                    <button class="category-btn" data-category="bacteriaType" value="faecalibacterium">Faecalibacterium</button>
                    <button class="category-btn" data-category="bacteriaType" value="alistipes">Alistipes</button>
                    <button class="category-btn" data-category="bacteriaType" value="eubacterium">Eubacterium</button>
                    <button class="category-btn" data-category="bacteriaType" value="lactobacillus">Lactobacillus</button>
                    <button class="category-btn" data-category="bacteriaType" value="blautia">blautia</button>
                </div>
                <hr>
                <!-- Diet Type Section -->
                <h5 class="type_titles">نوع رژیم (Diet Type)</h5>
                <div id="dietTypeButtons" class="button-container2">
                    <button class="category-btn" data-category="dietType" value="med">Med</button>
                    <button class="category-btn" data-category="dietType" value="low-gi">Low-GI</button>
                    <button class="category-btn" data-category="dietType" value="fasting">Fasting</button>
                    <button class="category-btn" data-category="dietType" value="keto">Keto</button>
                    <button class="category-btn" data-category="dietType" value="mind">Mind</button>
                    <button class="category-btn" data-category="dietType" value="sport">Sport</button>
                    <button class="category-btn" data-category="dietType" value="liquid">Liquid or purred diet</button>
                    <button class="category-btn" data-category="dietType" value="eliminate">Eliminate diet (Sensitivity)</button>
                    <button class="category-btn" data-category="dietType" value="low-fodmap">Low Fodmap</button>
                    <button class="category-btn" data-category="dietType" value="pregnant">pregnant</button>
                    <button class="category-btn" data-category="dietType" value="lactating">lactating</button>
                    <button class="category-btn" data-category="dietType" value="low-carb">low carb</button>
                    <button class="category-btn" data-category="dietType" value="vegetarian">vegetarian</button>
                </div>
                <hr>
                <!-- Allergic Type Section -->
                <h5 class="type_titles">نوع آلرژی (Allergic Type)</h5>
                <div id="AllergicTypeButtons" class="button-container2">
                    <button class="category-btn" data-category="AllergicType" value="dairy">Dairy</button>
                    <button class="category-btn" data-category="AllergicType" value="red-meat">Red meat</button>
                    <button class="category-btn" data-category="AllergicType" value="eggplant">Eggplant</button>
                    <button class="category-btn" data-category="AllergicType" value="tomato">Tomato</button>
                    <button class="category-btn" data-category="AllergicType" value="egg">Egg</button>
                    <button class="category-btn" data-category="AllergicType" value="nut">Nut</button>
                    <button class="category-btn" data-category="AllergicType" value="sea-food">Sea food</button>
                    <button class="category-btn" data-category="AllergicType" value="fava">Fava</button>
                    <button class="category-btn" data-category="AllergicType" value="milk">Milk</button>
                    <button class="category-btn" data-category="AllergicType" value="coffee">Coffee</button>
                </div>
                <hr>
                <!-- Diseases Section -->
                <h5 class="type_titles">بیماری‌ها (Diseases)</h5>
                <div id="diseasesButtons" class="button-container2">
                    <button class="category-btn" data-category="diseases" value="healthy">Healthy</button>
                    <button class="category-btn" data-category="diseases" value="fatty-liver">Fatty liver</button>
                    <button class="category-btn" data-category="diseases" value="diabetes">Diabetes</button>
                    <button class="category-btn" data-category="diseases" value="ibs">IBS</button>
                    <button class="category-btn" data-category="diseases" value="pcos">PCOS</button>
                    <button class="category-btn" data-category="diseases" value="neghres">Neghres</button>
                    <button class="category-btn" data-category="diseases" value="ms">MS</button>
                    <button class="category-btn" data-category="diseases" value="obesity-surgery">Obesity surgery</button>
                    <button class="category-btn" data-category="diseases" value="renal">Renal (CKD or Renal Stone)</button>
                    <button class="category-btn" data-category="diseases" value="cvd">CVD (HTN or HLP)</button>
                    <button class="category-btn" data-category="diseases" value="migraine">Migraine</button>
                    <button class="category-btn" data-category="diseases" value="cancer">Cancer</button>
                    <button class="category-btn" data-category="diseases" value="nervous-disease">Nervous disease (Parkinson, Alzheimer)</button>
                    <button class="category-btn" data-category="diseases" value="gi-disease">GI Disease</button>
                    <button class="category-btn" data-category="diseases" value="Hypothyroidism">Hypothyroidism</button>
                    <button class="category-btn" data-category="diseases" value="celiac">Celiac</button>
                    <button class="category-btn" data-category="diseases" value="Reflux">Reflux</button>
                    <button class="category-btn" data-category="diseases" value="Diarrhea">Diarrhea</button>
                    <button class="category-btn" data-category="diseases" value="Constipation">Constipation</button>
                    <button class="category-btn" data-category="diseases" value="Cyst">Cyst</button>
                </div>
            </div>

            <button id="templateSubmitBtn2" class="save-btn">ذخیره</button>
        </div>
    </div>

    <!-- Edit Card Modal -->
    <div id="editCardModal" class="modal" dir="rtl">
        <div class="modal-content">
            <span class="close text-right" id="editCardModalClose">&times;</span>
            <h4 class="titles text-center" style="padding-bottom: 15px; font-weight: bolder">ساخت کارت</h4>

            <!-- Card Name -->
            <div class="form-group">
                <label class="titles text-center" for="editCardName">نام کارت</label>
                <input type="text" id="editCardName" class="form-control stylish-input" required />
            </div>

            <!-- Tag Selection -->
            <div class="form-group">
                <label class="titles text-center" style="margin-top: 10px">انتخاب تگ‌ها</label>

                <!-- Diet Tags Section -->
                <h5 class="type_titles-card">تگ رژیم</h5>
                <div id="dietTagsButtons" class="button-container3">
                    <button class="category-btn-card" data-category="dietTags" value="is_keto">Keto</button>
                    <button class="category-btn-card" data-category="dietTags" value="is_med">Med</button>
                    <button class="category-btn-card" data-category="dietTags" value="is_lowcarb">Low Carb</button>
                    <button class="category-btn-card" data-category="dietTags" value="is_mediumcarb">Medium Carb</button>
                    <button class="category-btn-card" data-category="dietTags" value="is_highcarb">High Carb</button>
                    <button class="category-btn-card" data-category="dietTags" value="is_highprotein">High Protein</button>
                    <button class="category-btn-card" data-category="dietTags" value="is_mediumprotein">Medium Protein</button>
                    <button class="category-btn-card" data-category="dietTags" value="is_lowprotein">Low Protein</button>
                    <button class="category-btn-card" data-category="dietTags" value="is_mind">Mind</button>
                    <button class="category-btn-card" data-category="dietTags" value="is_low_fodmap">Low FODMAP</button>
                    <button class="category-btn-card" data-category="dietTags" value="is_lowfat">Low Fat</button>
                    <button class="category-btn-card" data-category="dietTags" value="is_mediumfat">Medium Fat</button>
                    <button class="category-btn-card" data-category="dietTags" value="is_highfat">High Fat</button>
                </div>
                <hr>
                <!-- Meal Times Section -->
                <h5 class="type_titles-card">وعده غذایی</h5>
                <div id="mealTimesButtons" class="button-container3">
                    <button class="category-btn-card" data-category="mealTimes" value="is_breakfast">صبحانه</button>
                    <button class="category-btn-card" data-category="mealTimes" value="is_lunch">ناهار</button>
                    <button class="category-btn-card" data-category="mealTimes" value="is_dinner">شام</button>
                    <button class="category-btn-card" data-category="mealTimes" value="is_snack">میان وعده</button>
                </div>
            </div>

            <button id="saveCardChanges" class="save-card-btn">ساخت کارت</button>
        </div>
    </div>


    <style>
        .filter-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            padding: 20px;
            direction: rtl;
            position: relative;
        }

        .search-box {
            width: 100%;
            max-width: 400px;
            margin-bottom: 20px;
        }

        #tag-search {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #E0E0E0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            outline: none;
            text-align: right;
        }

        #tag-search:focus {
            border-color: #2E7D32;
            box-shadow: 0 2px 8px rgba(46, 125, 50, 0.2);
        }

        .search-results {
            display: none;
            background-color: #FFFFFF;
            border: 1px solid #E0E0E0;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            max-height: 300px;
            overflow-y: auto;
            padding: 10px;
            width: 100%;
            max-width: 400px;
            position: absolute;
            z-index: 11;
            right: 50%;
            top: 65%;
            transform: translateX(50%);
        }

        .search-results.active {
            display: block;
        }

        .search-results .tag-group {
            display: flex;
            gap: 5px;
            margin-bottom: 8px;
        }

        /* Restore horizontal layout for categories */
        .filter-categories {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
        }

        .filter-categories.hidden {
            display: none;
        }

        .filter-group {
            position: relative;
        }

        .filter-btn {
            background-color: #2E7D32;
            color: white;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
        }

        .filter-btn:hover {
            background-color: #4CAF50;
            transform: translateY(-2px);
        }

        .filter-content {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            background-color: #FFFFFF;
            border: 1px solid #E0E0E0;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            min-width: 250px;
            max-height: 400px;
            overflow-y: auto;
            z-index: 10;
            padding: 10px;
        }

        .filter-group:hover .filter-content {
            display: block;
        }

        .collapse-btn {
            width: 100%;
            background-color: #F5F5F5;
            color: #424242;
            padding: 8px 12px;
            border: none;
            border-radius: 6px;
            text-align: right;
            font-size: 14px;
            cursor: pointer;
            margin-bottom: 5px;
        }

        .collapse-btn:hover {
            background-color: #E0E0E0;
        }

        .collapse-content {
            display: none;
            padding-right: 20px;
        }

        .collapse-btn.active + .collapse-content {
            display: block;
        }

        .tag-group {
            display: flex;
            gap: 5px;
            margin-bottom: 8px;
        }

        .tag-btn {
            flex: 1;
            padding: 6px 10px;
            font-size: 14px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
            text-align: right;
        }

        .tag-btn.include {
            background-color: #E8F5E9;
            color: #2E7D32;
        }

        .tag-btn.exclude {
            background-color: #FFEBEE;
            color: #D32F2F;
        }

        .tag-btn.include:hover {
            background-color: #C8E6C9;
            color: #1B5E20;
        }

        .tag-btn.exclude:hover {
            background-color: #FFCDD2;
            color: #B71C1C;
        }

        @media (max-width: 768px) {
            .filter-container { flex-direction: column; align-items: center; }
            .search-results { position: static; transform: none; width: 100%; }
            .filter-categories { flex-direction: column; align-items: center; }
            .filter-content { position: static; width: 100%; max-height: 300px; }
        }


        /* Responsive adjustments */
        @media (max-width: 768px) {
            .filter-container {
                flex-direction: column;
                align-items: center;
            }
            .filter-content {
                position: static;
                width: 100%;
                max-height: 300px;
            }
        }

        .search-container {
          display: flex;
          align-items: center;  /* Vertically centers the elements */
          gap: 8px;             /* Adds spacing between elements */
        }
        
        /* Optionally, style the input to take up available space */
        .search-container .search-bar {
          flex: 1;              /* Makes the input expand to fill the container */
          padding: 8px;         /* Optional: adds padding for better appearance */
        }

        
        .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;
            overflow: hidden; /* Ensure content stays within the box */
        }
        
        .qa-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
        }
        
        .qa-question, .qa-answer {
            font-size: 0.9rem; /* Adjust size for better readability */
            color: #555;
            margin-bottom: 10px;
            word-wrap: break-word; /* Break words when necessary */
            overflow-wrap: break-word; /* Ensures wrapping for long words */
            text-overflow: ellipsis; /* Adds ellipsis for long content if overflow */
            white-space: normal; /* Allows text to wrap onto the next line */
        }
        
                
        .save-card-btn {
            background-color: #009a6e;
            color: #fff;
            border: none;
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            display: block;
            margin-top: 20px;
        }

        .save-card-btn:hover {
            background-color: #007b57;
        }
        
        /* Buttons for category items */
        .category-btn-card {
            padding: 10px 15px;
            border-radius: 10px;
            border: 1px solid #009A6E;
            background-color: #f0f0f0;
            color: #009A6E;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .category-btn-card.selected {
            background-color: #009A6E;
            color: white;
        }

        .category-btn-card:hover {
            background-color: #009A6E;
            color: white;
        }

        .button-container3 {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
        }

        .type_titles-card {
            font-size: 18px;
            font-weight: bold;
            margin-top: 20px;
            margin-bottom: 10px;
            text-align: center;
            color: #333;
            font-family: 'IranSansWeb', sans-serif;
        }

        .disease-list-container {
            width: fit-content; /* Adjust container width to fit its content */
            margin: 0 auto; /* Center-align container horizontally */
        }
        
        .disease-item {
            background-color: #009A6E30; /* Yellow color, you can customize */
            color: #009A6E; /* Text color */
            padding: 5px 10px; /* Adjust padding for better spacing */
            border-radius: 10px; /* Rounded corners */
            margin: 0 5px;
            display: inline-block; /* Display items inline */
            font-family:'IranSansWeb';
            font-weight: 500;
            font-size: 14px;
            margin-bottom: 20px;
        }
        
        .sort-cards {
          width: 20%;
          padding: 5px;
          border: 1px solid #ccc;
          border-radius: 10px;
          font-family:'IranSansWeb';
          background-color: #009A6E;
          color: #fff;
          cursor: pointer;
          transition: background-color 0.3s ease;
        }

        .sort-cards:hover, .sort-cards:focus {
          background-color: #009A6Eda;
        }
        
        .tags-container {
            background-color: #f9f9f9; /* Light background for contrast */
            padding: 10px;             /* Add some padding */
            border-radius: 10px;       /* Rounded corners */
            display: flex;             /* Use flexbox for layout */
            flex-wrap: wrap;           /* Allow tags to wrap */
            gap: 5px;                  /* Space between tags */
            justify-content: flex-start; /* Align tags to the left */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
        }
        
        .card-tag-each {
            display: inline-flex;       /* Use inline-flex for better spacing */
            align-items: center;        /* Center content vertically */
            background-color: #009A6E;  /* Green background */
            color: #fff;                 /* White text */
            padding: 7px;          /* Consistent padding */
            margin: 3px;                /* Uniform margins */
            border-radius: 10px;        /* Rounded corners */
            font-size: 11px;            /* Consistent font size */
            font-family: 'IranSansWeb'; /* Font family */
            transition: background-color 0.3s ease; /* Smooth transition */
        }

        .card-tag-each:hover {
            background-color: #007B5F; /* Darker shade on hover */
        }
        
        body {
          font-family: 'IranSansWeb', sans-serif;
        }

        .table-container {
            display: flex;
        }
        .meal-table {
            margin-right: 20px;
        }
        #mealTable thead th {
          position: sticky;
          top: 0;
          z-index: 2;
        }
        .nutrient-details {
            display: none;
            max-width: 300px;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            justify-content: center;
            align-items: center;
            align-content: center;
            align-self: center;
            border-radius: 20px;
            margin-top: 10px;
            margin-left: auto;
            margin-right: auto;
        }
        .nutrient-details.visible {
            display: block;
        }


        /* General Styles */
        .content {
          background-color: #e3e4e7;
          font-family: 'IranSansWeb', sans-serif;
          margin: 0;
          padding: 0;
        }

        .card-box {
          max-width: 1500px;
          margin: 20px auto;
          padding: 20px;
          background-color: #fff;
          border-radius: 10px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          font-family:'IranSansWeb';
          font-weight: 500;
          font-size: 14px;
        }

        .titles {
          text-align: right;
          font-size: 24px;
          margin-bottom: 10px;
          font-family: 'IranSansWeb', sans-serif;
          color: #009A6E;
        }

        .type_titles {
          text-align: center;
          font-size: 16px;
          margin-bottom: 10px;
          font-family: 'IranSansWeb', sans-serif;
        }

        .text-center {
          text-align: center;
        }

        .align-items-center {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .submit-btn {
          background-color: #009A6E;
          border-color: #009A6E;
          color: #fff;
          border-radius: 10px;
          padding: 10px 20px;
          font-size: 16px;
          cursor: pointer;
          transition: background-color 0.3s ease;
        }

        .submit-btn:hover {
          background-color: #009A6Eda;
        }

        .save-btn {
          background-color: #009A6E;
          border-color: #009A6E;
          color: #fff;
          border-radius: 10px;
          padding: 10px 20px;
          font-size: 16px;
          cursor: pointer;
          transition: background-color 0.3s ease;
          margin-right: 10px;
        }
        .save-btn:hover {
          background-color: #009A6Eda;
        }
        .load-btn {
          background-color: #009A6E;
          border-color: #009A6E;
          color: #fff;
          border-radius: 10px;
          padding: 10px 20px;
          font-size: 16px;
          cursor: pointer;
          transition: background-color 0.3s ease;
        }
        .load-btn:hover {
          background-color: #009A6Eda;
        }

        .btn-edit {
            background-color: #cfd8e6; /* Blue color, you can customize */
            /*border-color: #009A6E;*/
            color: #009A6E; /* 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: 10px;
        }
        .btn-delete {
            background-color: #cfd8e6; /* Blue color, you can customize */
            /*border-color: #009A6E;*/
            color: red; /* 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: 10px;
        }
        .btn-edit:hover {
            background-color: #009A6Eda; /* Darker shade of blue */
            color: #fff; /* Text color on hover */
            border: none;
        }
        .btn-delete:hover {
            background-color: red; /* Darker shade of blue */
            color: #fff; /* Text color on hover */
            border: none;
        }

        /* Drag and Drop Styles */
        .drag-drop-container {
          display: flex;
          justify-content: center;
          margin-top: 20px;
        }

        .drag-drop-container ul {
          list-style-type: none;
          padding: 0;
        }

        .drag-drop-container li {
          padding: 8px;
          margin-bottom: 5px;
          border: 1px solid #ccc;
          cursor: move;
          background-color: #f9f9f9;
        }

        /* Table Styles */
        #mealTable {
          width: 100%;
          border-collapse: collapse;
          margin-top: 20px;
        }

        #mealTable th, #mealTable td {
          border: 1px solid #ccc;
          padding: 10px;
          text-align: center;
        }
        
        /* Modal styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            border-radius: 10px;
        }

        /* Modal styles */
        .modal {
          display: none; /* Hidden by default */
          position: fixed; /* Stay in place */
          z-index: 1; /* Sit on top */
          left: 0;
          top: 0;
          width: 100%; /* Full width */
          height: 100%; /* Full height */
          overflow: auto; /* Enable scroll if needed */
          background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
          /*display: flex; !* Flexbox for centering *!*/
          align-items: center; /* Center vertically */
          justify-content: center; /* Center horizontally */
          margin-left: 100px;
        }

        .modal-content {
          background-color: #fefefe;
          padding: 20px;
          border: 1px solid #888;
          width: 90%;
          max-width: 500px;
          max-height: 80vh; /* Maximum height of the modal content */
          overflow-y: auto; /* Enable vertical scrolling if content exceeds max-height */
          border-radius: 50px;
          text-align: center;
          box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
        }

        .close {
          color: #aaaaaa;
          float: right;
          font-size: 28px;
          font-weight: bold;
        }

        .close:hover,
        .close:focus {
          color: #000;
          text-decoration: none;
          cursor: pointer;
        }

        /* Button container to align all buttons in a grid-like format */
        .button-container2 {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;  /* Add space between buttons */
            justify-content: flex-start;
            align-items: flex-start;
            margin-bottom: 10px;
        }

        /* Buttons for category items */
        .category-btn {
            padding: 5px 5px;
            border-radius: 10px;
            border: 2px solid #009A6E;
            background-color: #f0f0f0;
            color: #009A6E;
            font-size: 13px;
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease;
            margin: 5px;
        }

        .category-btn.selected {
            background-color: #009A6E;
            color: white;
        }

        .category-btn:hover {
            background-color: #009A6E;
            color: white;
        }

        /* Scrollable Modal */
        .modal-content {
            max-height: 80%;
            overflow-y: auto;
        }

        .btn-submit {
          background-color: #009A6E;
          border: none;
          color: #fff;
          padding: 10px 20px;
          border-radius: 10px;
          font-size: 16px;
          cursor: pointer;
          transition: background-color 0.3s ease;
        }

        .btn-submit:hover,
        .btn-submit:focus {
          background-color: #009A6Eda;
        }



        .scrollable-list-container {
          max-height: 500px;
          overflow-y: auto;
        }
        .scrollable-list-container::-webkit-scrollbar {
          width: 6px;
        }
        .scrollable-list-container::-webkit-scrollbar-thumb {
          background-color: #6a6aee;
          border-radius: 3px;
        }

        /* Simplified CSS for troubleshooting */
        .list-group-item {
          display: block; /* Ensure items are block by default */
          cursor: pointer;
        }

        .hidden {
          display: none !important; /* Use !important to override other rules */
        }

        /* Other styles... */


        .list-group-item.hidden {
            display: none !important; /* Use !important to override other rules */
        }

        .search-bar {
          width: 100%;
          padding: 10px;
          margin-bottom: 10px;
          border: 1px solid #ccc;
          border-radius: 10px;
          font-family:'IranSansWeb';
        }

        .sort-btn {
          width: 100%;
          padding: 5px;
          border: 1px solid #ccc;
          border-radius: 10px;
          font-family:'IranSansWeb';
          background-color: #009A6E;
          color: #fff;
          cursor: pointer;
          transition: background-color 0.3s ease;
        }

        .sort-btn:hover, .sort-btn:focus {
          background-color: #009A6Eda;
        }

        .reset-btn {
          width: 30%;
          padding: 5px;
          border: 1px solid #ccc;
          border-radius: 10px;
          font-family:'IranSansWeb';
          background-color: #dadada;
          color: #009A6E;
          cursor: pointer;
          transition: background-color 0.3s ease;
        }

        .reset-btn:hover, .reset-btn:focus {
          background-color: rgba(116,116,147,0.85);
          color: #FFFFFF;
        }

        .button-container {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }

        button {
            padding: 10px 20px;
            margin: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #saveBtn {
            background-color: #4CAF50;
            color: white;
        }

        #deleteBtn {
            background-color: #f44336;
            color: white;
        }

        .unit-switch {
          display: flex;
          justify-content: center;
          margin-bottom: 20px;
        }

        .unit-btn {
          flex: 1;
          padding: 10px;
          margin: 5px;
          border: 1px solid #ccc;
          border-radius: 20px;
          background-color: #e9e9e9;
          cursor: pointer;
        }

        .unit-btn.active {
          background-color: #28a745;
          color: white;
        }

        .nutrition-info {
          display: flex;
          justify-content: space-around;
          margin-bottom: 20px;
        }

        .info-item {
          text-align: center;
        }

        .info-item span {
          display: block;
          font-size: 24px;
          margin-bottom: 5px;
        }

        .nutrition-info-card {
          display: flex;
          justify-content: space-evenly;
        }

        .info-item-card {
          text-align: center;
        }

        .info-item-card span {
          display: block;
          font-size: 12px;
        }

        #meal-contents-list {
          list-style: none;
          padding: 0;
        }

        #meal-contents-list li {
          padding: 5px 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        #meal-contents-list li .actions {
          display: flex;
          gap: 10px;
        }

        #meal-contents-list li .actions .btn {
          padding: 3px 7px;
          font-size: 12px;
        }

        .fat-card {
            background-color: #5CC93650;
            color: #5CC936;
            padding: 10px;
            border-radius: 10px;
        }
        .calories-card {
            background-color: #7366E350;
            color: #7366E3;
            padding: 10px;
            border-radius: 10px;
        }
        .protein-card {
            background-color: #FF990050;
            color: #FF9900;
            padding: 10px;
            border-radius: 10px;
        }
        .carb-card {
            background-color: #28CCF750;
            color: #28CCF7;
            padding: 10px;
            border-radius: 10px;
        }
        .scrollable-list-container {
            max-height: 400px; /* Adjust as needed */
            overflow-y: auto;
        }

        .list-group-item {
            border: none; /* Remove default border */
            padding: 10px 15px;
        }

        .card-header {
            background-color: #eef; /* Light blue background */
            border-radius: 5px 5px 0 0;
            padding: 10px;
            font-weight: bold;
        }

        .card-body {
            background-color: #fff; /* White background */
            border: 1px solid #ddd;
            border-top: none;
            border-radius: 0 0 5px 5px;
            padding: 10px;
        }

        .card-box .sort-btn {
            border: none;
            color: #fff;
            cursor: pointer;
            border-radius: 10px;
        }
        .card-box .sort-btn.active {
            background-color: #d0eeda;
            color: #009A6E;
            transition: background-color 0.3s ease;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            font-weight: bolder;
            font-size: medium;
            border-radius: 20px;
        }
        .card-name {
          padding: 5px;
          border-radius: 10px;
          font-family:'IranSansWeb';
          font-size: 14px;
          color: #009A6E;
          transition: background-color 0.3s ease;
        }

        /* Add these styles to your CSS */
        .dropdown-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: space-evenly; /* Center horizontally */
            align-items: center; /* Center vertically */
            margin: 10px; /* Optional: Add some margin for spacing */
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-btn {
            background-color: #009A6E;
            color: white;
            padding: 5px 15px 5px 15px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            border-radius: 15px;
            text-align: right;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: rgb(133, 118, 255);
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
            right: 0; /* Align dropdown to the right */
            text-align: right;
            border-radius: 10px;
            max-height: 300px; /* Set a maximum height */
            overflow-y: auto; /* Make the dropdown scrollable */
        }

        .dropdown-content button {
            color: black;
            padding: 10px;
            text-decoration: none;
            display: block;
            border: none;
            background: none;
            width: 100%;
            text-align: right;
            cursor: pointer;
        }

        .dropdown-content button:hover {
            background-color: #d0eeda;
            color: #009A6E;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown:hover .dropdown-btn {
            background-color: #d0eeda;
            color: #009A6E;
        }

        .selected-tag {
            display: inline-block;
            margin: 5px;
            padding: 5px 10px;
            border-radius: 15px;
            background-color: #d3d3d3; /* default background color */
            color: #000;
            cursor: pointer;
            font-size: 12px;
        }

        .include-tag {
            background-color: #4CAF50; /* green background for include tags */
            color: #fff;
        }

        .exclude-tag {
            background-color: #f44336; /* red background for exclude tags */
            color: #fff;
        }

        .selected-tag:hover {
            opacity: 0.8;
        }

        @media (max-width: 768px) {
          .dropdown-container {
            flex-direction: column;
            align-items: center;
          }
          .col-md-8, .col-md-4 {
            flex: 0 0 100%;
            max-width: 100%;
          }
          .card-box {
            margin-bottom: 10px;
          }
        }

        .toggle-icon {
            width: 5px; /* Very small width */
            height: 5px; /* Very small height */
            padding: 0; /* Remove padding */
            text-align: center; /* Center the icon */
            vertical-align: middle; /* Align icon vertically */
            cursor: pointer; /* Pointer cursor on hover */
        }

        .toggle-icon i {
            font-size: 10px; /* Smaller icon size */
            margin: 0; /* Remove margin */
        }

        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            font-weight: 600;
            font-size: 16px;
            color: #555;
            margin-bottom: 8px;
            display: block;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        
        .stylish-input {
            width: 100%;
            padding: 12px 15px;
            font-size: 15px;
            border-radius: 6px;
            border: 1px solid #ced4da;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
            background-color: #f9f9f9;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .stylish-input:focus {
            border-color: #007bff;
            background-color: #fff;
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
            outline: none;
        }
        
        .stylish-input:hover {
            border-color: #80bdff;
        }
        


    </style>

{% endblock %}


{% block script %}



    <script src="{% static 'panel/assistant' %}/js/jquery-3.2.1.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/popper.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/bootstrap.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/jquery.slimscroll.js"></script>
    <script src="{% static 'panel/assistant' %}/js/select2.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/jquery.dataTables.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/dataTables.bootstrap4.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/moment.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/bootstrap-datetimepicker.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/app.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>


    <script type="text/javascript">
        window.CSRF_TOKEN = "{{ csrf_token }}";
        var first_load = true;
        var patient_id = "{{ patient.id }}";

        const foodList = document.getElementById('food-list');
        if (foodList) {
            foodList.addEventListener('dragstart', handleDragStart);
        } else {
            console.warn("Element with ID 'food-list' not found.");
        }
        const mealTable = document.getElementById('mealTable');

        console.log('foodList:', foodList);
        console.log('mealTable:', mealTable);

        const amountModal = document.getElementById('amountModal');
        const closeBtn = amountModal.querySelector('.close');
        const amountSubmitBtn = amountModal.querySelector('#amountSubmit');
        const amountInput = amountModal.querySelector('#amount');
        const foodNamePara = amountModal.querySelector('#foodName');
        const homeUnitSelect = document.getElementById('homeUnitSelect');
        const titleContainer = document.getElementById('titleContainer');
        const titleInput = document.getElementById('title');
        let editModal; // Declare globally
        let saveBtn;
        let deleteBtn;
        let currentCell;
        let currentFoodItem;
        let sortAscending = true; // State to keep track of the sort order
        let sortOrder = {
            fat: 'asc',
            calories: 'asc',
            protein: 'asc',
            carbohydrate: 'asc'
        };
        let globalCardTitle = "";

        function setGlobalCardTitle(title) {
            if (!globalCardTitle) {
                globalCardTitle = title;
            }
        }

        const nutritionRangeModal = document.getElementById('nutritionRangeModal');
        const closeNutritionRangeModalBtn = nutritionRangeModal.querySelector('.close');
        const applyFilterBtn = nutritionRangeModal.querySelector('#applyFilterBtn');

        let currentAttribute;

        function openNutritionRangeModal(attribute) {
            currentAttribute = attribute;
            nutritionRangeModal.style.display = 'flex';
            document.getElementById('minValue').value = '';
            document.getElementById('maxValue').value = '';
        }

        applyFilterBtn.addEventListener('click', function () {
            const minValue = parseFloat(document.getElementById('minValue').value);
            const maxValue = parseFloat(document.getElementById('maxValue').value);
            filterFoodList(minValue, maxValue);
            nutritionRangeModal.style.display = 'none';
        });

        function filterFoodList(minValue, maxValue) {
            const foodItems = document.querySelectorAll('.list-group-item');
            foodItems.forEach(item => {
                const attributeValue = parseFloat(item.getAttribute(`data-${currentAttribute}`));
                if (attributeValue >= minValue && attributeValue <= maxValue) {
                    item.classList.remove('hidden');
                } else {
                    item.classList.add('hidden');
                }
            });
        }

        document.getElementById('applyFilterBtn').addEventListener('click', function () {
            const minValue = parseFloat(document.getElementById('minValue').value);
            const maxValue = parseFloat(document.getElementById('maxValue').value);

            // Check if the values are valid numbers
            if (!isNaN(minValue) && !isNaN(maxValue)) {
                filterFoodList(minValue, maxValue);
                nutritionRangeModal.style.display = 'none';
            } else {
                alert('Please enter valid numbers for the range.');
            }
        });

        closeNutritionRangeModalBtn.addEventListener('click', function () {
            nutritionRangeModal.style.display = 'none';
        });

        closeBtn.addEventListener('click', function () {
            amountModal.style.display = 'none';
        });


        function sortFoodList(attribute) {
            const foodList = document.getElementById('food-list');
            const foods = Array.from(foodList.querySelectorAll('.list-group-item'));

            const sortAttribute = {
                fat: 'data-fat',
                calories: 'data-energy',
                protein: 'data-protein',
                carbohydrate: 'data-carbohydrate'
            }[attribute];

            const currentOrder = sortOrder[attribute];
            foods.sort((a, b) => {
                const aValue = parseFloat(a.getAttribute(sortAttribute));
                const bValue = parseFloat(b.getAttribute(sortAttribute));
                return currentOrder === 'asc' ? aValue - bValue : bValue - aValue;
            });

            sortOrder[attribute] = currentOrder === 'asc' ? 'desc' : 'asc';

            foods.forEach(food => foodList.appendChild(food));
        }

        // Get the modal element for diet type input
        const typeModal = document.getElementById('typeModal');
        // Get the button that opens the modal for diet type input
        const submitBtn = document.getElementById('submitMealPlan');

        // When the user clicks on the submit button, open the modal for diet type input
        submitBtn.addEventListener('click', function () {
            typeModal.style.display = 'flex';
        });

        // Get the submit button inside the modal for diet type input
        const typeSubmitBtn = document.getElementById('typeSubmitBtn');

        // When the user clicks on the submit button inside the modal for diet type input
        typeSubmitBtn.addEventListener('click', function () {
            // Get the value entered by the user
            const dietType = document.getElementById('dietType').value.trim();
            if (dietType) {
                // Call the function to submit the meal plan with the entered diet type
                submitMealPlan(dietType);
                // Close the modal
                typeModal.style.display = 'none';

            } else {
                alert('Please enter a diet type.');
            }
        });

        // Get the <span> element that closes the modal for diet type input
        const closeTypeModalBtn = typeModal.querySelector('.close');
        // When the user clicks on <span> (x), close the modal for diet type input
        closeTypeModalBtn.addEventListener('click', function () {
            typeModal.style.display = 'none';
        });

        // When the user clicks anywhere outside the modal for diet type input, close it
        window.addEventListener('click', function (event) {
            if (event.target === typeModal) {
                typeModal.style.display = 'none';
            }
        });

        window.addEventListener('click', function (event) {
            if (event.target === amountModal) {
                amountModal.style.display = 'none';
            }
        });

        function submitMealPlan(dietType) {
            expandAllRows();
            const dietJson = {
                week1: {
                    breakfast: [],
                    lunch: [],
                    dinner: [],
                    snack1: [],
                    snack2: []
                },
                type: dietType
            };

            const mealTable = document.getElementById('mealTable');
            const rows = mealTable.querySelectorAll('tbody tr');

            rows.forEach((row) => {
                const breakfastCell = row.querySelector('td:nth-child(3)');
                const lunchCell = row.querySelector('td:nth-child(4)');
                const dinnerCell = row.querySelector('td:nth-child(5)');
                const snack1Cell = row.querySelector('td:nth-child(6)');
                const snack2Cell = row.querySelector('td:nth-child(7)');

                dietJson.week1.breakfast.push(getMealEntry(breakfastCell));
                dietJson.week1.lunch.push(getMealEntry(lunchCell));
                dietJson.week1.dinner.push(getMealEntry(dinnerCell));
                dietJson.week1.snack1.push(getMealEntry(snack1Cell));
                dietJson.week1.snack2.push(getMealEntry(snack2Cell));
            });

            const jsonString = JSON.stringify(dietJson, null, 2);
            console.log(jsonString);
            
            const dietId = "{{ diet.id }}" || null;

            const dietStartDate = document.getElementById('dietStartDate').value;
            
            const requestData = {
                diet_json: jsonString
            };
        
            if (dietId) {
                requestData.diet_id = dietId;  // Include diet_id in the request data if editing an existing diet
            }

            if (dietStartDate) {
                // Convert the date to a timestamp
                const startDateTimestamp = new Date(dietStartDate).getTime() / 1000;
                requestData.start_date = startDateTimestamp;  // Send timestamp to backend
                console.log('startDateTimestamp')
                console.log(startDateTimestamp)
            }
            console.log('dietStartDate')
            console.log(dietStartDate)


            $.ajax({
                url: "/panel/assistant/add/table/diet/to/" + patient_id + "/",
                type: 'POST',
                data: JSON.stringify(requestData),
                contentType: 'application/json',
                processData: false,
                headers: {
                    'X-CSRFToken': window.CSRF_TOKEN
                },
                success: function (data) {
                    window.location.href = '/panel/assistant/show/patient/' + patient_id + '/#currentMenus';
                    console.log("Diet JSON successfully submitted!");
                    console.log(data);
                },
                error: function () {
                    console.log("Error submitting the diet JSON!");
                }
            });
        }

        function getMealEntry(cell) {
            const cellData = $(cell).data('cellData'); // Retrieve the cellData object
            const foodItems = cell.querySelectorAll('.food-item');
            const mealEntry = {
                title: cellData ? cellData.cardTitle : "کارت رژیم", // Set the title from cellData
                ingredient: []
            };

            foodItems.forEach((item, index) => {
                const amount = parseFloat(item.dataset.amount_g) || parseFloat(cellData.amounts[index]) || 0;

                mealEntry.ingredient.push({
                    name: item.innerText.split(' (')[0],
                    home_unit: item.dataset.home_unit || cellData.homeUnits[index] || "",
                    amount_in_home_unit: parseFloat(item.dataset.amount_home_unit) || parseFloat(cellData.amountHomeUnits[index]) || 0,
                    amount_g: amount,
                    protein: Math.round(((parseFloat(item.dataset.protein))) * 100) / 100 || parseFloat(cellData.proteinList[index]) || 0,
                    energy: Math.round(((parseFloat(item.dataset.energy))) * 100) / 100 || parseFloat(cellData.caloriesList[index]) || 0,
                    carbohydrate: Math.round(((parseFloat(item.dataset.carbohydrate))) * 100) / 100 || parseFloat(cellData.carbohydratesList[index]) || 0,
                    fat: Math.round(((parseFloat(item.dataset.fat))) * 100) / 100 || parseFloat(cellData.fatList[index]) || 0,
                    food_code: parseInt(item.dataset.food_code, 10) || parseInt(cellData.foodCodes[index], 10) || 0
                });
            });

            return mealEntry.ingredient.length > 0 ? [mealEntry] : [];
        }
        
        function showEditModal(cell, cellData) {
            const { fat, calories, protein, carbohydrate, contents, amounts, homeUnits, amountHomeUnits, foodCodes, titles } = cellData;

            const modalCellData = JSON.parse(JSON.stringify(cellData));

            // Store both the original and modal's copy in the modal's data attributes
            editModal.data('originalCellData', cellData); // Original data
            editModal.data('cellData', modalCellData);    // Copy for modal editing

            // Recalculate nutrient totals for modalCellData
            recalculateNutrientTotals(modalCellData);


            // Display nutritional values in modal
            editModal.find('#fat').text(Math.round(modalCellData.fat * 100) / 100 || 0);
            editModal.find('#calories').text(Math.round(modalCellData.calories * 100) / 100 || 0);
            editModal.find('#protein').text(Math.round(modalCellData.protein * 100) / 100 || 0);
            editModal.find('#carbohydrate').text(Math.round(modalCellData.carbohydrate * 100) / 100 || 0);

            // Display food items in modal
            const contentsList = editModal.find('#meal-contents-list');
            contentsList.empty();

            if (modalCellData.contents && modalCellData.contents.length > 0) {
                modalCellData.contents.forEach((content, index) => {
                    const amountHomeUnit = modalCellData.amountHomeUnits[index];
                    const homeUnit = modalCellData.homeUnits[index];

                    const listItem = $('<li class="list-item"></li>').text(`${content} (${amountHomeUnit} ${homeUnit})`);
                    listItem.data('index', index);

                    const actions = $('<div class="actions"></div>');
                    const editButton = $('<button class="btn btn-warning">ویرایش</button>');
                    const deleteButton = $('<button class="btn btn-danger">حذف</button>');

                    // Edit for Home Unit Selection -------------------------------------------------------------

                    editButton.on('click', () => {
                        const index = listItem.data('index');
                        const modalCellData = editModal.data('cellData');

                        const newAmount = prompt("مقدار جدید را وارد کنید (واحد خانگی)", modalCellData.amountHomeUnits[index]);
                        if (newAmount !== null && newAmount.trim() !== "") {
                            const oldAmount = parseFloat(modalCellData.amountHomeUnits[index]);
                            const oldAmountG = parseFloat(modalCellData.amounts[index]);
                            const newAmountFloat = parseFloat(newAmount);

                            if (isNaN(oldAmount) || isNaN(newAmountFloat) || oldAmount === 0) return;

                            // Update amounts in modalCellData
                            modalCellData.amountHomeUnits[index] = newAmountFloat;
                            modalCellData.amounts[index] = (oldAmountG / oldAmount) * newAmountFloat;

                            // Calculate the weight ratio
                            const weightRatio = newAmountFloat / oldAmount;

                            // Update nutrient values for this item in modalCellData
                            modalCellData.fatList[index] = (parseFloat(modalCellData.fatList[index]) * weightRatio).toFixed(2);
                            modalCellData.caloriesList[index] = (parseFloat(modalCellData.caloriesList[index]) * weightRatio).toFixed(2);
                            modalCellData.proteinList[index] = (parseFloat(modalCellData.proteinList[index]) * weightRatio).toFixed(2);
                            modalCellData.carbohydratesList[index] = (parseFloat(modalCellData.carbohydratesList[index]) * weightRatio).toFixed(2);

                            // Recalculate total nutrient values
                            recalculateNutrientTotals(modalCellData);

                            // Update the modal with the new totals
                            editModal.find('#fat').text(Math.round(modalCellData.fat * 100) / 100 || 0);
                            editModal.find('#calories').text(Math.round(modalCellData.calories * 100) / 100 || 0);
                            editModal.find('#protein').text(Math.round(modalCellData.protein * 100) / 100 || 0);
                            editModal.find('#carbohydrate').text(Math.round(modalCellData.carbohydrate * 100) / 100 || 0);

                            // Update the list item display
                            listItem.contents().first().replaceWith(`${modalCellData.contents[index]} (${newAmountFloat} ${modalCellData.homeUnits[index]})`);
                        }
                    });

                    deleteButton.on('click', () => {
                        const index = listItem.data('index');
                        const modalCellData = editModal.data('cellData');
                        const contentsList = editModal.find('#meal-contents-list');

                        // Remove the item from all arrays in modalCellData
                        modalCellData.contents.splice(index, 1);
                        modalCellData.amounts.splice(index, 1);
                        modalCellData.homeUnits.splice(index, 1);
                        modalCellData.amountHomeUnits.splice(index, 1);
                        modalCellData.foodCodes.splice(index, 1);
                        modalCellData.titles.splice(index, 1);
                        modalCellData.fatList.splice(index, 1);
                        modalCellData.caloriesList.splice(index, 1);
                        modalCellData.proteinList.splice(index, 1);
                        modalCellData.carbohydratesList.splice(index, 1);

                        // Recalculate total nutrient values
                        recalculateNutrientTotals(modalCellData);

                        // Update the modal with the new totals
                        editModal.find('#fat').text(Math.round(modalCellData.fat * 100) / 100 || 0);
                        editModal.find('#calories').text(Math.round(modalCellData.calories * 100) / 100 || 0);
                        editModal.find('#protein').text(Math.round(modalCellData.protein * 100) / 100 || 0);
                        editModal.find('#carbohydrate').text(Math.round(modalCellData.carbohydrate * 100) / 100 || 0);

                        // Remove the list item from the modal
                        listItem.remove();

                        // Update the indices of the remaining items
                        contentsList.find('.list-item').each((i, item) => {
                            $(item).data('index', i);
                        });
                    });

                    actions.append(editButton).append(deleteButton);
                    listItem.append(actions);
                    contentsList.append(listItem);
                });
            } else {
                contentsList.append('<li>هیچ موردی یافت نشد</li>');
            }

            editModal.data('currentCell', cell);

            editModal.modal('show');
        }
        let selectedDietTags = [];
        let selectedMealTimes = [];
        let cardName = '';
        let cardFlags = {};

        function roundToTwo(num) {
            return Math.round(num * 100) / 100;
        }

        document.addEventListener("DOMContentLoaded", function() {
            editModal = $('#editModal');
            // Place this code after initializing editModal in DOMContentLoaded
            editModal.on('click', '#saveChanges', function() {
                const cell = editModal.data('currentCell');
                const modalCellData = editModal.data('cellData');
                const cellData = editModal.data('originalCellData');

                // Replace all properties of cellData with those from modalCellData
                Object.assign(cellData, modalCellData);

                // Recalculate nutrient totals for cellData
                recalculateNutrientTotals(cellData);

                // Rebuild cell HTML
                const titleContent = `<strong>${cellData.cardTitle}</strong><br>`;
                const foodItemsContent = cellData.contents.map((content, index) => {
                    return `<div class="food-item" data-amount_g="${cellData.amounts[index]}"
                                data-home_unit="${cellData.homeUnits[index]}"
                                data-food_code="${cellData.foodCodes[index]}"
                                data-amount_home_unit="${cellData.amountHomeUnits[index]}"
                                data-fat="${cellData.fatList[index]}"
                                data-calories="${cellData.caloriesList[index]}"
                                data-protein="${cellData.proteinList[index]}"
                                data-carbohydrate="${cellData.carbohydratesList[index]}">
                                ${content} (${cellData.amountHomeUnits[index]} ${cellData.homeUnits[index]})</div>`;
                }).join('');

                // Update the cell's HTML
                $(cell).html(titleContent + foodItemsContent);

                // Update cell data attribute
                $(cell).data('cellData', cellData);

                // Hide the modal
                editModal.modal('hide');

                // Update nutrient details for the row
                const rowNumber = $(cell).closest('tr').index() + 1;
                updateRowNutrientDetails(rowNumber);
            });


            // When the modal is hidden (closed), reset the modal data
            editModal.on('hide.bs.modal', function (e) {
                const modalCellData = editModal.data('cellData');
                const originalCellData = editModal.data('originalCellData');

                // Check if there are unsaved changes
                const changesMade = JSON.stringify(modalCellData) !== JSON.stringify(originalCellData);

                if (changesMade) {
                    const confirmClose = confirm('تغییرات ذخیره نشده‌اند. آیا می‌خواهید بدون ذخیره ادامه بدهید؟');
                    if (!confirmClose) {
                        e.preventDefault(); // Prevent the modal from closing
                    }
                }
            });


            editModal.on('click', '#deleteContent', function() {
                console.log('delete clicked');
                const cell = editModal.data('currentCell');
                $(cell).empty();
                $(cell).removeData('cellData');
                editModal.modal('hide');
                const rowNumber = $(cell).closest('tr').index() + 1;
                updateRowNutrientDetails(rowNumber);
            });

            editModal.on('click', '#initCreateCardFromModal', function() {
                // Open the editCardModal and when the user saves there, we build and save the card
                openCreateCardModal(function() {
                    // Callback after modal closed and cardName, cardFlags are set
                    // Now we have cardName and cardFlags from the user input in editCardModal

                    const modalCellData = editModal.data('cellData');
                    if (!modalCellData || !modalCellData.contents || modalCellData.contents.length === 0) {
                        alert('هیچ مورد غذایی برای ساخت کارت وجود ندارد.');
                        return;
                    }

                    // Build the cardData from modalCellData
                    let totalCalories = 0;
                    const foods = modalCellData.contents.map((foodTitle, index) => {
                        const amountInGrams = parseFloat(modalCellData.amounts[index]) || 0;
                        const protein = parseFloat(modalCellData.proteinList[index]) || 0;
                        const fat = parseFloat(modalCellData.fatList[index]) || 0;
                        const carbs = parseFloat(modalCellData.carbohydratesList[index]) || 0;
                        const calories = parseFloat(modalCellData.caloriesList[index]) || 0;

                        totalCalories += calories;

                        // Calculate per-100g values if amountInGrams > 0
                        let proteinPer100g = 0, fatPer100g = 0, carbsPer100g = 0, caloriesPer100g = 0;
                        if (amountInGrams > 0) {
                            proteinPer100g = (protein / amountInGrams) * 100;
                            fatPer100g = (fat / amountInGrams) * 100;
                            carbsPer100g = (carbs / amountInGrams) * 100;
                            caloriesPer100g = (calories / amountInGrams) * 100;
                        }

                        const foodCode = modalCellData.foodCodes[index];

                        return {
                            'food_code': foodCode,
                            'food_name': foodTitle,
                            'amount': amountInGrams,
                            'home_unit_name': modalCellData.homeUnits[index],
                            'home_unit_amount': modalCellData.amountHomeUnits[index],
                            'Protein_g': roundToTwo(proteinPer100g),
                            'Fat_g': roundToTwo(fatPer100g),
                            'Carbohydrates_g': roundToTwo(carbsPer100g),
                            'Calories': roundToTwo(caloriesPer100g),
                            'Protein': roundToTwo(protein),
                            'Fat': roundToTwo(fat),
                            'Carbohydrates': roundToTwo(carbs),
                            'Energy': roundToTwo(calories)
                        };
                    });

                    const cardData = {
                        'FA_Name': cardName || modalCellData.cardTitle || 'کارت بدون نام',
                        'Calories': roundToTwo(totalCalories),
                        'foods': foods,
                        ...cardFlags
                    };

                    // Automatically calculate tags and nutrient ratios
                    calculateTagsForCard(cardData);

                    // Send the card to the server
                    saveCardToServer(cardData);
                });
            });

            function openCreateCardModal(callback) {
                const modal = document.getElementById('editCardModal');
                const modalCloseBtn = document.getElementById('editCardModalClose');
                const saveChangesBtn = document.getElementById('saveCardChanges');
                const cardNameInput = document.getElementById('editCardName');

                // Clear previous values
                cardNameInput.value = '';
                selectedDietTags = [];
                selectedMealTimes = [];

                // Remove 'selected' class from all buttons
                document.querySelectorAll('.category-btn-card').forEach(button => {
                    button.classList.remove('selected');
                });

                modal.style.display = 'block';

                // Close modal when 'x' is clicked
                modalCloseBtn.onclick = function() {
                    modal.style.display = 'none';
                };

                // Close modal when clicking outside the content
                window.onclick = function(event) {
                    if (event.target == modal) {
                        modal.style.display = 'none';
                    }
                };

                // Save changes when 'Save Changes' is clicked
                saveChangesBtn.onclick = function() {
                    // Get card name
                    const newName = cardNameInput.value.trim();
                    if (!newName) {
                        alert('لطفاً نام کارت را وارد کنید.');
                        return;
                    }

                    if (selectedMealTimes.length === 0) {
                        alert('لطفاً حداقل یک تگ از دسته وعده غذایی انتخاب کنید.');
                        return;
                    }

                    cardName = newName;

                    // Combine selected tags into cardFlags
                    cardFlags = {};
                    selectedDietTags.forEach(tag => {
                        cardFlags[tag] = true;
                    });
                    selectedMealTimes.forEach(tag => {
                        cardFlags[tag] = true;
                    });

                    // Close modal
                    modal.style.display = 'none';

                    // Execute callback if provided
                    if (typeof callback === 'function') {
                        callback();
                    }
                };
            }

            document.querySelectorAll('.category-btn-card').forEach(button => {
                button.addEventListener('click', function() {
                    this.classList.toggle('selected');
                    const value = this.value;
                    const category = this.getAttribute('data-category');
            
                    if (category === 'dietTags') {
                        if (this.classList.contains('selected')) {
                            selectedDietTags.push(value);
                        } else {
                            selectedDietTags = selectedDietTags.filter(tag => tag !== value);
                        }
                    } else if (category === 'mealTimes') {
                        if (this.classList.contains('selected')) {
                            selectedMealTimes.push(value);
                        } else {
                            selectedMealTimes = selectedMealTimes.filter(tag => tag !== value);
                        }
                    }
                });
            });

            function calculateTagsForCard(card) {
                let totalCarbohydrates = 0;
                let totalProteins = 0;
                let totalFat = 0;

                card.foods.forEach(foodItem => {
                    totalCarbohydrates += foodItem.Carbohydrates || 0;
                    totalProteins += foodItem.Protein || 0;
                    totalFat += foodItem.Fat || 0;
                });

                if (card.Calories > 0) {
                    const carbRatio = (totalCarbohydrates * 4) / card.Calories;
                    const proteinRatio = (totalProteins * 4) / card.Calories;
                    const fatRatio = (totalFat * 9) / card.Calories;

                    card.carbRatio = roundToTwo(carbRatio);
                    card.proteinRatio = roundToTwo(proteinRatio);
                    card.fatRatio = roundToTwo(fatRatio);

                    // Carb tags
                    if (carbRatio > 0.55) {
                        card.is_highcarb = true;
                    } else if (0.4 <= carbRatio && carbRatio <= 0.55) {
                        card.is_mediumcarb = true;
                    } else if (carbRatio < 0.4) {
                        card.is_lowcarb = true;
                    }

                    // Protein tags
                    if (proteinRatio > 0.25) {
                        card.is_highprotein = true;
                    } else if (0.15 <= proteinRatio && proteinRatio <= 0.25) {
                        card.is_mediumprotein = true;
                    } else if (proteinRatio < 0.15) {
                        card.is_lowprotein = true;
                    }

                    // Fat tags
                    if (fatRatio > 0.35) {
                        card.is_highfat = true;
                    } else if (0.25 <= fatRatio && fatRatio <= 0.35) {
                        card.is_mediumfat = true;
                    } else if (fatRatio < 0.25) {
                        card.is_lowfat = true;
                    }

                    // Additional logic for is_mind, is_med if needed
                    // ...
                }
            }

            function saveCardToServer(cardData) {
                const requestData = {
                    'card_data': cardData,
                    'patient_id': patient_id // if needed
                };

                $.ajax({
                    url: '/panel/assistant/save/cards/',
                    type: 'POST',
                    data: JSON.stringify(requestData),
                    contentType: 'application/json',
                    headers: {
                        'X-CSRFToken': window.CSRF_TOKEN
                    },
                    success: function(response) {
                        alert('کارت با موفقیت ساخته شد!');
                    },
                    error: function(xhr, status, error) {
                        console.error('Error saving card:', error);
                        alert('خطا در ذخیره کارت. لطفاً دوباره تلاش کنید.');
                    }
                });
            }


            const draggableCards = document.querySelectorAll('.card');
            draggableCards.forEach(card => {
                card.addEventListener('dragstart', handleCardDragStart);
            });

            const cardList = document.getElementById('cardList');
            const sortable = new Sortable(cardList, {
                animation: 150,
                ghostClass: 'sortable-ghost',
                chosenClass: 'sortable-chosen',
                dragClass: 'sortable-drag',
                onEnd: function(evt) {
                    updateCardOrder();
                }
            });

            function updateCardOrder() {
                const cardOrder = Array.from(cardList.querySelectorAll('.card')).map(card => card.dataset.index);
                // Send updated order to server or handle it as required
            }

            function handleMealTableDrop(event) {
                console.log('Drop event triggered');
                event.preventDefault();
                const cell = $(event.target.closest('td')); // Wrap cell with jQuery

                // Check if the cell is non-droppable
                if (!cell.length || cell.hasClass('non-droppable')) return;

                const jsonData = event.dataTransfer.getData('application/json');
                if (jsonData) {
                    let cardData;
                    try {
                        cardData = JSON.parse(jsonData);
                    } catch (e) {
                        console.error('Failed to parse data:', e);
                        return;
                    }

                    const cellData = {
                        fat: 0,
                        calories: 0,
                        protein: 0,
                        carbohydrate: 0,
                        contents: [],
                        amounts: [],
                        homeUnits: [],
                        amountHomeUnits: [],
                        foodCodes: [],
                        titles: [],
                        cardTitle: cardData.cardTitle, // Assign cardTitle here
                        fatList: [],
                        caloriesList: [],
                        proteinList: [],
                        carbohydratesList: []
                    };

                    setGlobalCardTitle(cardData.cardTitle);

                    cardData.items2.forEach(item => {
                        cellData.contents.push(item.title);
                        cellData.amounts.push(item.amount_g);
                        cellData.homeUnits.push(item.home_unit);
                        cellData.amountHomeUnits.push(item.home_unit_amount);
                        cellData.foodCodes.push(item.food_code);
                        cellData.titles.push(item.title);

                        cellData.fatList.push(parseFloat(item.fat) || 0);
                        cellData.caloriesList.push(parseFloat(item.calories) || 0);
                        cellData.proteinList.push(parseFloat(item.protein) || 0);
                        cellData.carbohydratesList.push(parseFloat(item.carbohydrate) || 0);

                        cellData.fat += parseFloat(item.fat) || 0;
                        cellData.calories += parseFloat(item.calories) || 0;
                        cellData.protein += parseFloat(item.protein) || 0;
                        cellData.carbohydrate += parseFloat(item.carbohydrate) || 0;
                    });

                    const existingFoodItems = $(cell).find('.food-item');
                    existingFoodItems.each(function() {
                        const item = $(this);
                        const amount = parseFloat(item.data('amount_g')) || 0;
                        const itemFat = parseFloat(item.data('fat')) || 0;
                        const itemCalories = parseFloat(item.data('calories')) || 0;
                        const itemProtein = parseFloat(item.data('protein')) || 0;
                        const itemCarbohydrates = parseFloat(item.data('carbohydrate')) || 0;

                        cellData.contents.push(item.text().split(' (')[0]);
                        cellData.amounts.push(amount);
                        cellData.homeUnits.push(item.data('home_unit'));
                        cellData.foodCodes.push(parseInt(item.data('food_code'), 10) || 0);
                        cellData.amountHomeUnits.push(parseInt(item.data('amount_home_unit'), 10) || 0);
                        cellData.titles.push(item.data('title') || "");

                        cellData.fatList.push(itemFat);
                        cellData.caloriesList.push(itemCalories);
                        cellData.proteinList.push(itemProtein);
                        cellData.carbohydratesList.push(itemCarbohydrates);

                        cellData.fat += itemFat;
                        cellData.calories += itemCalories;
                        cellData.protein += itemProtein;
                        cellData.carbohydrate += itemCarbohydrates;
                    });

                    // Generate the title part only once
                    const titleContent = `<strong>${cellData.cardTitle}</strong><br>`;
                    {#<span> (${cellData.calories}) </span>#}

                    // Generate the food items
                    const foodItemsContent = cellData.contents.map((content, index) => {
                        return `<div class="food-item" data-amount_g="${cellData.amounts[index]}"
                                    data-home_unit="${cellData.homeUnits[index]}"
                                    data-food_code="${cellData.foodCodes[index]}"
                                    data-amount_home_unit="${cellData.amountHomeUnits[index]}"
                                    data-fat="${cellData.fatList[index]}"
                                    data-calories="${cellData.caloriesList[index]}"
                                    data-protein="${cellData.proteinList[index]}"
                                    data-carbohydrate="${cellData.carbohydratesList[index]}">
                                    ${content} (${cellData.amountHomeUnits[index]} ${cellData.homeUnits[index]})</div>`;
                    }).join('');

                    // Combine the title and food items
                    const cellContents = titleContent + foodItemsContent;

                    cell.html(cellContents);

                    cell.data('cellData', cellData);


                    cell.on('click', () => showModal(cell, cellData));

                }
                const rowNumber = $(this).closest('tr').index() + 1;
                updateRowNutrientDetails(rowNumber);
            }


            const mealTableCells = document.querySelectorAll('td');
            mealTableCells.forEach(cell => {
                console.log('Attaching event listeners to cell:', cell);
                cell.addEventListener('dragover', (event) => event.preventDefault());
                cell.addEventListener('drop', handleDrop);

                mealTable.addEventListener('click', function(event) {
                    const cell = event.target.closest('td');
                    if (!cell || cell.cellIndex === 0) return;

                    // Retrieve cellData from the cell's data attribute
                    let cellData = $(cell).data('cellData');
                    if (!cellData) {
                        // If cellData doesn't exist, initialize it
                        cellData = {
                            fat: 0,
                            calories: 0,
                            protein: 0,
                            carbohydrate: 0,
                            contents: [],
                            amounts: [],
                            homeUnits: [],
                            amountHomeUnits: [],
                            foodCodes: [],
                            titles: [],
                            cardTitle: '',
                            fatList: [],
                            caloriesList: [],
                            proteinList: [],
                            carbohydratesList: []
                        };
                    }

                    // Now, show the modal with the existing cellData
                    showEditModal($(cell), cellData);
                });



            });



            initializeCardItemEventListeners();
            initializeFoodItemEventListeners();
        });
        
        function recalculateNutrientTotals(cellData) {
            cellData.fat = cellData.fatList.reduce((acc, val) => acc + parseFloat(val), 0) || 0;
            cellData.calories = cellData.caloriesList.reduce((acc, val) => acc + parseFloat(val), 0) || 0;
            cellData.protein = cellData.proteinList.reduce((acc, val) => acc + parseFloat(val), 0) || 0;
            cellData.carbohydrate = cellData.carbohydratesList.reduce((acc, val) => acc + parseFloat(val), 0) || 0;
        }



{#------------------------------------ drag and drop functions -------------------------------#}

        mealTable.addEventListener('dragenter', handleDragEnter);
        mealTable.addEventListener('dragover', function(event) {
            event.preventDefault();
        });
        mealTable.addEventListener('drop', handleDrop);

        function handleCardDragStart(event) {
            const cardElement = event.target.closest('.card');
            if (!cardElement) return;

            const cardData = {
                cardName: cardElement.querySelector('.card-name').innerText.trim(),
                calories: cardElement.dataset.calories,
                cardTitle: cardElement.dataset.card_title, // Extract cardTitle here
                isBreakfast: cardElement.dataset.breakfast,
                isLunch: cardElement.dataset.lunch,
                isDinner: cardElement.dataset.dinner,
                isSnack: cardElement.dataset.snack,
                isKeto: cardElement.dataset.is_keto,
                isMed: cardElement.dataset.is_med,
                isLowcarb: cardElement.dataset.is_lowcarb,
                isMediumcarb: cardElement.dataset.is_mediumcarb,
                isHighprotein: cardElement.dataset.is_highprotein,
                isLowprotein: cardElement.dataset.is_lowprotein,
                isMind: cardElement.dataset.is_mind,
                isLowFodmap: cardElement.dataset.is_low_fodmap,
                items2: Array.from(cardElement.querySelectorAll('.card-items .list-group-item')).map(item => {
                    return {
                        title: item.dataset.title,
                        amount_g: item.dataset.amount_g,
                        home_unit: item.dataset.home_unit,
                        home_unit_amount: item.dataset.home_unit_amount,
                        protein: item.dataset.protein,
                        fat: item.dataset.fat,
                        carbohydrate: item.dataset.carbohydrate,
                        calories: item.dataset.calories,
                        food_code: item.dataset.food_code
                    };
                })
            };

            const jsonString = JSON.stringify(cardData);
            event.dataTransfer.setData('application/json', jsonString);
        }

        function handleDragStart(event) {
            const foodElement = event.target;
            const foodName = foodElement.querySelector('.food-name').innerText;
            const homeUnits = foodElement.getAttribute('data-home_units').split('&').filter(unit => unit);
            const weightUnits = foodElement.getAttribute('data-weight_units').split('&').filter(unit => unit).map(Number);
        
            const dragData = JSON.stringify({ foodName, homeUnits, weightUnits });
            event.dataTransfer.setData('application/json', dragData);
            currentFoodItem = foodElement;
        }

        function handleDragEnter(event) {
            event.preventDefault();
        }

        function handleDragOver(event) {
            event.preventDefault();
        }

        function handleDrop(event) {
            event.preventDefault();
            const cell = event.target.closest('td');
            if (!cell) return;
        
            const data = event.dataTransfer.getData('application/json');
            if (!data) return;
        
            let parsedData;
            try {
                parsedData = JSON.parse(data);
            } catch (e) {
                console.error('Failed to parse data:', e);
                return;
            }
        
            if (parsedData.homeUnits && parsedData.weightUnits) {
                // This is a food item
                currentCell = cell;
                const showTitle = cell.querySelectorAll('.food-item').length === 0;
                showModal(parsedData.foodName, parsedData.homeUnits, parsedData.weightUnits, showTitle);
            } else if (parsedData.items2) {
                // This is a card
                handleCardDrop(parsedData, cell);
            } else {
                console.error('Unrecognized drop data format');
            }
        }


        function handleCardDrop(cardData, cell) {
            let cellData = $(cell).data('cellData');
        
            if (!cellData) {
                // Initialize cellData if it doesn't exist
                cellData = {
                    fat: 0,
                    calories: 0,
                    protein: 0,
                    carbohydrate: 0,
                    contents: [],
                    amounts: [],
                    homeUnits: [],
                    amountHomeUnits: [],
                    foodCodes: [],
                    titles: [],
                    cardTitle: '', // Initialize with empty string
                    fatList: [],
                    caloriesList: [],
                    proteinList: [],
                    carbohydratesList: []
                };
            }
        
            // Append the new card's data to cellData
            cardData.items2.forEach(item => {
                cellData.contents.push(item.title);
                cellData.amounts.push(item.amount_g);
                cellData.homeUnits.push(item.home_unit);
                cellData.amountHomeUnits.push(item.home_unit_amount);
                cellData.foodCodes.push(item.food_code);
                cellData.titles.push(item.title);
        
                const itemFat = parseFloat(item.fat) || 0;
                const itemCalories = parseFloat(item.calories) || 0;
                const itemProtein = parseFloat(item.protein) || 0;
                const itemCarbohydrates = parseFloat(item.carbohydrate) || 0;
        
                cellData.fatList.push(itemFat);
                cellData.caloriesList.push(itemCalories);
                cellData.proteinList.push(itemProtein);
                cellData.carbohydratesList.push(itemCarbohydrates);
        
                cellData.fat += itemFat;
                cellData.calories += itemCalories;
                cellData.protein += itemProtein;
                cellData.carbohydrate += itemCarbohydrates;
            });
        
            // Update cardTitle
            if (cellData.cardTitle) {
                cellData.cardTitle += ', ' + cardData.cardTitle;
            } else {
                cellData.cardTitle = cardData.cardTitle;
            }
        
            // Generate the title part
            const titleContent = `<strong>${cellData.cardTitle}</strong><br>`;
        
            // Generate the food items
            const foodItemsContent = cellData.contents.map((content, index) => {
                return `<div class="food-item" data-amount_g="${cellData.amounts[index]}"
                            data-home_unit="${cellData.homeUnits[index]}"
                            data-food_code="${cellData.foodCodes[index]}"
                            data-amount_home_unit="${cellData.amountHomeUnits[index]}"
                            data-fat="${cellData.fatList[index]}"
                            data-calories="${cellData.caloriesList[index]}"
                            data-protein="${cellData.proteinList[index]}"
                            data-carbohydrate="${cellData.carbohydratesList[index]}">
                            ${content} (${cellData.amountHomeUnits[index]} ${cellData.homeUnits[index]})</div>`;
            }).join('');
        
            // Combine the title and food items
            const cellContents = titleContent + foodItemsContent;
        
            $(cell).html(cellContents);
            $(cell).data('cellData', cellData);
            $(cell).on('click', () => showEditModal($(cell), cellData));
        
            const rowNumber = $(cell).closest('tr').index() + 1;
            updateRowNutrientDetails(rowNumber);
        }



        function initializeCardItemEventListeners() {
            const draggableCards = document.querySelectorAll('.card');
            draggableCards.forEach(card => {
                card.addEventListener('dragstart', handleCardDragStart);
            });
            // Other event listeners for cards
        }

        function initializeFoodItemEventListeners() {
            const foodItems = document.querySelectorAll('.list-group-item');
            foodItems.forEach(item => {
                item.addEventListener('dragstart', handleDragStart);
            });
        }


        function updateCellDataAttributes(cell, foodData) {
            const amountG = parseFloat(amountInput.value.trim()) * parseFloat(homeUnitSelect.value);
            const protein = parseFloat(currentFoodItem.dataset.protein) * amountG || 0;
            const energy = parseFloat(currentFoodItem.dataset.energy) * amountG || 0;
            const carbohydrate = parseFloat(currentFoodItem.dataset.carbohydrate) * amountG || 0;
            const fat = parseFloat(currentFoodItem.dataset.fat) * amountG || 0;

            cell.dataset.fat = (parseFloat(cell.dataset.fat) || 0) + fat;
            cell.dataset.protein = (parseFloat(cell.dataset.protein) || 0) + protein;
            cell.dataset.carbohydrate = (parseFloat(cell.dataset.carbohydrate) || 0) + carbohydrate;
            cell.dataset.calories = (parseFloat(cell.dataset.calories) || 0) + energy;

            let contents = cell.dataset.contents ? cell.dataset.contents.split(',') : [];
            let amounts = cell.dataset.amounts ? cell.dataset.amounts.split(',').map(Number) : [];
            contents.push(foodData.cardName || foodData.foodName);
            amounts.push(amountG);

            cell.dataset.contents = contents.join(',');
            cell.dataset.amounts = amounts.join(',');
        }


        function showModal(foodName, homeUnits, weightUnits, showTitle) {
            foodNamePara.textContent = foodName;
            amountInput.value = '';
            homeUnitSelect.innerHTML = '';

            homeUnits.forEach((unit, index) => {
                const option = document.createElement('option');
                option.value = weightUnits[index];
                option.textContent = unit;
                homeUnitSelect.appendChild(option);
            });

            if (showTitle) {
                titleContainer.style.display = 'block';
            } else {
                titleContainer.style.display = 'none';
            }

            amountModal.style.display = 'flex';
        }

        amountSubmitBtn.addEventListener('click', function () {
            const amountValue = parseFloat(amountInput.value.trim());
            const titleValue = titleInput.value.trim();
            const showTitle = titleContainer.style.display !== 'none';
            if (amountValue) {
                const selectedHomeUnit = homeUnitSelect.options[homeUnitSelect.selectedIndex].text;
                const weightOfHomeUnit = parseFloat(homeUnitSelect.value);
        
                if (weightOfHomeUnit) {
                    const amountG = amountValue * weightOfHomeUnit;
                    const foodData = {
                        name: foodNamePara.textContent,
                        home_unit: selectedHomeUnit,
                        amount_in_home_unit: amountValue,
                        amount_g: amountG,
                        protein: Math.round(parseFloat(currentFoodItem.dataset.protein) * amountG / 100) || 0,
                        energy: Math.round(parseFloat(currentFoodItem.dataset.energy) * amountG / 100) || 0,
                        carbohydrate: Math.round(parseFloat(currentFoodItem.dataset.carbohydrate) * amountG / 100) || 0,
                        fat: Math.round(parseFloat(currentFoodItem.dataset.fat) * amountG / 100) || 0,
                        food_code: parseInt(currentFoodItem.dataset.food_code, 10) || 0,
                        title: showTitle ? titleValue : currentCell.querySelector('.food-item').dataset.title
                    };
        
                    // Retrieve existing cellData or initialize
                    let cellData = $(currentCell).data('cellData');
                    if (!cellData) {
                        cellData = {
                            fat: 0,
                            calories: 0,
                            protein: 0,
                            carbohydrate: 0,
                            contents: [],
                            amounts: [],
                            homeUnits: [],
                            amountHomeUnits: [],
                            foodCodes: [],
                            titles: [],
                            cardTitle: '', // Initialize with empty string
                            fatList: [],
                            caloriesList: [],
                            proteinList: [],
                            carbohydratesList: []
                        };
                    }
        
                    // Update cellData with the new food item
                    cellData.contents.push(foodData.name);
                    cellData.amounts.push(foodData.amount_g);
                    cellData.homeUnits.push(foodData.home_unit);
                    cellData.amountHomeUnits.push(foodData.amount_in_home_unit);
                    cellData.foodCodes.push(foodData.food_code);
                    cellData.titles.push(foodData.title);
        
                    cellData.fatList.push(foodData.fat);
                    cellData.caloriesList.push(foodData.energy);
                    cellData.proteinList.push(foodData.protein);
                    cellData.carbohydratesList.push(foodData.carbohydrate);
        
                    cellData.fat += foodData.fat;
                    cellData.calories += foodData.energy;
                    cellData.protein += foodData.protein;
                    cellData.carbohydrate += foodData.carbohydrate;
        
                    // Rebuild cell content
                    // Generate the title part only once
                    let titleContent = '';
                    if (cellData.cardTitle) {
                        titleContent = `<strong>${cellData.cardTitle}</strong><br>`;
                    }
        
                    // Generate the food items
                    const foodItemsContent = cellData.contents.map((content, index) => {
                        return `<div class="food-item" data-amount_g="${cellData.amounts[index]}"
                                    data-home_unit="${cellData.homeUnits[index]}"
                                    data-food_code="${cellData.foodCodes[index]}"
                                    data-amount_home_unit="${cellData.amountHomeUnits[index]}"
                                    data-fat="${cellData.fatList[index]}"
                                    data-calories="${cellData.caloriesList[index]}"
                                    data-protein="${cellData.proteinList[index]}"
                                    data-carbohydrate="${cellData.carbohydratesList[index]}">
                                    ${content} (${cellData.amountHomeUnits[index]} ${cellData.homeUnits[index]})</div>`;
                    }).join('');
        
                    // Combine the title and food items
                    const cellContents = titleContent + foodItemsContent;
        
                    $(currentCell).html(cellContents);
        
                    // Save updated cellData back to the cell
                    $(currentCell).data('cellData', cellData);
        
                    // Close the modal
                    amountModal.style.display = 'none';
                } else {
                    alert('Please select a home unit.');
                }
            } else {
                alert('Please enter an amount.');
            }
            const rowNumber = $(currentCell).closest('tr').index() + 1;
            updateRowNutrientDetails(rowNumber);
        });


        

    </script>

{#   ---------------------- save and load template ------------------ #}
    <script>

        document.addEventListener('DOMContentLoaded', () => {
            {% if diet_json %}
                const dietData = JSON.parse('{{ diet_json|escapejs }}');
                console.log('dietData')
                console.log(dietData)
                populateDietTable(dietData);
            {% endif %}

        });

        const templateModal2 = document.getElementById('templateModal2');
        const closeTemplateModalBtn2 = templateModal2.querySelector('.close');

        closeTemplateModalBtn2.addEventListener('click', function () {
            templateModal2.style.display = 'none';
        });
        
        // Multi-select button functionality
        document.querySelectorAll('.category-btn').forEach(button => {
            button.addEventListener('click', function() {
                this.classList.toggle('selected');  // Toggle selection state
            });
        });
        
        // Collect selected buttons when the form is submitted
        document.getElementById('templateSubmitBtn2').onclick = function() {
            const dietName = document.getElementById('dietName').value.trim();
            const calorieRange = parseFloat(document.getElementById('calorieRange').value.trim());
            const companyName = document.getElementById('companyName').value;
            const city = document.getElementById('city').value;
            const isUserTemplate = document.getElementById('isUserTemplate').checked;

            if (isNaN(calorieRange) || calorieRange <= 0) {
                alert('Please enter a valid calorie range.');
                return;
            }

            if (!dietName) {
                alert('Please enter a diet name.');
                return;
            }

            const selectedBacteria = [];
            const selectedDietType = [];
            const selectedDiseases = [];
            const selectedAllergic = [];

            // Collect selected buttons
            document.querySelectorAll('.category-btn.selected').forEach(button => {
                const category = button.getAttribute('data-category');
                const value = button.value;

                if (category === 'bacteriaType') {
                    selectedBacteria.push(value);
                } else if (category === 'dietType') {
                    selectedDietType.push(value);
                } else if (category === 'diseases') {
                    selectedDiseases.push(value);
                } else if (category === 'AllergicType') {
                    selectedAllergic.push(value);
                }
            });

            // Ensure at least one item is selected in each category
            // (selectedBacteria.length === 0 || selectedDietType.length === 0 || selectedDiseases.length === 0)
            if (selectedDietType.length === 0 || selectedDiseases.length === 0) {
                alert('لطفا از هر دسته حداقل یک مورد را انتخاب کنید.');
                return;
            }

            saveDietAsTemplate(dietName, calorieRange, companyName, city, isUserTemplate, selectedBacteria, selectedDietType, selectedDiseases, selectedAllergic);
            // Hide the modal after submission
            document.getElementById("templateModal2").style.display = "none";
        };
        window.addEventListener('click', function (event) {
            if (event.target === templateModal2) {
                templateModal2.style.display = 'none';
            }
        });

        document.addEventListener('DOMContentLoaded', () => {
            // this was for the drop down and for the diet templates
            {#fetchDietTemplates();#}
            {#document.getElementById('loadTemplateButton').addEventListener('click', loadSelectedTemplate);#}
            document.getElementById('loadTemplateButton').addEventListener('click', function () {
                console.log('Storing patient ID:', patient_id);  // Log the patientId for debugging

                if (patient_id) {
                    sessionStorage.setItem('patientId', patient_id);  // Store the patient_id in sessionStorage
                    window.location.href = '/panel/assistant/diet/templates';  // Redirect to the diet template page
                } else {
                    console.error('Patient ID is missing.');
                }
            });

            document.getElementById('saveTemplateButton').addEventListener('click', () => {
                templateModal2.style.display = 'flex';
            });
        });
        // Load the template in the table if it was stored in the system
        document.addEventListener('DOMContentLoaded', () => {
            const selectedTemplate = sessionStorage.getItem('selectedTemplate');

            if (selectedTemplate) {
                const dietData = JSON.parse(selectedTemplate).diet_json;
                console.log('Loaded diet data:', dietData);
                populateDietTable(dietData);  // Use your function to populate the diet table

                // Optionally clear the selected template after loading it
                sessionStorage.removeItem('selectedTemplate');
            }
        });

        function fetchDietTemplates() {
            $.ajax({
                url: "/panel/assistant/get/diet/templates/",
                type: 'GET',
                contentType: 'application/json',
                headers: {'X-CSRFToken': window.CSRF_TOKEN},
                success: function (data) {
                    const dropdown = document.getElementById('dietTemplateDropdown');
                    dropdown.innerHTML = '';
                    if (Array.isArray(data)) {
                        data.forEach(template => {
                            const option = document.createElement('option');
                            option.value = template.template_id;
                            option.text = `${template.diet_name} - ${new Date(template.created_at).toLocaleString()}`;
                            dropdown.add(option);
                        });
                    } else {
                        console.error('Data is not an array:', data);
                    }
                },
                error: function () {
                    console.error('Error fetching templates!');
                }
            });
        }

        function populateDietTable(dietData) {
            const mealTable = document.getElementById('mealTable');
            const rows = mealTable.querySelectorAll('tbody tr');
            const week1 = dietData.week1;
        
            rows.forEach((row, index) => {
                const cells = row.querySelectorAll('td');
                const [breakfastCell, lunchCell, dinnerCell, snack1Cell, snack2Cell] = [cells[2], cells[3], cells[4], cells[5], cells[6]];
        
                // Populate cell with data
                breakfastCell.innerHTML = formatMealEntries(week1.breakfast[index]);
                lunchCell.innerHTML = formatMealEntries(week1.lunch[index]);
                dinnerCell.innerHTML = formatMealEntries(week1.dinner[index]);
                snack1Cell.innerHTML = formatMealEntries(week1.snack1[index]);
                snack2Cell.innerHTML = formatMealEntries(week1.snack2[index]);
        
                // Update cell data directly without opening a modal
                [breakfastCell, lunchCell, dinnerCell, snack1Cell, snack2Cell].forEach(cell => {
                    const cellData = extractCellData(cell);
                    updateCellData(cell, cellData);
        
                    // Attach click event listener to the cell
                    cell.addEventListener('click', function () {
                        showEditModal($(cell), cellData);
                    });
                });
            });
        }


        function extractCellData(cell) {
            const cellData = {
                fat: 0,
                calories: 0,
                protein: 0,
                carbohydrate: 0,
                contents: [],
                amounts: [],
                homeUnits: [],
                amountHomeUnits: [],
                foodCodes: [],
                titles: [],
                cardTitle: $(cell).find('strong').text() || $(cell).find('.meal-title').text() || '',
                fatList: [],
                caloriesList: [],
                proteinList: [],
                carbohydratesList: []
            };

            const foodItems = $(cell).find('.food-item');
            foodItems.each(function() {
                const item = $(this);
                const amount = parseFloat(item.data('amount_g')) || 0;
                const itemFat = parseFloat(item.data('fat')) || 0;
                const itemCalories = parseFloat(item.data('energy')) || 0;
                const itemProtein = parseFloat(item.data('protein')) || 0;
                const itemCarbohydrates = parseFloat(item.data('carbohydrate')) || 0;

                cellData.contents.push(item.text().split(' (')[0]);
                cellData.amounts.push(amount);
                cellData.homeUnits.push(item.data('home_unit') || "");
                cellData.amountHomeUnits.push(item.data('amount_home_unit') || "");
                cellData.foodCodes.push(parseInt(item.data('food_code'), 10) || 0);
                cellData.titles.push(item.data('title') || "");

                cellData.fatList.push(itemFat);
                cellData.caloriesList.push(itemCalories);
                cellData.proteinList.push(itemProtein);
                cellData.carbohydratesList.push(itemCarbohydrates);

                cellData.fat += itemFat;
                cellData.calories += itemCalories;
                cellData.protein += itemProtein;
                cellData.carbohydrate += itemCarbohydrates;
            });

            return cellData;
        }

        function updateCellData(cell, cellData) {
            const titleContent = `<strong>${cellData.cardTitle}</strong><br>`;
            const foodItemsContent = cellData.contents.map((content, index) => {
                return `<div class="food-item" data-amount_g="${cellData.amounts[index]}"
                            data-home_unit="${cellData.homeUnits[index]}"
                            data-food_code="${cellData.foodCodes[index]}"
                            data-amount_home_unit="${cellData.amountHomeUnits[index]}"
                            data-fat="${cellData.fatList[index]}"
                            data-calories="${cellData.caloriesList[index]}"
                            data-protein="${cellData.proteinList[index]}"
                            data-carbohydrate="${cellData.carbohydratesList[index]}">
                            ${content} (${cellData.amountHomeUnits[index]} ${cellData.homeUnits[index]})</div>`;
            }).join('');

            // Combine title and food items
            const cellContents = titleContent + foodItemsContent;
            $(cell).html(cellContents);

            // Optionally update cell data for future use
            $(cell).data('cellData', cellData);

            const rowNumber = $(cell).closest('tr').index() + 1;
            console.log('rowNumber')
            console.log(rowNumber)
            updateRowNutrientDetails(rowNumber);
        }

        function formatMealEntries(mealEntries) {
            if (!mealEntries || mealEntries.length === 0) return '';

            return mealEntries.map(entry => {
                const titleHTML = `<div class="meal-title">${entry.title}</div>`;
                const ingredientsHTML = entry.ingredient.map(ingredient => {
                    const nameWithoutAmount = ingredient.name.split(' (')[0];
                    return createFoodItemHTML({
                        ...ingredient,
                        name: nameWithoutAmount,
                        title: entry.title
                    });
                }).join('<br>');

                return titleHTML + ingredientsHTML;
            }).join('<br>');
        }

        function createFoodItemHTML(foodItem) {
            if (!foodItem || typeof foodItem !== 'object') return '';
            const nameWithoutAmount = foodItem.name.split(' (')[0];
            return `<div class="food-item"
                    data-amount="${foodItem.amount_in_home_unit}"
                    data-title="${foodItem.title}"
                    data-home_unit="${foodItem.home_unit}"
                    data-amount_home_unit="${foodItem.amount_in_home_unit}"
                    data-amount_g="${foodItem.amount_g}"
                    data-protein="${foodItem.protein}"
                    data-energy="${foodItem.energy}"
                    data-carbohydrate="${foodItem.carbohydrate}"
                    data-fat="${foodItem.fat}"
                    data-food_code="${foodItem.food_code}">
                    ${nameWithoutAmount} (${foodItem.amount_in_home_unit} ${foodItem.home_unit})</div>`;
        }

        function saveDietAsTemplate(dietName, calorieRange, companyName, city, isUserTemplate, selectedBacteria, selectedDietType, selectedDiseases, selectedAllergic) {
            expandAllRows();
            const dietJson = {
                week1: {
                    breakfast: [[], [], [], [], [], [], []],
                    lunch: [[], [], [], [], [], [], []],
                    dinner: [[], [], [], [], [], [], []],
                    snack1: [[], [], [], [], [], [], []],
                    snack2: [[], [], [], [], [], [], []]
                },
                type: dietName
            };

            const mealTable = document.getElementById('mealTable');
            const rows = mealTable.querySelectorAll('tbody tr');

            rows.forEach((row, index) => {
                const cells = row.querySelectorAll('td');
                const [breakfastCell, lunchCell, dinnerCell, snack1Cell, snack2Cell] = [cells[2], cells[3], cells[4], cells[5], cells[6]];

                dietJson.week1.breakfast[index] = extractMealData(breakfastCell);
                dietJson.week1.lunch[index] = extractMealData(lunchCell);
                dietJson.week1.dinner[index] = extractMealData(dinnerCell);
                dietJson.week1.snack1[index] = extractMealData(snack1Cell);
                dietJson.week1.snack2[index] = extractMealData(snack2Cell);
            });

            const jsonString = JSON.stringify(dietJson, null, 2);
            console.log('Saving diet template:', jsonString);

            $.ajax({
                url: '/panel/assistant/save/diet/template/',
                type: 'POST',
                contentType: 'application/json',
                headers: { 'X-CSRFToken': window.CSRF_TOKEN },
                data: JSON.stringify({
                    diet_json: JSON.stringify(dietJson),  // Ensure this contains the diet data
                    diet_name: dietName,
                    calorie_range: calorieRange,
                    company_name: companyName,
                    city: city,
                    is_user_template: isUserTemplate,
                    bacteria_types: selectedBacteria,  // Array of selected bacteria types
                    diet_types: selectedDietType,  // Array of selected diet types
                    diseases: selectedDiseases,  // Array of selected diseases
                    allergic: selectedAllergic  // Array of selected Allergic
                }),
                success: function(response) {
                    alert('Diet template saved successfully!');
                },
                error: function(response) {
                    alert('Error saving the diet template: ' + response.error);
                }
            });
        }

        function extractMealData(cell) {
            const cellData = $(cell).data('cellData'); // Retrieve the cellData object
            const foodItems = cell.querySelectorAll('.food-item');
            const mealEntry = {
                title: cellData ? cellData.cardTitle : "کارت رژیم", // Set the title from cellData
                ingredient: []
            };

            foodItems.forEach((item, index) => {
                const amount = parseFloat(item.dataset.amount_g) || parseFloat(cellData.amounts[index]) || 0;

                mealEntry.ingredient.push({
                    name: item.innerText.split(' (')[0],
                    home_unit: item.dataset.home_unit || cellData.homeUnits[index] || "",
                    amount_in_home_unit: parseFloat(item.dataset.amount_home_unit) || parseFloat(cellData.amountHomeUnits[index]) || 0,
                    amount_g: amount,
                    protein: Math.round(((parseFloat(item.dataset.protein))) * 100) / 100 || cellData.proteinList[index] || 0,
                    energy: Math.round(((parseFloat(item.dataset.energy))) * 100) / 100 || cellData.caloriesList[index] || 0,
                    carbohydrate: Math.round(((parseFloat(item.dataset.carbohydrate))) * 100) / 100 || cellData.carbohydratesList[index] || 0,
                    fat: Math.round(((parseFloat(item.dataset.fat))) * 100) / 100 || cellData.fatList[index] || 0,
                    food_code: parseInt(item.dataset.food_code, 10) || cellData.foodCodes[index] || 0
                });
            });
            return mealEntry.ingredient.length > 0 ? [mealEntry] : [];
        }
    </script>


{#   ---------------------- show every card nutrients ------------------ #}
    <script>
        function showNutrientDetails(cardNumber) {
            event.stopPropagation();
            // Check if the nutrient details are currently visible and if the same row is clicked again
            if ($('#nutrientDetails').hasClass('visible') && $('#nutrientContent').data('cardNumber') === cardNumber) {
                // Hide the nutrient details container
                $('#nutrientDetails').removeClass('visible');
                $('#nutrientContent').removeData('cardNumber');
                return;
            }

            // Clear existing details
            $('#nutrientContent').empty();

            // Fetch data from the appropriate row
            const breakfastCell = $(`#mealTable tbody tr:nth-child(${cardNumber}) td:nth-child(3)`);
            const lunchCell = $(`#mealTable tbody tr:nth-child(${cardNumber}) td:nth-child(4)`);
            const dinnerCell = $(`#mealTable tbody tr:nth-child(${cardNumber}) td:nth-child(5)`);
            const snack1Cell = $(`#mealTable tbody tr:nth-child(${cardNumber}) td:nth-child(6)`);
            const snack2Cell = $(`#mealTable tbody tr:nth-child(${cardNumber}) td:nth-child(7)`);

            // Function to calculate total nutritional values for a cell
            function calculateNutritionalValues(cell) {
                const foodItems = cell.find('.food-item');
                let totalFat = 0;
                let totalCalories = 0;
                let totalProtein = 0;
                let totalCarbohydrates = 0;

                foodItems.each(function () {
                    const item = $(this);
                    totalFat += parseFloat(item.data('fat')) || 0;
                    totalCalories += parseFloat(item.data('energy')) || parseFloat(item.data('calories')) || 0;
                    totalProtein += parseFloat(item.data('protein')) || 0;
                    totalCarbohydrates += parseFloat(item.data('carbohydrate')) || 0;
                });

                return {
                    fat: totalFat,
                    calories: totalCalories,
                    protein: totalProtein,
                    carbohydrate: totalCarbohydrates
                };
            }

            // Calculate nutritional values for each meal
            const breakfastNutrients = calculateNutritionalValues(breakfastCell);
            const lunchNutrients = calculateNutritionalValues(lunchCell);
            const dinnerNutrients = calculateNutritionalValues(dinnerCell);
            const snack1Nutrients = calculateNutritionalValues(snack1Cell);
            const snack2Nutrients = calculateNutritionalValues(snack2Cell);

            // Sum all nutritional values
            const totalNutrients = {
                fat: (parseFloat(breakfastNutrients.fat) + parseFloat(lunchNutrients.fat) + parseFloat(dinnerNutrients.fat) + parseFloat(snack1Nutrients.fat) + parseFloat(snack2Nutrients.fat)).toFixed(2),
                calories: (parseFloat(breakfastNutrients.calories) + parseFloat(lunchNutrients.calories) + parseFloat(dinnerNutrients.calories) + parseFloat(snack1Nutrients.calories) + parseFloat(snack2Nutrients.calories)).toFixed(2),
                protein: (parseFloat(breakfastNutrients.protein) + parseFloat(lunchNutrients.protein) + parseFloat(dinnerNutrients.protein) + parseFloat(snack1Nutrients.protein) + parseFloat(snack2Nutrients.protein)).toFixed(2),
                carbohydrate: (parseFloat(breakfastNutrients.carbohydrate) + parseFloat(lunchNutrients.carbohydrate) + parseFloat(dinnerNutrients.carbohydrate) + parseFloat(snack1Nutrients.carbohydrate) + parseFloat(snack2Nutrients.carbohydrate)).toFixed(2)
            };

            // Append the total nutrient data to the nutrientContent div with improved UI
            $('#nutrientContent').append(`
                <div style="background-color: #009A6E10; padding: 15px; border-radius: 15px; color: white; font-family: 'IranSansWeb', sans-serif;">
                    <p style="margin: 5px 0;">
                        <span style="color: #5CC936; font-size: 20px;">چربی: ${totalNutrients.fat} گرم</span>
                    </p>
                    <hr>
                    <p style="margin: 5px 0;">
                        <span style="color: #7366E3; font-size: 20px;">کالری: ${totalNutrients.calories} کیلوکالری</span>
                    </p>
                    <hr>
                    <p style="margin: 5px 0;">
                        <span style="color: #FF9900; font-size: 20px;">پروتئین: ${totalNutrients.protein} گرم</span>
                    </p>
                    <hr>
                    <p style="margin: 5px 0;">
                        <span style="color: #28CCF7; font-size: 20px;">کربوهیدرات: ${totalNutrients.carbohydrate} گرم</span>
                    </p>
                </div>
            `);

            // Store the card number to check if the same row is clicked again
            $('#nutrientContent').data('cardNumber', cardNumber);

            // Show the nutrient details container
            $('#nutrientDetails').addClass('visible');
        }
    </script>

    <script>
        function updateRowNutrientDetails(cardNumber) {
            // Clear existing details
            const nutrientSummaryCell = $(`#mealTable tbody tr:nth-child(${cardNumber}) .nutrient-summary`);
            nutrientSummaryCell.empty();

            // Fetch data from the appropriate row
            const breakfastCell = $(`#mealTable tbody tr:nth-child(${cardNumber}) td:nth-child(3)`);
            const lunchCell = $(`#mealTable tbody tr:nth-child(${cardNumber}) td:nth-child(4)`);
            const dinnerCell = $(`#mealTable tbody tr:nth-child(${cardNumber}) td:nth-child(5)`);
            const snack1Cell = $(`#mealTable tbody tr:nth-child(${cardNumber}) td:nth-child(6)`);
            const snack2Cell = $(`#mealTable tbody tr:nth-child(${cardNumber}) td:nth-child(7)`);

            // Function to calculate total nutritional values for a cell
            function calculateNutritionalValues(cell) {
                const foodItems = cell.find('.food-item');
                let totalFat = 0;
                let totalCalories = 0;
                let totalProtein = 0;
                let totalCarbohydrates = 0;

                foodItems.each(function () {
                    const item = $(this);
                    totalFat += parseFloat(item.data('fat')) || 0;
                    totalCalories += parseFloat(item.data('energy')) || parseFloat(item.data('calories')) || 0;
                    totalProtein += parseFloat(item.data('protein')) || 0;
                    totalCarbohydrates += parseFloat(item.data('carbohydrate')) || 0;
                });

                return {
                    fat: totalFat,
                    calories: totalCalories,
                    protein: totalProtein,
                    carbohydrate: totalCarbohydrates
                };
            }

            // Calculate nutritional values for each meal
            const breakfastNutrients = calculateNutritionalValues(breakfastCell);
            const lunchNutrients = calculateNutritionalValues(lunchCell);
            const dinnerNutrients = calculateNutritionalValues(dinnerCell);
            const snack1Nutrients = calculateNutritionalValues(snack1Cell);
            const snack2Nutrients = calculateNutritionalValues(snack2Cell);

            // Sum all nutritional values
            const totalNutrients = {
                fat: (parseFloat(breakfastNutrients.fat) + parseFloat(lunchNutrients.fat) + parseFloat(dinnerNutrients.fat) + parseFloat(snack1Nutrients.fat) + parseFloat(snack2Nutrients.fat)).toFixed(2),
                calories: (parseFloat(breakfastNutrients.calories) + parseFloat(lunchNutrients.calories) + parseFloat(dinnerNutrients.calories) + parseFloat(snack1Nutrients.calories) + parseFloat(snack2Nutrients.calories)).toFixed(2),
                protein: (parseFloat(breakfastNutrients.protein) + parseFloat(lunchNutrients.protein) + parseFloat(dinnerNutrients.protein) + parseFloat(snack1Nutrients.protein) + parseFloat(snack2Nutrients.protein)).toFixed(2),
                carbohydrate: (parseFloat(breakfastNutrients.carbohydrate) + parseFloat(lunchNutrients.carbohydrate) + parseFloat(dinnerNutrients.carbohydrate) + parseFloat(snack1Nutrients.carbohydrate) + parseFloat(snack2Nutrients.carbohydrate)).toFixed(2)
            };

            // Append the nutrient data to the nutrientSummaryCell with a compact UI
            nutrientSummaryCell.append(`
                <div style="background-color: #e6e6fa; padding: 5px; border-radius: 8px; color: black; font-size: small;">
                    <span style="color: #5CC936;">چربی: ${totalNutrients.fat}g</span><br>
                    <span style="color: #7366E3;">کالری: ${totalNutrients.calories}kcal</span><br>
                    <span style="color: #FF9900;">پروتئین: ${totalNutrients.protein}g</span><br>
                    <span style="color: #28CCF7;">کربوهیدرات: ${totalNutrients.carbohydrate}g</span>
                </div>
            `);
        }

    </script>

{#   ---------------------- toggle elements ------------------ #}
    <script>
        function toggleElements() {
            var toggleButton = document.getElementById("toggleButton");
            var element1 = document.getElementById("element1");

            // If toggle button is checked, show elements; otherwise, hide them
            if (toggleButton.checked) {
                element1.style.display = "block";
            } else {
                element1.style.display = "none";
            }
        }

        // Add event listener to toggle button
        document.getElementById("toggleButton").addEventListener("change", toggleElements);

        function toggleElements2() {
            var toggleButton = document.getElementById("toggleButton2");
            var element2 = document.getElementById("element2");

            // If toggle button is checked, show elements; otherwise, hide them
            if (toggleButton.checked) {
                element2.style.display = "block";
            } else {
                element2.style.display = "none";
            }
        }

        // Add event listener to toggle button
        document.getElementById("toggleButton2").addEventListener("change", toggleElements2);
    </script>

{#   ---------------------- filter cards (calorie range) & (tags) & show foods in cards ------------------ #}

    <script>

        let includeTags = [];
        let excludeTags = [];
        let minCalories = null;
        let maxCalories = null;

        // Function to filter cards by tags
        function filterCards(tag, action) {
    const urlParams = new URLSearchParams(window.location.search);

    const paramName = action === 'include' ? 'include_tags' : 'exclude_tags';
    let tags = urlParams.getAll(paramName);

    if (tags.includes(tag)) {
        tags = tags.filter(t => t !== tag);
    } else {
        tags.push(tag);
    }

    urlParams.delete(paramName);
    tags.forEach(t => urlParams.append(paramName, t));

    // Update the URL without reloading the page
    const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
    window.history.replaceState(null, '', newUrl);

    // Update selected tags display
    updateSelectedTags();

    // Fetch filtered cards
    fetchCardPage(1);
}


        function searchFoodsCard() {
            const searchTerm = document.getElementById('foodSearchCard').value.toLowerCase();
            const cards = document.querySelectorAll('.card');

            cards.forEach(card => {
                const cardName = card.querySelector('.card-name').textContent.toLowerCase();

                // Apply search term and ensure it only affects currently visible (filtered) cards
                if (cardName.includes(searchTerm)) {
                    // Keep the card visible only if it also passes the existing filters
                    if (shouldDisplayCard(card)) {
                        card.style.display = '';
                    }
                } else {
                    card.style.display = 'none';
                }
            });
        }

        // This function checks if a card should be displayed based on the active filters
        function shouldDisplayCard(card) {
            const cardCalories = parseFloat(card.dataset.calories);
            let withinRange = true;

            if (minCalories !== null && maxCalories !== null) {
                withinRange = (!isNaN(minCalories) && cardCalories >= minCalories) && (!isNaN(maxCalories) && cardCalories <= maxCalories);
            }

            let showCard = withinRange;

            if (showCard) {
                for (const tag of includeTags) {
                    if (card.dataset[tag] === "False") {
                        showCard = false;
                        break;
                    }
                }

                for (const tag of excludeTags) {
                    if (card.dataset[tag] === "True") {
                        showCard = false;
                        break;
                    }
                }
            }

            return showCard;
        }

        // Function to update the display of selected tags
        function updateSelectedTags() {
    const container = document.getElementById('selectedTagsContainer');
    container.innerHTML = '';

    const urlParams = new URLSearchParams(window.location.search);
    const includeTags = urlParams.getAll('include_tags');
    const excludeTags = urlParams.getAll('exclude_tags');

    includeTags.forEach(tag => {
        const tagElement = document.createElement('span');
        tagElement.classList.add('selected-tag', 'include-tag');
        tagElement.textContent = `${tag} (شامل)`;
        tagElement.onclick = () => filterCards(tag, 'include');
        container.appendChild(tagElement);
    });

    excludeTags.forEach(tag => {
        const tagElement = document.createElement('span');
        tagElement.classList.add('selected-tag', 'exclude-tag');
        tagElement.textContent = `${tag} (حذف)`;
        tagElement.onclick = () => filterCards(tag, 'exclude');
        container.appendChild(tagElement);
    });
}


        // Function to filter cards by both tags and calorie range
        function applyFilters() {
            const cards = document.querySelectorAll('.card');

            cards.forEach(card => {
                const cardCalories = parseFloat(card.dataset.calories);
                let withinRange = true;

                if (minCalories !== null && maxCalories !== null) {
                    withinRange = (!isNaN(minCalories) && cardCalories >= minCalories) && (!isNaN(maxCalories) && cardCalories <= maxCalories);
                }

                let showCard = withinRange;

                if (showCard) {
                    for (const tag of includeTags) {
                        if (card.dataset[tag] === "False") {
                            showCard = false;
                            break;
                        }
                    }

                    for (const tag of excludeTags) {
                        if (card.dataset[tag] === "True") {
                            showCard = false;
                            break;
                        }
                    }
                }

                if (showCard) {
                    card.style.display = "";

                    const cardItems = card.querySelectorAll('.card-items .list-group-item');
                    cardItems.forEach(item => item.style.display = "");
                } else {
                    card.style.display = "none";

                    const cardItems = card.querySelectorAll('.card-items .list-group-item');
                    cardItems.forEach(item => item.style.display = "none");
                }
            });
        }

        const calorieModal = document.getElementById('calorieModal');

        // When the user clicks anywhere outside the modal for diet type input, close it
        window.addEventListener('click', function (event) {
            if (event.target === calorieModal) {
                calorieModal.style.display = 'none';
            }
        });

        // Function to filter by calories
        function filterByCalories() {
    const minCaloriesInput = document.getElementById("minCalories").value;
    const maxCaloriesInput = document.getElementById("maxCalories").value;

    const urlParams = new URLSearchParams(window.location.search);

    if (minCaloriesInput) {
        urlParams.set('min_calories', minCaloriesInput);
    } else {
        urlParams.delete('min_calories');
    }

    if (maxCaloriesInput) {
        urlParams.set('max_calories', maxCaloriesInput);
    } else {
        urlParams.delete('max_calories');
    }

    // Update the URL without reloading the page
    const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
    window.history.replaceState(null, '', newUrl);

    // Now fetch the filtered cards
    fetchCardPage(1);

    closeCalorieModal();
}


        // Function to open the calorie modal
        function openCalorieModal() {
            document.getElementById("calorieModal").style.display = "flex";
        }

        // Function to close the calorie modal
        function closeCalorieModal() {
            document.getElementById("calorieModal").style.display = "none";
        }

        // Function to reset all filters
        function resetFilters() {
    const urlParams = new URLSearchParams();

    const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
    window.history.replaceState(null, '', newUrl);

    // Reset variables
    includeTags = [];
    excludeTags = [];
    minCalories = null;
    maxCalories = null;

    // Remove 'active' class from buttons
    const buttons = document.querySelectorAll('.sort-btn');
    buttons.forEach(button => button.classList.remove('active'));

    // Clear inputs
    document.getElementById("minCalories").value = "";
    document.getElementById("maxCalories").value = "";
    document.getElementById('cardSearch').value = "";
    document.getElementById('selectedTagsContainer').innerHTML = '';

    // Fetch the default card list
    fetchCardPage(1);
}



        document.addEventListener('DOMContentLoaded', (event) => {
            window.toggleFoodItems = function (headerElement) {
                const cardBody = headerElement.nextElementSibling;
                if (cardBody.style.display === 'none' || cardBody.style.display === '') {
                    cardBody.style.display = 'block';
                } else {
                    cardBody.style.display = 'none';
                }
            };
        });

    </script>

{#   ---------------------- show or collapse the table rows ------------------ #}

    <script>
        function toggleRow(icon) {
            // Find the closest row
            const row = icon.closest('tr');
            const cells = row.querySelectorAll('td:not(.toggle-icon)');

            // Toggle visibility for each cell except the one with the icon
            cells.forEach(cell => {
                cell.classList.toggle('hidden');
            });

            // Toggle the icon between plus and minus
            const iconElement = icon.querySelector('i');
            if (iconElement.classList.contains('fa-minus')) {
                iconElement.classList.remove('fa-minus');
                iconElement.classList.add('fa-plus');
            } else {
                iconElement.classList.remove('fa-plus');
                iconElement.classList.add('fa-minus');
            }
        }

        function expandAllRows() {
            const rows = document.querySelectorAll('tr');

            rows.forEach(row => {
                const cells = row.querySelectorAll('td:not(.toggle-icon)');
                const iconElement = row.querySelector('.toggle-icon i');

                // Remove 'hidden' class from each cell
                cells.forEach(cell => {
                    cell.classList.remove('hidden');
                });

                // Ensure the icon shows a minus sign
                if (iconElement && iconElement.classList.contains('fa-plus')) {
                    iconElement.classList.remove('fa-plus');
                    iconElement.classList.add('fa-minus');
                }
            });
        }

    </script>
    <script>
        function debounce(func, delay) {
            let debounceTimer;
            return function() {
                const context = this;
                const args = arguments;
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(() => func.apply(context, args), delay);
            };
        }

        let currentSortField = null;
        let currentSortOrder = 'asc';

        function sortCards(field) {
            // Toggle sort order if the same field is clicked again
            if (currentSortField === field) {
                currentSortOrder = currentSortOrder === 'asc' ? 'desc' : 'asc';
            } else {
                currentSortField = field;
                currentSortOrder = 'asc';
            }

            // Update URL parameters
            const urlParams = new URLSearchParams(window.location.search);
            urlParams.set('sort_field', currentSortField);
            urlParams.set('sort_order', currentSortOrder);

            const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
            window.history.replaceState(null, '', newUrl);

            fetchCardPage(1);
        }

        document.getElementById('cardSearchButton').addEventListener('click', function() {
            // When the button is clicked, start from the first page of results.
            fetchCardPage(1);
        });

        
        function searchFoods() {
            // Reset to the first page when a new search is made
            fetchFoodPage(1);
        }

        const debouncedSearchFoods = debounce(searchFoods, 500);

        document.getElementById('foodSearch').addEventListener('input', debouncedSearchFoods);

        document.addEventListener('DOMContentLoaded', function() {
            fetchCardPage(1);
            fetchFoodPage(1);

            initializeCardItemEventListeners();
            initializeFoodItemEventListeners();
        });


        function fetchCardPage(pageNumber) {
            // Use the value from the new input field
            const searchQuery = document.getElementById('cardSearch').value || '';
        
            // Get current filters from the URL parameters
            const urlParams = new URLSearchParams(window.location.search);
            const includeTags = urlParams.getAll('include_tags');
            const excludeTags = urlParams.getAll('exclude_tags');
            const minCalories = urlParams.get('min_calories');
            const maxCalories = urlParams.get('max_calories');
            const sortField = urlParams.get('sort_field');
            const sortOrder = urlParams.get('sort_order');
        
            // Build the URL with backticks for template literals.
            // (Make sure to enclose your URL in quotes if needed.)
            let url = `/panel/assistant/diet/cards/ajax/?card_page=${pageNumber}`;
        
            if (searchQuery) {
                url += `&card_search_query=${encodeURIComponent(searchQuery)}`;
            }
        
            // Include include_tags
            includeTags.forEach(tag => {
                url += `&include_tags=${encodeURIComponent(tag)}`;
            });
        
            // Include exclude_tags
            excludeTags.forEach(tag => {
                url += `&exclude_tags=${encodeURIComponent(tag)}`;
            });
        
            // Include calorie filters
            if (minCalories) {
                url += `&min_calories=${encodeURIComponent(minCalories)}`;
            }
            if (maxCalories) {
                url += `&max_calories=${encodeURIComponent(maxCalories)}`;
            }
        
            // Include sort_field and sort_order
            if (sortField) {
                url += `&sort_field=${encodeURIComponent(sortField)}`;
            }
            if (sortOrder) {
                url += `&sort_order=${encodeURIComponent(sortOrder)}`;
            }
        
            // Make the AJAX request using jQuery
            $.ajax({
                url: url,
                type: 'GET',
                success: function(response) {
                    $('#cardsList').html(response.cards_html);
                    $('#cardsPagination').html(response.pagination_html);
                    initializeCardItemEventListeners();
                },
                error: function(xhr, status, error) {
                    alert('خطا در بارگذاری کارت‌ها. لطفاً دوباره تلاش کنید.');
                }
            });
        }




        function fetchFoodPage(pageNumber) {
            const searchQuery = document.getElementById('foodSearch').value || '';

            let url = `/panel/assistant/diet/foods/ajax/?food_page=${pageNumber}`;

            if (searchQuery) {
                url += `&food_search_query=${encodeURIComponent(searchQuery)}`;
            }

            // Include filters if any

            $.ajax({
                url: url,
                type: 'GET',
                success: function(response) {
                    $('#foodsList').html(response.foods_html);
                    $('#foodsPagination').html(response.pagination_html);
                    initializeFoodItemEventListeners();
                },
                error: function(xhr, status, error) {
                    alert('خطا در بارگذاری مواد غذایی. لطفاً دوباره تلاش کنید.');
                }
            });
        }




    </script>
    
    <script>
        // Handle collapsible subcategories
        document.querySelectorAll('.collapse-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                btn.classList.toggle('active');
            });
        });

        // Search functionality
        const searchInput = document.getElementById('tag-search');
        const searchResults = document.getElementById('search-results');
        const filterCategories = document.getElementById('filter-categories');
        const filterContents = document.querySelectorAll('.filter-content');

        function updateSearch() {
            const query = searchInput.value.trim().toLowerCase();

            // Clear previous results
            searchResults.innerHTML = '';

            if (query === '') {
                searchResults.classList.remove('active');
                filterCategories.classList.remove('hidden');
                // Reset inline styles to let CSS handle visibility
                filterContents.forEach(content => content.style.display = '');
                return;
            }

            // Hide categories and show results
            filterCategories.classList.add('hidden');
            searchResults.classList.add('active');
            filterContents.forEach(content => content.style.display = 'none');

            // Collect all tags
            const allTags = [];
            document.querySelectorAll('.tag-btn').forEach(btn => {
                const text = btn.textContent.trim().toLowerCase();
                const tag = btn.getAttribute('data-tag');
                const action = btn.getAttribute('data-action');
                allTags.push({ text, tag, action, element: btn });
            });

            // Filter tags
            const uniqueTags = new Map();
            allTags.forEach(tag => {
                const key = `${tag.tag}-${tag.action}`;
                if (tag.text.includes(query) && !uniqueTags.has(key)) {
                    uniqueTags.set(key, tag);
                }
            });
            const filteredTags = Array.from(uniqueTags.values());

            // Display results
            if (filteredTags.length === 0) {
                searchResults.innerHTML = '<p style="text-align: center; color: #757575;">تگی یافت نشد</p>';
            } else {
                filteredTags.forEach(tag => {
                    const tagGroup = document.createElement('div');
                    tagGroup.className = 'tag-group';
                    tagGroup.innerHTML = `
                        <button class="tag-btn ${tag.action}" data-tag="${tag.tag}" data-action="${tag.action}" onclick="applyFilterAndClose('${tag.tag}', '${tag.action}')">${tag.text}</button>
                    `;
                    searchResults.appendChild(tagGroup);
                });
            }
        }

        searchInput.addEventListener('input', updateSearch);

        // Close search results and reset dropdowns when clicking a tag
        function applyFilterAndClose(tag, action) {
            filterCards(tag, action);
            searchResults.classList.remove('active');
            filterCategories.classList.remove('hidden');
            searchInput.value = ''; // Clear input
            // Reset inline styles to let CSS handle visibility
            filterContents.forEach(content => content.style.display = '');
        }

        // Close search results and reset dropdowns when clicking outside
        document.addEventListener('click', (e) => {
            if (!searchResults.contains(e.target) && e.target !== searchInput && searchResults.classList.contains('active')) {
                searchResults.classList.remove('active');
                filterCategories.classList.remove('hidden');
                searchInput.value = ''; // Clear input
                // Reset inline styles to let CSS handle visibility
                filterContents.forEach(content => content.style.display = '');
            }
        });
    </script>



{% endblock %}