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

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

{% block content %}
    <div class="content">
      <div class="row">
        <div class="col-sm-6 col-6">
          <h4 class="page-title" style="font-size: x-large; color: #009A6E">لیست غذاها</h4>
        </div>
        <div class="col-sm-6 col-6 text-right m-b-20">
          <a href="{% url 'panel-assistant-food-create' %}" class="btn btn-primary btn-submit" style="border-radius:10px;">افزودن غذای جدید</a>
        </div>
      </div>

      <!-- Search Box -->
      <div class="row" style="margin-bottom: 20px;">
        <div class="col-md-4">
          <input type="text" id="foodSearchInput" class="form-control" style="border-radius:10px;"
                 placeholder="جستجو..." autocomplete="off">
        </div>
      </div>

      <div class="row">
        <div class="col-md-12">
          <div class="card" style="border-radius:10px;">
            <div class="card-header" style="text-align:center;">
              <h5 class="card-title" style="color:#009A6E;">لیست غذاها</h5>
            </div>
            <div class="card-body">
              <table class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th><a href="#" class="sortable" data-field="FA_Name">کد</a></th>
                    <th><a href="#" class="sortable" data-field="FA_Name">نام</a></th>
                    <th><a href="#" class="sortable" data-field="Calories">کالری</a></th>
                    <th><a href="#" class="sortable" data-field="Protein_g">پروتئین</a></th>
                    <th><a href="#" class="sortable" data-field="Fat_g">چربی</a></th>
                    <th><a href="#" class="sortable" data-field="Carbohydrates_g">کربوهیدرات</a></th>
                    <th><a href="#" class="sortable" data-field="Fiber_g">فیبر</a></th>
                    <th>عملیات</th>
                  </tr>
                </thead>
                <tbody id="foodTableBody">
                  {% for food in page_obj %}
                  <tr>
                    <td>{{ food.Data_Base_Number }}</td>
                    <td>{{ food.FA_Name }}</td>
                    <td>{{ food.Calories }}</td>
                    <td>{{ food.Protein_g }}</td>
                    <td>{{ food.Fat_g }}</td>
                    <td>{{ food.Carbohydrates_g }}</td>
                    <td>{{ food.Fiber_g }}</td>
                    <td>
                      <a href="{% url 'panel-assistant-food-edit' food.pk %}" class="btn btn-sm btn-warning" style="border-radius:10px;">ویرایش</a>

                      <a href="{% url 'panel-assistant-food-duplicate' food.pk %}" class="btn btn-sm btn-info" style="border-radius:10px;">کپی</a>
                        <!-- Delete form trigger -->
                      <form method="post" action="{% url 'panel-assistant-food-delete' food.pk %}" style="display:inline;" onsubmit="return confirm('آیا مطمئن هستید؟');">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-sm btn-danger" style="border-radius:10px;">حذف</button>
                      </form>
                    </td>
                  </tr>
                  {% empty %}
                  <tr><td colspan="7" class="text-center">هیچ آیتمی یافت نشد.</td></tr>
                  {% endfor %}
                </tbody>
              </table>
              <div class="pagination-container text-center">
                  <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center">
                      {% if page_obj.has_previous %}
                        <!-- First Page -->
                        <li class="page-item">
                          <a class="page-link" href="?page=1{% if request.GET.sort_field %}&sort_field={{ request.GET.sort_field }}{% endif %}{% if request.GET.sort_order %}&sort_order={{ request.GET.sort_order }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" aria-label="First">
                            <span aria-hidden="true">&laquo;&laquo;</span>
                          </a>
                        </li>
                        <!-- Previous Page -->
                        <li class="page-item">
                          <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.sort_field %}&sort_field={{ request.GET.sort_field }}{% endif %}{% if request.GET.sort_order %}&sort_order={{ request.GET.sort_order }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                          </a>
                        </li>
                      {% endif %}

                      <!-- Numeric Page Links -->
                      {% for page_num in page_obj.paginator.page_range %}
                        {% if page_num == page_obj.number %}
                          <li class="page-item active">
                            <span class="page-link">{{ page_num }}</span>
                          </li>
                        {% elif page_num >= page_obj.number|add:'-2' and page_num <= page_obj.number|add:'2' %}
                          <li class="page-item">
                            <a class="page-link" href="?page={{ page_num }}{% if request.GET.sort_field %}&sort_field={{ request.GET.sort_field }}{% endif %}{% if request.GET.sort_order %}&sort_order={{ request.GET.sort_order }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">{{ page_num }}</a>
                          </li>
                        {% endif %}
                      {% endfor %}

                      {% if page_obj.has_next %}
                        <!-- Next Page -->
                        <li class="page-item">
                          <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.sort_field %}&sort_field={{ request.GET.sort_field }}{% endif %}{% if request.GET.sort_order %}&sort_order={{ request.GET.sort_order }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                          </a>
                        </li>
                        <!-- Last Page -->
                        <li class="page-item">
                          <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.sort_field %}&sort_field={{ request.GET.sort_field }}{% endif %}{% if request.GET.sort_order %}&sort_order={{ request.GET.sort_order }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" aria-label="Last">
                            <span aria-hidden="true">&raquo;&raquo;</span>
                          </a>
                        </li>
                      {% endif %}
                    </ul>
                  </nav>
                </div>

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

    <style>
        .table thead th {
            position: sticky;
            top: 0;
            background-color: #f8f9fa;
            z-index: 2;
        }

          .btn-submit {
            background-color: #009A6E;
            border-color: #009A6E;
            color: #fff;
            padding: 10px 20px;
            border-radius: 10px;
            text-decoration: none;
            transition: background-color 0.3s ease;
            display: inline-flex;
            align-items: center;
          }

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

          .sortable {
            color: #009A6E;
            text-decoration: none;
            font-weight: bold;
          }
          
          @media (max-width: 768px) {
            .table thead {
                display: none;
            }
            .table tbody tr {
                display: flex;
                flex-direction: column;
                margin-bottom: 1rem;
                border: 1px solid #ddd;
                border-radius: 10px;
                padding: 10px;
            }
            .table tbody td {
                display: flex;
                justify-content: space-between;
                margin-bottom: 0.5rem;
            }
            .table tbody td:last-child {
                margin-bottom: 0;
            }
        }

    </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/app.js"></script>
    <script>
    // Handle sorting
    $(document).ready(function() {
        function updateURLParameter(url, param, paramVal) {
            var newAdditionalURL = "";
            var tempArray = url.split("?");
            var baseURL = tempArray[0];
            var additionalURL = tempArray[1] ? tempArray[1] : "";
            var temp = "";
            if (additionalURL) {
                var tempArray = additionalURL.split("&");
                for (var i=0; i<tempArray.length; i++){
                    if(tempArray[i].split('=')[0] != param){
                        newAdditionalURL += temp + tempArray[i];
                        temp = "&";
                    }
                }
            }
            var rows_txt = temp + param + "=" + paramVal;
            return baseURL + "?" + newAdditionalURL + rows_txt;
        }

        // Extract current sort_field and sort_order from URL
        const urlParams = new URLSearchParams(window.location.search);
        let currentSortField = urlParams.get('sort_field') || 'FA_Name';
        let currentSortOrder = urlParams.get('sort_order') || 'asc';

        $('.sortable').each(function() {
            let field = $(this).data('field');
            if (field === currentSortField) {
                // Indicate current sorting
                $(this).append(currentSortOrder === 'asc' ? ' ▲' : ' ▼');
            }
        });

        $('.sortable').on('click', function(e) {
            e.preventDefault();
            let field = $(this).data('field');
            let newOrder = 'asc';
            if (field === currentSortField) {
                // Toggle order
                newOrder = currentSortOrder === 'asc' ? 'desc' : 'asc';
            }
            window.location = updateURLParameter(
                updateURLParameter(window.location.href, 'sort_field', field),
                'sort_order', newOrder
            );
        });

        // Dynamic searching
        let typingTimer;
        const doneTypingInterval = 300; // ms
        const searchInput = $('#foodSearchInput');

        function fetchFoods() {
            const searchVal = searchInput.val().trim();
            let url = window.location.pathname + '?';
            if (searchVal) {
                url += 'search=' + encodeURIComponent(searchVal) + '&';
            }
            if (currentSortField) {
                url += 'sort_field=' + encodeURIComponent(currentSortField) + '&';
                url += 'sort_order=' + encodeURIComponent(currentSortOrder) + '&';
            }
            $.ajax({
                url: url,
                type: 'GET',
                success: function(response) {
                    const newDoc = new DOMParser().parseFromString(response, 'text/html');
                    const newTableBody = newDoc.querySelector('#foodTableBody').innerHTML;
                    $('#foodTableBody').html(newTableBody);
                    const newPagination = newDoc.querySelector('.pagination').innerHTML;
                    $('.pagination').html(newPagination);
                },
                error: function(xhr) {
                    console.error("Error searching foods");
                }
            });
        }

        searchInput.on('keyup', function() {
            clearTimeout(typingTimer);
            typingTimer = setTimeout(fetchFoods, doneTypingInterval);
        });

        searchInput.on('keydown', function() {
            clearTimeout(typingTimer);
        });
    });
    </script>
{% endblock %}