{% extends 'base.html' %}

{% load static %}
{% load filters %}
{% load thumbnail %}
{% block canonical %}
  {% if canonical %}
    <link rel="canonical" href="{{ domain }}{{ canonical }}{% if page %}?page={{ page }}{% endif %}" />
  {% endif %}
{% endblock %}
{% block content %}
			<section class="intro intro-page linear--black sect py-0" style="background-image: url({% static 'img/admin/exp/intro.jpg' %});">
  <div class="container min-h-unset">
    {% include 'includes/breadcrumbs.html' %}
    <div class="introW justify-content-start">
      <h1 class="h1 text--white introTitle mt-0 mb-4 mb-lg-3">
        Привезенные авто
      </h1>
      <p class="introDescr text--white" style="max-width: 525px;">
        Наши специалисты наладили поставки в регионы на самых выгодных условиях, более 10 000 клиентов с различных
        регионов России и стран СНГ остались довольны и готовы дать рекомендации по всем процессам и этапам сделки.
      </p>
      <a class="button button--brown introBtn" href="{% url 'core:catalog_machinery' %}">Перейти в каталог</a>
    </div>
  </div>
  <img src="{% static 'img/admin/exp/intro.jpg' %}?v=1" alt="image" class="d-block d-md-none introImgSm">
</section>
			<section class="sect catalogSect">
  <div class="container">
    <h2 class="sectHead h2">
      Каталог успешно привезенных авто и техники
    </h2>
    <div class="changeCountry d-block d-lg-none">
      <div class="container">
        <div class="dropdown">
          <button class="button btn-secondary bg--gray2 dropdown-toggle mx-auto mb-2" type="button"
            data-bs-toggle="dropdown" aria-expanded="false">
            <img class="icon-flag" src="{% static 'img/admin/flag/gruz.png' %}?v=1" alt="japan">
            Спецтехника
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="{% url 'core:experience_all' %}">
              Все
            </a></li>
            <li><a class="dropdown-item" href="{% url 'core:experience_japan' %}">
                <img class="icon-flag" src="{% static 'img/admin/flag/jap.svg' %}?v=1" alt="japan">
                Япония
              </a></li>
            <li><a class="dropdown-item" href="{% url 'core:experience_korea' %}">
                <img class="icon-flag" src="{% static 'img/admin/flag/kor.svg' %}?v=1" alt="japan">
                Корея
              </a></li>
            <li><a class="dropdown-item" href="{% url 'core:experience_machinery' %}">
                <img class="icon-flag" src="{% static 'img/admin/flag/gruz.png' %}?v=1" alt="japan">
                Спецтехника
              </a></li>
          </ul>
        </div>
      </div>
    </div>
    <nav class="filterNav filterNav--gray p-2 d-none d-lg-block">
  <ul class="d-flex flex-wrap gap-4">
    <li>
      <a class="d-flex align-items-center gap-2" href="{% url 'core:experience_all' %}">
        Все
      </a>
    </li>
    <li>
      <a class="d-flex align-items-center gap-2" href="{% url 'core:experience_japan' %}">
        <img src="{% static 'img/admin/flag/jap.svg' %}?v=1" alt="flag">
        Япония
      </a>
    </li>
    <li>
      <a class="d-flex align-items-center gap-2" href="{% url 'core:experience_korea' %}?filter=2">
        <img src="{% static 'img/admin/flag/kor.svg' %}?v=1" alt="flag">
        Корея
      </a>
    </li>
    <li class="active">
      <a class="d-flex align-items-center gap-2" href="{% url 'core:experience_machinery' %}">
        <img src="{% static 'img/admin/flag/gruz.png' %}?v=1" alt="flag">
        Спецтехника
      </a>
    </li>
  </ul>
</nav>

<div class="filterContent">
  <div class="row">
    <div class="col">
      <div class="inputW-sm-hide">
        <div class="d-flex d-lg-none justify-content-between mb-4">
          <h2 class="h2">Фильтры</h2>
          <button class="filterContentClose"><img src="{% static 'img/icons/close.svg' %}?v=1" alt="close"></button>
        </div>
      </div>
    </div>
  </div>
