{% load custom_filters %}

<div class="custom-datatable-filter table-responsive" id="attendance-container" data-lecture-id="{{ lecture.id|base64_encode }}" data-lecture-date="{{ lecture.date|date:'Y-m-d'|base64_encode }}">
    <table class="table">
        <thead class="thead-light">
            <tr>
                <th>Name</th>
                <th>Class</th>
                <th>Section</th>
                <th>
                    <div class="d-flex">
                        <label class="custom-radio me-md-3">
                            <input type="radio" class="mx-2" name="mark_all" value="Present"
                                onclick="markAll('Present')">
                            <span class="checkmark"></span> All Present
                        </label>
                        <label class="custom-radio">
                            <input type="radio" class="mx-2" name="mark_all" value="Absent"
                                onclick="markAll('Absent')">
                            <span class="checkmark"></span> All Absent
                        </label>
                    </div>
                </th>
                <th style="min-width: 200px;">Notes</th>
            </tr>
        </thead>
        <tbody>
          
            {% for record in students %}
                {% with student_id=record.user.id %}
                    {% with existing=attendances|get_student_attendance:student_id %}
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="ms-2">
                                        <p class="text-dark mb-0">
                                            {{ record.user.first_name }} {{ record.user.last_name }}
                                        </p>
                                    </div>
                                </div>
                            </td>
                            <td>{{ lecture.class_assigned.class_name }}</td>
                            <td>{{ lecture.class_assigned.section_name }}</td>
                            <td>
                                <div class="d-flex align-items-center check-radio-group flex-nowrap">
                                    <label class="custom-radio me-2">
                                        <input type="radio" name="attendance_{{ student_id|base64_encode }}" value="Present"
                                               {% if existing and existing.status == 'Present' %}checked{% endif %}>
                                        <span class="checkmark"></span> Present
                                    </label>
                                    <label class="custom-radio">
                                        <input type="radio" name="attendance_{{ student_id|base64_encode }}" value="Absent"
                                               {% if existing and existing.status == 'Absent' %}checked{% endif %}>
                                        <span class="checkmark"></span> Absent
                                    </label>
                                </div>
                            </td>
                            <td>
                                <input type="text" class="form-control" placeholder="Enter notes"
                                       name="notes_{{ student_id|base64_encode }}">
                            </td>
                        </tr>
                    {% endwith %}
                {% endwith %}
            {% endfor %}
        </tbody>
    </table>

    {% if students %}
        <button id="submit_attendance" class="btn btn-primary mt-2 float-end mx-4">Save Attendance</button>
    {% endif %}


    {% if not students %}
        <div class="alert alert-info text-center mt-3">
            No students found for this lecture.
        </div>
    {% endif %}
</div>