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

{% block title %}Посещаемость{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-6">
    <h1 class="text-2xl font-bold mb-6">Отметка посещаемости</h1>

    <!-- Выбор группы -->
    <div class="bg-white rounded-lg shadow p-4 mb-6">
        <label class="block text-sm font-medium mb-2">Группа</label>
        <select id="groupSelect" class="w-full p-2 border rounded-lg" onchange="changeGroup()">
            <option value="">Выберите группу</option>
            {% for group in groups %}
            <option value="{{ group.id }}" {% if selected_group.id == group.id %}selected{% endif %}>
                {{ group.name }}
            </option>
            {% endfor %}
        </select>
    </div>

    {% if selected_group %}
    <!-- Выбор даты -->
    <div class="bg-white rounded-lg shadow p-4 mb-6">
        <label class="block text-sm font-medium mb-2">Выберите дату</label>
        <input type="date" id="dateInput" class="w-full p-2 border rounded-lg" value="{{ selected_date|date:'Y-m-d' }}">
        <button onclick="loadSchedule()" class="mt-3 bg-indigo-600 text-white px-4 py-2 rounded-lg w-full hover:bg-indigo-700">
            Показать расписание
        </button>
    </div>

    <!-- РАСПИСАНИЕ -->
    <div class="bg-white rounded-lg shadow" id="scheduleContainer">
        <div class="px-6 py-3 border-b bg-gray-50">
            <h2 class="font-semibold" id="scheduleTitle">
                Расписание на {{ selected_date|date:"d.m.Y" }}
            </h2>
        </div>

        {% if schedule_items %}
        <div class="divide-y">
            {% for item in schedule_items %}
            <div class="p-4 hover:bg-gray-50">
                <div class="flex justify-between items-start">
                    <div>
                        <span class="font-bold text-indigo-600">{{ item.start_time|time:"H:i" }} - {{ item.end_time|time:"H:i" }}</span>
                        <h3 class="font-semibold">{{ item.subject.name }}</h3>
                        <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 %}{{ item.room.number }}{% else %}—{% endif %}</p>
                    </div>
                    <button onclick="openAttendanceModal({{ item.id }}, '{{ item.subject.name }}')"
                            class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600">
                        Отметить
                    </button>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="text-center py-12 text-gray-500">
            Нет занятий на выбранную дату
        </div>
        {% endif %}
    </div>
    {% endif %}
</div>

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

    function loadSchedule() {
        const groupId = document.getElementById('groupSelect').value;
        const date = document.getElementById('dateInput').value;

        if (!groupId || !date) {
            alert('Выберите группу и дату');
            return;
        }

        window.location.href = `/attendance/?group=${groupId}&selected_date=${date}`;
    }

    function openAttendanceModal(scheduleId, subjectName) {
        window.location.href = `/attendance/mark/?schedule_item_id=${scheduleId}`;
    }
</script>
{% endblock %}