{% extends 'base.html' %}

{% load static %}
{% load filters  %}
{% load thumbnail %}

{% block content %}
      {% include 'includes/breadcrumbs_dark.html' %}

      <section class="sect pt-2">
        <div class="container">
          <div
            class="d-flex align-items-start align-items-sm-center justify-content-between flex-wrap flex-column flex-sm-row gap-4">
            <h1 class="h1 mb-0">Отзывы наших клиентов</h1>
          </div>
          <div class="justify-content-between sortW d-flex reviewsContent flex-wrap">
            <div class="d-flex align-items-center gap-2 gap-lg-4 flex-column flex-lg-row sortSmW">
              <form method="GET">
                <input type="hidden" name="sort" value="{{ sort_query }}">
                <select name="filter" id="istochnik" class="formSelect" onchange="this.form.submit()">
                  <option value="">
                    Источник
                  </option>
                  {% if yandex_reviews_count > 0 %}
                    <option value="1" {% if filter_query == '1' %}selected{% endif %}>
                      Яндекс
                    </option>
                  {% endif %}
                  {% if two_gis_reviews_count > 0 %}
                    <option value="2" {% if filter_query == '2' %}selected{% endif %}>
                      2Гис
                    </option>
                  {% endif %}
                  {% if vlru_reviews_count > 0 %}
                    <option value="3" {% if filter_query == '3' %}selected{% endif %}>
                      Vl
                    </option>
                  {% endif %}
                </select>
              </form>
              <form method="GET">
                {% if filter_query %}
                  <input type="hidden" name="filter" value="{{ filter_query }}">
                {% endif %}
                <select name="sort" id="sort" class="formSelect d-block d-lg-none" onchange="this.form.submit()">
                  <option value="-date" {% if sort_query == '-date' %}selected{% endif %}>
                    Сначала новые
                  </option>
                  <option value="date" {% if sort_query == 'date' %}selected{% endif %}>
                    Cначала старые
                  </option>
                </select>
              </form>
              <span class="h4 color-gray5 text-nowrap d-none d-lg-block">
                {% if filter_query == '1' %}
                  {{ yandex_reviews_count|declension_of_reviews }}
                {% elif filter_query == '2' %}
                  {{ two_gis_reviews_count|declension_of_reviews }}
                {% elif filter_query == '3' %}
                  {{ vlru_reviews_count|declension_of_reviews }}
                {% else %}
                  {{ all_reviews_count|declension_of_reviews }}
                {% endif %}
              </span>
            </div>
            <div class="d-none d-lg-flex align-items-center gap-4">
              <span class="h4">Сортировка:</span>
              {% if sort_query == '-date' %}
                <a class="sortLink active d-flex gap-2 align-items-center" href="{% url 'core:reviews' %}?sort=date{% if filter_query%}&filter={{ filter_query }}{% endif %}">
                  <span class="h4 mb-0">По дате</span>
                  <svg>
                    <use xlink:href="{% static 'img/icons/icons.svg' %}?v=1#sort"></use>
                  </svg>
                </a>
              {% else %}
                <a class="sortLink d-flex gap-2 align-items-center" href="{% url 'core:reviews' %}?sort=-date{% if filter_query%}&filter={{ filter_query }}{% endif %}">
                  <span class="h4 mb-0">По дате</span>
                  <svg class="icon-sort-reverse">
                    <use xlink:href="{% static 'img/icons/icons.svg' %}?v=1#sort"></use>
                  </svg>
                </a>
              {% endif %}
            </div>
          </div>

          <div class="row mt-3 reviewsPage">
            {% for review in reviews %}
            <div class="col-md-6 col-xl-4 mb-3 mb-lg-4">
              <!-- Отзыв с кнопкой подробнее, когда выпадает текст ниже -->
              <div class="reviewsCard cardText">
                <div class="d-flex justify-content-between flex-wrap gap-2 mb-3">
                  <div class="d-flex align-items-center gap-1">
                    <img src="{% static 'img/icons/avatar.svg' %}?v=1" alt="person" class="reviewsCardPersonIcon">
                    <div class="d-block">
                      <span class="fw-medium d-block text--lg">{{ review.name }}</span>
                      <span class="fw-medium d-block text--15 color-gray5 ">{{ review.get_date }}</span>
                    </div>
                  </div>
                  {% if review.source == '1' %}
                      <img src="{% static 'img/admin/reviews/logo-1.png' %}?v=1" alt="logo" class="reviewsCardLogo d-none d-sm-block">
                  {% elif review.source == '2' %}
                      <img src="{% static 'img/admin/reviews/2gis.svg' %}?v=1" alt="logo" class="reviewsCardLogo d-none d-sm-block">
                  {% else %}
                      <img src="{% static 'img/admin/reviews/vl.svg' %}?v=1" alt="logo" class="reviewsCardLogo d-none d-sm-block">
                  {% endif %}
                </div>
                <div class="content content--hidden my-1">
                  {{ review.text|linebreaks }}
                </div>
                {% if review.source == '1' %}
                  <img src="{% static 'img/admin/reviews/logo-1.png' %}?v=1" alt="logo" class="reviewsCardLogo d-block d-sm-none my-4">
                {% elif review.source == '2' %}
                  <img src="{% static 'img/admin/reviews/2gis.svg' %}?v=1" alt="logo" class="reviewsCardLogo d-block d-sm-none my-4">
                {% else %}
                  <img src="{% static 'img/admin/reviews/vl.svg' %}?v=1" alt="logo" class="reviewsCardLogo d-block d-sm-none my-4">
                {% endif %}
                <button class="button button--white mt-3 reviewsCardBtn" data-src="#modalReviews"
                data-bs-name="{{ review.name }}"
                data-bs-date="{{ review.get_date }}"
                data-bs-id="{{ review.id }}"
                data-bs-text="{{ review.text|linebreaks }}"
                {% if review.screen %}
                    data-bs-screen="{{ review.screen.url }}"
                {% else %}
                    data-bs-screen="#"
                {% endif %}
                {% if review.source == '1' %}
                    data-bs-source="{% static 'img/admin/reviews/logo-1.png' %}?v=1"
                {% elif review.source == '2' %}
                    data-bs-source="{% static 'img/admin/reviews/2gis.svg' %}?v=1"
                {% else %}
                    data-bs-source="{% static 'img/admin/reviews/vl.svg' %}?v=1"
                {% endif %}
                data-fancybox>Подробнее</button>
              </div><!-- /reviewsCard -->
            </div>
            {% endfor %}
          </div>
          {% include 'includes/pagination.html' %}
        </div>
      </section>
      {% include 'includes/form.html' with mparam="mb-5" %}
      {% include 'includes/about.html' %}
{% endblock %}
{% block js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const reviewModal= document.getElementById('modalReviews')
        if (reviewModal) {
            reviewButtons = document.querySelectorAll('.reviewsCardBtn')
            reviewButtons.forEach(button => {
                button.addEventListener('click', function(event) {
                    const review_id = button.getAttribute('data-bs-id')
                    
                    const review_source = button.getAttribute('data-bs-source')
                    const review_screen = button.getAttribute('data-bs-screen')
                    const review_date = button.getAttribute('data-bs-date')
                    const review_name = button.getAttribute('data-bs-name')
                    const review_text = button.getAttribute('data-bs-text')
        
                    const reviewModalName = reviewModal.querySelector('#reviewName')
                    const reviewModalDate = reviewModal.querySelector('#reviewDate')
                    const reviewModalScreen = reviewModal.querySelector('#reviewScreen')
                    const reviewModalText = reviewModal.querySelector('#reviewText')
                    const reviewModalSource = reviewModal.querySelector('#reviewSource')
                    const reviewModalSourceSecond = reviewModal.querySelector('#reviewSourceSecond')

                    reviewModalName.textContent = review_name
                    reviewModalDate.textContent = review_date
                    reviewModalText.innerHTML = review_text
                    reviewModalScreen.src = review_screen
                    reviewModalSource.src = review_source
                    reviewModalSourceSecond.src = review_source
            });
            
        })}
    });

</script>
{% endblock %}