<form id="filterForm" method="GET">
  <div class="row">
    
    <div class="col-lg-4 col-xl-3 mb-2 mb-lg-4">
      <div class="inputW form-floating">
        <select name="brand" id="marka" class="formSelect form-select">
          <option id="marka-option-basic" value="">Любая</option>
          {% for brand in brands %}
            <option value="{{ brand.id }}" {% if brand_query == brand.id|int_to_str %}selected{% endif %}>{{ brand.title }}</option>
          {% endfor %}
        </select>
        <label for="marka">Марка</label>
      </div>
    </div>
    <div class="col-lg-4 col-xl-3 mb-2 mb-lg-4">
      <div class="inputW form-floating">
        <select name="model" id="model" class="formSelect form-select">
          <option id="model-option-basic" value="">Любая</option>
          {% for model in models %}
            <option value="{{ model.id }}" {% if model_query == model.id|int_to_str %}selected{% endif %}>{{ model.title }}</option>
          {% endfor %}
        </select>
        <label for="model">Модель</label>
      </div>
    </div>

    <div class="col-lg-4 col-xl-3 mb-2 mb-lg-4 inputW-sm-hide">
      <div class="inputW">
        <div class="inputDualW d-flex">
          <div class="inputDual form-floating">
            <input class="form-control" type="number" placeholder="Год от" id="god_ot" min="0" step="1" name="year_min" {% if year_min_query %}value="{{ year_min_query }}"{% endif %}>
            <label for="god_ot">Год от</label>
          </div>
          <div class="inputDual form-floating">
            <input class="form-control" type="number" placeholder="Год до" id="god_do" min="0" step="1" name="year_max" {% if year_max_query %}value="{{ year_max_query }}"{% endif %}>
            <label for="god_do">Год до</label>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-xl-3 mb-2 mb-lg-4 inputW-sm-hide inputW-lg-hide">
      <div class="inputW">     
        <div class="inputDualW d-flex">
          <div class="inputDual form-floating">
            <input class="form-control" type="number" placeholder="Цена от" id="cena_ot" min="0" step="1" name="price_min" {% if price_min_query %}value="{{ price_min_query }}"{% endif %}>
            <label for="cena_ot">Цена от</label>
          </div>
          <div class="inputDual form-floating">
            <input class="form-control" type="number" placeholder="Цена до" id="cena_do" min="0" step="1" name="price_max" {% if price_max_query %}value="{{ price_max_query }}"{% endif %}>
            <label for="cena_do">Цена до</label>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-xl-3 mb-2 mb-lg-4 sortW">
      <div class="inputW">
        <select name="sort" id="kuzov" class="formSelect">
          <option id="cheap-filter" value="auction_price_rub" {% if sort_query == 'auction_price_rub' %}selected{% endif %}>Сначала дешёвые</option>
          <option value="-auction_price_rub" {% if sort_query == '-auction_price_rub' %}selected{% endif %}>Сначала дорогие</option>
          <option value="-rate" {% if sort_query == '-rate' %}selected{% endif %}>Сначала с высокой оценкой</option>
          <option value="rate" {% if sort_query == 'rate' %}selected{% endif %}>Сначала с низкой оценкой</option>
        </select>
      </div>
    </div>


  </div>
  <div class="row filterAction">
    <div class="col">
      <div class="d-flex justify-content-end">

        <div class="d-flex gap-2 flex-column-reverse flex-lg-row btnW">
          <button type="submit" class="button button--brown gap-1">Показать</button>
          <button id="drop-form-button" class="button button--white  resetBtn">Очистить</button>
          <a class="filterBtnCallContent button button--white ">
            Показать все параметры
          </a>
        </div>

      </div>
    </div>
  </div>
