{% extends 'teacher/teacher_base.html' %}

{% block content %}
<style>
    .top-tools {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 10px;
        margin-bottom: 25px;
    }
    .top-tools input {
        padding: 12px;
        border: 1px solid #e5e7eb;
        font-size: 0.9rem;
    }

    .tabs {
        display: flex;
        background: #f1f5f9;
        margin-bottom: 20px;
    }
    .tab-btn {
        flex: 1;
        padding: 15px;
        border: none;
        background: none;
        font-weight: 800;
        color: #64748b;
        cursor: pointer;
        text-transform: uppercase;
        font-size: 0.8rem;
    }
    .tab-btn.active {
        background: #fff;
        color: var(--primary);
        border-bottom: 3px solid var(--primary);
    }

    .list-container {
        display: none;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .list-container.active { display: grid; }

    .student-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        padding: 15px;
        position: relative;
    }
    .student-card h4 { margin: 0 0 5px 0; font-size: 0.95rem; color: #1e293b; }
    .student-card p { margin: 0; font-size: 0.7rem; color: #94a3b8; font-weight: 600; }
    
    .punch-times { margin-top: 10px; font-size: 0.75rem; font-weight: 700; color: #475569; }
    .punch-times i { color: #cbd5e1; width: 14px; }

    .edit-trigger {
        position: absolute;
        top: 10px;
        right: 10px;
        color: var(--primary);
        cursor: pointer;
        font-size: 0.9rem;
    }
    .edited-badge {
        font-size: 0.6rem;
        background: #f1f5f9;
        color: #64748b;
        padding: 2px 6px;
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

    /* Modal Styling */
    .modal {
        display: none;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1000;
        align-items: center; justify-content: center;
        backdrop-filter: blur(4px);
    }
    .modal-content {
        background: #fff;
        width: 90%;
        max-width: 400px;
        padding: 30px;
        position: relative;
    }
    .modal-header { margin-bottom: 20px; }
    .modal-header h3 { margin: 0; font-size: 1.2rem; font-weight: 800; }
    .modal-body label { display: block; font-size: 0.75rem; font-weight: 800; color: #64748b; margin-bottom: 5px; text-transform: uppercase; }
    .modal-body input { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #e5e7eb; }
    .modal-footer { display: flex; gap: 10px; margin-top: 10px; }
    .modal-footer button { flex: 1; padding: 12px; font-weight: 800; border: none; cursor: pointer; }
    .save-btn { background: var(--primary); color: #fff; }
    .cancel-btn { background: #f1f5f9; color: #64748b; }
</style>

<div class="dashboard-header">
    <h1>See Attendance</h1>
    <p>{{ target_date|date:"l, d M Y" }}</p>
</div>

<form method="get" class="top-tools">
    <input type="text" name="q" value="{{ query }}" placeholder="Search Student Name or ID...">
    <input type="date" name="date" value="{{ target_date|date:'Y-m-d' }}" onchange="this.form.submit()">
</form>

<div class="tabs">
    <button class="tab-btn active" onclick="switchTab('present', this)">Present ({{ present_list|length }})</button>
    <button class="tab-btn" onclick="switchTab('absent', this)">Absent ({{ absent_students|length }})</button>
</div>

<div id="present-box" class="list-container active">
    {% for item in present_list %}
    <div class="student-card">
        {% if not item.is_edited %}
        <i class="fas fa-edit edit-trigger" onclick='openModal("{{ item.student.id }}", "{{ item.student.name }}")'></i>
        {% else %}
        <span class="edited-badge">Manual Edit Only Once</span>
        {% endif %}
        <h4>{{ item.student.name }}</h4>
        <p>ROLL: {{ item.student.roll }} • PIN: {{ item.student.pin }}</p>
        
        <div class="punch-times">
            <i class="fas fa-sign-in-alt"></i> IN: {{ item.punch_in|date:"h:i A"|default:"--" }}<br>
            <i class="fas fa-sign-out-alt"></i> OUT: {{ item.punch_out|date:"h:i A"|default:"--" }}
        </div>
    </div>
    {% empty %}
    <div style="grid-column: 1/-1; padding: 40px; text-align: center; color: #94a3b8;">No present students found.</div>
    {% endfor %}
</div>

<div id="absent-box" class="list-container">
    {% for student in absent_students %}
    <div class="student-card">
        <i class="fas fa-plus-circle edit-trigger" onclick='openModal("{{ student.id }}", "{{ student.name }}")'></i>
        <h4>{{ student.name }}</h4>
        <p>ROLL: {{ student.roll }} • PIN: {{ student.pin }}</p>
        <div style="margin-top: 10px; font-size: 0.7rem; color: #ef4444; font-weight: 800; text-transform: uppercase;">Absent</div>
    </div>
    {% empty %}
    <div style="grid-column: 1/-1; padding: 40px; text-align: center; color: #94a3b8;">No absent students found.</div>
    {% endfor %}
</div>

<!-- Edit Modal -->
<div id="editModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modalStudentName">Edit Attendance</h3>
        </div>
        <form id="editForm">
            {% csrf_token %}
            <input type="hidden" name="student_id" id="modalStudentId">
            <input type="hidden" name="date" value="{{ target_date|date:'Y-m-d' }}">
            <div class="modal-body">
                <label>Punch In Time</label>
                <input type="time" name="punch_in" required>
                <label>Punch Out Time (Optional)</label>
                <input type="time" name="punch_out">
            </div>
            <div class="modal-footer">
                <button type="button" class="cancel-btn" onclick="closeModal()">Cancel</button>
                <button type="submit" class="save-btn">Save Changes</button>
            </div>
        </form>
    </div>
</div>

<script>
    function switchTab(type, btn) {
        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        document.querySelectorAll('.list-container').forEach(c => c.classList.remove('active'));
        btn.classList.add('active');
        document.getElementById(type + '-box').classList.add('active');
    }

    function openModal(id, name) {
        document.getElementById('modalStudentId').value = id;
        document.getElementById('modalStudentName').innerText = name;
        document.getElementById('editModal').style.display = 'flex';
    }

    function closeModal() {
        document.getElementById('editModal').style.display = 'none';
    }

    document.getElementById('editForm').onsubmit = function(e) {
        e.preventDefault();
        const fd = new FormData(this);
        fetch("{% url 'teacher_edit_attendance' %}", {
            method: 'POST',
            body: fd,
            headers: { 'X-CSRFToken': '{{ csrf_token }}' }
        })
        .then(r => r.json())
        .then(data => {
            if (data.status === 'ok') {
                location.reload();
            } else {
                alert(data.message);
            }
        });
    }
</script>
{% endblock %}