{% extends "base.html" %}

{% block title %}Главная{% endblock %}

{% block content %}
 <style>
    .select2-container {
      width: 100% !important;
    }
  </style>
  <style>
  .filter-link {
    font-size: 18px; /* Увеличиваем размер шрифта */
    font-weight: bold; /* Делаем текст жирным */
    padding: 10px 20px; /* Добавляем отступы для лучшего кликабельности */
    background-color: #7a61fe; /* Добавляем зелёный фон */
    color: white; /* Текст белый */
    border-radius: 5px; /* Слегка скругляем углы */
    text-align: center; /* Выравнивание по центру */
    cursor: pointer; /* Курсор в виде указателя при наведении */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Плавные анимации */
  }

  .filter-link:hover {
    background-color: #7a61fe; /* Темнее при наведении */
    transform: scale(1.002); /* Немного увеличиваем размер при наведении */
  }
</style>
 
                
                
                
                

   
        <!-- Другие поля формы -->
        

    
    {% include "filtr.html" %}
    

    {% include "tabl.html" %}   
     

                
<!-- Включаем модалку -->
<!-- Модальное окно -->
{% include "modal.html" %}
<script src="/static/dist/js/prod.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Инициализация Select2
    $('#clients-multiselect').select2();
    
    // Получение выбранных ID при изменении
    $('#clients-multiselect').on('change', function() {
        const selectedIds = $(this).val(); // Массив выбранных ID
        console.log("Selected Client IDs:", selectedIds);
        
        // Отправка на сервер (пример)
        fetch('/update-selected-clients', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token }}'
            },
            body: JSON.stringify({client_ids: selectedIds})
        })
        .then(response => response.json())
        .then(data => console.log(data));
    });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Инициализация всех select2
    $('.select2').select2();
    
    // Обработчик кнопки Search
    $('.button.bg-theme-1').on('click', function() {
        // Собираем все данные фильтров
        const filters = {
            clients: $('#clients-multiselect').val() || [],
            assignees: $('select[name="assignee"]').val() || [],
            statuses: $('select[placeholder="Select categories"]').val() || [],
            requested: $('#applied-select:eq(0)').val(),
            posted: $('#applied-select:eq(1)').val(),
            applied: $('#applied-select:eq(2)').val(),
            date_range: $('#date-range-input').val()
        };
        
        // Переходим на /productf с параметрами
        const queryString = new URLSearchParams();
        
        if (filters.clients.length) queryString.append('clients', filters.clients.join(','));
        if (filters.assignees.length) queryString.append('assignees', filters.assignees.join(','));
        if (filters.statuses.length) queryString.append('statuses', filters.statuses.join(','));
        if (filters.requested) queryString.append('requested', filters.requested);
        if (filters.posted) queryString.append('posted', filters.posted);
        if (filters.applied) queryString.append('applied', filters.applied);
        if (filters.date_range) queryString.append('date_range', filters.date_range);
        
        window.location.href = `/productf?${queryString.toString()}`;
    });
});
</script>

{% endblock %}