{% extends 'school/base_school.html' %}
{% block title %}Mark Entry | STD Lab{% endblock %}
{% block page_title %}Academic Result Entry{% endblock %}

{% block content %}
<style>
    .card { border-radius: 0; border: 1px solid #e2e8f0; background: #fff; margin-bottom: 20px; }
    .btn { border-radius: 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 15px; cursor: pointer; }
    input, select { border: 1px solid #e2e8f0; border-radius: 0; height: 40px; padding: 0 10px; font-weight: 700; outline: none; }
    label { font-size: 0.65rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; display: block; margin-bottom: 5px; }
    
    .filter-bar { display: flex; gap: 15px; padding: 20px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; align-items: flex-end; }
    .mark-input { width: 80px; text-align: center; }
    .sms-btn { background: #10b981; color: #fff; border: none; font-size: 0.65rem; }
    .sms-btn.sent { background: #64748b; opacity: 0.7; pointer-events: none; }
</style>

<div class="card">
    <form method="get" class="filter-bar">
        <div style="flex: 1;">
            <label>Select Class</label>
            <select name="class_id" required style="width: 100%;">
                <option value="">-- CLASS --</option>
                {% for c in classes %}<option value="{{ c.id }}" {% if selected_class == c.id|stringformat:"s" %}selected{% endif %}>{{ c.name }}</option>{% endfor %}
            </select>
        </div>
        <div style="flex: 1;">
            <label>Examination</label>
            <select name="exam_id" required style="width: 100%;">
                <option value="">-- EXAM --</option>
                {% for e in exams %}<option value="{{ e.id }}" {% if selected_exam == e.id|stringformat:"s" %}selected{% endif %}>{{ e.name }} ({{ e.year }})</option>{% endfor %}
            </select>
        </div>
        <div style="flex: 1;">
            <label>Subject</label>
            <select name="subject_id" required style="width: 100%;">
                <option value="">-- SUBJECT --</option>
                {% for s in subjects %}<option value="{{ s.id }}" {% if selected_subject == s.id|stringformat:"s" %}selected{% endif %}>{{ s.name }}</option>{% endfor %}
            </select>
        </div>
        <button type="submit" class="btn" style="background: #0f172a; color: #fff; border: none; height: 40px;">LOAD LIST</button>
    </form>

    {% if students %}
    <form method="post">
        {% csrf_token %}
        <input type="hidden" name="class_id" value="{{ selected_class }}">
        <input type="hidden" name="exam_id" value="{{ selected_exam }}">
        <input type="hidden" name="subject_id" value="{{ selected_subject }}">
        
        <table style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr style="text-align: left; border-bottom: 1px solid #e2e8f0;">
                    <th style="padding: 15px; font-size: 0.7rem; color: #94a3b8;">ROLL</th>
                    <th style="padding: 15px; font-size: 0.7rem; color: #94a3b8;">STUDENT NAME</th>
                    <th style="padding: 15px; font-size: 0.7rem; color: #94a3b8; text-align: center;">MARKS (100)</th>
                    <th style="padding: 15px; font-size: 0.7rem; color: #94a3b8; text-align: center;">GRADE</th>
                    <th style="padding: 15px; font-size: 0.7rem; color: #94a3b8; text-align: right;">ACTION</th>
                </tr>
            </thead>
            <tbody>
                {% for item in students %}
                <tr style="border-bottom: 1px solid #f1f5f9;">
                    <td style="padding: 12px 15px; font-weight: 800; color: #64748b;">{{ item.student.roll }}</td>
                    <td style="padding: 12px 15px; font-weight: 800; color: #0f172a;">{{ item.student.name }}</td>
                    <td style="padding: 12px 15px; text-align: center;">
                        <input type="number" step="0.5" name="marks_{{ item.student.id }}" 
                               value="{{ item.record.marks|default:'' }}" class="mark-input" min="0" max="100">
                    </td>
                    <td style="padding: 12px 15px; text-align: center;">
                        {% if item.record %}
                            <span style="font-weight: 900; color: {% if item.record.grade == 'F' %}#ef4444{% else %}#10b981{% endif %};">
                                {{ item.record.grade }}
                            </span>
                        {% else %}-{% endif %}
                    </td>
                    <td style="padding: 12px 15px; text-align: right;">
                        {% if item.record %}
                            <button type="button" class="btn sms-btn {% if item.record.is_sms_sent %}sent{% endif %}" 
                                    onclick="sendResultSMS(this, '{{ item.record.id }}')">
                                {% if item.record.is_sms_sent %}SENT{% else %}SEND SMS{% endif %}
                            </button>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        
        <div style="padding: 20px; text-align: center; border-top: 1px solid #e2e8f0;">
            <button type="submit" class="btn" style="background: #0f172a; color: #fff; width: 250px;">SAVE ALL MARKS</button>
        </div>
    </form>
    {% elif selected_class %}
    <div style="padding: 40px; text-align: center; color: #94a3b8; font-weight: 800;">PLEASE SELECT ALL FILTERS TO ENTER MARKS</div>
    {% endif %}
</div>

<script>
    function sendResultSMS(btn, recordId) {
        if(btn.classList.contains('sent')) return;
        
        btn.innerText = 'SENDING...';
        btn.style.opacity = '0.5';
        
        fetch(`/school/marks/api/send-sms/?record_id=${recordId}`)
            .then(res => res.json())
            .then(data => {
                if(data.success) {
                    btn.innerText = 'SENT';
                    btn.classList.add('sent');
                    btn.style.opacity = '0.7';
                } else {
                    alert('Error: ' + (data.error || 'Failed to send SMS'));
                    btn.innerText = 'SEND SMS';
                    btn.style.opacity = '1';
                }
            })
            .catch(err => {
                alert('Connection Error');
                btn.innerText = 'SEND SMS';
                btn.style.opacity = '1';
            });
    }
</script>
{% endblock %}