                
<div class="p-5" id="boxed-accordion">
    <div class="preview">
        <div class="accordion">
            <div class="accordion__pane border border-gray-200 p-4 mt-3">
                <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">Today</option>
                                        <option value="Last 7 days">Last 7 days</option>
                                        <!--<option value="For all time">For all time</option>-->
                                        <option value="custom_date_requested">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>
                                            <div class="relative">
                                                <input type="date" id="date-requested-from" class="input w-full border mt-2 cursor-pointer" name="date_requested_from">
                                            </div>
                                        </div>
                                        <div class="col-span-12 sm:col-span-6">
                                            <label>To</label>
                                            <div class="relative">
                                                <input type="date" id="date-requested-to" class="input w-full border mt-2 cursor-pointer" name="date_requested_to">
                                            </div>
                                        </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">Today</option>
                                        <option value="Last 7 days">Last 7 days</option>
                                       <!--<option value="For all time">For all time</option>-->
                                        <option value="custom_date_posted">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>
                                            <div class="relative">
                                                <input type="date" id="date-posted-from" class="input w-full border mt-2 cursor-pointer" name="date_posted_from">
                                            </div>
                                        </div>
                                        <div class="col-span-12 sm:col-span-6">
                                            <label>To</label>
                                            <div class="relative">
                                                <input type="date" id="date-posted-to" class="input w-full border mt-2 cursor-pointer" name="date_posted_to">
                                            </div>
                                        </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">Today</option>
                                    <option value="Last 7 days">Last 7 days</option>
                                    <!--<option value="For all time">For all time</option>-->
                                    <option value="custom_date_applied">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>
                                        <div class="relative">
                                            <input type="date" id="date-applied-from" class="input w-full border mt-2 cursor-pointer" name="date_applied_from">
                                        </div>
                                    </div>
                                    <div class="col-span-12 sm:col-span-6">
                                        <label>To</label>
                                        <div class="relative">
                                            <input type="date" id="date-applied-to" class="input w-full border mt-2 cursor-pointer" name="date_applied_to">
                                        </div>
                                    </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 }}">{{ 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">  <!-- flex-1 дает равную ширину -->
        <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">
            <option value="">— Not selected —</option>
            {% for user in users %}
                <option value="{{ user.id }}" {% if user.id 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">-->
                                        <select data-placeholder="Select Status" class="select2 w-full" multiple name="status">
                                        <option value="Backlogged">Backlogged</option>
                                        <option value="Scheduled">Scheduled</option>
                                        <option value="Requested">Requested</option>
                                        <option value="In-Progress">In-Progress</option>
                                        <option value="Paused">Paused</option>
                                        <option value="Applied">Applied</option>
                                        <option value="Issues Applying">Issues Applying</option>
                                        <option value="Cancelled">Cancelled</option>
                                    </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');
    
    // Добавляем обработчики для полей ввода даты
    document.querySelectorAll('input[type="date"]').forEach(input => {
        input.addEventListener('focus', function() {
            this.showPicker();
        });
    });
});



</script>
