{% 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">
            <button onclick="openAddModal()" class="btn-primary">
                <i class="fas fa-plus mr-2"></i>Добавить занятие
            </button>
            {% if selected_group %}
            <a href="{% url 'export_schedule' %}?group={{ selected_group.id }}" 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 items-center gap-4 flex-wrap">
            <label class="font-medium text-gray-700">Группа:</label>
            <select id="group-select" class="form-input w-auto">
                {% for group in groups %}
                <option value="{{ group.id }}" {% if selected_group.id == group.id %}selected{% endif %}>
                    {{ group.name }} ({{ group.course_num }} курс)
                </option>
                {% endfor %}
            </select>
            <button onclick="changeGroup()" class="btn-primary">Показать</button>
        </div>
    </div>

    {% if selected_group %}
    <!-- Таблица расписания -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="bg-[#4395AB] text-white">
                        <th class="px-4 py-3 text-left">Время</th>
                        {% for day in weekdays %}
                        <th class="px-4 py-3 text-left min-w-[150px]">{{ day }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for start_time, end_time in times %}
                    <tr class="border-b hover:bg-gray-50">
                        <td class="px-4 py-3 font-medium bg-gray-50">{{ start_time }}-{{ end_time }}</td>
                        {% for weekday_num in "1234567" %}
                        <td class="px-4 py-2 align-top">
                            {% with day_num=forloop.counter %}
                                {% for item in schedule_items %}
                                    {% if item.weekday == day_num and item.start_time|time:"H:i" == start_time %}
                                    <div class="bg-gray-50 rounded-lg p-2">
                                        <div class="font-semibold">{{ item.subject.name }}</div>
                                        <div class="text-sm">{{ item.teacher.last_name }} {{ item.teacher.first_name }}</div>
                                        <div class="text-sm text-gray-500">
                                            {% if item.room %}
                                                {% if item.room.is_distance %}🌐 Дистант{% else %}📍 {{ item.room.number }}{% endif %}
                                            {% else %}—{% endif %}
                                        </div>
                                        <button onclick="deleteItem({{ item.id }})" class="text-red-500 text-sm mt-1">🗑 Удалить</button>
                                    </div>
                                    {% endif %}
                                {% endfor %}
                            {% endwith %}
                            <button onclick="openAddModalWithData('{{ forloop.counter }}', '{{ start_time }}', '{{ end_time }}')"
                                    class="w-full py-4 text-gray-400 hover:text-[#4395AB] hover:bg-gray-50 rounded-lg transition border-2 border-dashed border-gray-200 mt-1">
                                <i class="fas fa-plus"></i>
                            </button>
                        </td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% else %}
    <div class="text-center py-12 bg-white rounded-xl shadow-sm">
        <i class="fas fa-calendar-alt text-5xl text-gray-300 mb-3 block"></i>
        <p class="text-gray-500">Выберите группу для просмотра расписания</p>
    </div>
    {% endif %}
</div>

<!-- Модальное окно добавления занятия -->
<div id="addModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-xl p-6 w-full max-w-md">
        <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" id="add_group_id" value="{{ selected_group.id|default:'' }}">
            <input type="hidden" name="weekday" id="add_weekday">
            <input type="hidden" name="start_time" id="add_start_time">
            <input type="hidden" name="end_time" id="add_end_time">

            <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="grid grid-cols-2 gap-3 mb-4">
                <label class="flex items-center gap-2">
                    <input type="checkbox" name="is_even_week" checked> Чётная неделя
                </label>
                <label class="flex items-center gap-2">
                    <input type="checkbox" name="is_odd_week" checked> Нечётная неделя
                </label>
            </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>

<script>
    function changeGroup() {
        const groupId = document.getElementById('group-select').value;
        window.location.href = `/schedule/?group=${groupId}`;
    }

    function openAddModalWithData(weekday, startTime, endTime) {
        document.getElementById('add_weekday').value = weekday;
        document.getElementById('add_start_time').value = startTime;
        document.getElementById('add_end_time').value = endTime;
        document.getElementById('addModal').classList.remove('hidden');
        document.getElementById('addModal').classList.add('flex');
    }

    function openAddModal() {
        document.getElementById('add_weekday').value = '';
        document.getElementById('add_start_time').value = '';
        document.getElementById('add_end_time').value = '';
        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}/`;
        }
    }
</script>

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