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

{% block title %}Mark Attendance{% endblock %}

{% block extra_css %}
<style>
    .status-btn-group {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
    }
    .status-btn {
        min-width: 80px;
    }
    .student-row {
        transition: background-color 0.2s;
    }
    .student-row:hover {
        background-color: #f8f9fc;
    }
    .quick-actions {
        position: sticky;
        top: 70px;
        z-index: 100;
    }
    .all-present-btn {
        cursor: pointer;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header with Quick Actions -->
    <div class="quick-actions mb-4">
        <div class="card shadow">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="fas fa-clipboard-check text-primary"></i> 
                        Mark Attendance - {{ today|date:"l, F d, Y" }}
                    </h5>
                    <div>
                        <button class="btn btn-sm btn-success" onclick="setAllPresent()">
                            <i class="fas fa-check-circle"></i> All Present
                        </button>
                        <button class="btn btn-sm btn-warning" onclick="setAllAbsent()">
                            <i class="fas fa-times-circle"></i> All Absent
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Class Selection -->
    <div class="card shadow mb-4">
        <div class="card-body">
            <form method="get" class="row">
                <div class="col-md-6">
                    <label class="form-label">Select Class</label>
                    <select name="class" class="form-control" onchange="this.form.submit()">
                        <option value="">-- Choose a class --</option>
                        {% for class in classes %}
                        <option value="{{ class.id }}" {% if selected_class.id == class.id %}selected{% endif %}>
                            {{ class.name }} ({{ class.code }})
                        </option>
                        {% endfor %}
                    </select>
                </div>
            </form>
        </div>
    </div>

    {% if selected_class %}
    <!-- Attendance Form -->
    <div class="card shadow">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0">{{ selected_class.name }} - {{ students|length }} Students</h5>
            <span class="badge bg-light text-dark" id="markedCount">0 marked</span>
        </div>
        
        <div class="card-body">
            <form method="post" id="attendanceForm">
                {% csrf_token %}
                <input type="hidden" name="class_id" value="{{ selected_class.id }}">
                
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Student</th>
                                <th>ID</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for student in students %}
                            <tr class="student-row" data-student-id="{{ student.id }}">
                                <td>{{ forloop.counter }}</td>
                                <td>
                                    <strong>{{ student.first_name }} {{ student.last_name }}</strong>
                                </td>
                                <td><small class="text-muted">{{ student.student_id }}</small></td>
                                <td>
                                    <div class="status-btn-group">
                                        <input type="radio" class="btn-check" 
                                               name="status_{{ student.id }}" 
                                               id="present_{{ student.id }}" 
                                               value="present" 
                                               {% if attendance_dict|get_item:student.id == 'present' %}checked{% endif %}
                                               autocomplete="off">
                                        <label class="btn btn-outline-success btn-sm status-btn" 
                                               for="present_{{ student.id }}">✅ Present</label>
                                        
                                        <input type="radio" class="btn-check" 
                                               name="status_{{ student.id }}" 
                                               id="absent_{{ student.id }}" 
                                               value="absent"
                                               {% if attendance_dict|get_item:student.id == 'absent' %}checked{% endif %}
                                               autocomplete="off">
                                        <label class="btn btn-outline-danger btn-sm status-btn" 
                                               for="absent_{{ student.id }}">❌ Absent</label>
                                        
                                        <input type="radio" class="btn-check" 
                                               name="status_{{ student.id }}" 
                                               id="late_{{ student.id }}" 
                                               value="late"
                                               {% if attendance_dict|get_item:student.id == 'late' %}checked{% endif %}
                                               autocomplete="off">
                                        <label class="btn btn-outline-warning btn-sm status-btn" 
                                               for="late_{{ student.id }}">⏰ Late</label>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                <div class="mt-4 text-center">
                    <button type="submit" class="btn btn-primary btn-lg px-5">
                        <i class="fas fa-save"></i> Save Attendance
                    </button>
                    <a href="{% url 'staff:teacher_dashboard' %}" class="btn btn-secondary btn-lg px-5">
                        <i class="fas fa-times"></i> Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
// Count marked students
function updateMarkedCount() {
    let marked = document.querySelectorAll('input[type="radio"]:checked').length;
    document.getElementById('markedCount').textContent = marked + ' marked';
}

// Set all students to present
function setAllPresent() {
    document.querySelectorAll('input[value="present"]').forEach(radio => {
        radio.checked = true;
    });
    updateMarkedCount();
}

// Set all students to absent
function setAllAbsent() {
    document.querySelectorAll('input[value="absent"]').forEach(radio => {
        radio.checked = true;
    });
    updateMarkedCount();
}

// Update count when any radio changes
document.querySelectorAll('input[type="radio"]').forEach(radio => {
    radio.addEventListener('change', updateMarkedCount);
});

// Initialize count
document.addEventListener('DOMContentLoaded', updateMarkedCount);
</script>
{% endblock %}