{% 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">
                            <div class="toggle-buttons-container" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 15px;">
                                <label class="toggle-switch">
                                    <input type="checkbox" id="breadForDinner">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "شام نونی" %}</span>
                                </label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="breadForLunch">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "ناهار نونی" %}</span>
                                </label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="riceForDinner">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "شام برنجی" %}</span>
                                </label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="riceForLunch">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "ناهار برنجی" %}</span>
                                </label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="sportSnack1">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "میان وعده اول ورزشی" %}</span>
                                </label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="coffeeSnack1">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "میان وعده اول قهوه" %}</span>
                                </label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="sportSnack2">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "میان وعده دوم ورزشی" %}</span>
                                </label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="coffeeSnack2">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "میان وعده دوم قهوه" %}</span>
                                </label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="saladMainDishDinner">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "شام سالادی" %}</span>
                                </label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="saladMainDishLunch">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "ناهار سالادی" %}</span>
                                </label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="khorakLunch">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "ناهار خوراک" %}</span>
                                </label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="khorakDinner">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "شام خوراک" %}</span>
                                </label>
                                <!-- Breakfast Options -->
                                <label class="toggle-switch">
                                    <input type="checkbox" id="cheeseBreakfast">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "صبحانه پنیری" %}</span>
                                </label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="peanutButterBreakfast">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "صبحانه کره بادام زمینی" %}</span>
                                </label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="omeletteBreakfast">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "صبحانه املت" %}</span>
                                </label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="tahiniBreakfast">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "صبحانه ارده" %}</span>
                                </label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="oatmealBreakfast">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "صبحانه جو دوسر" %}</span>
                                </label>
                                <!-- Seasonal Snacks -->
                                <label class="toggle-switch">
                                    <input type="checkbox" id="summerSnack">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "میان وعده تابستانی" %}</span>
                                </label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="winterSnack">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "میان وعده زمستانی" %}</span>
                                </label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="springSnack">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "میان وعده بهاری" %}</span>
                                </label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="autumnSnack">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "میان وعده پاییزی" %}</span>
                                </label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="sameLunchDinner">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "ناهار و شام مشابه" %}</span>
                                </label>
                            </div>
                            
                            <!-- Zero Calorie Bypass Checkboxes (Hidden by default) -->
                            <div id="zeroCalorieBypassContainer" class="toggle-buttons-container" style="display: none; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 15px; padding: 10px; background-color: #fff3cd; border: 2px solid #ffc107; border-radius: 10px;">
                                <div style="width: 100%; text-align: center; margin-bottom: 10px; color: #856404; font-weight: bold;">
                                    {% trans "رفع محدودیت صفر کالری" %}
                                </div>
                                <div class="subtitle" style="color: #856404; font-size: 0.92em; font-weight: 400; text-align: center; margin-bottom: 8px;">
                                    اگر در طول رژیم مقدار این تگ را تغییر دهید، کالری نهایی با هدف تنظیم شده مطابقت نخواهد داشت. لطفاً این تگ را در ابتدای رژیم خود تنظیم کنید.
                                </div>
                                <label class="toggle-switch" id="bypassBreakfastContainer" style="display: none;">
                                    <input type="checkbox" id="bypassBreakfastZeroCalorie">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "رفع محدودیت صبحانه" %}</span>
                                </label>
                                <label class="toggle-switch" id="bypassLunchContainer" style="display: none;">
                                    <input type="checkbox" id="bypassLunchZeroCalorie">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "رفع محدودیت ناهار" %}</span>
                                </label>
                                <label class="toggle-switch" id="bypassDinnerContainer" style="display: none;">
                                    <input type="checkbox" id="bypassDinnerZeroCalorie">
                                    <span class="toggle-slider"></span>
                                    <span class="toggle-label">{% trans "رفع محدودیت شام" %}</span>
                                </label>
                            </div>
                            
                            <div class="controls" style="margin-bottom: 10px;">
                                <button id="refreshAll" class="btn btn-primary">ساخت رژیم</button>
                                
                                <!-- Month Filter Dropdown -->
                                <div class="month-filter-container" style="display: inline-block; margin-right: 20px;">
                                    <label for="monthFilterDropdown" style="margin-left: 10px; font-weight: bold; color: #009A6E;">فیلتر ماه:</label>
                                    <select id="monthFilterDropdown" multiple style="width: 200px; height: 100px; border: 1px solid #ddd; border-radius: 4px;">
                                        <option value="فروردین">فروردین</option>
                                        <option value="اردیبهشت">اردیبهشت</option>
                                        <option value="خرداد">خرداد</option>
                                        <option value="تیر">تیر</option>
                                        <option value="مرداد">مرداد</option>
                                        <option value="شهریور">شهریور</option>
                                        <option value="مهر">مهر</option>
                                        <option value="آبان">آبان</option>
                                        <option value="آذر">آذر</option>
                                        <option value="دی">دی</option>
                                        <option value="بهمن">بهمن</option>
                                        <option value="اسفند">اسفند</option>
                                    </select>
                                </div>
                            </div>

                            <table id="mealTable">
                                <thead>
                                    <tr style="color: #FFFFFF; background-color: #6a6aee; font-size: medium">
                                        <th></th> <!-- Empty cell for toggle icon -->
                                    <th>{% trans "شماره" %}</th>
                                        <th>
                                            <button class="refresh-btn column-refresh" data-meal="breakfast" onclick="refreshMeal('breakfast')">
                                                <i class="fa fa-refresh"></i>
                                            </button><br>
                                            {% trans "صبحانه" %}
                                        </th>
                                        <th>
                                            <button class="refresh-btn column-refresh" data-meal="lunch" onclick="refreshMeal('lunch')">
                                                <i class="fa fa-refresh"></i>
                                            </button><br>
                                            {% trans "ناهار" %}
                                        </th>
                                        <th>
                                            <button class="refresh-btn column-refresh" data-meal="dinner" onclick="refreshMeal('dinner')">
                                                <i class="fa fa-refresh"></i>
                                            </button><br>
                                            {% trans "شام" %}
                                        </th>
                                        <th>
                                            <button class="refresh-btn column-refresh" data-meal="snack1" onclick="refreshMeal('snack1')">
                                                <i class="fa fa-refresh"></i>
                                            </button><br>
                                            {% trans "اسنک اول" %}
                                        </th>
                                        <th>
                                            <button class="refresh-btn column-refresh" data-meal="snack2" onclick="refreshMeal('snack2')">
                                                <i class="fa fa-refresh"></i>
                                            </button><br>
                                            {% trans "اسنک دوم" %}
                                        </th>
                                        <th>{% trans "جمع کل" %}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="table-row">
                                        <td class="toggle-icon non-droppable" onclick="event.stopPropagation(); toggleRow(this)">
                                            <i class="fa fa-minus"></i>
                                        </td>
                                        <td class="non-droppable" style="color: #009A6E; background-color: #d0eeda; cursor: pointer" onclick="showNutrientDetails(1)">{% trans "یک" %}</td>
                                        <td id="first-breakfast"></td> <!-- Empty initially -->
                                        <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>
                                        </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="second-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>
                                        </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="third-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>
                                        </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="fourth-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>
                                        </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="fifth-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>
                                        </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="sixth-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>
                                        </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="seventh-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>
                                        </td>
                                        <td class="non-droppable" style="color: #009A6E; background-color: #d0eeda; cursor: pointer" onclick="showNutrientDetails(8)">{% trans "هشت" %}</td>
                                        <td id="eighth-breakfast"></td>
                                        <td id="eighth-lunch"></td>
                                        <td id="eighth-dinner"></td>
                                        <td id="eighth-snack-1"></td>
                                        <td id="eighth-snack-2"></td>
                                        <td id="eighth-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>
                                        </td>
                                        <td class="non-droppable" style="color: #009A6E; background-color: #d0eeda; cursor: pointer" onclick="showNutrientDetails(9)">{% trans "نه" %}</td>
                                        <td id="ninth-breakfast"></td>
                                        <td id="ninth-lunch"></td>
                                        <td id="ninth-dinner"></td>
                                        <td id="ninth-snack-1"></td>
                                        <td id="ninth-snack-2"></td>
                                        <td id="ninth-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>
                                        </td>
                                        <td class="non-droppable" style="color: #009A6E; background-color: #d0eeda; cursor: pointer" onclick="showNutrientDetails(10)">{% trans "ده" %}</td>
                                        <td id="tenth-breakfast"></td>
                                        <td id="tenth-lunch"></td>
                                        <td id="tenth-dinner"></td>
                                        <td id="tenth-snack-1"></td>
                                        <td id="tenth-snack-2"></td>
                                        <td id="tenth-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>
                                        </td>
                                        <td class="non-droppable" style="color: #009A6E; background-color: #d0eeda; cursor: pointer" onclick="showNutrientDetails(11)">{% trans "یازده" %}</td>
                                        <td id="eleventh-breakfast"></td>
                                        <td id="eleventh-lunch"></td>
                                        <td id="eleventh-dinner"></td>
                                        <td id="eleventh-snack-1"></td>
                                        <td id="eleventh-snack-2"></td>
                                        <td id="eleventh-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>
                                        </td>
                                        <td class="non-droppable" style="color: #009A6E; background-color: #d0eeda; cursor: pointer" onclick="showNutrientDetails(12)">{% trans "دوازده" %}</td>
                                        <td id="twelfth-breakfast"></td>
                                        <td id="twelfth-lunch"></td>
                                        <td id="twelfth-dinner"></td>
                                        <td id="twelfth-snack-1"></td>
                                        <td id="twelfth-snack-2"></td>
                                        <td id="twelfth-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>
                                        </td>
                                        <td class="non-droppable" style="color: #009A6E; background-color: #d0eeda; cursor: pointer" onclick="showNutrientDetails(13)">{% trans "سیزده" %}</td>
                                        <td id="thirteenth-breakfast"></td>
                                        <td id="thirteenth-lunch"></td>
                                        <td id="thirteenth-dinner"></td>
                                        <td id="thirteenth-snack-1"></td>
                                        <td id="thirteenth-snack-2"></td>
                                        <td id="thirteenth-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>
                                        </td>
                                        <td class="non-droppable" style="color: #009A6E; background-color: #d0eeda; cursor: pointer" onclick="showNutrientDetails(14)">{% trans "چهارده" %}</td>
                                        <td id="fourteenth-breakfast"></td>
                                        <td id="fourteenth-lunch"></td>
                                        <td id="fourteenth-dinner"></td>
                                        <td id="fourteenth-snack-1"></td>
                                        <td id="fourteenth-snack-2"></td>
                                        <td id="fourteenth-nutrient-summary" class="nutrient-summary"></td>
                                    </tr>
                                </tbody>
                            </table>
                            
                            <!-- Zero Calorie Meals Banner -->
                            <div id="zeroCalorieBanner" style="display: none; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px 20px; margin: 20px 0; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'IranSansWeb', Arial, sans-serif;">
                                <div style="display: flex; align-items: center; gap: 15px;">
                                    <div style="font-size: 24px;">⚠️</div>
                                    <div style="flex: 1;">
                                        <div style="font-weight: bold; font-size: 16px; margin-bottom: 8px;">توجه: وعده‌های با کالری صفر</div>
                                        <div id="zeroCalorieContent" style="font-size: 14px; line-height: 1.6;"></div>
                                    </div>
                                </div>
                            </div>
                        </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">
                                <!-- وعده غذایی (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>
                                            
                                            
{#                                            new tags#}
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Dairy_Butter" data-action="include" onclick="filterCards('AL_Dairy_Butter', 'include')">شامل AL_Dairy_Butter</button>
                                                <button class="tag-btn exclude" data-tag="AL_Dairy_Butter" data-action="exclude" onclick="filterCards('AL_Dairy_Butter', 'exclude')">حذف AL_Dairy_Butter</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Dairy_Cheese" data-action="include" onclick="filterCards('AL_Dairy_Cheese', 'include')">شامل AL_Dairy_Cheese</button>
                                                <button class="tag-btn exclude" data-tag="AL_Dairy_Cheese" data-action="exclude" onclick="filterCards('AL_Dairy_Cheese', 'exclude')">حذف AL_Dairy_Cheese</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Dairy_Coconut" data-action="include" onclick="filterCards('AL_Dairy_Coconut', 'include')">شامل AL_Dairy_Coconut</button>
                                                <button class="tag-btn exclude" data-tag="AL_Dairy_Coconut" data-action="exclude" onclick="filterCards('AL_Dairy_Coconut', 'exclude')">حذف AL_Dairy_Coconut</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Dairy_CoconutMilk" data-action="include" onclick="filterCards('AL_Dairy_CoconutMilk', 'include')">شامل AL_Dairy_CoconutMilk</button>
                                                <button class="tag-btn exclude" data-tag="AL_Dairy_CoconutMilk" data-action="exclude" onclick="filterCards('AL_Dairy_CoconutMilk', 'exclude')">حذف AL_Dairy_CoconutMilk</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Dairy_Cream" data-action="include" onclick="filterCards('AL_Dairy_Cream', 'include')">شامل AL_Dairy_Cream</button>
                                                <button class="tag-btn exclude" data-tag="AL_Dairy_Cream" data-action="exclude" onclick="filterCards('AL_Dairy_Cream', 'exclude')">حذف AL_Dairy_Cream</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Dairy_CreamCheese" data-action="include" onclick="filterCards('AL_Dairy_CreamCheese', 'include')">شامل AL_Dairy_CreamCheese</button>
                                                <button class="tag-btn exclude" data-tag="AL_Dairy_CreamCheese" data-action="exclude" onclick="filterCards('AL_Dairy_CreamCheese', 'exclude')">حذف AL_Dairy_CreamCheese</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Dairy_IceCream" data-action="include" onclick="filterCards('AL_Dairy_IceCream', 'include')">شامل AL_Dairy_IceCream</button>
                                                <button class="tag-btn exclude" data-tag="AL_Dairy_IceCream" data-action="exclude" onclick="filterCards('AL_Dairy_IceCream', 'exclude')">حذف AL_Dairy_IceCream</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Dairy_Mayonnaise" data-action="include" onclick="filterCards('AL_Dairy_Mayonnaise', 'include')">شامل AL_Dairy_Mayonnaise</button>
                                                <button class="tag-btn exclude" data-tag="AL_Dairy_Mayonnaise" data-action="exclude" onclick="filterCards('AL_Dairy_Mayonnaise', 'exclude')">حذف AL_Dairy_Mayonnaise</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Dairy_Milk" data-action="include" onclick="filterCards('AL_Dairy_Milk', 'include')">شامل AL_Dairy_Milk</button>
                                                <button class="tag-btn exclude" data-tag="AL_Dairy_Milk" data-action="exclude" onclick="filterCards('AL_Dairy_Milk', 'exclude')">حذف AL_Dairy_Milk</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Dairy_Milk_Chocolate" data-action="include" onclick="filterCards('AL_Dairy_Milk_Chocolate', 'include')">شامل AL_Dairy_Milk_Chocolate</button>
                                                <button class="tag-btn exclude" data-tag="AL_Dairy_Milk_Chocolate" data-action="exclude" onclick="filterCards('AL_Dairy_Milk_Chocolate', 'exclude')">حذف AL_Dairy_Milk_Chocolate</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Dairy_Whey" data-action="include" onclick="filterCards('AL_Dairy_Whey', 'include')">شامل AL_Dairy_Whey</button>
                                                <button class="tag-btn exclude" data-tag="AL_Dairy_Whey" data-action="exclude" onclick="filterCards('AL_Dairy_Whey', 'exclude')">حذف AL_Dairy_Whey</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Dairy_Yogurt" data-action="include" onclick="filterCards('AL_Dairy_Yogurt', 'include')">شامل AL_Dairy_Yogurt</button>
                                                <button class="tag-btn exclude" data-tag="AL_Dairy_Yogurt" data-action="exclude" onclick="filterCards('AL_Dairy_Yogurt', 'exclude')">حذف AL_Dairy_Yogurt</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Egg" data-action="include" onclick="filterCards('AL_Egg', 'include')">شامل AL_Egg</button>
                                                <button class="tag-btn exclude" data-tag="AL_Egg" data-action="exclude" onclick="filterCards('AL_Egg', 'exclude')">حذف AL_Egg</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Eggs_Egg" data-action="include" onclick="filterCards('AL_Eggs_Egg', 'include')">شامل AL_Eggs_Egg</button>
                                                <button class="tag-btn exclude" data-tag="AL_Eggs_Egg" data-action="exclude" onclick="filterCards('AL_Eggs_Egg', 'exclude')">حذف AL_Eggs_Egg</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Eggs_Mayonnaise" data-action="include" onclick="filterCards('AL_Eggs_Mayonnaise', 'include')">شامل AL_Eggs_Mayonnaise</button>
                                                <button class="tag-btn exclude" data-tag="AL_Eggs_Mayonnaise" data-action="exclude" onclick="filterCards('AL_Eggs_Mayonnaise', 'exclude')">حذف AL_Eggs_Mayonnaise</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Crab" data-action="include" onclick="filterCards('AL_Fish_Crab', 'include')">شامل AL_Fish_Crab</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Crab" data-action="exclude" onclick="filterCards('AL_Fish_Crab', 'exclude')">حذف AL_Fish_Crab</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Fish" data-action="include" onclick="filterCards('AL_Fish_Fish', 'include')">شامل AL_Fish_Fish</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Fish" data-action="exclude" onclick="filterCards('AL_Fish_Fish', 'exclude')">حذف AL_Fish_Fish</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Shrimp" data-action="include" onclick="filterCards('AL_Fish_Shrimp', 'include')">شامل AL_Fish_Shrimp</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Shrimp" data-action="exclude" onclick="filterCards('AL_Fish_Shrimp', 'exclude')">حذف AL_Fish_Shrimp</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Tuna" data-action="include" onclick="filterCards('AL_Fish_Tuna', 'include')">شامل AL_Fish_Tuna</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Tuna" data-action="exclude" onclick="filterCards('AL_Fish_Tuna', 'exclude')">حذف AL_Fish_Tuna</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grain_Barley" data-action="include" onclick="filterCards('AL_Grain_Barley', 'include')">شامل AL_Grain_Barley</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grain_Barley" data-action="exclude" onclick="filterCards('AL_Grain_Barley', 'exclude')">حذف AL_Grain_Barley</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grain_Bean" data-action="include" onclick="filterCards('AL_Grain_Bean', 'include')">شامل AL_Grain_Bean</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grain_Bean" data-action="exclude" onclick="filterCards('AL_Grain_Bean', 'exclude')">حذف AL_Grain_Bean</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grain_Buckwheat" data-action="include" onclick="filterCards('AL_Grain_Buckwheat', 'include')">شامل AL_Grain_Buckwheat</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grain_Buckwheat" data-action="exclude" onclick="filterCards('AL_Grain_Buckwheat', 'exclude')">حذف AL_Grain_Buckwheat</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grain_Chickpea" data-action="include" onclick="filterCards('AL_Grain_Chickpea', 'include')">شامل AL_Grain_Chickpea</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grain_Chickpea" data-action="exclude" onclick="filterCards('AL_Grain_Chickpea', 'exclude')">حذف AL_Grain_Chickpea</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grain_Corn" data-action="include" onclick="filterCards('AL_Grain_Corn', 'include')">شامل AL_Grain_Corn</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grain_Corn" data-action="exclude" onclick="filterCards('AL_Grain_Corn', 'exclude')">حذف AL_Grain_Corn</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grain_Lentil" data-action="include" onclick="filterCards('AL_Grain_Lentil', 'include')">شامل AL_Grain_Lentil</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grain_Lentil" data-action="exclude" onclick="filterCards('AL_Grain_Lentil', 'exclude')">حذف AL_Grain_Lentil</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grain_Mung" data-action="include" onclick="filterCards('AL_Grain_Mung', 'include')">شامل AL_Grain_Mung</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grain_Mung" data-action="exclude" onclick="filterCards('AL_Grain_Mung', 'exclude')">حذف AL_Grain_Mung</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grain_Oat" data-action="include" onclick="filterCards('AL_Grain_Oat', 'include')">شامل AL_Grain_Oat</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grain_Oat" data-action="exclude" onclick="filterCards('AL_Grain_Oat', 'exclude')">حذف AL_Grain_Oat</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grain_Oats" data-action="include" onclick="filterCards('AL_Grain_Oats', 'include')">شامل AL_Grain_Oats</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grain_Oats" data-action="exclude" onclick="filterCards('AL_Grain_Oats', 'exclude')">حذف AL_Grain_Oats</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grain_Quinoa" data-action="include" onclick="filterCards('AL_Grain_Quinoa', 'include')">شامل AL_Grain_Quinoa</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grain_Quinoa" data-action="exclude" onclick="filterCards('AL_Grain_Quinoa', 'exclude')">حذف AL_Grain_Quinoa</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grain_Rice" data-action="include" onclick="filterCards('AL_Grain_Rice', 'include')">شامل AL_Grain_Rice</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grain_Rice" data-action="exclude" onclick="filterCards('AL_Grain_Rice', 'exclude')">حذف AL_Grain_Rice</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grain_Rye" data-action="include" onclick="filterCards('AL_Grain_Rye', 'include')">شامل AL_Grain_Rye</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grain_Rye" data-action="exclude" onclick="filterCards('AL_Grain_Rye', 'exclude')">حذف AL_Grain_Rye</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grain_Soy" data-action="include" onclick="filterCards('AL_Grain_Soy', 'include')">شامل AL_Grain_Soy</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grain_Soy" data-action="exclude" onclick="filterCards('AL_Grain_Soy', 'exclude')">حذف AL_Grain_Soy</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grain_Unspecified" data-action="include" onclick="filterCards('AL_Grain_Unspecified', 'include')">شامل AL_Grain_Unspecified</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grain_Unspecified" data-action="exclude" onclick="filterCards('AL_Grain_Unspecified', 'exclude')">حذف AL_Grain_Unspecified</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grain_Wheat" data-action="include" onclick="filterCards('AL_Grain_Wheat', 'include')">شامل AL_Grain_Wheat</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grain_Wheat" data-action="exclude" onclick="filterCards('AL_Grain_Wheat', 'exclude')">حذف AL_Grain_Wheat</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grains_Wheat" data-action="include" onclick="filterCards('AL_Grains_Wheat', 'include')">شامل AL_Grains_Wheat</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grains_Wheat" data-action="exclude" onclick="filterCards('AL_Grains_Wheat', 'exclude')">حذف AL_Grains_Wheat</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Legume_Beans" data-action="include" onclick="filterCards('AL_Legume_Beans', 'include')">شامل AL_Legume_Beans</button>
                                                <button class="tag-btn exclude" data-tag="AL_Legume_Beans" data-action="exclude" onclick="filterCards('AL_Legume_Beans', 'exclude')">حذف AL_Legume_Beans</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Legume_Lentil" data-action="include" onclick="filterCards('AL_Legume_Lentil', 'include')">شامل AL_Legume_Lentil</button>
                                                <button class="tag-btn exclude" data-tag="AL_Legume_Lentil" data-action="exclude" onclick="filterCards('AL_Legume_Lentil', 'exclude')">حذف AL_Legume_Lentil</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Legume_Pea" data-action="include" onclick="filterCards('AL_Legume_Pea', 'include')">شامل AL_Legume_Pea</button>
                                                <button class="tag-btn exclude" data-tag="AL_Legume_Pea" data-action="exclude" onclick="filterCards('AL_Legume_Pea', 'exclude')">حذف AL_Legume_Pea</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Legume_RedBean" data-action="include" onclick="filterCards('AL_Legume_RedBean', 'include')">شامل AL_Legume_RedBean</button>
                                                <button class="tag-btn exclude" data-tag="AL_Legume_RedBean" data-action="exclude" onclick="filterCards('AL_Legume_RedBean', 'exclude')">حذف AL_Legume_RedBean</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Legume_Soy" data-action="include" onclick="filterCards('AL_Legume_Soy', 'include')">شامل AL_Legume_Soy</button>
                                                <button class="tag-btn exclude" data-tag="AL_Legume_Soy" data-action="exclude" onclick="filterCards('AL_Legume_Soy', 'exclude')">حذف AL_Legume_Soy</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Legume_Split_Peas" data-action="include" onclick="filterCards('AL_Legume_Split_Peas', 'include')">شامل AL_Legume_Split_Peas</button>
                                                <button class="tag-btn exclude" data-tag="AL_Legume_Split_Peas" data-action="exclude" onclick="filterCards('AL_Legume_Split_Peas', 'exclude')">حذف AL_Legume_Split_Peas</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Legume_SplitPea" data-action="include" onclick="filterCards('AL_Legume_SplitPea', 'include')">شامل AL_Legume_SplitPea</button>
                                                <button class="tag-btn exclude" data-tag="AL_Legume_SplitPea" data-action="exclude" onclick="filterCards('AL_Legume_SplitPea', 'exclude')">حذف AL_Legume_SplitPea</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Bacon" data-action="include" onclick="filterCards('AL_Meat_Bacon', 'include')">شامل AL_Meat_Bacon</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Bacon" data-action="exclude" onclick="filterCards('AL_Meat_Bacon', 'exclude')">حذف AL_Meat_Bacon</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Beef" data-action="include" onclick="filterCards('AL_Meat_Beef', 'include')">شامل AL_Meat_Beef</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Beef" data-action="exclude" onclick="filterCards('AL_Meat_Beef', 'exclude')">حذف AL_Meat_Beef</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Chicken" data-action="include" onclick="filterCards('AL_Meat_Chicken', 'include')">شامل AL_Meat_Chicken</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Chicken" data-action="exclude" onclick="filterCards('AL_Meat_Chicken', 'exclude')">حذف AL_Meat_Chicken</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Ham" data-action="include" onclick="filterCards('AL_Meat_Ham', 'include')">شامل AL_Meat_Ham</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Ham" data-action="exclude" onclick="filterCards('AL_Meat_Ham', 'exclude')">حذف AL_Meat_Ham</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Lamb" data-action="include" onclick="filterCards('AL_Meat_Lamb', 'include')">شامل AL_Meat_Lamb</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Lamb" data-action="exclude" onclick="filterCards('AL_Meat_Lamb', 'exclude')">حذف AL_Meat_Lamb</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Pepperoni" data-action="include" onclick="filterCards('AL_Meat_Pepperoni', 'include')">شامل AL_Meat_Pepperoni</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Pepperoni" data-action="exclude" onclick="filterCards('AL_Meat_Pepperoni', 'exclude')">حذف AL_Meat_Pepperoni</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Pork" data-action="include" onclick="filterCards('AL_Meat_Pork', 'include')">شامل AL_Meat_Pork</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Pork" data-action="exclude" onclick="filterCards('AL_Meat_Pork', 'exclude')">حذف AL_Meat_Pork</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Processed" data-action="include" onclick="filterCards('AL_Meat_Processed', 'include')">شامل AL_Meat_Processed</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Processed" data-action="exclude" onclick="filterCards('AL_Meat_Processed', 'exclude')">حذف AL_Meat_Processed</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Sausage" data-action="include" onclick="filterCards('AL_Meat_Sausage', 'include')">شامل AL_Meat_Sausage</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Sausage" data-action="exclude" onclick="filterCards('AL_Meat_Sausage', 'exclude')">حذف AL_Meat_Sausage</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Turkey" data-action="include" onclick="filterCards('AL_Meat_Turkey', 'include')">شامل AL_Meat_Turkey</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Turkey" data-action="exclude" onclick="filterCards('AL_Meat_Turkey', 'exclude')">حذف AL_Meat_Turkey</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Unspecified" data-action="include" onclick="filterCards('AL_Meat_Unspecified', 'include')">شامل AL_Meat_Unspecified</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Unspecified" data-action="exclude" onclick="filterCards('AL_Meat_Unspecified', 'exclude')">حذف AL_Meat_Unspecified</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Varies" data-action="include" onclick="filterCards('AL_Meat_Varies', 'include')">شامل AL_Meat_Varies</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Varies" data-action="exclude" onclick="filterCards('AL_Meat_Varies', 'exclude')">حذف AL_Meat_Varies</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Various" data-action="include" onclick="filterCards('AL_Meat_Various', 'include')">شامل AL_Meat_Various</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Various" data-action="exclude" onclick="filterCards('AL_Meat_Various', 'exclude')">حذف AL_Meat_Various</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Nuts_Almond" data-action="include" onclick="filterCards('AL_Nuts_Almond', 'include')">شامل AL_Nuts_Almond</button>
                                                <button class="tag-btn exclude" data-tag="AL_Nuts_Almond" data-action="exclude" onclick="filterCards('AL_Nuts_Almond', 'exclude')">حذف AL_Nuts_Almond</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Nuts_Coconut" data-action="include" onclick="filterCards('AL_Nuts_Coconut', 'include')">شامل AL_Nuts_Coconut</button>
                                                <button class="tag-btn exclude" data-tag="AL_Nuts_Coconut" data-action="exclude" onclick="filterCards('AL_Nuts_Coconut', 'exclude')">حذف AL_Nuts_Coconut</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Nuts_Hazelnut" data-action="include" onclick="filterCards('AL_Nuts_Hazelnut', 'include')">شامل AL_Nuts_Hazelnut</button>
                                                <button class="tag-btn exclude" data-tag="AL_Nuts_Hazelnut" data-action="exclude" onclick="filterCards('AL_Nuts_Hazelnut', 'exclude')">حذف AL_Nuts_Hazelnut</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Nuts_Nuts" data-action="include" onclick="filterCards('AL_Nuts_Nuts', 'include')">شامل AL_Nuts_Nuts</button>
                                                <button class="tag-btn exclude" data-tag="AL_Nuts_Nuts" data-action="exclude" onclick="filterCards('AL_Nuts_Nuts', 'exclude')">حذف AL_Nuts_Nuts</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Nuts_Peanut" data-action="include" onclick="filterCards('AL_Nuts_Peanut', 'include')">شامل AL_Nuts_Peanut</button>
                                                <button class="tag-btn exclude" data-tag="AL_Nuts_Peanut" data-action="exclude" onclick="filterCards('AL_Nuts_Peanut', 'exclude')">حذف AL_Nuts_Peanut</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Nuts_Pine_Nuts" data-action="include" onclick="filterCards('AL_Nuts_Pine_Nuts', 'include')">شامل AL_Nuts_Pine_Nuts</button>
                                                <button class="tag-btn exclude" data-tag="AL_Nuts_Pine_Nuts" data-action="exclude" onclick="filterCards('AL_Nuts_Pine_Nuts', 'exclude')">حذف AL_Nuts_Pine_Nuts</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Nuts_Pistachio" data-action="include" onclick="filterCards('AL_Nuts_Pistachio', 'include')">شامل AL_Nuts_Pistachio</button>
                                                <button class="tag-btn exclude" data-tag="AL_Nuts_Pistachio" data-action="exclude" onclick="filterCards('AL_Nuts_Pistachio', 'exclude')">حذف AL_Nuts_Pistachio</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Nuts_Sesame" data-action="include" onclick="filterCards('AL_Nuts_Sesame', 'include')">شامل AL_Nuts_Sesame</button>
                                                <button class="tag-btn exclude" data-tag="AL_Nuts_Sesame" data-action="exclude" onclick="filterCards('AL_Nuts_Sesame', 'exclude')">حذف AL_Nuts_Sesame</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Nuts_Unspecified" data-action="include" onclick="filterCards('AL_Nuts_Unspecified', 'include')">شامل AL_Nuts_Unspecified</button>
                                                <button class="tag-btn exclude" data-tag="AL_Nuts_Unspecified" data-action="exclude" onclick="filterCards('AL_Nuts_Unspecified', 'exclude')">حذف AL_Nuts_Unspecified</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Nuts_Varies" data-action="include" onclick="filterCards('AL_Nuts_Varies', 'include')">شامل AL_Nuts_Varies</button>
                                                <button class="tag-btn exclude" data-tag="AL_Nuts_Varies" data-action="exclude" onclick="filterCards('AL_Nuts_Varies', 'exclude')">حذف AL_Nuts_Varies</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Nuts_Various" data-action="include" onclick="filterCards('AL_Nuts_Various', 'include')">شامل AL_Nuts_Various</button>
                                                <button class="tag-btn exclude" data-tag="AL_Nuts_Various" data-action="exclude" onclick="filterCards('AL_Nuts_Various', 'exclude')">حذف AL_Nuts_Various</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Nuts_Walnut" data-action="include" onclick="filterCards('AL_Nuts_Walnut', 'include')">شامل AL_Nuts_Walnut</button>
                                                <button class="tag-btn exclude" data-tag="AL_Nuts_Walnut" data-action="exclude" onclick="filterCards('AL_Nuts_Walnut', 'exclude')">حذف AL_Nuts_Walnut</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Poultry_Chicken" data-action="include" onclick="filterCards('AL_Poultry_Chicken', 'include')">شامل AL_Poultry_Chicken</button>
                                                <button class="tag-btn exclude" data-tag="AL_Poultry_Chicken" data-action="exclude" onclick="filterCards('AL_Poultry_Chicken', 'exclude')">حذف AL_Poultry_Chicken</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Seeds_Chia" data-action="include" onclick="filterCards('AL_Seeds_Chia', 'include')">شامل AL_Seeds_Chia</button>
                                                <button class="tag-btn exclude" data-tag="AL_Seeds_Chia" data-action="exclude" onclick="filterCards('AL_Seeds_Chia', 'exclude')">حذف AL_Seeds_Chia</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Shellfish_Shrimp" data-action="include" onclick="filterCards('AL_Shellfish_Shrimp', 'include')">شامل AL_Shellfish_Shrimp</button>
                                                <button class="tag-btn exclude" data-tag="AL_Shellfish_Shrimp" data-action="exclude" onclick="filterCards('AL_Shellfish_Shrimp', 'exclude')">حذف AL_Shellfish_Shrimp</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Dairy_Cream_Cheese" data-action="include" onclick="filterCards('AL_Dairy_Cream_Cheese', 'include')">شامل AL_Dairy_Cream_Cheese</button>
                                                <button class="tag-btn exclude" data-tag="AL_Dairy_Cream_Cheese" data-action="exclude" onclick="filterCards('AL_Dairy_Cream_Cheese', 'exclude')">حذف AL_Dairy_Cream_Cheese</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Dairy_Creamer" data-action="include" onclick="filterCards('AL_Dairy_Creamer', 'include')">شامل AL_Dairy_Creamer</button>
                                                <button class="tag-btn exclude" data-tag="AL_Dairy_Creamer" data-action="exclude" onclick="filterCards('AL_Dairy_Creamer', 'exclude')">حذف AL_Dairy_Creamer</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Dairy_Goat_Milk" data-action="include" onclick="filterCards('AL_Dairy_Goat_Milk', 'include')">شامل AL_Dairy_Goat_Milk</button>
                                                <button class="tag-btn exclude" data-tag="AL_Dairy_Goat_Milk" data-action="exclude" onclick="filterCards('AL_Dairy_Goat_Milk', 'exclude')">حذف AL_Dairy_Goat_Milk</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Dairy_Kashk" data-action="include" onclick="filterCards('AL_Dairy_Kashk', 'include')">شامل AL_Dairy_Kashk</button>
                                                <button class="tag-btn exclude" data-tag="AL_Dairy_Kashk" data-action="exclude" onclick="filterCards('AL_Dairy_Kashk', 'exclude')">حذف AL_Dairy_Kashk</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Dairy_Kefir" data-action="include" onclick="filterCards('AL_Dairy_Kefir', 'include')">شامل AL_Dairy_Kefir</button>
                                                <button class="tag-btn exclude" data-tag="AL_Dairy_Kefir" data-action="exclude" onclick="filterCards('AL_Dairy_Kefir', 'exclude')">حذف AL_Dairy_Kefir</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Eggs_Whole" data-action="include" onclick="filterCards('AL_Eggs_Whole', 'include')">شامل AL_Eggs_Whole</button>
                                                <button class="tag-btn exclude" data-tag="AL_Eggs_Whole" data-action="exclude" onclick="filterCards('AL_Eggs_Whole', 'exclude')">حذف AL_Eggs_Whole</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Eggs_Whole_Eggs" data-action="include" onclick="filterCards('AL_Eggs_Whole_Eggs', 'include')">شامل AL_Eggs_Whole_Eggs</button>
                                                <button class="tag-btn exclude" data-tag="AL_Eggs_Whole_Eggs" data-action="exclude" onclick="filterCards('AL_Eggs_Whole_Eggs', 'exclude')">حذف AL_Eggs_Whole_Eggs</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Eggs_Yolk" data-action="include" onclick="filterCards('AL_Eggs_Yolk', 'include')">شامل AL_Eggs_Yolk</button>
                                                <button class="tag-btn exclude" data-tag="AL_Eggs_Yolk" data-action="exclude" onclick="filterCards('AL_Eggs_Yolk', 'exclude')">حذف AL_Eggs_Yolk</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Anchovy" data-action="include" onclick="filterCards('AL_Fish_Anchovy', 'include')">شامل AL_Fish_Anchovy</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Anchovy" data-action="exclude" onclick="filterCards('AL_Fish_Anchovy', 'exclude')">حذف AL_Fish_Anchovy</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Carp" data-action="include" onclick="filterCards('AL_Fish_Carp', 'include')">شامل AL_Fish_Carp</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Carp" data-action="exclude" onclick="filterCards('AL_Fish_Carp', 'exclude')">حذف AL_Fish_Carp</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Catfish" data-action="include" onclick="filterCards('AL_Fish_Catfish', 'include')">شامل AL_Fish_Catfish</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Catfish" data-action="exclude" onclick="filterCards('AL_Fish_Catfish', 'exclude')">حذف AL_Fish_Catfish</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Caviar" data-action="include" onclick="filterCards('AL_Fish_Caviar', 'include')">شامل AL_Fish_Caviar</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Caviar" data-action="exclude" onclick="filterCards('AL_Fish_Caviar', 'exclude')">حذف AL_Fish_Caviar</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Croaker" data-action="include" onclick="filterCards('AL_Fish_Croaker', 'include')">شامل AL_Fish_Croaker</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Croaker" data-action="exclude" onclick="filterCards('AL_Fish_Croaker', 'exclude')">حذف AL_Fish_Croaker</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Flatfish" data-action="include" onclick="filterCards('AL_Fish_Flatfish', 'include')">شامل AL_Fish_Flatfish</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Flatfish" data-action="exclude" onclick="filterCards('AL_Fish_Flatfish', 'exclude')">حذف AL_Fish_Flatfish</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Flounder" data-action="include" onclick="filterCards('AL_Fish_Flounder', 'include')">شامل AL_Fish_Flounder</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Flounder" data-action="exclude" onclick="filterCards('AL_Fish_Flounder', 'exclude')">حذف AL_Fish_Flounder</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Grouper" data-action="include" onclick="filterCards('AL_Fish_Grouper', 'include')">شامل AL_Fish_Grouper</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Grouper" data-action="exclude" onclick="filterCards('AL_Fish_Grouper', 'exclude')">حذف AL_Fish_Grouper</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Herring" data-action="include" onclick="filterCards('AL_Fish_Herring', 'include')">شامل AL_Fish_Herring</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Herring" data-action="exclude" onclick="filterCards('AL_Fish_Herring', 'exclude')">حذف AL_Fish_Herring</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_KingMackerel" data-action="include" onclick="filterCards('AL_Fish_KingMackerel', 'include')">شامل AL_Fish_KingMackerel</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_KingMackerel" data-action="exclude" onclick="filterCards('AL_Fish_KingMackerel', 'exclude')">حذف AL_Fish_KingMackerel</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Mackerel" data-action="include" onclick="filterCards('AL_Fish_Mackerel', 'include')">شامل AL_Fish_Mackerel</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Mackerel" data-action="exclude" onclick="filterCards('AL_Fish_Mackerel', 'exclude')">حذف AL_Fish_Mackerel</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Mullet" data-action="include" onclick="filterCards('AL_Fish_Mullet', 'include')">شامل AL_Fish_Mullet</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Mullet" data-action="exclude" onclick="filterCards('AL_Fish_Mullet', 'exclude')">حذف AL_Fish_Mullet</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Pike" data-action="include" onclick="filterCards('AL_Fish_Pike', 'include')">شامل AL_Fish_Pike</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Pike" data-action="exclude" onclick="filterCards('AL_Fish_Pike', 'exclude')">حذف AL_Fish_Pike</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Porgy" data-action="include" onclick="filterCards('AL_Fish_Porgy', 'include')">شامل AL_Fish_Porgy</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Porgy" data-action="exclude" onclick="filterCards('AL_Fish_Porgy', 'exclude')">حذف AL_Fish_Porgy</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Roe" data-action="include" onclick="filterCards('AL_Fish_Roe', 'include')">شامل AL_Fish_Roe</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Roe" data-action="exclude" onclick="filterCards('AL_Fish_Roe', 'exclude')">حذف AL_Fish_Roe</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Salmon" data-action="include" onclick="filterCards('AL_Fish_Salmon', 'include')">شامل AL_Fish_Salmon</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Salmon" data-action="exclude" onclick="filterCards('AL_Fish_Salmon', 'exclude')">حذف AL_Fish_Salmon</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Sardine" data-action="include" onclick="filterCards('AL_Fish_Sardine', 'include')">شامل AL_Fish_Sardine</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Sardine" data-action="exclude" onclick="filterCards('AL_Fish_Sardine', 'exclude')">حذف AL_Fish_Sardine</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Shark" data-action="include" onclick="filterCards('AL_Fish_Shark', 'include')">شامل AL_Fish_Shark</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Shark" data-action="exclude" onclick="filterCards('AL_Fish_Shark', 'exclude')">حذف AL_Fish_Shark</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Snapper" data-action="include" onclick="filterCards('AL_Fish_Snapper', 'include')">شامل AL_Fish_Snapper</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Snapper" data-action="exclude" onclick="filterCards('AL_Fish_Snapper', 'exclude')">حذف AL_Fish_Snapper</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Swordfish" data-action="include" onclick="filterCards('AL_Fish_Swordfish', 'include')">شامل AL_Fish_Swordfish</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Swordfish" data-action="exclude" onclick="filterCards('AL_Fish_Swordfish', 'exclude')">حذف AL_Fish_Swordfish</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Tilapia" data-action="include" onclick="filterCards('AL_Fish_Tilapia', 'include')">شامل AL_Fish_Tilapia</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Tilapia" data-action="exclude" onclick="filterCards('AL_Fish_Tilapia', 'exclude')">حذف AL_Fish_Tilapia</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Trout" data-action="include" onclick="filterCards('AL_Fish_Trout', 'include')">شامل AL_Fish_Trout</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Trout" data-action="exclude" onclick="filterCards('AL_Fish_Trout', 'exclude')">حذف AL_Fish_Trout</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Unspecified" data-action="include" onclick="filterCards('AL_Fish_Unspecified', 'include')">شامل AL_Fish_Unspecified</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Unspecified" data-action="exclude" onclick="filterCards('AL_Fish_Unspecified', 'exclude')">حذف AL_Fish_Unspecified</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Fish_Whitefish" data-action="include" onclick="filterCards('AL_Fish_Whitefish', 'include')">شامل AL_Fish_Whitefish</button>
                                                <button class="tag-btn exclude" data-tag="AL_Fish_Whitefish" data-action="exclude" onclick="filterCards('AL_Fish_Whitefish', 'exclude')">حذف AL_Fish_Whitefish</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grain_Bulgur" data-action="include" onclick="filterCards('AL_Grain_Bulgur', 'include')">شامل AL_Grain_Bulgur</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grain_Bulgur" data-action="exclude" onclick="filterCards('AL_Grain_Bulgur', 'exclude')">حذف AL_Grain_Bulgur</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grain_Cereal" data-action="include" onclick="filterCards('AL_Grain_Cereal', 'include')">شامل AL_Grain_Cereal</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grain_Cereal" data-action="exclude" onclick="filterCards('AL_Grain_Cereal', 'exclude')">حذف AL_Grain_Cereal</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grain_Millet" data-action="include" onclick="filterCards('AL_Grain_Millet', 'include')">شامل AL_Grain_Millet</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grain_Millet" data-action="exclude" onclick="filterCards('AL_Grain_Millet', 'exclude')">حذف AL_Grain_Millet</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grain_Pea" data-action="include" onclick="filterCards('AL_Grain_Pea', 'include')">شامل AL_Grain_Pea</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grain_Pea" data-action="exclude" onclick="filterCards('AL_Grain_Pea', 'exclude')">حذف AL_Grain_Pea</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grain_SplitPea" data-action="include" onclick="filterCards('AL_Grain_SplitPea', 'include')">شامل AL_Grain_SplitPea</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grain_SplitPea" data-action="exclude" onclick="filterCards('AL_Grain_SplitPea', 'exclude')">حذف AL_Grain_SplitPea</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grains_Barley" data-action="include" onclick="filterCards('AL_Grains_Barley', 'include')">شامل AL_Grains_Barley</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grains_Barley" data-action="exclude" onclick="filterCards('AL_Grains_Barley', 'exclude')">حذف AL_Grains_Barley</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grains_Brown_Rice" data-action="include" onclick="filterCards('AL_Grains_Brown_Rice', 'include')">شامل AL_Grains_Brown_Rice</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grains_Brown_Rice" data-action="exclude" onclick="filterCards('AL_Grains_Brown_Rice', 'exclude')">حذف AL_Grains_Brown_Rice</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grains_Bulgur" data-action="include" onclick="filterCards('AL_Grains_Bulgur', 'include')">شامل AL_Grains_Bulgur</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grains_Bulgur" data-action="exclude" onclick="filterCards('AL_Grains_Bulgur', 'exclude')">حذف AL_Grains_Bulgur</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grains_Chickpea" data-action="include" onclick="filterCards('AL_Grains_Chickpea', 'include')">شامل AL_Grains_Chickpea</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grains_Chickpea" data-action="exclude" onclick="filterCards('AL_Grains_Chickpea', 'exclude')">حذف AL_Grains_Chickpea</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grains_Corn" data-action="include" onclick="filterCards('AL_Grains_Corn', 'include')">شامل AL_Grains_Corn</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grains_Corn" data-action="exclude" onclick="filterCards('AL_Grains_Corn', 'exclude')">حذف AL_Grains_Corn</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grains_Millet" data-action="include" onclick="filterCards('AL_Grains_Millet', 'include')">شامل AL_Grains_Millet</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grains_Millet" data-action="exclude" onclick="filterCards('AL_Grains_Millet', 'exclude')">حذف AL_Grains_Millet</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grains_Oats" data-action="include" onclick="filterCards('AL_Grains_Oats', 'include')">شامل AL_Grains_Oats</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grains_Oats" data-action="exclude" onclick="filterCards('AL_Grains_Oats', 'exclude')">حذف AL_Grains_Oats</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Grains_Rice" data-action="include" onclick="filterCards('AL_Grains_Rice', 'include')">شامل AL_Grains_Rice</button>
                                                <button class="tag-btn exclude" data-tag="AL_Grains_Rice" data-action="exclude" onclick="filterCards('AL_Grains_Rice', 'exclude')">حذف AL_Grains_Rice</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Legume_Bean" data-action="include" onclick="filterCards('AL_Legume_Bean', 'include')">شامل AL_Legume_Bean</button>
                                                <button class="tag-btn exclude" data-tag="AL_Legume_Bean" data-action="exclude" onclick="filterCards('AL_Legume_Bean', 'exclude')">حذف AL_Legume_Bean</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Legume_Chickpea" data-action="include" onclick="filterCards('AL_Legume_Chickpea', 'include')">شامل AL_Legume_Chickpea</button>
                                                <button class="tag-btn exclude" data-tag="AL_Legume_Chickpea" data-action="exclude" onclick="filterCards('AL_Legume_Chickpea', 'exclude')">حذف AL_Legume_Chickpea</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Legume_Fava" data-action="include" onclick="filterCards('AL_Legume_Fava', 'include')">شامل AL_Legume_Fava</button>
                                                <button class="tag-btn exclude" data-tag="AL_Legume_Fava" data-action="exclude" onclick="filterCards('AL_Legume_Fava', 'exclude')">حذف AL_Legume_Fava</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Legume_FavaBean" data-action="include" onclick="filterCards('AL_Legume_FavaBean', 'include')">شامل AL_Legume_FavaBean</button>
                                                <button class="tag-btn exclude" data-tag="AL_Legume_FavaBean" data-action="exclude" onclick="filterCards('AL_Legume_FavaBean', 'exclude')">حذف AL_Legume_FavaBean</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Legume_Peas" data-action="include" onclick="filterCards('AL_Legume_Peas', 'include')">شامل AL_Legume_Peas</button>
                                                <button class="tag-btn exclude" data-tag="AL_Legume_Peas" data-action="exclude" onclick="filterCards('AL_Legume_Peas', 'exclude')">حذف AL_Legume_Peas</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Legume_Unspecified" data-action="include" onclick="filterCards('AL_Legume_Unspecified', 'include')">شامل AL_Legume_Unspecified</button>
                                                <button class="tag-btn exclude" data-tag="AL_Legume_Unspecified" data-action="exclude" onclick="filterCards('AL_Legume_Unspecified', 'exclude')">حذف AL_Legume_Unspecified</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Camel" data-action="include" onclick="filterCards('AL_Meat_Camel', 'include')">شامل AL_Meat_Camel</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Camel" data-action="exclude" onclick="filterCards('AL_Meat_Camel', 'exclude')">حذف AL_Meat_Camel</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Duck" data-action="include" onclick="filterCards('AL_Meat_Duck', 'include')">شامل AL_Meat_Duck</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Duck" data-action="exclude" onclick="filterCards('AL_Meat_Duck', 'exclude')">حذف AL_Meat_Duck</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Fat" data-action="include" onclick="filterCards('AL_Meat_Fat', 'include')">شامل AL_Meat_Fat</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Fat" data-action="exclude" onclick="filterCards('AL_Meat_Fat', 'exclude')">حذف AL_Meat_Fat</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Fish" data-action="include" onclick="filterCards('AL_Meat_Fish', 'include')">شامل AL_Meat_Fish</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Fish" data-action="exclude" onclick="filterCards('AL_Meat_Fish', 'exclude')">حذف AL_Meat_Fish</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Goose" data-action="include" onclick="filterCards('AL_Meat_Goose', 'include')">شامل AL_Meat_Goose</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Goose" data-action="exclude" onclick="filterCards('AL_Meat_Goose', 'exclude')">حذف AL_Meat_Goose</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Ground" data-action="include" onclick="filterCards('AL_Meat_Ground', 'include')">شامل AL_Meat_Ground</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Ground" data-action="exclude" onclick="filterCards('AL_Meat_Ground', 'exclude')">حذف AL_Meat_Ground</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Kidney" data-action="include" onclick="filterCards('AL_Meat_Kidney', 'include')">شامل AL_Meat_Kidney</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Kidney" data-action="exclude" onclick="filterCards('AL_Meat_Kidney', 'exclude')">حذف AL_Meat_Kidney</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Offal" data-action="include" onclick="filterCards('AL_Meat_Offal', 'include')">شامل AL_Meat_Offal</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Offal" data-action="exclude" onclick="filterCards('AL_Meat_Offal', 'exclude')">حذف AL_Meat_Offal</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Organ" data-action="include" onclick="filterCards('AL_Meat_Organ', 'include')">شامل AL_Meat_Organ</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Organ" data-action="exclude" onclick="filterCards('AL_Meat_Organ', 'exclude')">حذف AL_Meat_Organ</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Ostrich" data-action="include" onclick="filterCards('AL_Meat_Ostrich', 'include')">شامل AL_Meat_Ostrich</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Ostrich" data-action="exclude" onclick="filterCards('AL_Meat_Ostrich', 'exclude')">حذف AL_Meat_Ostrich</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Pigeon" data-action="include" onclick="filterCards('AL_Meat_Pigeon', 'include')">شامل AL_Meat_Pigeon</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Pigeon" data-action="exclude" onclick="filterCards('AL_Meat_Pigeon', 'exclude')">حذف AL_Meat_Pigeon</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Quail" data-action="include" onclick="filterCards('AL_Meat_Quail', 'include')">شامل AL_Meat_Quail</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Quail" data-action="exclude" onclick="filterCards('AL_Meat_Quail', 'exclude')">حذف AL_Meat_Quail</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Sheep" data-action="include" onclick="filterCards('AL_Meat_Sheep', 'include')">شامل AL_Meat_Sheep</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Sheep" data-action="exclude" onclick="filterCards('AL_Meat_Sheep', 'exclude')">حذف AL_Meat_Sheep</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Meat_Veal" data-action="include" onclick="filterCards('AL_Meat_Veal', 'include')">شامل AL_Meat_Veal</button>
                                                <button class="tag-btn exclude" data-tag="AL_Meat_Veal" data-action="exclude" onclick="filterCards('AL_Meat_Veal', 'exclude')">حذف AL_Meat_Veal</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Nuts_Acorn" data-action="include" onclick="filterCards('AL_Nuts_Acorn', 'include')">شامل AL_Nuts_Acorn</button>
                                                <button class="tag-btn exclude" data-tag="AL_Nuts_Acorn" data-action="exclude" onclick="filterCards('AL_Nuts_Acorn', 'exclude')">حذف AL_Nuts_Acorn</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Nuts_Almonds" data-action="include" onclick="filterCards('AL_Nuts_Almonds', 'include')">شامل AL_Nuts_Almonds</button>
                                                <button class="tag-btn exclude" data-tag="AL_Nuts_Almonds" data-action="exclude" onclick="filterCards('AL_Nuts_Almonds', 'exclude')">حذف AL_Nuts_Almonds</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Nuts_Cashew" data-action="include" onclick="filterCards('AL_Nuts_Cashew', 'include')">شامل AL_Nuts_Cashew</button>
                                                <button class="tag-btn exclude" data-tag="AL_Nuts_Cashew" data-action="exclude" onclick="filterCards('AL_Nuts_Cashew', 'exclude')">حذف AL_Nuts_Cashew</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Nuts_Chestnut" data-action="include" onclick="filterCards('AL_Nuts_Chestnut', 'include')">شامل AL_Nuts_Chestnut</button>
                                                <button class="tag-btn exclude" data-tag="AL_Nuts_Chestnut" data-action="exclude" onclick="filterCards('AL_Nuts_Chestnut', 'exclude')">حذف AL_Nuts_Chestnut</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Nuts_Hazelnuts" data-action="include" onclick="filterCards('AL_Nuts_Hazelnuts', 'include')">شامل AL_Nuts_Hazelnuts</button>
                                                <button class="tag-btn exclude" data-tag="AL_Nuts_Hazelnuts" data-action="exclude" onclick="filterCards('AL_Nuts_Hazelnuts', 'exclude')">حذف AL_Nuts_Hazelnuts</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Nuts_Hemp" data-action="include" onclick="filterCards('AL_Nuts_Hemp', 'include')">شامل AL_Nuts_Hemp</button>
                                                <button class="tag-btn exclude" data-tag="AL_Nuts_Hemp" data-action="exclude" onclick="filterCards('AL_Nuts_Hemp', 'exclude')">حذف AL_Nuts_Hemp</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Nuts_Mixed" data-action="include" onclick="filterCards('AL_Nuts_Mixed', 'include')">شامل AL_Nuts_Mixed</button>
                                                <button class="tag-btn exclude" data-tag="AL_Nuts_Mixed" data-action="exclude" onclick="filterCards('AL_Nuts_Mixed', 'exclude')">حذف AL_Nuts_Mixed</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Nuts_Nutmeg" data-action="include" onclick="filterCards('AL_Nuts_Nutmeg', 'include')">شامل AL_Nuts_Nutmeg</button>
                                                <button class="tag-btn exclude" data-tag="AL_Nuts_Nutmeg" data-action="exclude" onclick="filterCards('AL_Nuts_Nutmeg', 'exclude')">حذف AL_Nuts_Nutmeg</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Nuts_Peanuts" data-action="include" onclick="filterCards('AL_Nuts_Peanuts', 'include')">شامل AL_Nuts_Peanuts</button>
                                                <button class="tag-btn exclude" data-tag="AL_Nuts_Peanuts" data-action="exclude" onclick="filterCards('AL_Nuts_Peanuts', 'exclude')">حذف AL_Nuts_Peanuts</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Nuts_Pecan" data-action="include" onclick="filterCards('AL_Nuts_Pecan', 'include')">شامل AL_Nuts_Pecan</button>
                                                <button class="tag-btn exclude" data-tag="AL_Nuts_Pecan" data-action="exclude" onclick="filterCards('AL_Nuts_Pecan', 'exclude')">حذف AL_Nuts_Pecan</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Other_Sesame" data-action="include" onclick="filterCards('AL_Other_Sesame', 'include')">شامل AL_Other_Sesame</button>
                                                <button class="tag-btn exclude" data-tag="AL_Other_Sesame" data-action="exclude" onclick="filterCards('AL_Other_Sesame', 'exclude')">حذف AL_Other_Sesame</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Poultry_Duck" data-action="include" onclick="filterCards('AL_Poultry_Duck', 'include')">شامل AL_Poultry_Duck</button>
                                                <button class="tag-btn exclude" data-tag="AL_Poultry_Duck" data-action="exclude" onclick="filterCards('AL_Poultry_Duck', 'exclude')">حذف AL_Poultry_Duck</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Poultry_Offal" data-action="include" onclick="filterCards('AL_Poultry_Offal', 'include')">شامل AL_Poultry_Offal</button>
                                                <button class="tag-btn exclude" data-tag="AL_Poultry_Offal" data-action="exclude" onclick="filterCards('AL_Poultry_Offal', 'exclude')">حذف AL_Poultry_Offal</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Seafood_Fish" data-action="include" onclick="filterCards('AL_Seafood_Fish', 'include')">شامل AL_Seafood_Fish</button>
                                                <button class="tag-btn exclude" data-tag="AL_Seafood_Fish" data-action="exclude" onclick="filterCards('AL_Seafood_Fish', 'exclude')">حذف AL_Seafood_Fish</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Seeds_Cottonseed" data-action="include" onclick="filterCards('AL_Seeds_Cottonseed', 'include')">شامل AL_Seeds_Cottonseed</button>
                                                <button class="tag-btn exclude" data-tag="AL_Seeds_Cottonseed" data-action="exclude" onclick="filterCards('AL_Seeds_Cottonseed', 'exclude')">حذف AL_Seeds_Cottonseed</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Seeds_Flax" data-action="include" onclick="filterCards('AL_Seeds_Flax', 'include')">شامل AL_Seeds_Flax</button>
                                                <button class="tag-btn exclude" data-tag="AL_Seeds_Flax" data-action="exclude" onclick="filterCards('AL_Seeds_Flax', 'exclude')">حذف AL_Seeds_Flax</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Seeds_Flaxseed" data-action="include" onclick="filterCards('AL_Seeds_Flaxseed', 'include')">شامل AL_Seeds_Flaxseed</button>
                                                <button class="tag-btn exclude" data-tag="AL_Seeds_Flaxseed" data-action="exclude" onclick="filterCards('AL_Seeds_Flaxseed', 'exclude')">حذف AL_Seeds_Flaxseed</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Seeds_Poppy" data-action="include" onclick="filterCards('AL_Seeds_Poppy', 'include')">شامل AL_Seeds_Poppy</button>
                                                <button class="tag-btn exclude" data-tag="AL_Seeds_Poppy" data-action="exclude" onclick="filterCards('AL_Seeds_Poppy', 'exclude')">حذف AL_Seeds_Poppy</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Seeds_Pumpkin" data-action="include" onclick="filterCards('AL_Seeds_Pumpkin', 'include')">شامل AL_Seeds_Pumpkin</button>
                                                <button class="tag-btn exclude" data-tag="AL_Seeds_Pumpkin" data-action="exclude" onclick="filterCards('AL_Seeds_Pumpkin', 'exclude')">حذف AL_Seeds_Pumpkin</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Seeds_Safflower" data-action="include" onclick="filterCards('AL_Seeds_Safflower', 'include')">شامل AL_Seeds_Safflower</button>
                                                <button class="tag-btn exclude" data-tag="AL_Seeds_Safflower" data-action="exclude" onclick="filterCards('AL_Seeds_Safflower', 'exclude')">حذف AL_Seeds_Safflower</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Seeds_Sesame" data-action="include" onclick="filterCards('AL_Seeds_Sesame', 'include')">شامل AL_Seeds_Sesame</button>
                                                <button class="tag-btn exclude" data-tag="AL_Seeds_Sesame" data-action="exclude" onclick="filterCards('AL_Seeds_Sesame', 'exclude')">حذف AL_Seeds_Sesame</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Seeds_Sunflower" data-action="include" onclick="filterCards('AL_Seeds_Sunflower', 'include')">شامل AL_Seeds_Sunflower</button>
                                                <button class="tag-btn exclude" data-tag="AL_Seeds_Sunflower" data-action="exclude" onclick="filterCards('AL_Seeds_Sunflower', 'exclude')">حذف AL_Seeds_Sunflower</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Seeds_Watermelon" data-action="include" onclick="filterCards('AL_Seeds_Watermelon', 'include')">شامل AL_Seeds_Watermelon</button>
                                                <button class="tag-btn exclude" data-tag="AL_Seeds_Watermelon" data-action="exclude" onclick="filterCards('AL_Seeds_Watermelon', 'exclude')">حذف AL_Seeds_Watermelon</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Sesame_Sesame" data-action="include" onclick="filterCards('AL_Sesame_Sesame', 'include')">شامل AL_Sesame_Sesame</button>
                                                <button class="tag-btn exclude" data-tag="AL_Sesame_Sesame" data-action="exclude" onclick="filterCards('AL_Sesame_Sesame', 'exclude')">حذف AL_Sesame_Sesame</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Soy_Soy" data-action="include" onclick="filterCards('AL_Soy_Soy', 'include')">شامل AL_Soy_Soy</button>
                                                <button class="tag-btn exclude" data-tag="AL_Soy_Soy" data-action="exclude" onclick="filterCards('AL_Soy_Soy', 'exclude')">حذف AL_Soy_Soy</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Soy_SoySauce" data-action="include" onclick="filterCards('AL_Soy_SoySauce', 'include')">شامل AL_Soy_SoySauce</button>
                                                <button class="tag-btn exclude" data-tag="AL_Soy_SoySauce" data-action="exclude" onclick="filterCards('AL_Soy_SoySauce', 'exclude')">حذف AL_Soy_SoySauce</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Soy_Soybean" data-action="include" onclick="filterCards('AL_Soy_Soybean', 'include')">شامل AL_Soy_Soybean</button>
                                                <button class="tag-btn exclude" data-tag="AL_Soy_Soybean" data-action="exclude" onclick="filterCards('AL_Soy_Soybean', 'exclude')">حذف AL_Soy_Soybean</button>
                                            </div>
                                            <div class="tag-group">
                                                <button class="tag-btn include" data-tag="AL_Soy_Soybeans" data-action="include" onclick="filterCards('AL_Soy_Soybeans', 'include')">شامل AL_Soy_Soybeans</button>
                                                <button class="tag-btn exclude" data-tag="AL_Soy_Soybeans" data-action="exclude" onclick="filterCards('AL_Soy_Soybeans', 'exclude')">حذف AL_Soy_Soybeans</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>
                          <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;">
                      <div class="search-container">
                          <label for="foodSearch"></label>
                          <input type="text" dir="rtl" id="foodSearch" placeholder="{% trans "جستجو غذا..." %}" class="search-bar">
                          <button type="button" id="foodSearchButton">{% trans "جستجو" %}</button>
                      </div>
{#                      <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>
            <div class="main-dish-code-info" style="margin: 15px 0; padding: 10px; background-color: #f5f5f5; border-radius: 5px;">
              <strong>{% trans "کد غذای اصلی" %}:</strong> <span id="main-dish-code">-</span>
            </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>


    <link rel="stylesheet" href="{% static 'css/diets2.css' %}">

    {% 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 }}";

        // Function to determine which meals should have 0 calories
        function checkZeroCalorieMeals() {
            try {
                const rawLifestyleQuestionnaire = {{ raw_lifestyle_questionnaire|safe }};
                const rawQuestionnaire = {{ raw_questionnaire|safe }};
                
                // First, check MAIN_MEALS_PER_DAY from LifestyleQuestionnaire
                let mainMealsCount = null;
                
                // Check LifestyleQuestionnaire first (old version)
                if (rawLifestyleQuestionnaire && Object.keys(rawLifestyleQuestionnaire).length > 0) {
                    const lifestyleMainMeals = rawLifestyleQuestionnaire.MAIN_MEALS_PER_DAY;
                    if (lifestyleMainMeals) {
                        try {
                            const mainMealsStr = String(lifestyleMainMeals).replace(/[\[\]"'\s]/g, '');
                            mainMealsCount = parseInt(mainMealsStr);
                            console.log("MAIN_MEALS_PER_DAY from LifestyleQuestionnaire:", mainMealsCount);
                        } catch (e) {
                            console.log("Could not parse MAIN_MEALS_PER_DAY from LifestyleQuestionnaire:", lifestyleMainMeals);
                        }
                    }
                }
                
                // If not found in LifestyleQuestionnaire, check UserQuestionnaire
                if (mainMealsCount === null && rawQuestionnaire && Object.keys(rawQuestionnaire).length > 0) {
                    const userMainMeals = rawQuestionnaire.MAIN_MEALS_PER_DAY;
                    if (userMainMeals) {
                        try {
                            const mainMealsStr = String(userMainMeals).replace(/[\[\]"'\s]/g, '');
                            mainMealsCount = parseInt(mainMealsStr);
                            console.log("MAIN_MEALS_PER_DAY from UserQuestionnaire:", mainMealsCount);
                        } catch (e) {
                            console.log("Could not parse MAIN_MEALS_PER_DAY from UserQuestionnaire:", userMainMeals);
                        }
                    }
                }
                
                // If MAIN_MEALS_PER_DAY is not found or is > 2, don't show banner
                if (mainMealsCount === null) {
                    console.log("MAIN_MEALS_PER_DAY not found in any questionnaire");
                    return;
                }
                
                if (mainMealsCount > 2) {
                    console.log("User eats " + mainMealsCount + " meals - no banner needed (> 2)");
                    return;
                }
                
                console.log("User eats " + mainMealsCount + " meals (<= 2) - checking which meals to exclude");
                
                if (!rawQuestionnaire || Object.keys(rawQuestionnaire).length === 0) {
                    console.log("No UserQuestionnaire data available for meal details");
                    return;
                }

                const excludedMeals = {
                    'breakfast': false,
                    'lunch': false,
                    'dinner': false
                };

                // Check breakfast-related questions
                const breakfastOptions = rawQuestionnaire.BREAKFAST_OPTIONS;
                const breakfastBreadType = rawQuestionnaire.BREAKFAST_BREAD_TYPE;
                
                [breakfastOptions, breakfastBreadType].forEach(value => {
                    if (value && (String(value).includes('هیچ‌کدام') || String(value).includes('هیچکدام'))) {
                        excludedMeals.breakfast = true;
                        console.log("Breakfast excluded due to:", value);
                    }
                });

                // Check lunch preference
                const lunchPreference = rawQuestionnaire.LUNCH_PREFERENCE;
                if (lunchPreference) {
                    if (String(lunchPreference).includes('هیچ‌کدام') || 
                        String(lunchPreference).includes('هیچکدام') || 
                        String(lunchPreference).includes('قهوه')) {
                        excludedMeals.lunch = true;
                        console.log("Lunch excluded due to:", lunchPreference);
                    }
                }

                // Check dinner preference
                const dinnerPreference = rawQuestionnaire.DINNER_PREFERENCE;
                if (dinnerPreference) {
                    if (String(dinnerPreference).includes('هیچ‌کدام') || 
                        String(dinnerPreference).includes('هیچکدام') || 
                        String(dinnerPreference).includes('قهوه')) {
                        excludedMeals.dinner = true;
                        console.log("Dinner excluded due to:", dinnerPreference);
                    }
                }

                console.log("Final excluded meals:", excludedMeals);

                // Store excluded meals globally for use in refreshMeal
                window.excludedMeals = excludedMeals;

                // Build banner content
                const zeroCalorieMeals = [];
                if (excludedMeals.breakfast) zeroCalorieMeals.push('صبحانه (Breakfast)');
                if (excludedMeals.lunch) zeroCalorieMeals.push('ناهار (Lunch)');
                if (excludedMeals.dinner) zeroCalorieMeals.push('شام (Dinner)');

                if (zeroCalorieMeals.length > 0) {
                    const banner = document.getElementById('zeroCalorieBanner');
                    const content = document.getElementById('zeroCalorieContent');
                    
                    const messageHTML = 'بر اساس پاسخ‌های پرسشنامه کاربر، وعده‌های زیر باید <strong>0 کالری</strong> داشته باشند:<br><br>' + 
                                      '<div style="background: rgba(255, 255, 255, 0.15); padding: 10px; border-radius: 8px; margin-top: 8px;">' +
                                      zeroCalorieMeals.map(meal => '• ' + meal).join('<br>') +
                                      '</div>';
                    
                    content.innerHTML = messageHTML;
                    banner.style.display = 'block';
                    
                    // Show bypass checkboxes
                    const bypassContainer = document.getElementById('zeroCalorieBypassContainer');
                    const bypassBreakfastContainer = document.getElementById('bypassBreakfastContainer');
                    const bypassLunchContainer = document.getElementById('bypassLunchContainer');
                    const bypassDinnerContainer = document.getElementById('bypassDinnerContainer');
                    
                    // Hide all first
                    bypassBreakfastContainer.style.display = 'none';
                    bypassLunchContainer.style.display = 'none';
                    bypassDinnerContainer.style.display = 'none';
                    
                    // Show only relevant bypass checkboxes
                    if (excludedMeals.breakfast) {
                        bypassBreakfastContainer.style.display = 'flex';
                    }
                    if (excludedMeals.lunch) {
                        bypassLunchContainer.style.display = 'flex';
                    }
                    if (excludedMeals.dinner) {
                        bypassDinnerContainer.style.display = 'flex';
                    }
                    
                    // Show the container
                    bypassContainer.style.display = 'flex';
                }

            } catch (error) {
                console.error("Error checking zero calorie meals:", error);
            }
        }

        // Function to check MEAL_VARIETY and set the "Same lunch and dinner" checkbox
        function checkMealVariety() {
            try {
                const rawQuestionnaire = {{ raw_questionnaire|safe }};
                
                if (!rawQuestionnaire || Object.keys(rawQuestionnaire).length === 0) {
                    console.log("No UserQuestionnaire data available for MEAL_VARIETY");
                    return;
                }
                
                const mealVariety = rawQuestionnaire.MEAL_VARIETY;
                console.log("MEAL_VARIETY value:", mealVariety);
                
                // Check if MEAL_VARIETY contains "[بله]"
                if (mealVariety && String(mealVariety).includes('بله')) {
                    const sameLunchDinnerCheckbox = document.getElementById('sameLunchDinner');
                    if (sameLunchDinnerCheckbox) {
                        sameLunchDinnerCheckbox.checked = true;
                        console.log("Same lunch and dinner checkbox set to true based on MEAL_VARIETY");
                    }
                }
            } catch (error) {
                console.error("Error checking MEAL_VARIETY:", error);
            }
        }

        // Check zero calorie meals when page loads
        window.addEventListener('load', function() {
            checkZeroCalorieMeals();
            checkMealVariety();
        });

        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: Array(14).fill([]), // Initialize 14 empty sub-arrays
                    lunch: Array(14).fill([]),
                    dinner: Array(14).fill([]),
                    snack1: Array(14).fill([]),
                    snack2: Array(14).fill([])
                },
                type: dietType || "default" // Use dietType, fallback to "default" if not provided
            };
    
            const rows = mealTable.querySelectorAll('tbody tr');
            console.log(`submitMealPlan - Number of rows found: ${rows.length}`);
    
            if (rows.length !== 14) {
                console.error(`Expected 14 rows, found ${rows.length}`);
                alert('جدول باید دقیقاً 14 ردیف داشته باشد تا 14 گزینه در هر وعده ثبت شود.');
                return;
            }
    
            rows.forEach((row, index) => {
                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[index] = getMealEntry(breakfastCell);
                dietJson.week1.lunch[index] = getMealEntry(lunchCell);
                dietJson.week1.dinner[index] = getMealEntry(dinnerCell);
                dietJson.week1.snack1[index] = getMealEntry(snack1Cell);
                dietJson.week1.snack2[index] = getMealEntry(snack2Cell);
            });
    
            const jsonString = JSON.stringify(dietJson, null, 2);
            console.log("Constructed dietJson:", jsonString);
    
            const dietId = "{{ diet.id }}" || null;
            const dietStartDate = document.getElementById('dietStartDate').value;
    
            const requestData = {
                diet_json: jsonString
            };
    
            if (dietId) requestData.diet_id = dietId;
            if (dietStartDate) {
                const startDateTimestamp = new Date(dietStartDate).getTime() / 1000;
                requestData.start_date = startDateTimestamp;
                console.log('startDateTimestamp:', startDateTimestamp);
            }
    
            $.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!", data);
                },
                error: function (xhr, status, error) {
                    console.log("Error submitting the diet JSON!", error);
                }
            });
        }

        function getMealEntry(cell) {
            console.log(" we are in the getMealEntry function");
            const cellData = $(cell).data('cellData');
            const foodItems = cell.querySelectorAll('.food-item');
            const mealEntry = {
                title: cellData ? cellData.cardTitle : "کارت رژیم",
                ingredient: []
            };

            console.log("Cell contents:", cell.innerHTML);
            console.log("cellData:", cellData);
            console.log("Food items found:", foodItems.length);

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

                console.log("[ENERGY] Step 0 - cellData.caloriesList[index]:", cellData.caloriesList[index]);
                console.log("[ENERGY] Step 0 - cellData:", cellData);
                console.log("[ENERGY] Step 0 - parseFloat(item.dataset.energy):", parseFloat(item.dataset.energy));
                console.log("[ENERGY] Step 0.1 - Math.round((parseFloat(item.dataset.energy) || 0) * 100) / 100:", Math.round((parseFloat(item.dataset.energy) || 0) * 100) / 100);
                console.log("[ENERGY] Step 0.1 - (cellData && parseFloat(cellData.caloriesList[index])):", (cellData && parseFloat(cellData.caloriesList[index])));

                // Get energy from different sources, prioritizing stored data
                let energy = Math.round((parseFloat(item.dataset.energy) || 0) * 100) / 100 || (cellData && parseFloat(cellData.caloriesList[index])) || 0;
                
                // CRITICAL FIX: If energy is 0 or missing, recalculate using the legacy formula
                if (energy === 0 && amount_g > 0) {
                    // Try to get energy_per_100g from the food item's dataset or cellData.foods
                    if (cellData && cellData.foods && cellData.foods[index]) {
                        energy = parseFloat(cellData.foods[index].Energy || cellData.foods[index].Calories || 0);
                    }

                }
                
                const ingredient = {
                    name: item.innerText.split(' (')[0],
                    home_unit: item.dataset.home_unit || (cellData && cellData.homeUnits[index]) || "",
                    amount_in_home_unit: parseFloat(item.dataset.amount_home_unit) || (cellData && parseFloat(cellData.amountHomeUnits[index])) || 0,
                    amount_g: amount_g,
                    protein: Math.round((parseFloat(item.dataset.protein) || 0) * 100) / 100 || (cellData && parseFloat(cellData.proteinList[index])) || 0,
                    energy: energy, // Use the corrected energy value
                    carbohydrate: Math.round((parseFloat(item.dataset.carbohydrate) || 0) * 100) / 100 || (cellData && parseFloat(cellData.carbohydratesList[index])) || 0,
                    fat: Math.round((parseFloat(item.dataset.fat) || 0) * 100) / 100 || (cellData && parseFloat(cellData.fatList[index])) || 0,
                    food_code: parseInt(item.dataset.food_code, 10) || (cellData && parseInt(cellData.foodCodes[index], 10)) || 0
                };
                
                console.log(`Adding ingredient: ${ingredient.name}, energy: ${ingredient.energy}, amount_g: ${ingredient.amount_g}`);
                mealEntry.ingredient.push(ingredient);
            });

            return mealEntry.ingredient.length > 0 ? [mealEntry] : [];
        }
        
        function showEditModal(cell, cellData) {
            const editModal = $('#editModal');
            if (!editModal.length) {
                console.error('Edit modal not found');
                return;
            }

            const modalCellData = JSON.parse(JSON.stringify(cellData));
            modalCellData.foods = cellData.foods ? JSON.parse(JSON.stringify(cellData.foods)) : [];
            editModal.data('originalCellData', cellData);
            editModal.data('cellData', modalCellData);
            editModal.data('currentCell', cell);

            console.log('Modal cellData before display:', modalCellData);

            // Ensure nutrient totals are set correctly
            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 main_dish_code
            let mainDishCode = '-';
            if (modalCellData.main_dish_code && modalCellData.main_dish_code > 0) {
                mainDishCode = modalCellData.main_dish_code;
            } else if (modalCellData.card && modalCellData.card.main_dish_code && modalCellData.card.main_dish_code > 0) {
                mainDishCode = modalCellData.card.main_dish_code;
            } else if (modalCellData.foods && modalCellData.foods.length > 0) {
                for (const food of modalCellData.foods) {
                    if (food.main_dish_code && food.main_dish_code > 0) {
                        mainDishCode = food.main_dish_code;
                        break;
                    }
                }
            }
            editModal.find('#main-dish-code').text(mainDishCode);

            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] || 0;
                    const homeUnit = modalCellData.homeUnits[index] || '';
                    const listItem = $(`<li class="list-item">${content} (${amountHomeUnit} ${homeUnit})</li>`);
                    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>');

                    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]) || 0;
                            const oldAmountG = parseFloat(modalCellData.amounts[index]) || 0;
                            const newAmountFloat = parseFloat(newAmount);

                            if (!isNaN(newAmountFloat) && oldAmount !== 0) {
                                const weightRatio = newAmountFloat / oldAmount;
                                modalCellData.amountHomeUnits[index] = newAmountFloat;
                                modalCellData.amounts[index] = (oldAmountG / oldAmount) * newAmountFloat;

                                modalCellData.fatList[index] = (parseFloat(modalCellData.fatList[index]) || 0) * weightRatio;
                                modalCellData.caloriesList[index] = (parseFloat(modalCellData.caloriesList[index]) || 0) * weightRatio;
                                modalCellData.proteinList[index] = (parseFloat(modalCellData.proteinList[index]) || 0) * weightRatio;
                                modalCellData.carbohydratesList[index] = (parseFloat(modalCellData.carbohydratesList[index]) || 0) * weightRatio;

                                if (!modalCellData.foods[index]) modalCellData.foods[index] = {};
                                modalCellData.foods[index].home_unit_amount = newAmountFloat;
                                modalCellData.foods[index].amount = (oldAmountG / oldAmount) * newAmountFloat;
                                modalCellData.foods[index].food_name = modalCellData.contents[index];
                                modalCellData.foods[index].home_unit_name = modalCellData.homeUnits[index];
                                modalCellData.foods[index].Fat = modalCellData.fatList[index];
                                modalCellData.foods[index].Calories = modalCellData.caloriesList[index];
                                modalCellData.foods[index].Protein = modalCellData.proteinList[index];
                                modalCellData.foods[index].Carbohydrates = modalCellData.carbohydratesList[index];
                                modalCellData.foods[index].food_code = modalCellData.foodCodes[index];

                                modalCellData.fat = modalCellData.fatList.reduce((sum, val) => sum + parseFloat(val || 0), 0);
                                modalCellData.calories = modalCellData.caloriesList.reduce((sum, val) => sum + parseFloat(val || 0), 0);
                                modalCellData.protein = modalCellData.proteinList.reduce((sum, val) => sum + parseFloat(val || 0), 0);
                                modalCellData.carbohydrate = modalCellData.carbohydratesList.reduce((sum, val) => sum + parseFloat(val || 0), 0);

                                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);

                                listItem.text(`${modalCellData.contents[index]} (${newAmountFloat} ${modalCellData.homeUnits[index]})`);
                            }
                        }
                    });

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

                        // Get the deleted item's nutrient values from foods array
                        const deletedFood = modalCellData.foods[index];
                        const deletedCalories = parseFloat(deletedFood.Calories || 0);
                        const deletedFat = parseFloat(deletedFood.Fat || 0);
                        const deletedProtein = parseFloat(deletedFood.Protein || 0);
                        const deletedCarbs = parseFloat(deletedFood.Carbohydrates || 0);

                        // Remove the item from all arrays
                        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);
                        modalCellData.foods.splice(index, 1);

                        // Subtract the deleted item's values from totals
                        modalCellData.calories = (parseFloat(modalCellData.calories) || 0) - deletedCalories;
                        modalCellData.fat = (parseFloat(modalCellData.fat) || 0) - deletedFat;
                        modalCellData.protein = (parseFloat(modalCellData.protein) || 0) - deletedProtein;
                        modalCellData.carbohydrate = (parseFloat(modalCellData.carbohydrate) || 0) - deletedCarbs;

                        // Update modal display
                        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 cell data immediately so row summary reflects changes
                        const currentCell = editModal.data('currentCell');
                        $(currentCell).data('cellData', modalCellData);
                        
                        // Update cell visual content to reflect changes
                        if (modalCellData.contents.length > 0) {
                            const titleContent = `<strong class="card-title">${modalCellData.cardTitle || 'Unknown'}</strong><br>`;
                            const foodItemsContent = modalCellData.contents.map((content, index) => {
                                return `<div class="food-item" data-amount_g="${modalCellData.amounts[index]}"
                                            data-home_unit="${modalCellData.homeUnits[index]}"
                                            data-food_code="${modalCellData.foodCodes[index]}"
                                            data-amount_home_unit="${modalCellData.amountHomeUnits[index]}"
                                            data-fat="${modalCellData.fatList[index]}"
                                            data-calories="${modalCellData.caloriesList[index]}"
                                            data-protein="${modalCellData.proteinList[index]}"
                                            data-carbohydrate="${modalCellData.carbohydratesList[index]}">
                                            ${content} (${modalCellData.amountHomeUnits[index]} ${modalCellData.homeUnits[index]})</div>`;
                            }).join('');
                            $(currentCell).html(titleContent + foodItemsContent);
                        } else {
                            // If no items left, clear the cell
                            $(currentCell).empty();
                        }
                        
                        // Update row nutrient details immediately
                        const rowNumber = $(currentCell).closest('tr').index() + 1;
                        console.log('Updating row nutrient details for row:', rowNumber);
                        console.log('Current cell data after deletion:', modalCellData);
                        updateRowNutrientDetails(rowNumber);

                        listItem.remove();
                        contentsList.find('.list-item').each((i, item) => $(item).data('index', i));
                    });

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

            editModal.modal('show');

            editModal.off('hidden.bs.modal').on('hidden.bs.modal', function() {
                const updatedCellData = editModal.data('cellData');
                const currentCell = editModal.data('currentCell');
                const wasDeleted = editModal.data('wasDeleted');
                
                if (currentCell && updatedCellData && !wasDeleted) {
                    updatedCellData.FA_Name = updatedCellData.FA_Name || updatedCellData.cardTitle || cellData.FA_Name || 'Unknown';
                    updatedCellData.EN_Name = updatedCellData.EN_Name || cellData.EN_Name || 'Unknown';
                    updatedCellData.foods = updatedCellData.foods || cellData.foods || [];

                    console.log('Saving updated cellData:', updatedCellData);
                    $(currentCell).data('cellData', updatedCellData);
                    populateCell(currentCell[0], updatedCellData);
                    const rowNumber = $(currentCell).closest('tr').index() + 1;
                    updateRowNutrientDetails(rowNumber);
                }
                
                // Clear the deletion flag
                editModal.removeData('wasDeleted');
            });
        }
        let selectedDietTags = [];
        let selectedMealTimes = [];
        let cardName = '';
        let cardFlags = {};

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

        document.addEventListener("DOMContentLoaded", function() {
            const mealTable = document.getElementById('mealTable');
            if (!mealTable) {
                console.error("mealTable element not found!");
                return;
            }

            const rows = mealTable.querySelectorAll('tbody tr');
            console.log(`Found ${rows.length} rows in mealTable`);
            if (rows.length !== 14) {
                console.error(`Expected 14 rows, found ${rows.length}. Please check the HTML.`);
                return;
            }

            editModal = $('#editModal');
            // Modal event listeners (unchanged)
            editModal.on('click', '#saveChanges', function() {
                const cell = editModal.data('currentCell');
                const modalCellData = editModal.data('cellData');
                const cellData = editModal.data('originalCellData');
                Object.assign(cellData, modalCellData);
                recalculateNutrientTotals(cellData);
                const titleContent = `<strong class="card-title">${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('');
                $(cell).html(titleContent + foodItemsContent);
                $(cell).data('cellData', cellData);
                editModal.modal('hide');
                const rowNumber = $(cell).closest('tr').index() + 1;
                updateRowNutrientDetails(rowNumber);
            });

            editModal.on('hide.bs.modal', function(e) {
                const modalCellData = editModal.data('cellData');
                const originalCellData = editModal.data('originalCellData');
                const changesMade = JSON.stringify(modalCellData) !== JSON.stringify(originalCellData);
                if (changesMade) {
                    const confirmClose = confirm('تغییرات ذخیره نشده‌اند. آیا می‌خواهید بدون ذخیره ادامه بدهید؟');
                    if (!confirmClose) e.preventDefault();
                }
            });

            editModal.on('click', '#deleteContent', function() {
                const cell = editModal.data('currentCell');
                
                // Set deletion flag to prevent restoration
                editModal.data('wasDeleted', true);
                
                // Clear the cell content
                $(cell).empty();
                
                // Remove all data associated with the cell
                $(cell).removeData('cellData');
                
                // Reset the cell to be ready for new drag and drop operations
                $(cell).addClass('droppable');
                $(cell).removeClass('has-content');
                
                // Re-enable drag and drop functionality for this cell
                const cellElement = cell[0]; // Get the actual DOM element
                cellElement.addEventListener('dragover', (event) => event.preventDefault());
                cellElement.addEventListener('drop', handleDrop);
                
                // Restore click functionality for the cell (even when empty)
                $(cell).off('click').on('click', function(e) {
                    if (!$(e.target).is('.refresh-btn, .refresh-btn *')) {
                        let cellData = {
                            fat: 0, calories: 0, protein: 0, carbohydrate: 0,
                            contents: [], amounts: [], homeUnits: [], amountHomeUnits: [],
                            foodCodes: [], titles: [], cardTitle: '',
                            fatList: [], caloriesList: [], proteinList: [], carbohydratesList: [],
                            foods: []
                        };
                        showEditModal($(this), cellData);
                    }
                });
                
                // Update the row nutrient details
                const rowNumber = $(cell).closest('tr').index() + 1;
                updateRowNutrientDetails(rowNumber);
                
                // Hide the modal
                editModal.modal('hide');
                
                console.log('Cell cleared and ready for new items');
            });

            editModal.on('click', '#initCreateCardFromModal', function() {
                openCreateCardModal(function() {
                    const modalCellData = editModal.data('cellData');
                    if (!modalCellData || !modalCellData.contents || modalCellData.contents.length === 0) {
                        alert('هیچ مورد غذایی برای ساخت کارت وجود ندارد.');
                        return;
                    }
                    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;
                        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;
                        }
                        return {
                            'food_code': modalCellData.foodCodes[index],
                            '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
                    };
                    calculateTagsForCard(cardData);
                    saveCardToServer(cardData);
                });
            });

            // Drag-and-drop and click listeners for meal table cells only
            const mealTableCells = mealTable.querySelectorAll('td:not(.toggle-icon):not(.non-droppable):not(.nutrient-summary)');
            mealTableCells.forEach(cell => {
                cell.addEventListener('dragover', (event) => event.preventDefault());
                cell.addEventListener('drop', handleDrop);
                cell.addEventListener('click', function(event) {
                    // Skip toggle and non-droppable cells (redundant but ensures safety)
                    if (this.classList.contains('toggle-icon') || this.classList.contains('non-droppable')) return;

                    let cellData = $(this).data('cellData') || {
                        fat: 0, calories: 0, protein: 0, carbohydrate: 0,
                        contents: [], amounts: [], homeUnits: [], amountHomeUnits: [],
                        foodCodes: [], titles: [], cardTitle: '',
                        fatList: [], caloriesList: [], proteinList: [], carbohydratesList: []
                    };
                    showEditModal($(this), cellData);
                });
            });

            // Card dragging
            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(); }
            });

            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,
                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 handleDrop(event) {
            event.preventDefault();
            const cell = event.target.closest('td');
            if (!cell) return;

            // Prevent drops in toggle or non-droppable cells
            if (cell.classList.contains('toggle-icon') || cell.classList.contains('non-droppable')) {
                console.log('Drop ignored: toggle or non-droppable 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') || {
                fat: 0,
                calories: 0,
                protein: 0,
                carbohydrate: 0,
                contents: [],
                amounts: [],
                homeUnits: [],
                amountHomeUnits: [],
                foodCodes: [],
                titles: [],
                cardTitle: '',
                fatList: [],
                caloriesList: [],
                proteinList: [],
                carbohydratesList: [],
                FA_Name: cardData.cardTitle,
                EN_Name: 'Unknown',
                foods: []
            };

            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 itemCarbs = parseFloat(item.carbohydrate) || 0;

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

                cellData.fat += itemFat;
                cellData.calories += itemCalories;
                cellData.protein += itemProtein;
                cellData.carbohydrate += itemCarbs;

                cellData.foods.push({
                    food_name: item.title,
                    amount: item.amount_g,
                    home_unit_name: item.home_unit,
                    home_unit_amount: item.home_unit_amount,
                    Fat: itemFat,
                    Calories: itemCalories,
                    Protein: itemProtein,
                    Carbohydrates: itemCarbs,
                    food_code: item.food_code
                });
            });

            if (!cellData.cardTitle) {
                cellData.cardTitle = cardData.cardTitle;
                cellData.FA_Name = cardData.cardTitle;
            } else {
                cellData.cardTitle += ', ' + cardData.cardTitle;
                cellData.FA_Name = cellData.cardTitle;
            }

            populateCell(cell, cellData);
        }



        function initializeCardItemEventListeners() {
            const draggableCards = document.querySelectorAll('.card');
            draggableCards.forEach(card => {
                card.addEventListener('dragstart', handleCardDragStart);
            });
            // Calculate nutrients for cards after they are loaded
            calculateCardNutrients();
        }

        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 = {
                        food_name: foodNamePara.textContent,
                        home_unit_name: selectedHomeUnit,
                        home_unit_amount: amountValue,
                        amount: amountG,
                        Protein: Math.round(parseFloat(currentFoodItem.dataset.protein) * amountG / 100) || 0,
                        Calories: Math.round(parseFloat(currentFoodItem.dataset.energy) * amountG / 100) || 0,
                        Carbohydrates: 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 || foodNamePara.textContent)
                    };

                    let cellData = $(currentCell).data('cellData') || {
                        fat: 0,
                        calories: 0,
                        protein: 0,
                        carbohydrate: 0,
                        contents: [],
                        amounts: [],
                        homeUnits: [],
                        amountHomeUnits: [],
                        foodCodes: [],
                        titles: [],
                        cardTitle: showTitle ? titleValue : '',
                        fatList: [],
                        caloriesList: [],
                        proteinList: [],
                        carbohydratesList: [],
                        FA_Name: showTitle ? titleValue : '',
                        EN_Name: 'Unknown',
                        foods: []
                    };

                    cellData.contents.push(foodData.food_name);
                    cellData.amounts.push(foodData.amount);
                    cellData.homeUnits.push(foodData.home_unit_name);
                    cellData.amountHomeUnits.push(foodData.home_unit_amount);
                    cellData.foodCodes.push(foodData.food_code);
                    cellData.titles.push(foodData.title);

                    cellData.fatList.push(foodData.Fat);
                    cellData.caloriesList.push(foodData.Energy);  // Use Energy instead of Calories
                    cellData.proteinList.push(foodData.Protein);
                    cellData.carbohydratesList.push(foodData.Carbohydrates);

                    cellData.fat += foodData.Fat;
                    cellData.calories += foodData.Energy;  // Use Energy instead of Calories
                    cellData.protein += foodData.Protein;
                    cellData.carbohydrate += foodData.Carbohydrates;

                    cellData.foods.push(foodData); // Add to foods array

                    if (!cellData.cardTitle && showTitle) {
                        cellData.cardTitle = titleValue;
                        cellData.FA_Name = titleValue;
                    }

                    populateCell(currentCell, cellData);

                    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);
        });


        function populateCell(cell, card) {
            if (!cell || !card) return;
        

            console.log("This is the card items: ", card.foods)
            console.log("And this is the card items data type: ", typeof card.foods)
            console.log("Full card object: ", card)


            // Convert string representation of foods array to actual array if needed
            if (typeof card.foods === 'string') {
                try {
                    // Replace single quotes with double quotes for valid JSON
                    const jsonString = card.foods.replace(/'/g, '"');
                    card.foods = JSON.parse(jsonString);
                    console.log("Parsed foods from string: ", card.foods);
                } catch (e) {
                    console.error('Error parsing foods array:', e);
                    card.foods = []; // Fallback to empty array if parsing fails
                }
            }

            // Ensure card.foods is an array
            if (!Array.isArray(card.foods)) {
                console.log("card.foods is not an array, converting to empty array. Type:", typeof card.foods);
                card.foods = [];
            }
            
            console.log("Final foods array: ", card.foods);
            console.log("Foods array length: ", card.foods.length);
            
            // Check if card has calories but no foods (indicating a valid card with missing food data)
            const hasCaloriesButNoFoods = (card.Calories > 0 || card.calories > 0) && (!card.foods || card.foods.length === 0);
            
            // Log when we have a card with calories but no foods
            if (hasCaloriesButNoFoods) {
                console.warn(`Card "${card.FA_Name}" has calories (${card.Calories || card.calories}) but no foods array. This indicates missing food data in the database.`);
            }
        
            // Extract meal type from cell ID (e.g., "first-breakfast" -> "breakfast")
            const cellId = cell.id;
            const mealType = cellId.split('-')[1] === 'snack' ? `snack-${cellId.split('-')[2]}` : cellId.split('-')[1];
        
            const titleContent = `<strong class="card-title">${card.FA_Name || card.cardTitle || 'Unknown'}</strong><br>`;
            
            const foodItemsContent = (card.foods && card.foods.length > 0) ? card.foods.map((food, index) => {
                console.log(`Processing food item ${index}:`, food);
                const amount = food.home_unit_amount || food.amount || '';
                const unit = food.home_unit_name || food.home_unit || '';
                const displayAmount = amount && unit ? `(${amount} ${unit.trim()})` : amount ? `(${amount})` : '';
                const foodName = food.food_name || food.title || 'Unknown';
                

        
                return `<div class="food-item"
                             data-amount_g="${food.amount || ''}"
                             data-home_unit="${unit}"
                             data-amount_home_unit="${amount}"
                             data-food_code="${food.food_code || ''}"
                             data-fat="${food.Fat || 0}"
                             data-energy="${food.Energy || 0}"
                             data-protein="${food.Protein || 0}"
                             data-carbohydrate="${food.Carbohydrates || 0}">
                            ${foodName} ${displayAmount}
                        </div>`;
            }).join('') : hasCaloriesButNoFoods ? 
                '<div class="text-muted">(اطلاعات مواد غذایی در دسترس نیست)</div>' : 
                '<div class="text-muted">(موارد غذایی موجود نیست)</div>';
        
            // Include mealType in the onclick handler
            const refreshButton = `<button class="refresh-btn cell-refresh" data-cell="${cell.id}" onclick="refreshCell('${cell.id}', '${mealType}')"><i class="fa fa-refresh"></i></button>`;
            const cellContents = refreshButton + titleContent + foodItemsContent;
        
            $(cell).html(cellContents);
            
            // Mark the cell as having content and make it droppable
            $(cell).addClass('has-content droppable');
            
            const cellData = {
                fat: card.fat || 0,
                calories: card.Calories || card.calories || 0,
                protein: card.protein || 0,
                carbohydrate: card.carbohydrate || 0,
                contents: card.foods ? card.foods.map(food => food.food_name || food.title || 'Unknown') : [],
                amounts: card.foods ? card.foods.map(food => food.amount || '') : [],
                homeUnits: card.foods ? card.foods.map(food => food.home_unit_name || food.home_unit || '') : [],
                amountHomeUnits: card.foods ? card.foods.map(food => food.home_unit_amount || food.amount || '') : [],
                foodCodes: card.foods ? card.foods.map(food => food.food_code || '') : [],
                titles: card.foods ? card.foods.map(food => food.food_name || food.title || 'Unknown') : [],
                cardTitle: card.FA_Name || card.cardTitle || 'Unknown',
                fatList: card.foods ? card.foods.map(food => food.Fat || 0) : [],
                caloriesList: card.foods ? card.foods.map(food => parseFloat(food.Energy || 0)) : [],
                proteinList: card.foods ? card.foods.map(food => food.Protein || 0) : [],
                carbohydratesList: card.foods ? card.foods.map(food => food.Carbohydrates || 0) : [],
                FA_Name: card.FA_Name || card.cardTitle || 'Unknown',
                EN_Name: card.EN_Name || 'Unknown',
                main_dish_code: card.main_dish_code || '',
                foods: card.foods ? JSON.parse(JSON.stringify(card.foods)) : []
            };
        
            $(cell).data('cellData', cellData);
            console.log('Populated cellData:', cellData);
        
            $(cell).off('click').on('click', function(e) {
                if (!$(e.target).is('.refresh-btn, .refresh-btn *')) {
                    showEditModal($(this), cellData);
                }
            });
        
            const rowNumber = $(cell).closest('tr').index() + 1;
            updateRowNutrientDetails(rowNumber);
        }
        
        // CRITICAL FIX: Improved column data collection to ensure proper main_dish_code capture
        function getColumnData(mealType) {
            const normalizedMeal = mealType === 'snack1' ? 'snack-1' : mealType === 'snack2' ? 'snack-2' : mealType;
            const columnCells = document.querySelectorAll(`td[id*="${normalizedMeal}"]`);
            const columnData = [];
            
            console.log(`Collecting column data for meal: ${mealType} (normalized: ${normalizedMeal})`);
            console.log(`Found ${columnCells.length} cells in column`);
            
            columnCells.forEach((cell, index) => {
                const cellData = $(cell).data('cellData');
                let main_dish_code = null;
                
                // Try multiple ways to extract main_dish_code
                if (cellData) {
                    // Priority 1: Direct main_dish_code property
                    if (cellData.main_dish_code && cellData.main_dish_code > 0) {
                        main_dish_code = cellData.main_dish_code;
                    }
                    // Priority 2: Check in nested card data
                    else if (cellData.card && cellData.card.main_dish_code && cellData.card.main_dish_code > 0) {
                        main_dish_code = cellData.card.main_dish_code;
                    }
                    // Priority 3: Extract from any food items that might have it
                    else if (cellData.foods && cellData.foods.length > 0) {
                        for (const food of cellData.foods) {
                            if (food.main_dish_code && food.main_dish_code > 0) {
                                main_dish_code = food.main_dish_code;
                                break;
                            }
                        }
                    }
                }
                
                // Also check the cell's HTML content for embedded data
                if (!main_dish_code) {
                    const cellHTML = cell.innerHTML;
                    // Look for data attributes or any embedded main_dish_code
                    const codeMatch = cellHTML.match(/data-main[-_]dish[-_]code=["']?(\d+)["']?/i);
                    if (codeMatch) {
                        main_dish_code = parseInt(codeMatch[1]);
                    }
                }
                
                // Add to column data (including null/undefined for empty cells)
                columnData.push(main_dish_code);
                
            });
            
            console.log(`Column data collected:`, columnData);
            return columnData;
        }

        function getColumnFoodCodes(mealType) {
            const normalizedMeal = mealType === 'snack1' ? 'snack-1' : mealType === 'snack2' ? 'snack-2' : mealType;
            const columnCells = document.querySelectorAll(`td[id*="${normalizedMeal}"]`);
            const foodCodes = [];
            
            console.log(`Collecting food codes for meal: ${mealType} (normalized: ${normalizedMeal})`);
            console.log(`Found ${columnCells.length} cells in column`);
            
            columnCells.forEach((cell, index) => {
                const cellData = $(cell).data('cellData');
                
                // Extract food codes from cell data
                if (cellData && cellData.foodCodes && Array.isArray(cellData.foodCodes)) {
                    cellData.foodCodes.forEach(foodCode => {
                        if (foodCode && !foodCodes.includes(foodCode)) {
                            foodCodes.push(foodCode);
                        }
                    });
                }
                
                // Also check for food codes in DOM elements
                const foodItems = cell.querySelectorAll('.food-item[data-food_code]');
                foodItems.forEach(item => {
                    const foodCode = item.dataset.food_code;
                    if (foodCode && !foodCodes.includes(foodCode)) {
                        foodCodes.push(foodCode);
                    }
                });
                
                console.log(`Cell ${index}: found food codes:`, cellData ? cellData.foodCodes : 'no cell data');
            });
            
            console.log(`Total unique food codes in ${mealType} column:`, foodCodes);
            return foodCodes;
        }

        function showDuplicateAlert() {
            // Create a non-blocking alert/toast for duplicate fallback
            const alertHTML = `
                <div id="duplicateAlert" style="
                    position: fixed;
                    top: 20px;
                    right: 20px;
                    background-color: #ff9800;
                    color: white;
                    padding: 15px 20px;
                    border-radius: 8px;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
                    z-index: 10000;
                    font-family: 'Vazir', 'Tahoma', sans-serif;
                    font-size: 14px;
                    max-width: 350px;
                    text-align: right;
                    direction: rtl;
                    animation: slideInRight 0.3s ease-out;
                ">
                    <div style="display: flex; align-items: center; justify-content: space-between;">
                        <span>کارت جدیدی موجود نیست؛ کارت تکراری شد.</span>
                        <button onclick="document.getElementById('duplicateAlert').remove()" style="
                            background: none;
                            border: none;
                            color: white;
                            font-size: 18px;
                            cursor: pointer;
                            margin-left: 10px;
                            padding: 0;
                        ">×</button>
                    </div>
                </div>
                <style>
                    @keyframes slideInRight {
                        from { transform: translateX(100%); opacity: 0; }
                        to { transform: translateX(0); opacity: 1; }
                    }
                </style>
            `;
            
            // Remove any existing alerts
            const existingAlert = document.getElementById('duplicateAlert');
            if (existingAlert) {
                existingAlert.remove();
            }
            
            // Add the alert to the page
            document.body.insertAdjacentHTML('beforeend', alertHTML);
            
            // Auto-remove after 5 seconds
            setTimeout(() => {
                const alertElement = document.getElementById('duplicateAlert');
                if (alertElement) {
                    alertElement.style.animation = 'slideInRight 0.3s ease-out reverse';
                    setTimeout(() => alertElement.remove(), 300);
                }
            }, 5000);
            
            console.log('Duplicate alert shown: کارت جدیدی موجود نیست؛ کارت تکراری شد.');
        }
        
        function showExcludedMealsNotification(excluded_meals) {
            // Check if any meals are excluded
            const excludedList = [];
            const mealNames = {
                'breakfast': 'صبحانه',
                'lunch': 'ناهار',
                'dinner': 'شام'
            };
            
            if (excluded_meals) {
                for (const [meal, isExcluded] of Object.entries(excluded_meals)) {
                    if (isExcluded && mealNames[meal]) {
                        excludedList.push(mealNames[meal]);
                    }
                }
            }
            
            // Only show notification if there are excluded meals
            if (excludedList.length === 0) {
                return;
            }
            
            const mealsText = excludedList.join('، ');
            
            // Create notification HTML
            const notificationHTML = `
                <div id="excludedMealsNotification" style="
                    position: fixed;
                    top: 80px;
                    right: 20px;
                    background-color: #17a2b8;
                    color: white;
                    padding: 15px 20px;
                    border-radius: 8px;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
                    z-index: 9999;
                    font-family: 'Vazir', 'Tahoma', sans-serif;
                    font-size: 14px;
                    max-width: 400px;
                    text-align: right;
                    direction: rtl;
                    animation: slideInRight 0.3s ease-out;
                ">
                    <div style="display: flex; align-items: center; justify-content: space-between;">
                        <div>
                            <strong style="display: block; margin-bottom: 5px;">⚠️ توجه</strong>
                            <span>بر اساس پرسشنامه کاربر، این رژیم نباید شامل <strong>${mealsText}</strong> باشد.</span>
                        </div>
                        <button onclick="document.getElementById('excludedMealsNotification').remove()" style="
                            background: none;
                            border: none;
                            color: white;
                            font-size: 18px;
                            cursor: pointer;
                            margin-left: 10px;
                            padding: 0;
                        ">×</button>
                    </div>
                </div>
            `;
            
            // Remove any existing notification
            const existingNotification = document.getElementById('excludedMealsNotification');
            if (existingNotification) {
                existingNotification.remove();
            }
            
            // Add the notification to the page
            document.body.insertAdjacentHTML('beforeend', notificationHTML);
            
            // Auto-remove after 10 seconds
            setTimeout(() => {
                const notificationElement = document.getElementById('excludedMealsNotification');
                if (notificationElement) {
                    notificationElement.style.animation = 'slideInRight 0.3s ease-out reverse';
                    setTimeout(() => notificationElement.remove(), 300);
                }
            }, 10000);
            
            console.log('Excluded meals notification shown:', mealsText);
        }
        
        function showBiscuitInfoNotification(biscuit_info) {
            // Only show for snack meals
            if (!biscuit_info) {
                return;
            }
            
            const count = biscuit_info.count || 0;
            const maxAllowed = biscuit_info.max_allowed || 2;
            const isAtLimit = biscuit_info.is_at_limit || false;
            
            // Determine background color based on status
            let backgroundColor = '#28a745'; // Green for under limit
            let icon = '✅';
            
            if (isAtLimit) {
                backgroundColor = '#dc3545'; // Red for at/over limit
                icon = '🚫';
            } else if (count === 1) {
                backgroundColor = '#ffc107'; // Yellow/orange for warning
                icon = '⚠️';
            }
            
            // Create notification HTML
            const notificationHTML = `
                <div id="biscuitInfoNotification" style="
                    position: fixed;
                    top: 160px;
                    right: 20px;
                    background-color: ${backgroundColor};
                    color: white;
                    padding: 15px 20px;
                    border-radius: 8px;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
                    z-index: 9999;
                    font-family: 'Vazir', 'Tahoma', sans-serif;
                    font-size: 14px;
                    max-width: 400px;
                    text-align: right;
                    direction: rtl;
                    animation: slideInRight 0.3s ease-out;
                ">
                    <div style="display: flex; align-items: center; justify-content: space-between;">
                        <div>
                            <strong style="display: block; margin-bottom: 5px;">${icon} کارت‌های بیسکویت</strong>
                            <span>تعداد کارت‌های بیسکویت در این ستون: <strong>${count} از ${maxAllowed}</strong></span>
                        </div>
                        <button onclick="document.getElementById('biscuitInfoNotification').remove()" style="
                            background: none;
                            border: none;
                            color: white;
                            font-size: 18px;
                            cursor: pointer;
                            margin-left: 10px;
                            padding: 0;
                        ">×</button>
                    </div>
                </div>
            `;
            
            // Remove any existing notification
            const existingNotification = document.getElementById('biscuitInfoNotification');
            if (existingNotification) {
                existingNotification.remove();
            }
            
            // Add the notification to the page
            document.body.insertAdjacentHTML('beforeend', notificationHTML);
            
            // Auto-remove after 8 seconds
            setTimeout(() => {
                const notificationElement = document.getElementById('biscuitInfoNotification');
                if (notificationElement) {
                    notificationElement.style.animation = 'slideInRight 0.3s ease-out reverse';
                    setTimeout(() => notificationElement.remove(), 300);
                }
            }, 8000);
            
        }
        
        function refreshCell(cellId, meal) {
            const cell = document.getElementById(cellId);
            if (!cell || !patient_id) return;
        
            // Stop the event propagation if this function is called from an event
            if (event) {
                event.stopPropagation();
            }
        
            console.log('🔄 refreshCell called for:', cellId, 'meal:', meal);
        
            cell.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
            $(cell).removeData('cellData');
        
            const columnData = getColumnData(meal);
            const excludeFoodCodes = getColumnFoodCodes(meal);  // Get food codes to exclude for duplicate avoidance
            
            // Extract cell position from cellId (e.g., "first-breakfast" -> 0, "second-breakfast" -> 1)
            const cellPosition = cellId.split('-')[0];
            const positionMap = {
                'first': 0, 'second': 1, 'third': 2, 'fourth': 3, 'fifth': 4, 'sixth': 5, 'seventh': 6,
                'eighth': 7, 'ninth': 8, 'tenth': 9, 'eleventh': 10, 'twelfth': 11, 'thirteenth': 12, 'fourteenth': 13
            };
            const cellIndex = positionMap[cellPosition] !== undefined ? positionMap[cellPosition] : null;

            // Get toggle button states
            const toggleStates = {
                breadForDinner: document.getElementById('breadForDinner').checked,
                breadForLunch: document.getElementById('breadForLunch').checked,
                riceForDinner: document.getElementById('riceForDinner').checked,
                riceForLunch: document.getElementById('riceForLunch').checked,
                sportSnack1: document.getElementById('sportSnack1').checked,
                coffeeSnack1: document.getElementById('coffeeSnack1').checked,
                sportSnack2: document.getElementById('sportSnack2').checked,
                coffeeSnack2: document.getElementById('coffeeSnack2').checked,
                saladMainDishDinner: document.getElementById('saladMainDishDinner').checked,
                saladMainDishLunch: document.getElementById('saladMainDishLunch').checked,
                khorakLunch: document.getElementById('khorakLunch').checked,
                khorakDinner: document.getElementById('khorakDinner').checked,
                cheeseBreakfast: document.getElementById('cheeseBreakfast').checked,
                peanutButterBreakfast: document.getElementById('peanutButterBreakfast').checked,
                omeletteBreakfast: document.getElementById('omeletteBreakfast').checked,
                tahiniBreakfast: document.getElementById('tahiniBreakfast').checked,
                oatmealBreakfast: document.getElementById('oatmealBreakfast').checked,
                summerSnack: document.getElementById('summerSnack').checked,
                winterSnack: document.getElementById('winterSnack').checked,
                springSnack: document.getElementById('springSnack').checked,
                autumnSnack: document.getElementById('autumnSnack').checked
            };

            // Determine which tags to check based on meal type and toggle states
            const tagsToCheck = {
                bread: false,
                rice: false,
                salad_main_dish: false,
                sport: false,
                coffee_snack1: false,
                coffee_snack2: false,
                cheese_breakfast: false,
                peanut_butter_breakfast: false,
                omelette_breakfast: false,
                egg_breakfast: false,
                tahini_breakfast: false,
                oatmeal_breakfast: false,
                summer_snack: false,
                winter_snack: false,
                spring_snack: false,
                autumn_snack: false,
                khorak: false
            };

            // Normalize meal key to handle both snack1/snack-1 variants
            const normalizedMeal = meal === 'snack1' ? 'snack-1' : meal === 'snack2' ? 'snack-2' : meal;

            // Set tags based on meal type and toggle states
            if (normalizedMeal === 'dinner') {
                tagsToCheck.bread = toggleStates.breadForDinner;
                tagsToCheck.rice = toggleStates.riceForDinner;
                tagsToCheck.salad_main_dish = toggleStates.saladMainDishDinner;
                tagsToCheck.khorak = toggleStates.khorakDinner;
            } else if (normalizedMeal === 'lunch') {
                tagsToCheck.bread = toggleStates.breadForLunch;
                tagsToCheck.rice = toggleStates.riceForLunch;
                tagsToCheck.salad_main_dish = toggleStates.saladMainDishLunch;
                tagsToCheck.khorak = toggleStates.khorakLunch;
            } else if (normalizedMeal === 'snack-1') {
                tagsToCheck.sport = toggleStates.sportSnack1;
                tagsToCheck.coffee_snack1 = toggleStates.coffeeSnack1;
            } else if (normalizedMeal === 'snack-2') {
                tagsToCheck.sport = toggleStates.sportSnack2;
                tagsToCheck.coffee_snack2 = toggleStates.coffeeSnack2;
            } else if (normalizedMeal === 'breakfast') {
                tagsToCheck.cheese_breakfast = toggleStates.cheeseBreakfast;
                tagsToCheck.peanut_butter_breakfast = toggleStates.peanutButterBreakfast;
                tagsToCheck.omelette_breakfast = toggleStates.omeletteBreakfast;
                tagsToCheck.tahini_breakfast = toggleStates.tahiniBreakfast;
                tagsToCheck.oatmeal_breakfast = toggleStates.oatmealBreakfast;
            } 
            
            if (normalizedMeal === 'snack-1' || normalizedMeal === 'snack-2') {
                tagsToCheck.summer_snack = toggleStates.summerSnack;
                tagsToCheck.winter_snack = toggleStates.winterSnack;
                tagsToCheck.spring_snack = toggleStates.springSnack;
                tagsToCheck.autumn_snack = toggleStates.autumnSnack;
            }

            // Determine bypass flags (zero-calorie bypass)
            let useDefaultDistribution = false;
            if (window.excludedMeals) {
                if (window.excludedMeals.breakfast && document.getElementById('bypassBreakfastZeroCalorie')?.checked) {
                    useDefaultDistribution = true;
                }
                if (window.excludedMeals.lunch && document.getElementById('bypassLunchZeroCalorie')?.checked) {
                    useDefaultDistribution = true;
                }
                if (window.excludedMeals.dinner && document.getElementById('bypassDinnerZeroCalorie')?.checked) {
                    useDefaultDistribution = true;
                }
            }

            let bypassZeroCalorie = false;
            if (meal === 'breakfast' && window.excludedMeals?.breakfast) {
                bypassZeroCalorie = document.getElementById('bypassBreakfastZeroCalorie')?.checked || false;
            } else if (meal === 'lunch' && window.excludedMeals?.lunch) {
                bypassZeroCalorie = document.getElementById('bypassLunchZeroCalorie')?.checked || false;
            } else if (meal === 'dinner' && window.excludedMeals?.dinner) {
                bypassZeroCalorie = document.getElementById('bypassDinnerZeroCalorie')?.checked || false;
            }

            console.log('tagsToCheck:', tagsToCheck);
            console.log('☕ FINAL tagsToCheck.coffee_snack1:', tagsToCheck.coffee_snack1, 'coffee_snack2:', tagsToCheck.coffee_snack2);
            console.log('Bypass flags -> bypassZeroCalorie:', bypassZeroCalorie, 'useDefaultDistribution:', useDefaultDistribution, 'excludedMeals:', window.excludedMeals);
        
            const requestData = {
                patient_id: patient_id,
                cell_id: cellId,
                meal_type: meal,
                count: 1,
                column_data: columnData,
                exclude_food_codes: excludeFoodCodes,  // Exclude current column food codes for duplicate avoidance
                cell_index: cellIndex,
                tags: tagsToCheck,  // Include the tags to check
                months: selectedMonths,  // Include selected Persian months
                bypass_zero_calorie: bypassZeroCalorie,
                use_default_distribution: useDefaultDistribution,
                bypassed_meals: window.excludedMeals || {}
            };
            console.log('Refresh cell request data:', requestData);
        
            $.ajax({
                url: '/panel/assistant/cells/card/',
                type: 'POST',
                headers: { 'X-CSRFToken': window.CSRF_TOKEN },
                data: JSON.stringify(requestData),
                contentType: 'application/json',
                success: function(response) {
                    console.log('Cell refresh success:', response);
                    
                    // Debug: Show candidates before/after biscuit restriction
                    if (response.candidates_debug) {
                        console.log('🔍 ========== CANDIDATES DEBUG INFO ==========');
                        
                        // Show fallback strategy if used
                        if (response.candidates_debug.fallback_used) {
                            console.log('⚠️ Fallback Strategy Used:', response.candidates_debug.fallback_used);
                        }
                        
                        console.log('🍪 Biscuit restriction applied:', response.candidates_debug.restriction_applied);
                        console.log('📊 Candidates before filter:', response.candidates_debug.before_count);
                        
                        if (response.candidates_debug.restriction_applied) {
                            console.log('📊 Candidates after filter:', response.candidates_debug.after_count);
                            console.log('❌ Biscuit cards filtered out:', response.candidates_debug.filtered_out);
                            
                            console.log('\n📋 BEFORE FILTER (all candidates):');
                            console.table(response.candidates_debug.before_sample);
                            
                            console.log('\n📋 AFTER FILTER (all remaining):');
                            console.table(response.candidates_debug.after_sample);
                        } else {
                            console.log('✅ No restriction applied (under limit)');
                            console.log('\n📋 CANDIDATES:');
                            console.table(response.candidates_debug.before_sample);
                        }
                        console.log('🔍 ==========================================');
                    }
                    
                    // Debug: Show final candidates (after ALL filtering stages)
                    if (response.final_candidates) {
                        console.log('\n🎯 ========== FINAL CANDIDATES (After ALL Filters) ==========');
                        console.log('📊 Total final candidates available:', response.final_candidates.length);
                        console.log('\n📋 ALL FINAL CANDIDATES:');
                        console.table(response.final_candidates);
                        console.log('🎯 ============================================================\n');
                    }
                    
                    // Debug: Show which card was selected from the final candidates
                    if (response.selected_card_info && response.final_candidates) {
                        console.log('\n✨ ========== SELECTED CARD ==========');
                        console.log('🎲 Card selected from', response.selected_card_info.total_candidates, 'final candidates:');
                        console.log('\n📌 SELECTED CARD DETAILS:');
                        console.table([response.selected_card_info]);
                        
                        // Find and highlight the selected card in the final candidates list
                        const selectedIndex = response.final_candidates.findIndex(
                            c => c.id === response.selected_card_info.id
                        );
                        
                        if (selectedIndex !== -1) {
                            console.log(`\n✅ This card was at position ${selectedIndex + 1} in the final candidates list`);
                        } else {
                            console.log('\n⚠️ Selected card was not found in final candidates (might be emergency fallback)');
                        }
                        console.log('✨ =====================================\n');
                    }
                    
                    const card = response.cards[0];
                    if (!card) {
                        cell.innerHTML = 'No card available';
                    } else {
                        populateCell(cell, card);
                        const rowNumber = $(cell).closest('tr').index() + 1;
                        updateRowNutrientDetails(rowNumber);
                        
                        // Check if this was a duplicate fallback and show alert
                        if (response.duplicate_fallback === true) {
                            showDuplicateAlert();
                        }
                        
                        // Show excluded meals notification if any
                        if (response.excluded_meals) {
                            showExcludedMealsNotification(response.excluded_meals);
                        }
                        
                        // Show biscuit info notification for snacks
                        if (response.biscuit_info) {
                            showBiscuitInfoNotification(response.biscuit_info);
                        }
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Cell refresh error:', status, error);
                    cell.innerHTML = 'Error';
                }
            });
        }

        function refreshMeal(meal) {
            console.log(`Refreshing ${meal} column...`);
            const rows = document.querySelectorAll('#mealTable tbody tr');
            if (!patient_id || rows.length !== 14) {
                console.error('Expected 14 rows, found:', rows.length);
                return;
            }
        
            const normalizedMeal = meal === 'snack1' ? 'snack-1' : meal === 'snack2' ? 'snack-2' : meal;
        
            // Get toggle button states
            const toggleStates = {
                breadForDinner: document.getElementById('breadForDinner').checked,
                breadForLunch: document.getElementById('breadForLunch').checked,
                riceForDinner: document.getElementById('riceForDinner').checked,
                riceForLunch: document.getElementById('riceForLunch').checked,
                sportSnack1: document.getElementById('sportSnack1').checked,
                coffeeSnack1: document.getElementById('coffeeSnack1').checked,
                sportSnack2: document.getElementById('sportSnack2').checked,
                coffeeSnack2: document.getElementById('coffeeSnack2').checked,
                saladMainDishDinner: document.getElementById('saladMainDishDinner').checked,
                saladMainDishLunch: document.getElementById('saladMainDishLunch').checked,
                khorakLunch: document.getElementById('khorakLunch').checked,
                khorakDinner: document.getElementById('khorakDinner').checked,
                cheeseBreakfast: document.getElementById('cheeseBreakfast').checked,
                peanutButterBreakfast: document.getElementById('peanutButterBreakfast').checked,
                omeletteBreakfast: document.getElementById('omeletteBreakfast').checked,
                tahiniBreakfast: document.getElementById('tahiniBreakfast').checked,
                oatmealBreakfast: document.getElementById('oatmealBreakfast').checked,
                summerSnack: document.getElementById('summerSnack').checked,
                winterSnack: document.getElementById('winterSnack').checked,
                springSnack: document.getElementById('springSnack').checked,
                autumnSnack: document.getElementById('autumnSnack').checked
            };

            // Determine which tags to check based on meal type and toggle states
            const tagsToCheck = {
                bread: false,
                rice: false,
                salad_main_dish: false,
                sport: false,
                coffee_snack1: false,
                coffee_snack2: false,
                cheese_breakfast: false,
                peanut_butter_breakfast: false,
                omelette_breakfast: false,
                egg_breakfast: false,
                tahini_breakfast: false,
                oatmeal_breakfast: false,
                summer_snack: false,
                winter_snack: false,
                spring_snack: false,
                autumn_snack: false,
                khorak: false
            };


            // Set tags based on meal type and toggle states
            if (meal === 'dinner') {
                tagsToCheck.bread = toggleStates.breadForDinner;
                tagsToCheck.rice = toggleStates.riceForDinner;
                tagsToCheck.salad_main_dish = toggleStates.saladMainDishDinner;
                tagsToCheck.khorak = toggleStates.khorakDinner;
            } else if (meal === 'lunch') {
                tagsToCheck.bread = toggleStates.breadForLunch;
                tagsToCheck.rice = toggleStates.riceForLunch;
                tagsToCheck.salad_main_dish = toggleStates.saladMainDishLunch;
                tagsToCheck.khorak = toggleStates.khorakLunch;
            } else if (meal === 'snack1') {
                tagsToCheck.sport = toggleStates.sportSnack1;
                tagsToCheck.coffee_snack1 = toggleStates.coffeeSnack1;
            } else if (meal === 'snack2') {
                tagsToCheck.sport = toggleStates.sportSnack2;
                tagsToCheck.coffee_snack2 = toggleStates.coffeeSnack2;
            } else if (meal === 'breakfast') {
                tagsToCheck.cheese_breakfast = toggleStates.cheeseBreakfast;
                tagsToCheck.peanut_butter_breakfast = toggleStates.peanutButterBreakfast;
                tagsToCheck.omelette_breakfast = toggleStates.omeletteBreakfast;
                tagsToCheck.tahini_breakfast = toggleStates.tahiniBreakfast;
                tagsToCheck.oatmeal_breakfast = toggleStates.oatmealBreakfast;
            } 
            
            if (meal === 'snack1' || meal === 'snack2') {

                console.log("These are the season tags summerSnack: ", toggleStates.summerSnack)
                console.log("These are the season tags winterSnack: ", toggleStates.winterSnack)
                console.log("These are the season tags springSnack: ", toggleStates.springSnack)
                console.log("These are the season tags autumnSnack: ", toggleStates.autumnSnack)

                tagsToCheck.summer_snack = toggleStates.summerSnack;
                tagsToCheck.winter_snack = toggleStates.winterSnack;
                tagsToCheck.spring_snack = toggleStates.springSnack;
                tagsToCheck.autumn_snack = toggleStates.autumnSnack;
            }

            console.log('tagsToCheck:', tagsToCheck);
        
            // Check if "Same lunch and dinner" is enabled and collect main_dish_codes
            let mainDishCodes = null;
            const sameLunchDinnerEnabled = document.getElementById('sameLunchDinner').checked;
            
            if (sameLunchDinnerEnabled && (meal === 'lunch' || meal === 'dinner')) {
                console.log('Same lunch and dinner is enabled');
                
                // Determine the other meal
                const otherMeal = meal === 'lunch' ? 'dinner' : 'lunch';
                const otherMealNormalized = otherMeal;
                
                // Check if the other meal has food cards
                const otherMealCells = [];
                rows.forEach(row => {
                    const cell = row.querySelector(`td[id*="${otherMealNormalized}"]`);
                    if (cell) {
                        const cellData = $(cell).data('cellData');
                        otherMealCells.push(cellData);
                    }
                });
                
                // Check if the other meal has foods
                const otherMealHasFoods = otherMealCells.some(cellData => 
                    cellData && cellData.foods && cellData.foods.length > 0
                );
                
                console.log(`Other meal (${otherMeal}) has foods:`, otherMealHasFoods);
                
                if (otherMealHasFoods) {
                    // Collect main_dish_codes from the other meal (position-based: index 0 → 0, 1 → 1, etc.)
                    mainDishCodes = [];
                    otherMealCells.forEach((cellData, index) => {
                        if (cellData && cellData.main_dish_code && cellData.main_dish_code > 0 && cellData.main_dish_code !== -1) {
                            // Valid main_dish_code (not -1 or 0)
                            mainDishCodes.push(cellData.main_dish_code);
                            console.log(`Row ${index + 1}: Collected main_dish_code=${cellData.main_dish_code} from ${otherMeal}`);
                        } else {
                            // If no main_dish_code or it's -1, push null to maintain position
                            mainDishCodes.push(null);
                            console.log(`Row ${index + 1}: No valid main_dish_code from ${otherMeal}, will generate random card`);
                        }
                    });
                    console.log(`Collected main_dish_codes from ${otherMeal} (position-based):`, mainDishCodes);
                }
            }
        
            // Check if ANY bypass checkbox is checked - if so, use default distribution for ALL meals
            let useDefaultDistribution = false;
            if (window.excludedMeals) {
                if (window.excludedMeals.breakfast && document.getElementById('bypassBreakfastZeroCalorie').checked) {
                    useDefaultDistribution = true;
                    console.log('Breakfast bypass enabled - using default distribution for all meals');
                }
                if (window.excludedMeals.lunch && document.getElementById('bypassLunchZeroCalorie').checked) {
                    useDefaultDistribution = true;
                    console.log('Lunch bypass enabled - using default distribution for all meals');
                }
                if (window.excludedMeals.dinner && document.getElementById('bypassDinnerZeroCalorie').checked) {
                    useDefaultDistribution = true;
                    console.log('Dinner bypass enabled - using default distribution for all meals');
                }
            }
            
            // Also check if bypass is enabled for THIS specific meal
            let bypassZeroCalorie = false;
            if (meal === 'breakfast' && window.excludedMeals && window.excludedMeals.breakfast) {
                bypassZeroCalorie = document.getElementById('bypassBreakfastZeroCalorie').checked;
            } else if (meal === 'lunch' && window.excludedMeals && window.excludedMeals.lunch) {
                bypassZeroCalorie = document.getElementById('bypassLunchZeroCalorie').checked;
            } else if (meal === 'dinner' && window.excludedMeals && window.excludedMeals.dinner) {
                bypassZeroCalorie = document.getElementById('bypassDinnerZeroCalorie').checked;
            }
        
            // Clear the column and show loading spinners
            rows.forEach(row => {
                const cell = row.querySelector(`td[id*="${normalizedMeal}"]`);
                if (cell) {
                    cell.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
                    $(cell).removeData('cellData');
                }
            });
        
            // Send AJAX request to regenerate the entire column
            $.ajax({
                url: '/panel/assistant/column/refresh/',
                type: 'POST',
                headers: { 'X-CSRFToken': window.CSRF_TOKEN },
                data: JSON.stringify({
                    patient_id: patient_id,
                    meal_type: meal,
                    count: 14,  // Request 14 cards for the column
                    tags: tagsToCheck,  // Include the tags to check
                    months: selectedMonths,  // Include selected Persian months
                    bypass_zero_calorie: bypassZeroCalorie,  // Include bypass status for this meal
                    use_default_distribution: useDefaultDistribution,  // Use default distribution if ANY bypass is enabled
                    main_dish_codes: mainDishCodes  // Include main_dish_codes for same lunch/dinner feature
                }),
                contentType: 'application/json',
                success: function(response) {
                    console.log(`Column ${meal} refresh success:`, response);
                    const cards = response.cards;
                    
                    // Handle all rows, whether we have cards or not
                    rows.forEach((row, index) => {
                        const cell = row.querySelector(`td[id*="${normalizedMeal}"]`);
                        if (cell) {
                            if (cards.length === 0) {
                                console.log("We are in first if clause.")
                                cell.innerHTML = 'No cards available';
                            } else if (index < cards.length) {
                                console.log("We are in second if clause.")
                                populateCell(cell, cards[index]);
                            } else {
                                console.log("We are in else clause.")
                                cell.innerHTML = 'No card available';
                            }
                        }
                    });

                    if (cards.length !== 14) {
                        console.warn(`Expected 14 cards for ${meal}, received:`, cards.length);
                    }
                    
                    // Show excluded meals notification if any
                    if (response.excluded_meals) {
                        showExcludedMealsNotification(response.excluded_meals);
                    }
                    
                    // Show biscuit info notification for snacks
                    if (response.biscuit_info) {
                        showBiscuitInfoNotification(response.biscuit_info);
                    }
                },
                error: function(xhr, status, error) {
                    console.error(`Column ${meal} refresh error:`, status, error);
                    rows.forEach(row => {
                        const cell = row.querySelector(`td[id*="${normalizedMeal}"]`);
                        if (cell) cell.innerHTML = 'Error';
                    });
                }
            });
        }
        
        
        
        function refreshAll() {
            console.log('Refreshing all cells...');
            if (!patient_id) {
                console.error('Patient ID not set');
                return;
            }
        
            const mealTypes = ['breakfast', 'lunch', 'dinner', 'snack1', 'snack2'];
            mealTypes.forEach((meal, index) => {
                setTimeout(() => {
                    generateColumn(meal);
                }, index * 500); // Stagger requests by 500ms to avoid overwhelming the server
            });
        }
        
        function generateColumn(meal) {
            console.log(`Generating column: ${meal}`);
            const rows = document.querySelectorAll('#mealTable tbody tr');
            if (rows.length !== 14) {
                console.error('Expected 14 rows, found:', rows.length);
                return;
            }
        
            // Check if ANY bypass checkbox is checked - if so, use default distribution for ALL meals
            let useDefaultDistribution = false;
            if (window.excludedMeals) {
                if (window.excludedMeals.breakfast && document.getElementById('bypassBreakfastZeroCalorie').checked) {
                    useDefaultDistribution = true;
                    console.log('[generateColumn] Breakfast bypass enabled - using default distribution for all meals');
                }
                if (window.excludedMeals.lunch && document.getElementById('bypassLunchZeroCalorie').checked) {
                    useDefaultDistribution = true;
                    console.log('[generateColumn] Lunch bypass enabled - using default distribution for all meals');
                }
                if (window.excludedMeals.dinner && document.getElementById('bypassDinnerZeroCalorie').checked) {
                    useDefaultDistribution = true;
                    console.log('[generateColumn] Dinner bypass enabled - using default distribution for all meals');
                }
            }
            
            // Also check if bypass is enabled for THIS specific meal
            let bypassZeroCalorie = false;
            if (meal === 'breakfast' && window.excludedMeals && window.excludedMeals.breakfast) {
                bypassZeroCalorie = document.getElementById('bypassBreakfastZeroCalorie').checked;
            } else if (meal === 'lunch' && window.excludedMeals && window.excludedMeals.lunch) {
                bypassZeroCalorie = document.getElementById('bypassLunchZeroCalorie').checked;
            } else if (meal === 'dinner' && window.excludedMeals && window.excludedMeals.dinner) {
                bypassZeroCalorie = document.getElementById('bypassDinnerZeroCalorie').checked;
            }
        
            const normalizedMeal = meal === 'snack1' ? 'snack-1' : meal === 'snack2' ? 'snack-2' : meal;
            rows.forEach(row => {
                const cell = row.querySelector(`td[id*="${normalizedMeal}"]`);
                if (cell) {
                    cell.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
                    $(cell).removeData('cellData');
                }
            });
        
            $.ajax({
                url: '/panel/assistant/column/card/',  // New endpoint
                type: 'POST',
                headers: { 'X-CSRFToken': window.CSRF_TOKEN },
                data: JSON.stringify({
                    patient_id: patient_id,
                    meal_type: meal,
                    bypass_zero_calorie: bypassZeroCalorie,
                    use_default_distribution: useDefaultDistribution
                }),
                contentType: 'application/json',
                success: function(response) {
                    console.log(`Column ${meal} success:`, response);
                    const cards = response.cards;
                    if (cards.length === 0) {
                        rows.forEach(row => {
                            const cell = row.querySelector(`td[id*="${normalizedMeal}"]`);
                            if (cell) cell.innerHTML = 'No cards available';
                        });
                    } else if (cards.length !== 14) {
                        console.warn(`Expected 14 cards for ${meal}, received:`, cards.length);
                    }
                    rows.forEach((row, index) => {
                        const cell = row.querySelector(`td[id*="${normalizedMeal}"]`);
                        if (cell && index < cards.length) {
                            populateCell(cell, cards[index]);
                        }
                    });
                },
                error: function(xhr, status, error) {
                    console.error(`Column ${meal} error:`, status, error);
                    rows.forEach(row => {
                        const cell = row.querySelector(`td[id*="${normalizedMeal}"]`);
                        if (cell) cell.innerHTML = 'Error';
                    });
                }
            });
        }
    </script>

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

        document.addEventListener('DOMContentLoaded', () => {
                console.log('diet_json from template:', '{{ diet_json|escapejs }}');
                try {
                    const dietData = JSON.parse('{{ diet_json|escapejs }}');
                    console.log('Parsed dietData:', dietData);
                    if (dietData && dietData.week1) {
                        console.log('Week1 data found:', dietData.week1);
                        populateDietTable(dietData);
                    } else {
                        console.error('Invalid diet data structure:', dietData);
                    }
                } catch (error) {
                    console.error('Error parsing diet JSON:', error);
                }
        });

        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) {
    console.log('populateDietTable called with:', dietData);
    const mealTable = document.getElementById('mealTable');
    const rows = mealTable.querySelectorAll('tbody tr');
    const week1 = dietData.week1;

    if (!week1) {
        console.error('No week1 data in dietData:', dietData);
        return;
    }
    
    console.log('week1 data:', week1);

    rows.forEach((row, index) => {
        if (index < 14) { // Ensure we don't exceed 14 rows
            const cells = row.querySelectorAll('td');
            const [breakfastCell, lunchCell, dinnerCell, snack1Cell, snack2Cell] = [cells[2], cells[3], cells[4], cells[5], cells[6]];

            // Handle the data structure where each meal entry is an array with the meal object as first element
            const breakfastData = week1.breakfast && week1.breakfast[index] ? week1.breakfast[index] : [];
            const lunchData = week1.lunch && week1.lunch[index] ? week1.lunch[index] : [];
            const dinnerData = week1.dinner && week1.dinner[index] ? week1.dinner[index] : [];
            const snack1Data = week1.snack1 && week1.snack1[index] ? week1.snack1[index] : [];
            const snack2Data = week1.snack2 && week1.snack2[index] ? week1.snack2[index] : [];

            console.log(`Row ${index}:`, {
                breakfast: breakfastData,
                lunch: lunchData,
                dinner: dinnerData,
                snack1: snack1Data,
                snack2: snack2Data
            });

            // Calculate cell data directly from diet data, not from HTML
            const breakfastCellData = calculateCellDataFromDietData(breakfastData);
            const lunchCellData = calculateCellDataFromDietData(lunchData);
            const dinnerCellData = calculateCellDataFromDietData(dinnerData);
            const snack1CellData = calculateCellDataFromDietData(snack1Data);
            const snack2CellData = calculateCellDataFromDietData(snack2Data);

            // Generate HTML and update cells with refresh buttons
            const breakfastHTML = formatMealEntries(breakfastData);
            const lunchHTML = formatMealEntries(lunchData);
            const dinnerHTML = formatMealEntries(dinnerData);
            const snack1HTML = formatMealEntries(snack1Data);
            const snack2HTML = formatMealEntries(snack2Data);
            
            // Add refresh buttons if content exists
            breakfastCell.innerHTML = breakfastHTML ? `<button class="refresh-btn cell-refresh" data-cell="${breakfastCell.id}" onclick="refreshCell('${breakfastCell.id}', 'breakfast')"><i class="fa fa-refresh"></i></button>${breakfastHTML}` : breakfastHTML;
            lunchCell.innerHTML = lunchHTML ? `<button class="refresh-btn cell-refresh" data-cell="${lunchCell.id}" onclick="refreshCell('${lunchCell.id}', 'lunch')"><i class="fa fa-refresh"></i></button>${lunchHTML}` : lunchHTML;
            dinnerCell.innerHTML = dinnerHTML ? `<button class="refresh-btn cell-refresh" data-cell="${dinnerCell.id}" onclick="refreshCell('${dinnerCell.id}', 'dinner')"><i class="fa fa-refresh"></i></button>${dinnerHTML}` : dinnerHTML;
            snack1Cell.innerHTML = snack1HTML ? `<button class="refresh-btn cell-refresh" data-cell="${snack1Cell.id}" onclick="refreshCell('${snack1Cell.id}', 'snack-1')"><i class="fa fa-refresh"></i></button>${snack1HTML}` : snack1HTML;
            snack2Cell.innerHTML = snack2HTML ? `<button class="refresh-btn cell-refresh" data-cell="${snack2Cell.id}" onclick="refreshCell('${snack2Cell.id}', 'snack-2')"><i class="fa fa-refresh"></i></button>${snack2HTML}` : snack2HTML;

            // Store cell data and add event listeners
            $(breakfastCell).data('cellData', breakfastCellData);
            $(lunchCell).data('cellData', lunchCellData);
            $(dinnerCell).data('cellData', dinnerCellData);
            $(snack1Cell).data('cellData', snack1CellData);
            $(snack2Cell).data('cellData', snack2CellData);

            [breakfastCell, lunchCell, dinnerCell, snack1Cell, snack2Cell].forEach(cell => {
                cell.addEventListener('click', function () {
                    const cellData = $(cell).data('cellData');
                    showEditModal($(cell), cellData);
                });
            });

            // Update row nutrient details
            updateRowNutrientDetails(index + 1);
        }
    });
}


        function calculateCellDataFromDietData(mealEntries) {
            console.log('calculateCellDataFromDietData called with:', mealEntries);
            
            const cellData = {
                fat: 0,
                calories: 0,
                protein: 0,
                carbohydrate: 0,
                contents: [],
                amounts: [],
                homeUnits: [],
                amountHomeUnits: [],
                foodCodes: [],
                titles: [],
                cardTitle: '',
                fatList: [],
                caloriesList: [],
                proteinList: [],
                carbohydratesList: [],
                FA_Name: '',
                EN_Name: '',
                main_dish_code: '',
                foods: []
            };

            if (!mealEntries || mealEntries.length === 0) {
                console.log('No meal entries found');
                return cellData;
            }

            mealEntries.forEach((entry, entryIndex) => {
                // Handle the case where entry might be an array with the meal object as first element
                const mealEntry = Array.isArray(entry) && entry.length > 0 ? entry[0] : entry;
                
                if (!mealEntry || !mealEntry.title) {
                    console.log('Invalid meal entry:', mealEntry);
                    return;
                }

                // Set the card title from the first meal entry
                if (entryIndex === 0) {
                    cellData.cardTitle = mealEntry.title || 'Unknown';
                    cellData.FA_Name = mealEntry.title || 'Unknown';
                    cellData.EN_Name = mealEntry.title || 'Unknown';
                }

                // Process ingredients - convert to the same format as populateCell expects
                (mealEntry.ingredient || []).forEach(ingredient => {
                    console.log('Processing ingredient:', ingredient);
                    
                    // Convert ingredient data to match the format used in populateCell
                    const foodItem = {
                        food_name: ingredient.name ? ingredient.name.split(' (')[0] : ingredient.name,
                        amount: parseFloat(ingredient.amount_g) || 0,
                        home_unit_name: ingredient.home_unit || '',
                        home_unit_amount: parseFloat(ingredient.amount_in_home_unit) || 0,
                        food_code: parseInt(ingredient.food_code, 10) || 0,
                        Fat: parseFloat(ingredient.fat) || 0,
                        Calories: parseFloat(ingredient.energy) || 0, // energy is the calorie value
                        Protein: parseFloat(ingredient.protein) || 0,
                        Carbohydrates: parseFloat(ingredient.carbohydrate) || 0,
                        energy: parseFloat(ingredient.energy) || 0 // Preserve original energy field
                    };

                    console.log('Converted food item:', foodItem);

                    cellData.contents.push(foodItem.food_name);
                    cellData.amounts.push(foodItem.amount);
                    cellData.homeUnits.push(foodItem.home_unit_name);
                    cellData.amountHomeUnits.push(foodItem.home_unit_amount);
                    cellData.foodCodes.push(foodItem.food_code);
                    cellData.titles.push(mealEntry.title || "");

                    cellData.fatList.push(foodItem.Fat);
                    cellData.caloriesList.push(foodItem.energy);  // Use energy instead of Calories
                    cellData.proteinList.push(foodItem.Protein);
                    cellData.carbohydratesList.push(foodItem.Carbohydrates);

                    cellData.fat += foodItem.Fat;
                    cellData.calories += foodItem.energy;  // Use energy instead of Calories
                    cellData.protein += foodItem.Protein;
                    cellData.carbohydrate += foodItem.Carbohydrates;

                    // Add to foods array for compatibility with populateCell
                    cellData.foods.push(foodItem);

                    console.log(`Added ingredient: ${foodItem.food_name}, fat: ${foodItem.Fat}, calories: ${foodItem.energy}, protein: ${foodItem.Protein}, carbs: ${foodItem.Carbohydrates}`);
                });
            });

            console.log('Final cell data:', cellData);
            return 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; // energy field contains the calorie value
                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-energy="${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) {
            console.log('formatMealEntries called with:', mealEntries);
            if (!mealEntries || mealEntries.length === 0) {
                console.log('No meal entries found');
                return '';
            }

            return mealEntries.map((entry, index) => {
                console.log(`Processing entry ${index}:`, entry);
                
                // Handle the case where entry might be an array with the meal object as first element
                const mealEntry = Array.isArray(entry) && entry.length > 0 ? entry[0] : entry;
                
                console.log('Processed mealEntry:', mealEntry);
                
                if (!mealEntry || !mealEntry.title) {
                    console.log('Invalid meal entry:', mealEntry);
                    return '';
                }
                
                const titleHTML = `<strong class="card-title">${mealEntry.title}</strong><br>`;
                const ingredientsHTML = (mealEntry.ingredient || []).map(ingredient => {
                    console.log('Processing ingredient:', ingredient);
                    
                    // Convert to the same format as populateCell
                    const foodItem = {
                        food_name: ingredient.name ? ingredient.name.split(' (')[0] : ingredient.name,
                        amount: parseFloat(ingredient.amount_g) || 0,
                        home_unit_name: ingredient.home_unit || '',
                        home_unit_amount: parseFloat(ingredient.amount_in_home_unit) || 0,
                        food_code: parseInt(ingredient.food_code, 10) || 0,
                        Fat: parseFloat(ingredient.fat) || 0,
                        Calories: parseFloat(ingredient.energy) || 0, // energy is the calorie value
                        Protein: parseFloat(ingredient.protein) || 0,
                        Carbohydrates: parseFloat(ingredient.carbohydrate) || 0,
                        energy: parseFloat(ingredient.energy) || 0 // Preserve original energy field
                    };
                    
                    return createFoodItemHTML({
                        ...foodItem,
                        name: foodItem.food_name,
                        title: mealEntry.title
                    });
                }).join('<br>');

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

        function createFoodItemHTML(foodItem) {
            console.log('createFoodItemHTML called with:', foodItem);
            if (!foodItem || typeof foodItem !== 'object') {
                console.log('Invalid foodItem:', foodItem);
                return '';
            }
            
            if (!foodItem.name && !foodItem.food_name) {
                console.log('foodItem missing name:', foodItem);
                return '';
            }
            
            const foodName = foodItem.food_name || foodItem.name || '';
            const amount = foodItem.home_unit_amount || foodItem.amount_in_home_unit || '';
            const unit = foodItem.home_unit_name || foodItem.home_unit || '';
            const displayAmount = amount && unit ? `(${amount} ${unit.trim()})` : amount ? `(${amount})` : '';
            
            const html = `<div class="food-item"
                    data-amount="${amount}"
                    data-title="${foodItem.title || ''}"
                    data-home_unit="${unit}"
                    data-amount_home_unit="${amount}"
                    data-amount_g="${foodItem.amount || foodItem.amount_g || ''}"
                    data-protein="${foodItem.Protein || foodItem.protein || ''}"
                    data-energy="${foodItem.energy || foodItem.Calories || ''}"
                    data-carbohydrate="${foodItem.Carbohydrates || foodItem.carbohydrate || ''}"
                    data-fat="${foodItem.Fat || foodItem.fat || ''}"
                    data-food_code="${foodItem.food_code || ''}">
                    ${foodName} ${displayAmount}</div>`;
            
            console.log('Generated HTML:', html);
            return html;
        }

        function saveDietAsTemplate(dietName, calorieRange, companyName, city, isUserTemplate, selectedBacteria, selectedDietType, selectedDiseases, selectedAllergic) {
    expandAllRows();
    const dietJson = {
        week1: {
            breakfast: Array(14).fill([]), // Initialize 14 empty sub-arrays
            lunch: Array(14).fill([]),
            dinner: Array(14).fill([]),
            snack1: Array(14).fill([]),
            snack2: Array(14).fill([])
        },
        type: selectedDietType.length > 0 ? selectedDietType[0] : dietName // Use first diet type or fallback to dietName
    };

    const mealTable = document.getElementById('mealTable');
    const rows = mealTable.querySelectorAll('tbody tr');
    console.log(`saveDietAsTemplate - Number of rows found: ${rows.length}`);

    if (rows.length !== 14) {
        console.error(`Expected 14 rows, found ${rows.length}`);
        alert('جدول باید دقیقاً 14 ردیف داشته باشد تا 14 گزینه در هر وعده ثبت شود.');
        return;
    }

    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: jsonString,
            diet_name: dietName,
            calorie_range: calorieRange,
            company_name: companyName,
            city: city,
            is_user_template: isUserTemplate,
            bacteria_types: selectedBacteria,
            diet_types: selectedDietType,
            diseases: selectedDiseases,
            allergic: selectedAllergic
        }),
        success: function(response) {
            alert('Diet template saved successfully!');
            templateModal2.style.display = 'none';
        },
        error: function(response) {
            alert('Error saving the diet template: ' + (response.error || 'Unknown error'));
        }
    });
}

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

    foodItems.forEach((item, index) => {
        const amount_g = parseFloat(item.dataset.amount_g) || (cellData && parseFloat(cellData.amounts[index])) || 0;
        
        // Get energy from different sources, prioritizing stored data
        let energy = Math.round((parseFloat(item.dataset.energy) || 0) * 100) / 100 || (cellData && parseFloat(cellData.caloriesList[index])) || 0;
        
        // CRITICAL FIX: If energy is 0 or missing, recalculate using the legacy formula
        if (energy === 0 && amount_g > 0) {
            // Try to get energy_per_100g from the food item's dataset or cellData.foods
            let energyPer100g = 0;
            
            if (cellData && cellData.foods && cellData.foods[index]) {
                energyPer100g = parseFloat(cellData.foods[index].Energy || cellData.foods[index].Calories || 0);
            }
            
            if (energyPer100g > 0 && amount_g > 0) {
                energy = calculateFoodItemEnergy(energyPer100g, amount_g);
                console.log(`Template save - Recalculated energy for ${item.innerText}: ${energyPer100g} per 100g * ${amount_g}g / 100 = ${energy}`);
            }
        }
        
        mealEntry.ingredient.push({
            name: item.innerText.split(' (')[0],
            home_unit: item.dataset.home_unit || (cellData && cellData.homeUnits[index]) || "",
            amount_in_home_unit: parseFloat(item.dataset.amount_home_unit) || (cellData && parseFloat(cellData.amountHomeUnits[index])) || 0,
            amount_g: amount_g,
            protein: Math.round((parseFloat(item.dataset.protein) || 0) * 100) / 100 || (cellData && cellData.proteinList[index]) || 0,
            energy: energy, // Use the corrected energy value
            carbohydrate: Math.round((parseFloat(item.dataset.carbohydrate) || 0) * 100) / 100 || (cellData && parseFloat(cellData.carbohydratesList[index]) || 0),
            fat: Math.round((parseFloat(item.dataset.fat) || 0) * 100) / 100 || (cellData && parseFloat(cellData.fatList[index])) || 0,
            food_code: parseInt(item.dataset.food_code, 10) || (cellData && cellData.foodCodes[index]) || 0
        });
    });
    return mealEntry.ingredient.length > 0 ? [mealEntry] : [];
}

        // function getMealEntry(cell) {
        //     return extractMealData(cell); // Reuse logic for consistency
        // }
    </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) {
            console.log('updateRowNutrientDetails called for row:', cardNumber);
            const nutrientSummaryCell = $(`#mealTable tbody tr:nth-child(${cardNumber}) .nutrient-summary`);
            nutrientSummaryCell.empty();

            const cells = [
                $(`#mealTable tbody tr:nth-child(${cardNumber}) td:nth-child(3)`), // Breakfast
                $(`#mealTable tbody tr:nth-child(${cardNumber}) td:nth-child(4)`), // Lunch
                $(`#mealTable tbody tr:nth-child(${cardNumber}) td:nth-child(5)`), // Dinner
                $(`#mealTable tbody tr:nth-child(${cardNumber}) td:nth-child(6)`), // Snack1
                $(`#mealTable tbody tr:nth-child(${cardNumber}) td:nth-child(7)`)  // Snack2
            ];

            let totalFat = 0, totalCalories = 0, totalProtein = 0, totalCarbohydrates = 0;

            cells.forEach((cell, index) => {
                const cellData = cell.data('cellData') || {};
                console.log(`Cell ${index} data:`, cellData);
                
                // Use the calculated values from the diet data
                const cellFat = parseFloat(cellData.fat) || 0;
                const cellCalories = parseFloat(cellData.calories) || 0;
                const cellProtein = parseFloat(cellData.protein) || 0;
                const cellCarbohydrates = parseFloat(cellData.carbohydrate) || 0;
                
                totalFat += cellFat;
                totalCalories += cellCalories;
                totalProtein += cellProtein;
                totalCarbohydrates += cellCarbohydrates;
                

            });



            nutrientSummaryCell.append(`
                <div style="background-color: #e6e6fa; padding: 5px; border-radius: 8px; color: black; font-size: small;">
                    <span style="color: #5CC936;">چربی: ${totalFat.toFixed(2)}g</span><br>
                    <span style="color: #7366E3;">کالری: ${totalCalories.toFixed(2)}kcal</span><br>
                    <span style="color: #FF9900;">پروتئین: ${totalProtein.toFixed(2)}g</span><br>
                    <span style="color: #28CCF7;">کربوهیدرات: ${totalCarbohydrates.toFixed(2)}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;
        let selectedMonths = []; // Persian month filter

        // Shared energy calculation utility (matching legacy diets.html behavior)
        function calculateFoodItemEnergy(energyPer100g, amountInGrams) {
            // Legacy formula: Math.round(parseFloat(energyPer100g) * amountInGrams / 100) || 0
            const energyPer100gFloat = parseFloat(energyPer100g) || 0;
            const amountInGramsFloat = parseFloat(amountInGrams) || 0;
            
            if (energyPer100gFloat === 0 || amountInGramsFloat === 0) {
                return 0;
            }
            
            return Math.round(energyPer100gFloat * amountInGramsFloat / 100);
        }

        // Function to update month filter
        function updateMonthFilter() {
            const dropdown = document.getElementById('monthFilterDropdown');
            if (dropdown) {
                selectedMonths = Array.from(dropdown.selectedOptions).map(option => option.value);
                console.log('Selected months:', selectedMonths);
            }
            // No need to fetch cards here since this is for diet generation, not card filtering
        }

        // Initialize month filter dropdown with change event listener
        document.addEventListener('DOMContentLoaded', function() {
            const monthDropdown = document.getElementById('monthFilterDropdown');
            if (monthDropdown) {
                monthDropdown.addEventListener('change', updateMonthFilter);
            }
        });

        // 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);
        }

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

        // Allow Enter key to trigger search
        document.getElementById('foodSearch').addEventListener('keypress', function(event) {
            if (event.key === 'Enter') {
                event.preventDefault();
                searchFoods();
            }
        });

        document.addEventListener('DOMContentLoaded', function() {
            fetchCardPage(1);
            fetchFoodPage(1);
        
            initializeCardItemEventListeners();
            initializeFoodItemEventListeners();
        
            console.log("Fetching pre-saved user diet tags");
        

            $.ajax({
                url: '/panel/assistant/get/user/diet/tags/',
                type: 'POST',
                headers: { 'X-CSRFToken': window.CSRF_TOKEN },
                data: JSON.stringify({ patient_id: patient_id }),
                contentType: 'application/json',
                success: function(response) {
                    window.userDietData = response;
                    console.log('User diet data from profile:', window.userDietData);
                    // updateDietTagsOnPage(window.userDietData); // Your function to display tags
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching user diet data:', status, error);
                    console.error('Response:', xhr.responseText);
                },
                complete: function(xhr, status) {
                    console.log('AJAX complete:', status, xhr.status, xhr.responseText);
                },
                timeout: 5000
            });
        });


        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)}`;
            }
        
            // Show loading indicator
            const cardsListContainer = $('#cardsList');
            const originalContent = cardsListContainer.html();
            cardsListContainer.html(`
                <div style="text-align: center; padding: 40px; color: #666;">
                    <i class="fa fa-spinner fa-spin" style="font-size: 32px; color: #009A6E; margin-bottom: 15px;"></i>
                    <div style="font-size: 16px; font-family: 'IranSansWeb', Arial, sans-serif;">در حال جستجوی کارت‌ها...</div>
                </div>
            `);
            
            // 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) {
                    cardsListContainer.html(originalContent);
                    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');
            });
        });

        // Function to calculate and display Protein, Fat, and Carbohydrate for cards
        function calculateCardNutrients() {
            const cards = document.querySelectorAll('.card');
            
            // Show loading indicators for all cards
            cards.forEach(card => {
                const nutrientsSummary = card.querySelector('.card-nutrients-summary');
                if (!nutrientsSummary) return;
                
                // Show loading spinners
                const proteinSpinner = nutrientsSummary.querySelector('.protein-value .loading-spinner');
                const fatSpinner = nutrientsSummary.querySelector('.fat-value .loading-spinner');
                const carbSpinner = nutrientsSummary.querySelector('.carb-value .loading-spinner');
                const proteinText = nutrientsSummary.querySelector('.protein-value .value-text');
                const fatText = nutrientsSummary.querySelector('.fat-value .value-text');
                const carbText = nutrientsSummary.querySelector('.carb-value .value-text');
                
                if (proteinSpinner) proteinSpinner.style.display = 'inline-block';
                if (fatSpinner) fatSpinner.style.display = 'inline-block';
                if (carbSpinner) carbSpinner.style.display = 'inline-block';
                if (proteinText) proteinText.style.display = 'none';
                if (fatText) fatText.style.display = 'none';
                if (carbText) carbText.style.display = 'none';
            });
            
            // Use setTimeout to show the calculation is happening (even if it's fast)
            setTimeout(() => {
                cards.forEach(card => {
                    const nutrientsSummary = card.querySelector('.card-nutrients-summary');
                    if (!nutrientsSummary) return;
                    
                    const foodItems = card.querySelectorAll('.card-items .list-group-item');
                    let totalProtein = 0;
                    let totalFat = 0;
                    let totalCarb = 0;
                    
                    foodItems.forEach(item => {
                        const protein = parseFloat(item.getAttribute('data-protein')) || 0;
                        const fat = parseFloat(item.getAttribute('data-fat')) || 0;
                        const carb = parseFloat(item.getAttribute('data-carbohydrate')) || 0;
                        
                        totalProtein += protein;
                        totalFat += fat;
                        totalCarb += carb;
                    });
                    
                    // Round to 1 decimal place
                    totalProtein = Math.round(totalProtein * 10) / 10;
                    totalFat = Math.round(totalFat * 10) / 10;
                    totalCarb = Math.round(totalCarb * 10) / 10;
                    
                    // Update the display
                    const proteinSpinner = nutrientsSummary.querySelector('.protein-value .loading-spinner');
                    const fatSpinner = nutrientsSummary.querySelector('.fat-value .loading-spinner');
                    const carbSpinner = nutrientsSummary.querySelector('.carb-value .loading-spinner');
                    const proteinText = nutrientsSummary.querySelector('.protein-value .value-text');
                    const fatText = nutrientsSummary.querySelector('.fat-value .value-text');
                    const carbText = nutrientsSummary.querySelector('.carb-value .value-text');
                    
                    // Hide spinners and show values
                    if (proteinSpinner) proteinSpinner.style.display = 'none';
                    if (fatSpinner) fatSpinner.style.display = 'none';
                    if (carbSpinner) carbSpinner.style.display = 'none';
                    
                    if (proteinText) {
                        proteinText.textContent = totalProtein.toLocaleString('fa-IR');
                        proteinText.style.display = 'inline';
                    }
                    if (fatText) {
                        fatText.textContent = totalFat.toLocaleString('fa-IR');
                        fatText.style.display = 'inline';
                    }
                    if (carbText) {
                        carbText.textContent = totalCarb.toLocaleString('fa-IR');
                        carbText.style.display = 'inline';
                    }
                });
            }, 300); // Small delay to show the calculation process
        }

    </script>



{% endblock %}