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

{% block sidebar.dashboard %} {% endblock %}
{% block sidebar.patients %} {% endblock %}
{% block sidebar.challenge %} {% endblock %}
{% block sidebar.appointments %} {% endblock %}
{% block sidebar.activity_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-activity-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="activitySearchInput" 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="name">نام فعالیت</a></th>
                    <th><a href="#" class="sortable" data-field="Metz">متز (MET)</a></th>
                    <th>عملیات</th>
                  </tr>
                </thead>
                <tbody id="activityTableBody">
                  {% for activity in page_obj %}
                  <tr>
                    <td>{{ activity.name }}</td>
                    <td>{{ activity.Metz }}</td>
                    <td>
                      <a href="{% url 'panel-assistant-activity-edit' activity.pk %}"
                         class="btn btn-sm btn-warning" style="border-radius:10px;">
                         ویرایش
                      </a>
                      <form method="post"
                            action="{% url 'panel-assistant-activity-delete' activity.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="3" 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') || '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 = $('#activitySearchInput');

        function fetchActivities() {
            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('#activityTableBody').innerHTML;
                    $('#activityTableBody').html(newTableBody);
                    const newPagination = newDoc.querySelector('.pagination').innerHTML;
                    $('.pagination').html(newPagination);
                },
                error: function(xhr) {
                    console.error("Error searching activities");
                }
            });
        }

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

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