</div>
</form>
    <div class="justify-content-between sortW d-none d-lg-flex">
      <div class="d-flex align-items-center gap-2">
        <span class="h4">Найдено:</span>
        <span class="h4 color-gray5">{{ total_objects }} авто</span>
      </div>
      <div class="d-flex gap-4">
        <span class="h4">Сортировка:</span>
        <a class="sortLink {% if sort_query == 'auction_price_rub' %}active{% endif %} d-flex gap-2 align-items-center" href="{% url 'core:experience_machinery' %}?sort={% if sort_query == 'auction_price_rub' %}-auction_price_rub{% else %}auction_price_rub{% endif %}{% if filter_query%}&filter={{ filter_query }}{% endif %}{% if year_min_query %}&year_min={{ year_min_query }}{% endif %}{% if year_max_query %}&year_max={{ year_max_query }}{% endif %}{% if price_min_query %}&price_min={{ price_min_query }}{% endif %}{% if price_max_query %}&price_max={{ price_max_query }}{% endif %}{% if brand_query %}&brand={{ brand_query }}{% endif %}{% if model_query %}&model={{ model_query }}{% endif %}">
          <span class="h4 mb-0">По цене</span>
          <svg>
            <use xlink:href="{% static 'img/icons/icons.svg' %}?v=1#sort"></use>
          </svg>
        </a>
        <a class="sortLink {% if sort_query == '-rate' %}active{% endif %} d-flex gap-2 align-items-center" href="{% url 'core:experience_machinery' %}?sort={% if sort_query == '-rate' %}rate{% else %}-rate{% endif %}{% if filter_query%}&filter={{ filter_query }}{% endif %}{% if year_min_query %}&year_min={{ year_min_query }}{% endif %}{% if year_max_query %}&year_max={{ year_max_query }}{% endif %}{% if price_min_query %}&price_min={{ price_min_query }}{% endif %}{% if price_max_query %}&price_max={{ price_max_query }}{% endif %}{% if brand_query %}&brand={{ brand_query }}{% endif %}{% if model_query %}&model={{ model_query }}{% endif %}">
          <span class="h4 mb-0">По оценке</span>
          <svg>
            <use xlink:href="{% static 'img/icons/icons.svg' %}?v=1#sort"></use>
          </svg>
        </a>
      </div>
    </div>

    <div class="row mt-4 catalogGrid">
      {% for lot in lots %}
      <div class="col-6 col-lg-4 col-xl-3 mb-3 mb-lg-4 catalogCardW">
        <div class="catalogCard catalogCardCar">
  <a href="{{ lot.get_absolute_url }}" class="catalogCardImg">
    <img src="{{ lot.cover.url }}" alt="image" loading="lazy">
  </a>
  <div class="catalogCardContent bg--gray1 p-4">
    <div class="d-flex flex-column justify-content-between h-100">
      <h5 class="catalogCardTitle"><a href="{{ lot.get_absolute_url }}">{{ lot.title }}</a></h5>
      <div class="d-block">
        <div class="catalogCardPrice d-flex flex-wrap align-items-center gap-1 my-3">
          <span class="catalogCardPrice--main">{{ lot.total_cost_rub|readable_int }} ₽</span>
        </div><!-- /catalogCardPrice -->
      </div>
    </div>
  </div>
</div><!-- /catalogCard -->         
      </div>
    {% endfor %}
      
    </div>

    {% include 'includes/pagination.html' %}
    </div>
  

  </div>
  {% include 'includes/form.html' %}
  {% include 'includes/reviews.html' %}
  {% include 'includes/video.html' %}
  {% include 'includes/about.html' %}
{% endblock %}  
{% block js %}
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const form = document.querySelector('#filterForm');
    
    form.addEventListener('submit', function(event) {
      event.preventDefault();
      const inputs = form.querySelectorAll('input, select');
      
      inputs.forEach(input => {
        if (!input.value) {
          input.disabled = true;
        }
      });

      let baseUrl = "{% url 'core:experience_machinery' %}";
      let formData = new FormData(this);

      formData.delete('brand');
      formData.delete('model');

      let params = new URLSearchParams(formData).toString();

      const brandSelect = document.getElementById('marka');
      const modelSelect = document.getElementById('model');
      
      const brand = brandSelect.options[brandSelect.selectedIndex].text.toLowerCase().replace(/\s+/g, '-');
      const model = modelSelect.options[modelSelect.selectedIndex].text.toLowerCase().replace(/\s+/g, '-');
      const brandValue = brandSelect.options[brandSelect.selectedIndex].value
      const modelValue = modelSelect.options[modelSelect.selectedIndex].value

      let newUrl = '';
      if (brandValue && modelValue) {
        newUrl = baseUrl + brand + '/' + model + '/';
      } else if (brandValue) {
        newUrl = baseUrl + brand + '/'
      } else {
        newUrl = baseUrl
      }

      if (params) {
        newUrl += '?' + params;
      }
      console.log(newUrl)
      window.location.href = newUrl;
    });
  });
</script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
      const markaElement = document.getElementById('marka');
      const transportModelsElement = document.getElementById('model');

      markaElement.addEventListener('change', function() {
          const modelOption = document.getElementById('model-option-basic')
          modelOption.textContent = 'Загрузка...'
          const brandId = markaElement.value;

          fetch(`/get_experience_machinery_models/?brand_id=${brandId}`)
              .then(response => response.json())
              .then(data => {
                  transportModelsElement.innerHTML = data.models;
              })
              .catch(error => {
                  console.error('Error fetching transport models:', error);
              });
      });

      const dropButton = document.getElementById('drop-form-button')
      const priceMin = document.getElementById('cena_ot')
      const priceMax = document.getElementById('cena_do')
      const yearMin = document.getElementById('god_ot')
      const yearMax = document.getElementById('god_do')

      dropButton.addEventListener('click', function(event) {
        event.preventDefault()
        const markaOption = document.getElementById('marka-option-basic')
        const modelOption = document.getElementById('model-option-basic')
        const cheapFilter = document.getElementById('cheap-filter')

        markaOption.selected = true
        modelOption.selected = true
        if (cheapFilter) {
          cheapFilter.selected = true
        }

        priceMin.value = ""
        priceMax.value = ""
        yearMin.value = ""
        yearMax.value = ""
      })
  });
</script>
{% endblock %}