{% 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>
        <div class="flex gap-3">
            {% if selected_group %}
            <a href="{% url 'export_schedule' %}?group={{ selected_group.id }}&date={{ selected_date }}" class="btn-secondary">
                <i class="fas fa-download mr-2"></i>Скачать Excel
            </a>
            {% endif %}
        </div>
    </div>

    <!-- Фильтр по группам -->
    <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
        <div class="flex flex-wrap gap-4 items-end">
            <div class="flex-1">
                <label class="form-label">Группа</label>
                <select id="group-select" class="form-input">
                    {% for group in groups %}
                    <option value="{{ group.id }}" {% if selected_group.id == group.id %}selected{% endif %}>
                        {{ group.name }} ({{ group.course_num }} курс)
                    </option>
                    {% endfor %}
                </select>
            </div>
            <button onclick="changeGroup()" class="btn-primary">Показать</button>
        </div>
    </div>

    {% if selected_group %}
    <!-- Календарь -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
        <div class="bg-[#4395AB] text-white px-4 py-2 flex justify-between items-center">
            <button onclick="prevWeek()" class="text-white hover:text-gray-200">←</button>
            <span class="font-semibold">
                Неделя {{ week_dates.0|date:"d.m" }} - {{ week_dates.6|date:"d.m.Y" }}
            </span>
            <button onclick="nextWeek()" class="text-white hover:text-gray-200">→</button>
        </div>
        <div class="grid grid-cols-7 divide-x">
            {% for date in week_dates %}
            <a href="?group={{ selected_group.id }}&date={{ date|date:'Y-m-d' }}"
               class="text-center py-3 hover:bg-gray-50 transition block {% if date|date:'Y-m-d' == selected_date %}bg-indigo-100{% endif %}">
                <div class="font-semibold">{{ date|date:"D"|slice:":2" }}</div>
                <div class="text-sm {% if date == today %}text-red-500 font-bold{% endif %}">
                    {{ date|date:"d.m" }}
                </div>
            </a>
            {% endfor %}
        </div>
    </div>

    <!-- Расписание на выбранную дату -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b bg-gray-50">
            <h2 class="font-semibold text-gray-700">
                {{ selected_group.name }} - {{ selected_date|date:"d.m.Y" }} ({% if selected_date|date:"w" == 1 %}ПН{% elif selected_date|date:"w" == 2 %}ВТ{% elif selected_date|date:"w" == 3 %}СР{% elif selected_date|date:"w" == 4 %}ЧТ{% elif selected_date|date:"w" == 5 %}ПТ{% elif selected_date|date:"w" == 6 %}СБ{% else %}ВС{% endif %})
            </h2>
        </div>
        <div class="p-4">
            <div class="flex justify-between items-center mb-4">
                <h3 class="font-semibold">Занятия на день</h3>
                {% if request.user.role == 'teacher' or request.user.role == 'academic_staff' or request.user.is_staff %}
                <button onclick="openAddModal()" class="btn-primary">
                    <i class="fas fa-plus mr-2"></i>Добавить занятие
                </button>
                {% endif %}
            </div>

            {% if schedule_items %}
            <div class="space-y-3">
                {% for item in schedule_items %}
                <div class="border rounded-lg p-3 hover:bg-gray-50">
                    <div class="flex justify-between items-start">
                        <div>
                            <span class="font-semibold text-indigo-600">{{ item.start_time|time:"H:i" }} - {{ item.end_time|time:"H:i" }}</span>
                            <h4 class="font-semibold text-gray-800">{{ item.subject.name }}</h4>
                            <p class="text-sm text-gray-600">Преподаватель: {{ item.teacher.last_name }} {{ item.teacher.first_name }}</p>
                            <p class="text-sm text-gray-500">
                                {% if item.room %}
                                    {% if item.room.is_distance %}🌐 Дистант{% else %}📍 {{ item.room.number }}{% endif %}
                                {% else %}—{% endif %}
                                {% if item.topic %} • {{ item.topic }}{% endif %}
                            </p>
                        </div>
                        {% if request.user.role == 'teacher' or request.user.role == 'academic_staff' or request.user.is_staff %}
                        <div class="flex gap-2">
                            <button onclick="openEditModal({{ item.id }})" class="text-blue-500 hover:text-blue-700">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button onclick="deleteItem({{ item.id }})" class="text-red-500 hover:text-red-700">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="text-center py-8 text-gray-500">
                <i class="fas fa-calendar-day text-3xl mb-2 block"></i>
                <p>Нет занятий на этот день</p>
                {% if request.user.role == 'teacher' or request.user.role == 'academic_staff' or request.user.is_staff %}
                <button onclick="openAddModal()" class="btn-primary mt-3">Добавить занятие</button>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>

<!-- Модальное окно добавления занятия с отступом от навигации -->
<div id="addModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-start justify-center z-50 pt-20">
    <div class="bg-white rounded-xl p-6 w-full max-w-md max-h-[80vh] overflow-y-auto">
        <h2 class="text-xl font-bold mb-4">Добавить занятие</h2>
        <form method="post" action="{% url 'add_schedule_item' %}">
            {% csrf_token %}
            <input type="hidden" name="group_id" value="{{ selected_group.id }}">

            <div class="mb-3">
                <label class="form-label">Дата занятия</label>
                <input type="date" name="date" required class="form-input" value="{{ selected_date }}">
            </div>

            <div class="mb-3">
                <label class="form-label">Время начала</label>
                <input type="time" name="start_time" required class="form-input">
            </div>
            <div class="mb-3">
                <label class="form-label">Время окончания</label>
                <input type="time" name="end_time" required class="form-input">
            </div>
            <div class="mb-3">
                <label class="form-label">Предмет</label>
                <select name="subject_id" required class="form-input">
                    <option value="">Выберите предмет</option>
                    {% for s in subjects %}
                    <option value="{{ s.id }}">{{ s.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Преподаватель</label>
                <select name="teacher_id" required class="form-input">
                    <option value="">Выберите преподавателя</option>
                    {% for t in teachers %}
                    <option value="{{ t.id }}">{{ t.last_name }} {{ t.first_name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Аудитория</label>
                <select name="room_id" class="form-input">
                    <option value="">— Выберите аудиторию —</option>
                    {% for r in rooms %}
                    <option value="{{ r.id }}">{% if r.is_distance %}🌐 Дистант{% else %}{{ r.number }}{% endif %}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Тема занятия</label>
                <input type="text" name="topic" class="form-input" placeholder="Необязательно">
            </div>
            <div class="flex gap-3">
                <button type="submit" class="btn-primary flex-1">Сохранить</button>
                <button type="button" onclick="closeAddModal()" class="btn-secondary">Отмена</button>
            </div>
        </form>
    </div>
</div>

<!-- Модальное окно редактирования занятия с отступом от навигации -->
<div id="editModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-start justify-center z-50 pt-20">
    <div class="bg-white rounded-xl p-6 w-full max-w-md max-h-[80vh] overflow-y-auto">
        <h2 class="text-xl font-bold mb-4">Редактировать занятие</h2>
        <form method="post" action="" id="editForm">
            {% csrf_token %}
            <input type="hidden" name="item_id" id="edit_item_id">

            <div class="mb-3">
                <label class="form-label">Дата занятия</label>
                <input type="date" name="date" id="edit_date" required class="form-input">
            </div>

            <div class="mb-3">
                <label class="form-label">Время начала</label>
                <input type="time" name="start_time" id="edit_start_time" required class="form-input">
            </div>
            <div class="mb-3">
                <label class="form-label">Время окончания</label>
                <input type="time" name="end_time" id="edit_end_time" required class="form-input">
            </div>
            <div class="mb-3">
                <label class="form-label">Предмет</label>
                <select name="subject_id" id="edit_subject" required class="form-input">
                    {% for s in subjects %}
                    <option value="{{ s.id }}">{{ s.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Преподаватель</label>
                <select name="teacher_id" id="edit_teacher" required class="form-input">
                    {% for t in teachers %}
                    <option value="{{ t.id }}">{{ t.last_name }} {{ t.first_name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Аудитория</label>
                <select name="room_id" id="edit_room" class="form-input">
                    <option value="">— Выберите аудиторию —</option>
                    {% for r in rooms %}
                    <option value="{{ r.id }}">{% if r.is_distance %}🌐 Дистант{% else %}{{ r.number }}{% endif %}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Тема занятия</label>
                <input type="text" name="topic" id="edit_topic" class="form-input" placeholder="Необязательно">
            </div>
            <div class="flex gap-3">
                <button type="submit" class="btn-primary flex-1">Сохранить</button>
                <button type="button" onclick="closeEditModal()" class="btn-secondary">Отмена</button>
            </div>
        </form>
    </div>
</div>

<script>
    function changeGroup() {
        const groupId = document.getElementById('group-select').value;
        const currentUrl = new URL(window.location.href);
        currentUrl.searchParams.set('group', groupId);
        window.location.href = currentUrl.toString();
    }

    function prevWeek() {
        let currentDate = new Date('{{ selected_date }}');
        currentDate.setDate(currentDate.getDate() - 7);
        const groupId = document.getElementById('group-select').value;
        window.location.href = `/schedule/?group=${groupId}&date=${currentDate.toISOString().split('T')[0]}`;
    }

    function nextWeek() {
        let currentDate = new Date('{{ selected_date }}');
        currentDate.setDate(currentDate.getDate() + 7);
        const groupId = document.getElementById('group-select').value;
        window.location.href = `/schedule/?group=${groupId}&date=${currentDate.toISOString().split('T')[0]}`;
    }

    function openAddModal() {
        document.getElementById('addModal').classList.remove('hidden');
        document.getElementById('addModal').classList.add('flex');
    }

    function closeAddModal() {
        document.getElementById('addModal').classList.add('hidden');
        document.getElementById('addModal').classList.remove('flex');
    }

    function deleteItem(itemId) {
        if (confirm('Удалить это занятие?')) {
            window.location.href = `/schedule/delete/${itemId}/`;
        }
    }

    function openEditModal(itemId) {
        fetch(`/schedule/api/item/${itemId}/`)
            .then(response => response.json())
            .then(data => {
                document.getElementById('editForm').action = `/schedule/edit/${itemId}/`;
                document.getElementById('edit_item_id').value = data.id;
                document.getElementById('edit_date').value = data.date;
                document.getElementById('edit_start_time').value = data.start_time;
                document.getElementById('edit_end_time').value = data.end_time;
                document.getElementById('edit_subject').value = data.subject_id;
                document.getElementById('edit_teacher').value = data.teacher_id;
                document.getElementById('edit_room').value = data.room_id || '';
                document.getElementById('edit_topic').value = data.topic || '';
                document.getElementById('editModal').classList.remove('hidden');
                document.getElementById('editModal').classList.add('flex');
            });
    }

    function closeEditModal() {
        document.getElementById('editModal').classList.add('hidden');
        document.getElementById('editModal').classList.remove('flex');
    }
</script>

<style>
    select.form-input, input.form-input {
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 8px;
    }
</style>
{% endblock %}