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

{% block header.add_script %}
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
{% endblock %}

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

{% block content %}
    <div class="content">
  <div class="row">
    <div class="col-sm-4 col-3">
      <h4 class="page-title" style="font-size: x-large; color: #009A6E">چالش ها</h4>
    </div>
    <div class="col-sm-8 col-9 text-right m-b-20">
      <a href="#" class="btn btn btn-primary btn-rounded float-right btn-submit" data-toggle="modal" data-target="#addChallengeModal">
        <i></i> چالش جدید
      </a>
    </div>
  </div>
  <div class="row">
    {% for challenge, participants_list, groups, audience_users, matched_foods in challenges %}
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            <h5 class="card-title">{{ challenge.name }}</h5>
          </div>
          <div class="card-body">
            <!-- Challenge details -->
            {% if challenge.category == 0 %}
                <p class="titles-challenge" dir="rtl"><strong>گروه :</strong>غذا</p>
                {% if challenge.sub_category == 0 %}
                    <p class="titles-challenge" dir="rtl"><strong>زیر گروه :</strong>میکروبیوم</p>
                    <p class="titles-challenge" dir="rtl"><strong>امتیاز میکروبیومی :</strong> {{ challenge.microbiome }}</p>
                {% elif challenge.sub_category == 1 %}
                    <p class="titles-challenge" dir="rtl"><strong>زیر گروه :</strong>چربی</p>
                    <p class="titles-challenge" dir="rtl"><strong>مقدار چربی :</strong> {{ challenge.fat }}</p>
                {% elif challenge.sub_category == 2 %}
                    <p class="titles-challenge" dir="rtl"><strong>زیر گروه :</strong>کالری</p>
                    <p class="titles-challenge" dir="rtl"><strong>مقدار کالری :</strong> {{ challenge.calorie }}</p>
                {% elif challenge.sub_category == 3 %}
                    <p class="titles-challenge" dir="rtl"><strong>زیر گروه :</strong>پروتئین</p>
                    <p class="titles-challenge" dir="rtl"><strong>مقدار پروتئین :</strong> {{ challenge.protein }}</p>
                {% elif challenge.sub_category == 4 %}
                    <p class="titles-challenge" dir="rtl"><strong>زیر گروه :</strong>کربوهیدرات</p>
                    <p class="titles-challenge" dir="rtl"><strong>مقدار کربوهیدرات :</strong> {{ challenge.carbohydrate }}</p>
                {% elif challenge.sub_category == 6 %}
                  <p class="titles-challenge" dir="rtl"><strong>زیر گروه :</strong> کدهای غذا</p>
                  {% if matched_foods %}
                    <p class="titles-challenge" dir="rtl"><strong>کدهای وارد شده:</strong></p>
                    <ul>
                      {% for food in matched_foods %}
                        <li>
                          {{ food.FA_Name }} (کد: {{ food.Data_Base_Number }})
                        </li>
                      {% endfor %}
                    </ul>
                  {% endif %}
                {% else %}
                    <p class="titles-challenge" dir="rtl"><strong>زیر گروه :</strong>انتخاب از کارت</p>
                    <p class="titles-challenge" dir="rtl"><strong>شماره کارت ها :</strong> یک و سه</p>
                {% endif %}
            {% elif challenge.category == 1 %}
                <p class="titles-challenge" dir="rtl"><strong>گروه :</strong>قند خون</p>
                {% if challenge.sub_category == 0 %}
                    <p class="titles-challenge" dir="rtl"><strong>زیر گروه :</strong>بیشتر از</p>
                    <p class="titles-challenge" dir="rtl"><strong>قند خون بیشتر از :</strong> {{ challenge.more_than }}</p>
                {% elif challenge.sub_category == 1 %}
                    <p class="titles-challenge" dir="rtl"><strong>زیر گروه :</strong>تعداد ثبت</p>
                    <p class="titles-challenge" dir="rtl"><strong>تعداد ثبت قند خون :</strong> {{ challenge.tedad_sabt }}</p>
                {% endif %}
            {% elif challenge.category == 2 %}
                <p class="titles-challenge" dir="rtl"><strong>گروه :</strong>ورزش</p>
                {% if challenge.sub_category == 0 %}
                    <p class="titles-challenge" dir="rtl"><strong>زیر گروه :</strong>قدم ها</p>
                    <p class="titles-challenge" dir="rtl"><strong>تعداد قدم ها :</strong> {{ challenge.steps }}</p>
                {% elif challenge.sub_category == 1 %}
                    <p class="titles-challenge" dir="rtl"><strong>زیر گروه :</strong>سوزاندن کالری</p>
                    <p class="titles-challenge" dir="rtl"><strong>مقدار سوزاندن کالری :</strong> {{ challenge.calorie_burnt }}</p>
                {% elif challenge.sub_category == 2 %}
                    <p class="titles-challenge" dir="rtl"><strong>زیر گروه :</strong>مدت زمان</p>
                    <p class="titles-challenge" dir="rtl"><strong>مدت زمان ورزش :</strong> {{ challenge.exercise_duration }}</p>
                {% endif %}
            {% elif challenge.category == 3 %}
                <p class="titles-challenge" dir="rtl"><strong>گروه :</strong>فشار خون</p>
                {% if challenge.sub_category == 0 %}
                    <p class="titles-challenge" dir="rtl"><strong>زیر گروه :</strong>بیشتر از</p>
                    <p class="titles-challenge" dir="rtl"><strong>فشار خون بیشتر از :</strong> {{ challenge.more_than }}</p>
                {% elif challenge.sub_category == 1 %}
                    <p class="titles-challenge" dir="rtl"><strong>زیر گروه :</strong>تعداد ثبت</p>
                    <p class="titles-challenge" dir="rtl"><strong>تعداد ثبت فشار خون :</strong> {{ challenge.tedad_sabt }}</p>
                {% endif %}
            {% elif challenge.category == 4 %}
                <p class="titles-challenge" dir="rtl"><strong>گروه :</strong>خواب</p>
                {% if challenge.sub_category == 0 %}
                    <p class="titles-challenge" dir="rtl"><strong>زیر گروه :</strong>مدت زمان خواب</p>
                    <p class="titles-challenge" dir="rtl"><strong>مدت خواب :</strong> {{ challenge.sleep_duration }}</p>
                {% elif challenge.sub_category == 1 %}
                    <p class="titles-challenge" dir="rtl"><strong>زیر گروه :</strong>ساعت شروع خواب</p>
                    <p class="titles-challenge" dir="rtl"><strong>شروع خواب :</strong> {{ challenge.sleep_start_hour }}</p>
                {% elif challenge.sub_category == 2 %}
                    <p class="titles-challenge" dir="rtl"><strong>زیر گروه :</strong>ساعت پایان خواب</p>
                    <p class="titles-challenge" dir="rtl"><strong>پایان خواب :</strong> {{ challenge.sleep_end_hour }}</p>
                {% elif challenge.sub_category == 3 %}
                    <p class="titles-challenge" dir="rtl"><strong>زیر گروه :</strong>ساعت شروع خواب و مدت زمان خواب</p>
                    <p class="titles-challenge" dir="rtl"><strong>مدت خواب :</strong> {{ challenge.sleep_duration }}</p>
                    <p class="titles-challenge" dir="rtl"><strong>شروع خواب :</strong> {{ challenge.sleep_start_hour }}</p>
                {% endif %}
            {% elif challenge.category == 5 %}
                <p class="titles-challenge" dir="rtl"><strong>گروه :</strong>آب</p>
                <p class="titles-challenge" dir="rtl"><strong>زیر گروه :</strong>تعداد ثبت</p>
                <p class="titles-challenge" dir="rtl"><strong>تعداد لیوان آب :</strong> {{ challenge.tedad_sabt }}</p>
            {% endif %}
            <p class="titles-challenge" dir="rtl"><strong>پاداش :</strong> {{ challenge.reward }}</p>
            <p class="titles-challenge" dir="rtl"><strong>ورودی :</strong> {{ challenge.fee }}</p>
            <p class="titles-challenge" dir="rtl"><strong>تاریخ شروع چالش :</strong> {{ challenge.start_deadline }}</p>
            <p class="titles-challenge" dir="rtl"><strong>تاریخ پایان چالش :</strong> {{ challenge.end_deadline }}</p>
            <p class="long-text titles-challenge" dir="rtl" title="{{ challenge.description }}"><strong>توضیحات :</strong> {{ challenge.description }}</p>
            <p class="long-text titles-challenge" dir="rtl"><strong>گروه‌های انتخاب شده :</strong></p>
              <ul class="participants-list text-right" dir="rtl">
                {% for group in groups %}
                  <li>{{ group.name }}</li>
                {% endfor %}
              </ul>
    
              <!-- Display Audience Users -->
              <p class="long-text titles-challenge" dir="rtl"><strong>کاربران انتخاب شده :</strong></p>
              <ul class="participants-list text-right" dir="rtl">
                {% for user in audience_users %}
                  <li>{{ user.profile.first_name }} {{ user.profile.last_name }}</li>
                {% endfor %}
              </ul>
            <hr>
            <!-- Participants list -->
            <p class="text-right titles-challenge" dir="rtl"><strong>شرکت کنندگان :</strong></p>
            <ul class="participants-list text-right" dir="rtl">
              {% for participant in participants_list %}
                <li>
                    <a href="{% url 'panel-assistant' %}show/patient/{{ participant.id }}/" style="color: #002626" target="_blank">
                        {{ participant.profile.first_name }}
                    </a>
                </li>
              {% endfor %}
            </ul>
          </div>
          <div class="card-footer">
            <a href="{% url 'panel-assistant-delete-challenge' challenge.id %}" class="btn btn-danger btn-sm delete-btn" style="border-radius: 10px">
              <i class="fa fa-trash"></i> حذف چالش
            </a>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
