{% extends 'base.html' %}

{% block title %}Отметка посещаемости{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-6">
    <h1 class="text-2xl font-bold mb-6">
        Отметка посещаемости: {{ schedule_item.subject.name }}
    </h1>
    
    <div class="bg-gray-100 rounded-lg p-4 mb-6">
        <p><strong>Дата:</strong> {{ schedule_item.date|date:"d.m.Y" }}</p>
        <p><strong>Время:</strong> {{ schedule_item.start_time|time:"H:i" }} - {{ schedule_item.end_time|time:"H:i" }}</p>
        <p><strong>Группа:</strong> {{ schedule_item.group.name }}</p>
        <p><strong>Преподаватель:</strong> {{ schedule_item.teacher.last_name }} {{ schedule_item.teacher.first_name }}</p>
    </div>

    <form method="post" class="bg-white rounded-lg shadow p-6">
        {% csrf_token %}
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b">
                        <th class="text-left py-2 px-2">Студент</th>
                        <th class="text-left py-2 px-2">Статус</th>
                        <th class="text-left py-2 px-2">Опоздание (мин)</th>
                    </tr>
                </thead>
                <tbody>
                    {% for student_data in students_with_attendance %}
                    <tr class="border-b">
                        <td class="py-2 px-2">
                            {{ student_data.student.last_name }} {{ student_data.student.first_name }}
                        </td>
                        <td class="py-2 px-2">
                            <select name="status_{{ student_data.student.id }}" class="p-2 border rounded" onchange="toggleLate(this, {{ student_data.student.id }})">
                                <option value="present" {% if student_data.attendance.status == 'present' or not student_data.attendance %}selected{% endif %}>Присутствовал</option>
                                <option value="absent" {% if student_data.attendance.status == 'absent' %}selected{% endif %}>Отсутствовал</option>
                                <option value="late" {% if student_data.attendance.status == 'late' %}selected{% endif %}>Опоздал</option>
                                <option value="excused" {% if student_data.attendance.status == 'excused' %}selected{% endif %}>Уважительная причина</option>
                            </select>
                        </td>
                        <td class="py-2 px-2">
                            <input type="number" name="late_{{ student_data.student.id }}"
                                   value="{{ student_data.attendance.late_minutes|default:0 }}"
                                   class="p-2 border rounded w-24" min="0"
                                   {% if student_data.attendance.status != 'late' %}disabled{% endif %}>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="flex gap-3 mt-6">
            <button type="submit" class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600">
                Сохранить
            </button>
            <a href="{% url 'attendance_view' %}" class="bg-gray-500 text-white px-6 py-2 rounded-lg hover:bg-gray-600">
                Отмена
            </a>
        </div>
    </form>
</div>

<script>
    function toggleLate(select, studentId) {
        const lateInput = document.querySelector(`input[name="late_${studentId}"]`);
        if (lateInput) {
            lateInput.disabled = select.value !== 'late';
            if (select.value !== 'late') {
                lateInput.value = 0;
            }
        }
    }
</script>
{% endblock %}