{% extends 'base.html' %}
{% load static %}

{% block title %}Управление заданиями{% endblock %}

{% block content %}
<div>
    <div class="mb-6 flex justify-between items-center flex-wrap gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">Управление заданиями</h1>
            <p class="text-gray-500">Создание и редактирование заданий для групп</p>
        </div>
        <a href="{% url 'create_assignment' %}" class="btn-primary">
            <i class="fas fa-plus mr-2"></i>Создать задание
        </a>
    </div>

    <!-- Панель фильтров -->
    <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
        <div class="flex flex-wrap items-center gap-4">
            <!-- Фильтр по названию -->
            <div class="flex-1 min-w-[200px]">
                <input type="text" id="filterTitle" value="{{ title_filter|default:'' }}"
                       placeholder="Поиск по названию..."
                       class="w-full px-3 py-2 border rounded-lg text-sm">
            </div>

            <!-- Фильтр по группам (выпадающий список) -->
            <div class="relative">
                <button id="groupFilterBtn" class="filter-btn">
                    <i class="fas fa-users mr-2"></i>
                    Группа
                    <i class="fas fa-chevron-down ml-2 text-xs"></i>
                </button>
                <div id="groupFilterMenu" class="filter-menu hidden">
                    <div class="p-2 border-b">
                        <label class="flex items-center gap-2">
                            <input type="checkbox" id="selectAllGroups" class="select-all-groups">
                            <span class="font-semibold">Выбрать все</span>
                        </label>
                    </div>
                    <div class="max-h-48 overflow-y-auto">
                        {% for group in groups %}
                        <label class="flex items-center gap-2 px-3 py-2 hover:bg-gray-50 cursor-pointer">
                            <input type="checkbox" name="group" value="{{ group.id }}"
                                   class="group-checkbox"
                                   {% if group.id|slugify in selected_groups %}checked{% endif %}>
                            <span>{{ group.name }}</span>
                        </label>
                        {% endfor %}
                    </div>
                    <div class="p-2 border-t flex justify-between">
                        <button type="button" class="text-sm text-gray-500 hover:text-gray-700" id="resetGroups">Сбросить</button>
                        <button type="button" class="text-sm text-indigo-600 hover:text-indigo-800" id="applyGroups">Применить</button>
                    </div>
                </div>
            </div>

            <!-- Фильтр по предметам (выпадающий список) -->
            <div class="relative">
                <button id="subjectFilterBtn" class="filter-btn">
                    <i class="fas fa-book mr-2"></i>
                    Предмет
                    <i class="fas fa-chevron-down ml-2 text-xs"></i>
                </button>
                <div id="subjectFilterMenu" class="filter-menu hidden">
                    <div class="p-2 border-b">
                        <label class="flex items-center gap-2">
                            <input type="checkbox" id="selectAllSubjects" class="select-all-subjects">
                            <span class="font-semibold">Выбрать все</span>
                        </label>
                    </div>
                    <div class="max-h-48 overflow-y-auto">
                        {% for subject in subjects %}
                        <label class="flex items-center gap-2 px-3 py-2 hover:bg-gray-50 cursor-pointer">
                            <input type="checkbox" name="subject" value="{{ subject.id }}"
                                   class="subject-checkbox"
                                   {% if subject.id|slugify in selected_subjects %}checked{% endif %}>
                            <span>{{ subject.name }}</span>
                        </label>
                        {% endfor %}
                    </div>
                    <div class="p-2 border-t flex justify-between">
                        <button type="button" class="text-sm text-gray-500 hover:text-gray-700" id="resetSubjects">Сбросить</button>
                        <button type="button" class="text-sm text-indigo-600 hover:text-indigo-800" id="applySubjects">Применить</button>
                    </div>
                </div>
            </div>

            <!-- Сортировка -->
            <div class="relative">
                <button id="sortFilterBtn" class="filter-btn">
                    <i class="fas fa-sort mr-2"></i>
                    Сортировка
                    <i class="fas fa-chevron-down ml-2 text-xs"></i>
                </button>
                <div id="sortFilterMenu" class="filter-menu hidden">
                    <div class="p-2">
                        <div class="space-y-2">
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="radio" name="sort" value="-deadline" {% if sort == '-deadline' or sort == '' %}checked{% endif %}>
                                <span>По сроку (новые → старые)</span>
                            </label>
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="radio" name="sort" value="deadline" {% if sort == 'deadline' %}checked{% endif %}>
                                <span>По сроку (старые → новые)</span>
                            </label>
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="radio" name="sort" value="title" {% if sort == 'title' %}checked{% endif %}>
                                <span>По названию (А → Я)</span>
                            </label>
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="radio" name="sort" value="-title" {% if sort == '-title' %}checked{% endif %}>
                                <span>По названию (Я → А)</span>
                            </label>
                        </div>
                        <div class="mt-3 pt-2 border-t flex justify-between">
                            <button type="button" class="text-sm text-gray-500 hover:text-gray-700" id="resetSort">Сбросить</button>
                            <button type="button" class="text-sm text-indigo-600 hover:text-indigo-800" id="applySort">Применить</button>
                        </div>
                    </div>
                </div>
            </div>

            <button id="applyFiltersBtn" class="bg-[#4395AB] text-white px-4 py-2 rounded-lg text-sm hover:bg-[#2d6b7c] transition">
                <i class="fas fa-search mr-2"></i>Применить
            </button>
            <a href="{% url 'assignment_list' %}" class="text-gray-500 text-sm hover:text-gray-700">
                <i class="fas fa-undo mr-1"></i>Сбросить всё
            </a>
        </div>
    </div>

    <!-- Список заданий -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-100">
                    <tr class="border-b">
                        <th class="px-4 py-3 text-left">Название</th>
                        <th class="px-4 py-3 text-left">Группы</th>
                        <th class="px-4 py-3 text-left">Предмет</th>
                        <th class="px-4 py-3 text-left">Срок сдачи</th>
                        <th class="px-4 py-3 text-left">Действия</th>
                    </tr>
                </thead>
                <tbody>
                    {% for assignment in assignments %}
                    <tr class="border-b hover:bg-gray-50">
                        <td class="px-4 py-3">
                            <div class="font-medium">{{ assignment.title }}</div>
                            {% if assignment.description %}
                            <div class="text-xs text-gray-500 mt-1 truncate max-w-[250px]">{{ assignment.description|truncatechars:60 }}</div>
                            {% endif %}
                        </td>
                        <td class="px-4 py-3">
                            <div class="flex flex-wrap gap-1">
                                {% for group in assignment.groups.all %}
                                <span class="inline-block bg-gray-100 text-gray-700 rounded px-2 py-0.5 text-xs">
                                    {{ group.name }}
                                </span>
                                {% endfor %}
                            </div>
                        </td>
                        <td class="px-4 py-3">{{ assignment.subject.name }}</td>
                        <td class="px-4 py-3">
                            <span class="{% if assignment.deadline < today %}text-red-600 font-semibold{% elif assignment.deadline == today %}text-orange-600 font-semibold{% else %}text-gray-600{% endif %}">
                                {{ assignment.deadline|date:"d.m.Y" }}
                            </span>
                        </td>
                        <td class="px-4 py-3">
                            <div class="flex gap-2">
                                <a href="{% url 'edit_assignment' assignment.id %}" class="text-indigo-600 hover:text-indigo-800" title="Редактировать">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <button type="button" onclick="confirmDelete({{ assignment.id }}, '{{ assignment.title|escapejs }}')"
                                        class="text-red-600 hover:text-red-800" title="Удалить">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr class="border-b">
                        <td colspan="5" class="px-4 py-8 text-center text-gray-500">
                            <i class="fas fa-tasks text-3xl mb-2 block"></i>
                            Нет заданий
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    // Функция для применения фильтров
    function applyFilters() {
        const params = new URLSearchParams();

        // Название
        const title = document.getElementById('filterTitle').value;
        if (title) params.set('title', title);

        // Группы
        const selectedGroups = Array.from(document.querySelectorAll('.group-checkbox:checked')).map(cb => cb.value);
        selectedGroups.forEach(g => params.append('group', g));

        // Предметы
        const selectedSubjects = Array.from(document.querySelectorAll('.subject-checkbox:checked')).map(cb => cb.value);
        selectedSubjects.forEach(s => params.append('subject', s));

        // Сортировка
        const selectedSort = document.querySelector('input[name="sort"]:checked');
        if (selectedSort && selectedSort.value !== '-deadline') {
            params.set('sort', selectedSort.value);
        }

        window.location.href = `/assignments/list/?${params.toString()}`;
    }

    // Выпадающие меню
    function toggleMenu(menuId) {
        document.querySelectorAll('.filter-menu').forEach(menu => {
            if (menu.id !== menuId) menu.classList.add('hidden');
        });
        const menu = document.getElementById(menuId);
        menu.classList.toggle('hidden');
    }

    // Закрытие при клике вне меню
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.filter-btn') && !e.target.closest('.filter-menu')) {
            document.querySelectorAll('.filter-menu').forEach(menu => {
                menu.classList.add('hidden');
            });
        }
    });

    // Кнопки фильтров
    document.getElementById('groupFilterBtn').addEventListener('click', () => toggleMenu('groupFilterMenu'));
    document.getElementById('subjectFilterBtn').addEventListener('click', () => toggleMenu('subjectFilterMenu'));
    document.getElementById('sortFilterBtn').addEventListener('click', () => toggleMenu('sortFilterMenu'));

    // Выбрать все группы
    const selectAllGroups = document.getElementById('selectAllGroups');
    if (selectAllGroups) {
        selectAllGroups.addEventListener('change', function(e) {
            document.querySelectorAll('.group-checkbox').forEach(cb => cb.checked = e.target.checked);
        });
    }

    // Выбрать все предметы
    const selectAllSubjects = document.getElementById('selectAllSubjects');
    if (selectAllSubjects) {
        selectAllSubjects.addEventListener('change', function(e) {
            document.querySelectorAll('.subject-checkbox').forEach(cb => cb.checked = e.target.checked);
        });
    }

    // Применить фильтры
    document.getElementById('applyFiltersBtn').addEventListener('click', applyFilters);

    // Кнопки применения внутри меню
    const applyGroups = document.getElementById('applyGroups');
    if (applyGroups) applyGroups.addEventListener('click', () => toggleMenu('groupFilterMenu'));
    const applySubjects = document.getElementById('applySubjects');
    if (applySubjects) applySubjects.addEventListener('click', () => toggleMenu('subjectFilterMenu'));
    const applySort = document.getElementById('applySort');
    if (applySort) applySort.addEventListener('click', () => toggleMenu('sortFilterMenu'));

    // Сброс фильтров
    const resetGroups = document.getElementById('resetGroups');
    if (resetGroups) {
        resetGroups.addEventListener('click', () => {
            document.querySelectorAll('.group-checkbox').forEach(cb => cb.checked = false);
            if (selectAllGroups) selectAllGroups.checked = false;
        });
    }
    const resetSubjects = document.getElementById('resetSubjects');
    if (resetSubjects) {
        resetSubjects.addEventListener('click', () => {
            document.querySelectorAll('.subject-checkbox').forEach(cb => cb.checked = false);
            if (selectAllSubjects) selectAllSubjects.checked = false;
        });
    }
    const resetSort = document.getElementById('resetSort');
    if (resetSort) {
        resetSort.addEventListener('click', () => {
            document.querySelector('input[name="sort"][value="-deadline"]').checked = true;
        });
    }

    // Удаление задания
    function confirmDelete(assignmentId, assignmentTitle) {
        if (confirm(`Удалить задание "${assignmentTitle}"?`)) {
            fetch(`/assignments/delete/${assignmentId}/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}'
                }
            }).then(response => {
                if (response.ok) {
                    window.location.reload();
                } else {
                    alert('Ошибка при удалении');
                }
            });
        }
    }
</script>

<style>
    .filter-btn {
        display: inline-flex;
        align-items: center;
        padding: 8px 16px;
        background-color: white;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.2s;
    }
    .filter-btn:hover {
        background-color: #f3f4f6;
        border-color: #4395AB;
    }
    .filter-menu {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 4px;
        background-color: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        z-index: 50;
        min-width: 220px;
    }
    .filter-menu.hidden {
        display: none;
    }
    .btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background-color: #4395AB;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        text-decoration: none;
    }
    .btn-primary:hover {
        background-color: #2d6b7c;
    }
</style>
{% endblock %}