</div>


    <!-- Add Challenge Modal -->
    <div id="addChallengeModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{% url 'panel-assistant-add-challenge' %}" method="POST">
                    {% csrf_token %}
                    <div class="modal-header">
                        <h4 class="modal-title titles">افزودن چالش</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label dir="rtl" class="titles" for="category">گروه :</label>
                            <select class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" id="category" name="category" required>
                                <option value="">انتخاب کنید</option>
                                <option value="Food">غذا</option>
                                <option value="BS">قند خون</option>
                                <option value="Exercise">ورزش</option>
                                <option value="BP">فشار خون</option>
                                <option value="Sleep">خواب</option>
                                <option value="Water">آب</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label dir="rtl" class="titles" for="sub_category">زیر گروه :</label>
                            <select class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" id="sub_category" name="sub_category">
                                <!-- Subcategory options will be dynamically added here -->
                            </select>
                        </div>
                        <div class="extra-fields">
                            <div class="form-group" id="microbiome_" style="display: none;">
                                <label dir="rtl" class="titles" for="microbiome" style="color: #0B792F">میکروبیوم :</label>
                                <input type="text" class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" id="microbiome" name="microbiome">
                            </div>
                            <div class="form-group" id="fat_" style="display: none;">
                                <label dir="rtl" class="titles" for="fat" style="color: #0B792F">چربی :</label>
                                <input type="text" class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" id="fat" name="fat">
                            </div>
                            <div class="form-group" id="calorie_" style="display: none;">
                                <label dir="rtl" class="titles" for="calorie" style="color: #0B792F">کالری :</label>
                                <input type="text" class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" id="calorie" name="calorie">
                            </div>
                            <div class="form-group" id="protein_" style="display: none;">
                                <label dir="rtl" class="titles" for="protein" style="color: #0B792F">پروتئین :</label>
                                <input type="text" class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" id="protein" name="protein">
                            </div>
                            <div class="form-group" id="carbohydrate_" style="display: none;">
                                <label dir="rtl" class="titles" for="carbohydrate" style="color: #0B792F">کربوهیدرات :</label>
                                <input type="text" class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" id="carbohydrate" name="carbohydrate">
                            </div>
                            <div class="form-group" id="card_" style="display: none;">
                                <label dir="rtl" class="titles" for="card" style="color: #0B792F">انتخاب کارت :</label>
                                <input type="text" class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" id="card" name="card">
                            </div>
                            <div class="form-group" id="foodCodesContainer_" style="display: none;">
                                <label dir="rtl" class="titles" style="color: #0B792F">کدهای غذا :</label>

                                <!-- Container where multiple inputs go -->
                                <div id="foodCodesContainer">
                                    <!-- We'll dynamically append input fields for food codes here -->
                                </div>

                                <!-- A button to add a new food code input -->
                                <button type="button" class="btn btn-success" id="addFoodCodeBtn" style="margin-top: 10px; border-radius: 10px;">
                                    افزودن کد جدید
                                </button>
                            </div>
                            <div class="form-group" id="moreThan_" style="display: none;">
                                <label dir="rtl" class="titles" for="moreThan" style="color: #0B792F">بیشتر از :</label>
                                <input type="text" class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" id="moreThan" name="moreThan">
                            </div>
                            <div class="form-group" id="tedadSabt_" style="display: none;">
                                <label dir="rtl" class="titles" for="tedadSabt" style="color: #0B792F">تعداد ثبت :</label>
                                <input type="text" class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" id="tedadSabt" name="tedadSabt">
                            </div>
                            <div class="form-group" id="steps_" style="display: none;">
                                <label dir="rtl" class="titles" for="steps" style="color: #0B792F">تعداد قدم ها :</label>
                                <input type="text" class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" id="steps" name="steps">
                            </div>
                            <div class="form-group" id="calorieBurnt_" style="display: none;">
                                <label dir="rtl" class="titles" for="calorieBurnt" style="color: #0B792F">مقدار سوزاندن کالری :</label>
                                <input type="text" class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" id="calorieBurnt" name="calorieBurnt">
                            </div>
                            <div class="form-group" id="durationExercise_" style="display: none;">
                                <label dir="rtl" class="titles" for="durationExercise" style="color: #0B792F">مدت زمان ورزش :</label>
                                <input type="text" class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" id="durationExercise" name="durationExercise">
                            </div>
                            <div class="form-group" id="durationSleep" style="display: none;">
                                <label dir="rtl" class="titles" for="duration" style="color: #0B792F">مدت زمان خواب :</label>
                                <input type="text" class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" id="duration" name="duration">
                            </div>
                            <div class="form-group" id="startHourField" style="display: none;">
                                <label dir="rtl" class="titles" for="startHour" style="color: #0B792F">ساعت شروع خواب :</label>
                                <input type="text" class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" id="startHour" name="startHour">
                            </div>
                            <div class="form-group" id="endHourField" style="display: none;">
                                <label dir="rtl" class="titles" for="endHour" style="color: #0B792F">ساعت پایان خواب :</label>
                                <input type="text" class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" id="endHour" name="endHour">
                            </div>
                        </div>
                        <div class="form-group">
                            <label dir="rtl" class="titles" for="name">نام:</label>
                            <input type="text" class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" id="name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label dir="rtl" class="titles"  for="reward">پاداش:</label>
                            <input type="number" class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" id="reward" name="reward" required>
                        </div>
                        <div class="form-group">
                            <label dir="rtl" class="titles"  for="fee">جریمه:</label>
                            <input type="number" class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" id="fee" name="fee">
                        </div>
                        <div class="form-group">
                            <label dir="rtl" class="titles" for="audience_groups">انتخاب گروه‌های مخاطب:</label>
                            <div id="audience_groups" dir="rtl" class="text-right">
                              {% for group in groups %}
                                <div>
                                  <label style="font-size: 15px">
                                    <input type="checkbox" name="audience_groups" value="{{ group.id }}">
                                    {{ group.name }}
                                  </label>
                                </div>
                              {% endfor %}
                            </div>
                        </div>
                        <div class="form-group">
                            <label dir="rtl" class="titles" for="audience_users">انتخاب کاربران خارج از گروه‌ها:</label>
                            <div id="audience_users" dir="rtl" class="text-right">
                              {% for user in users_not_in_groups %}
                                <div>
                                  <label style="font-size: 14px">
                                    <input type="checkbox" name="audience_users" value="{{ user.id }}">
                                    {{ user.profile.first_name }} {{ user.profile.last_name }}
                                  </label>
                                </div>
                              {% endfor %}
                            </div>
                        </div>
                        <div class="form-group">
                            <label dir="rtl" class="titles"  for="start_deadline">تاریخ شروع:</label>
                            <input type="datetime-local" class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" id="start_deadline" name="start_deadline">
                        </div>
                        <div class="form-group">
                            <label dir="rtl" class="titles"  for="end_deadline">تاریخ پایان:</label>
                            <input type="datetime-local" class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" id="end_deadline" name="end_deadline">
                        </div>
                        <div class="form-group">
                            <label dir="rtl" class="titles" for="description">توضیحات:</label>
                            <input type="text" class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" id="description" name="description" required>
                        </div>
                    </div>
                    <div class="modal-footer align-items-center">
                        <button type="submit" class="btn btn-primary btn-submit">ذخیره</button>
                        <button type="button" class="btn btn-secondary btn-close" data-dismiss="modal">بستن</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <style>
    .ui-autocomplete {
        z-index: 99999 !important;
    }

    .titles{
        text-align: right;
        font-size: 18px;
        margin-bottom: 10px;
        color: #009A6E;
        display: flex;
        align-items: start;
        justify-content: start;
      }
        .align-items-center {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .btn-submit {
            background-color: #009A6E; /* Blue color, you can customize */
            border-color: #009A6E;
            color: #fff; /* Text color */
            padding: 10px 20px; /* Adjust padding for better spacing */
            border-radius: 10px; /* Rounded corners */
            text-decoration: none; /* Remove underline from link */
            transition: background-color 0.3s ease; /* Smooth transition on hover */
            display: inline-flex; /* Align icon and text horizontally */
            align-items: center; /* Center alignment for icon and text */
        }
        .btn-close {
            background-color: #4b4b54; /* Blue color, you can customize */
            border-color: #4b4b54;
            color: #fff; /* Text color */
            padding: 10px 20px; /* Adjust padding for better spacing */
            border-radius: 10px; /* Rounded corners */
            text-decoration: none; /* Remove underline from link */
            transition: background-color 0.3s ease; /* Smooth transition on hover */
            display: inline-flex; /* Align icon and text horizontally */
            align-items: center; /* Center alignment for icon and text */
        }
        .btn-submit:hover {
            background-color: #009A6Eda; /* Darker shade of blue */
            color: #fff; /* Text color on hover */
        }
        .btn-submit:focus {
            background-color: #009A6Eda; /* Darker shade of blue */
            color: #fff; /* Text color on hover */
        }

        .long-text {
        max-width: 800px; /* Limiting width for long text */
        max-height: 50px;
        overflow: hidden;
        text-overflow: ellipsis; /* Truncate text with ellipsis */
        }

        .card {
            border: 1px solid #009A6E;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            max-height: 700px; /* Adjust as needed */
            min-height: 550px; /* Adjust as needed */
            overflow-y: auto;
        }

        .card-header {
            padding: 15px;
            background-color: #f8f9fa;
        }

        .card-body {
            padding: 15px;
        }

        .card-footer {
            background-color: #f8f9fa;
            text-align: left;
        }

        .participants-list {
            font-size: small;
            margin-top: 10px;
            padding-left: 20px;
            column-count: 3; /* Adjust number of columns */
            column-gap: 20px; /* Adjust gap between columns */
            /* Optionally, limit max-height for participants list */
            max-height: 500px; /* Adjust as needed */
            overflow-y: auto; /* Add vertical scrollbar if needed */
        }

        .delete-btn {
            color: #fff;
        }

        .card-title {
            text-align: center;
            color: #009A6E;
            font-size: x-large !important
        }

        .titles-challenge {
            font-size: medium;
            text-align: right;
        }

</style>
{% endblock %}

{% block script %}

    <script src="{% static 'panel/assistant' %}/js/jquery-3.2.1.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/popper.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/bootstrap.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/jquery.slimscroll.js"></script>
    <script src="{% static 'panel/assistant' %}/js/select2.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/jquery.dataTables.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/dataTables.bootstrap4.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/moment.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/bootstrap-datetimepicker.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/app.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const categorySelect = document.getElementById("category");
            const subCategorySelect = document.getElementById("sub_category");
            const microbiome_ = document.getElementById("microbiome_");
            const fat_ = document.getElementById("fat_");
            const calorie_ = document.getElementById("calorie_");
            const protein_ = document.getElementById("protein_");
            const carbohydrate_ = document.getElementById("carbohydrate_");
            const card_ = document.getElementById("card_");
            const moreThan_ = document.getElementById("moreThan_");
            const tedadSabt_ = document.getElementById("tedadSabt_");
            const steps_ = document.getElementById("steps_");
            const calorieBurnt_ = document.getElementById("calorieBurnt_");
            const durationExercise_ = document.getElementById("durationExercise_");
            const durationSleep = document.getElementById("durationSleep");
            const startHourField = document.getElementById("startHourField");
            const endHourField = document.getElementById("endHourField");


            // Define subcategory options based on category selection
            const subcategories = {
                Food: ["", "میکروبیوم", "چربی", "کالری", "پروتئین", "کربوهیدرات", "انتخاب کارت", "کدهای غذا"],
                BS: ["", "بیشتر از", "تعداد ثبت"],
                Exercise: ["", "قدم", "سوزاندن کالری", "مدت زمان"],
                BP: ["", "بیشتر از", "تعداد ثبت"],
                Sleep: ["", "مدت زمان خواب", "ساعت شروع خواب", "ساعت پایان خواب", "ساعت شروع خواب و مدت زمان خواب"],
                Water: ["", "تعداد لیوان"],
            };

            // Function to update subcategory options based on selected category
            function updateSubcategories() {
                const selectedCategory = categorySelect.value;
                const selectedSubCategory = subCategorySelect.value;
                const savedSubCategory = subCategorySelect.value;
                const foodCodesContainer_ = document.getElementById("foodCodesContainer_");

                // Hide all additional fields initially
                microbiome_.style.display = "none";
                fat_.style.display = "none";
                calorie_.style.display = "none";
                protein_.style.display = "none";
                carbohydrate_.style.display = "none";
                card_.style.display = "none";
                moreThan_.style.display = "none";
                tedadSabt_.style.display = "none";
                steps_.style.display = "none";
                calorieBurnt_.style.display = "none";
                durationExercise_.style.display = "none";
                durationSleep.style.display = "none";
                startHourField.style.display = "none";
                endHourField.style.display = "none";
                foodCodesContainer_.style.display = "none";

                // Clear previous options
                subCategorySelect.innerHTML = "";

                if (selectedCategory in subcategories) {
                    subcategories[selectedCategory].forEach(function (subcategory) {
                        const option = document.createElement("option");
                        option.textContent = subcategory;
                        option.value = subcategory;
                        subCategorySelect.appendChild(option);
                    });

                    // Restore the selected subcategory
                    subCategorySelect.value = savedSubCategory;

                    // Show additional field based on subcategory selection
                    if (selectedCategory === "Food" && selectedSubCategory === "میکروبیوم") {
                        microbiome_.style.display = "block";
                    }
                    if (selectedCategory === "Food" && selectedSubCategory === "چربی") {
                        fat_.style.display = "block";
                    }
                    if (selectedCategory === "Food" && selectedSubCategory === "کالری") {
                        calorie_.style.display = "block";
                    }
                    if (selectedCategory === "Food" && selectedSubCategory === "پروتئین") {
                        protein_.style.display = "block";
                    }
                    if (selectedCategory === "Food" && selectedSubCategory === "کربوهیدرات") {
                        carbohydrate_.style.display = "block";
                    }
                    if (selectedCategory === "Food" && selectedSubCategory === "انتخاب کارت") {
                        card_.style.display = "block";
                    }
                    if (selectedCategory === "Food" && selectedSubCategory === "کدهای غذا") {
                        foodCodesContainer_.style.display = "block";
                    }
                    if ((selectedCategory === "BS" || selectedCategory === "BP") && selectedSubCategory === "بیشتر از") {
                        moreThan_.style.display = "block";
                    }
                    if ((selectedCategory === "BS" || selectedCategory === "BP") && selectedSubCategory === "تعداد ثبت") {
                        tedadSabt_.style.display = "block";
                    }
                    if (selectedCategory === "Water" && selectedSubCategory === "تعداد لیوان") {
                        tedadSabt_.style.display = "block";
                    }
                    if (selectedCategory === "Exercise" && selectedSubCategory === "قدم") {
                        steps_.style.display = "block";
                    }
                    if (selectedCategory === "Exercise" && selectedSubCategory === "سوزاندن کالری") {
                        calorieBurnt_.style.display = "block";
                    }
                    if (selectedCategory === "Exercise" && selectedSubCategory === "مدت زمان") {
                        durationExercise_.style.display = "block";
                    }
                    if (selectedCategory === "Sleep" && selectedSubCategory === "مدت زمان خواب") {
                        durationSleep.style.display = "block";
                    }
                    if (selectedCategory === "Sleep" && selectedSubCategory === "ساعت شروع خواب") {
                        startHourField.style.display = "block";
                    }
                    if (selectedCategory === "Sleep" && selectedSubCategory === "ساعت پایان خواب") {
                        endHourField.style.display = "block";
                    }
                    if (selectedCategory === "Sleep" && selectedSubCategory === "ساعت شروع خواب و مدت زمان خواب") {
                        durationSleep.style.display = "block";
                        startHourField.style.display = "block";
                    }
                }
            }

            const addFoodCodeBtn = document.getElementById("addFoodCodeBtn");
            const foodCodesContainer = document.getElementById("foodCodesContainer");

            function attachAutocompleteTo(inputElem) {
              // Use jQuery UI Autocomplete
              $(inputElem).autocomplete({
                  appendTo: "#addChallengeModal",
                  source: function(request, response) {
                      $.ajax({
                          url: "{% url 'panel-assistant-food-auto-complete' %}",
                          dataType: "json",
                          data: {
                              term: request.term  // jQuery UI uses 'term'
                          },
                          success: function(data) {
                              console.log("Autocomplete data:", data);
                              response(data); // pass array of {label, value} objects
                          }
                      });
                  },
                  minLength: 1,  // start searching after 1 character
                  select: function(event, ui) {
                      // ui.item.value is the 'value' we returned in JSON
                      // By default, it sets the input’s value to that.
                      console.log("Selected food code:", ui.item.value);
                  }
              });
          }

            if (addFoodCodeBtn) {
                addFoodCodeBtn.addEventListener("click", function () {
                    // Create a new input element
                    const newInput = document.createElement("input");
                    newInput.type = "text";
                    newInput.name = "food_codes[]"; // crucial: so we can getlist('food_codes[]') in view
                    newInput.classList.add("form-control", "text-right");
                    newInput.style.direction = "rtl";
                    newInput.style.fontSize = "16px";
                    newInput.style.backgroundColor = "#cfd8e6";
                    newInput.style.borderRadius = "10px";
                    newInput.style.marginTop = "5px";

                    foodCodesContainer.appendChild(newInput);

                    // Now attach autocomplete
                    attachAutocompleteTo(newInput);
                });
            }
            // Event listener for category selection change
            categorySelect.addEventListener("change", updateSubcategories);
            subCategorySelect.addEventListener("change", updateSubcategories);

            // Initialize subcategories based on default category selection
            updateSubcategories();
        });
    </script>
{% endblock %}