{% 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>
 
                
                
                
                
<div class="p-5" id="boxed-accordion">
    <div class="preview">
        <div class="accordion">
            <div class="accordion__pane__content mt-3 text-gray-700 leading-relaxed">
                <a href="javascript:;" class="accordion__pane__toggle filter-link font-medium block">Filter</a>

                <div class="accordion__pane__content mt-3 text-gray-800 leading-relaxed">
                    <div class="dropdown-box__content box p-5">
                        <form method="POST" action="/productf">
                            <!-- Дата-фильтры (Requested, Posted, Applied) -->
                            <div class="flex gap-4">
                                <!-- Requested on -->
                                <div class="w-1/2">
                                    <div class="text-xs">Requested on</div>
                                    <select id="date_requested" class="input w-full border mt-2 flex-1" name="date_requested">
                                        <option value=""></option>
                                        <option value="Today" {% if date_requested == "Today" %}selected{% endif %}>Today</option>
                                        <option value="Last 7 days" {% if date_requested == "Last 7 days" %}selected{% endif %}>Last 7 days</option>
                                        <option value="For all time" {% if date_requested == "For all time" %}selected{% endif %}>For all time</option>
                                        <option value="custom_date_requested" {% if date_requested == "custom_date_requested" %}selected{% endif %}>from date to date</option>
                                        
                                    </select>
                                    <div id="date-requested-range-wrapper" class="p-5 grid grid-cols-12 gap-4 row-gap-3 mt-4" style="display: none;">
                                        <div class="col-span-12 sm:col-span-6">
                                            <label>From</label>
                                             <input 
                                                type="date" 
                                                id="date-requested-from" 
                                                class="input w-full border mt-2" 
                                                name="date_requested_from" 
                                                value="{{ date_requested_from if date_requested_from else '' }}"
                                            >
                                        </div>
                                        <div class="col-span-12 sm:col-span-6">
                                            <label>To</label>
                                             <input 
                                                type="date" 
                                                id="date-requested-to" 
                                                class="input w-full border mt-2" 
                                                name="date_requested_to" 
                                                value="{{ date_requested_to if date_requested_to else '' }}"
                                            >
                                        </div>
                                    </div>
                                </div>

                                <!-- Posted on -->
                                <div class="w-1/2">
                                    <div class="text-xs">Posted on</div>
                                    <select id="date_posted" class="input w-full border mt-2 flex-1" name="date_posted">
                                        <option value=""></option>
                                       
                                        <option value="Today" {% if date_posted == "Today" %}selected{% endif %}>Today</option>
                                        <option value="Last 7 days" {% if date_posted == "Last 7 days" %}selected{% endif %}>Last 7 days</option>
                                        <option value="For all time" {% if date_posted == "For all time" %}selected{% endif %}>For all time</option>
                                        <option value="custom_date_posted" {% if date_posted == "custom_date_posted" %}selected{% endif %}>from date to date</option>
                                    </select>
                                    <div id="date-posted-range-wrapper" class="p-5 grid grid-cols-12 gap-4 row-gap-3 mt-4" style="display: none;">
                                        <div class="col-span-12 sm:col-span-6">
                                            <label>From</label>
                                           
                                            <input 
                                                type="date" 
                                                id="date-posted-from" 
                                                class="input w-full border mt-2" 
                                                name="date_posted_from" 
                                                value="{{ date_posted_from if date_posted_from else '' }}"
                                            >
                                        </div>
                                        <div class="col-span-12 sm:col-span-6">
                                            <label>To</label>
                                             <input 
                                                type="date" 
                                                id="date-posted-to" 
                                                class="input w-full border mt-2" 
                                                name="date_posted_to" 
                                                value="{{ date_posted_to if date_posted_to else '' }}"
                                            >
                                        </div>
                                    </div>
                                </div>
                            

                            <!-- Applied on -->
                            <div class="w-1/2">
                                <div class="text-xs">Applied on</div>
                                <select id="date_applied" class="input w-full border mt-2 flex-1" name="date_applied">
                                    <option value=""></option>
                                    <option value="Today" {% if date_applied == "Today" %}selected{% endif %}>Today</option>
                                    <option value="Last 7 days" {% if date_applied == "Last 7 days" %}selected{% endif %}>Last 7 days</option>
                                    <option value="For all time" {% if date_applied == "For all time" %}selected{% endif %}>For all time</option>
                                    <option value="custom_date_applied" {% if date_applied == "custom_date_applied" %}selected{% endif %}>from date to date</option>
                                </select>
                                <div id="date-applied-range-wrapper" class="p-5 grid grid-cols-12 gap-4 row-gap-3 mt-4" style="display: none;">
                                    <div class="col-span-12 sm:col-span-6">
                                        <label>From</label>
                                        <input 
                                            type="date" 
                                            id="date-applied-from" 
                                            class="input w-full border mt-2" 
                                            name="date_applied_from" 
                                            value="{{ date_applied_from if date_applied_from else '' }}"
                                        >
                                    </div>
                                    <div class="col-span-12 sm:col-span-6">
                                        <label>To</label>
                                         <input 
                                            type="date" 
                                            id="date-applied-to" 
                                            class="input w-full border mt-2" 
                                            name="date_applied_to" 
                                            value="{{ date_applied_to if date_applied_to else '' }}"
                                        >
                                    </div>
                                </div>
                            </div>
                            </div>

<div class="flex flex-nowrap gap-4 mt-4">  <!-- flex-nowrap запрещает перенос на новую строку -->
    <!-- Clients (50% ширины) -->
    <div class="flex-1 min-w-0">  <!-- flex-1 + min-w-0 предотвращает "расползание" -->
        <label class="block mb-1 text-sm">Clients</label>
        <select id="clients-multiselect1" class="select2 w-full" multiple="multiple" data-placeholder="Select Clients" name="client">
            {% set seen_ids = [] %}
            {% for job in jobs %}
                {% if job.client.id not in seen_ids %}
                    
                 <option value="{{ job.client.id }}" {% if job.client.id|string in client_id %}selected{% endif %}>
    {{ job.client.user_nicename }}
</option>
                    {% set _ = seen_ids.append(job.client.id) %}
                {% endif %}
            {% endfor %}
        </select>
    </div>

    <!-- Assignee (50% ширины) -->
<div class="flex-1 min-w-0">
    <label class="block mb-1 text-sm">Assignee</label>
    <select id="assignee-multiselect" class="select2 w-full" multiple="multiple" data-placeholder="Select Assignee" name="assignee">
        {% for user in users %}
            <option value="{{ user.id }}" {% if user.id|string in assigned_users_ids %}selected{% endif %}>{{ user.username }}</option>
        {% endfor %}
    </select>
</div>


                            <!-- Status и кнопка Apply Filters -->
                            <div class="flex-1 min-w-0">
                                <label>Status</label>
                                <div class="mt-2">
                                    <select data-placeholder="Select Status" class="select2 w-full" multiple name="status">
                                        {% for option in ["Scheduled", "Requested", "In-Progress", "Paused", "Applied", "Issues Applying", "Cancelled"] %}
                                            <option value="{{ option }}" {% if option in status %}selected{% endif %}>{{ option }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <button type="submit" class="button bg-theme-1 text-white mt-5">Apply Filters</button>
                               
                            </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Функция для настройки обработчиков событий для каждого селекта
function setupDateSelect(selectId, wrapperId, customValue) {
    const select = document.getElementById(selectId);
    const dateRangeWrapper = document.getElementById(wrapperId);

    select.addEventListener('change', function() {
        if (this.value === customValue) {
            dateRangeWrapper.style.display = 'grid';
        } else {
            dateRangeWrapper.style.display = 'none';
        }
    });

    // Инициализация при загрузке страницы
    if (select.value === customValue) {
        dateRangeWrapper.style.display = 'grid';
    }
}

// Настройка всех трех селектов
document.addEventListener('DOMContentLoaded', function() {
    setupDateSelect('date_requested', 'date-requested-range-wrapper', 'custom_date_requested');
    setupDateSelect('date_posted', 'date-posted-range-wrapper', 'custom_date_posted');
    setupDateSelect('date_applied', 'date-applied-range-wrapper', 'custom_date_applied');
});
</script>

                <!-- BEGIN: Datatable -->
                <div class="intro-y datatable-wrapper box p-5 mt-5">
                    <table class="table table-report table-report--bordered display datatable w-full">
                        <thead>
                            <tr>
                                <th class="border-b-2 whitespace-no-wrap">TITLE &#10760;</th>
                                <th class="border-b-2 text-center whitespace-no-wrap">COMPANY &#10760;</th>
                                <th class="border-b-2 text-center whitespace-no-wrap">CLIENT &#10760;</th>
                                <th class="border-b-2 text-center whitespace-no-wrap">Requested on &#10760;</th>
                                <th class="border-b-2 text-center whitespace-no-wrap">Posted on &#10760;</th>
                                <th class="border-b-2 text-center whitespace-no-wrap">STATUS</th>
                                <th class="border-b-2 text-center whitespace-no-wrap">Assignee</th>


                                <th class="border-b-2 text-center whitespace-no-wrap">Applied on</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for job in jobs %}
                            <tr>
                                <td class="border-b">
                                    <a href="{{ job.job.link }}" target="_blank" class="text-blue-500">{{ job.job.job_title [:50] }}</a>
                                    <div class="text-gray-600 text-xs whitespace-no-wrap">{{ job.job.job_id  }}</div>
                                </td>
                                <td class="text-center border-b">{{job.job.job_company}}</td>
                                <td class="text-center border-b">
                                    
                                <a href="#" class="client-link text-blue-500" data-client-id="{{ job.client.id }}">{{ job.client.user_nicename }}</a>
            
                                </td>

                                <td class="text-center border-b">{{job.job.data_requested.strftime('%Y-%m-%d')}}</td>
                                <td class="text-center border-b">{{job.job.date_posted.strftime('%Y-%m-%d')}}</td>
                                <td class="text-center border-b">
                                    <select class="select2" onchange="updateStatus(this, '{{ job.id }}')">
                                        <option value="" {% if job.status is none %}selected{% endif %}>— Not selected —</option>
                                        <option value="Scheduled" {% if job.status == "Scheduled" %}selected{% endif %}>Scheduled</option>
                                        <option value="Requested" {% if job.status == "Requested" %}selected{% endif %}>Requested</option>
                                        <option value="In-Progress" {% if job.status == "In-Progress" %}selected{% endif %}>In-Progress</option>
                                        <option value="Paused" {% if job.status == "Paused" %}selected{% endif %}>Paused</option>
                                        <option value="Applied" {% if job.status == "Applied" %}selected{% endif %}>Applied</option>
                                        <option value="Issues Applying" {% if job.status == "Issues Applying" %}selected{% endif %}>Issues Applying</option>
                                        <option value="Cancelled" {% if job.status == "Cancelled" %}selected{% endif %}>Cancelled</option>
                                    </select>
                                
                                </td>
                               <td class="text-center border-b">
                                    <select class="select2" onchange="updateAssignee(this, '{{ job.id }}')">
                                        <option value="" {% if job.assignee is none %}selected{% endif %}>— Not selected —</option>
                                        {% for user in users %}
                                            <option value="{{ user.id }}" {% if job.assignee == user.id %}selected{% endif %}>
                                                {{ user.username }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </td>
                                <td class="text-center border-b">
                                {% if job.applied_on %}
                                    {{ job.applied_on.strftime('%Y-%m-%d') }}
                                {% else %}
                                    -
                                {% endif %}
                                </td>
                            </tr>
                         {% endfor %}
                        </tbody>
                    </table>
                </div>
                <!-- END: Datatable -->
<!-- Включаем модалку -->
<!-- Модальное окно -->
{% include "modal.html" %}
<script src="/static/dist/js/prod.js"></script>

{% endblock %}