{% extends 'school/base_school.html' %}
{% block title %}Exams | STD Lab{% endblock %}
{% block page_title %}Examination Periods{% endblock %}

{% block content %}
<style>
    .card { border-radius: 0; border: 1px solid #e2e8f0; box-shadow: none; margin-bottom: 20px; background: #fff; }
    .btn { border-radius: 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 20px; text-decoration: none; display: inline-block; cursor: pointer; border: none; }
    .btn-dark { background: #0f172a; color: #fff; }
    .btn-green { background: #10b981; color: #fff; font-size: 0.65rem; }
    
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(2px); }
    .modal-content { background: #fff; width: 100%; max-width: 400px; padding: 25px; border: 1px solid #000; box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
</style>

<div style="margin-bottom: 20px; display: flex; justify-content: flex-end; gap: 10px;">
    <a href="{% url 'exam_result_print' %}" class="btn" style="background: #e2e8f0; color: #000; border: 1px solid #000;"><i class="fas fa-print"></i> PRINT RESULT</a>
    <a href="{% url 'grade_config_list' %}" class="btn" style="background: #f1f5f9; color: #64748b;"><i class="fas fa-cog"></i> GRADE SETUP</a>
    <a href="{% url 'exam_add' %}" class="btn btn-dark"><i class="fas fa-plus"></i> NEW EXAM</a>
</div>

<div class="card">
    <table style="width: 100%; border-collapse: collapse;">
        <thead>
            <tr style="background: #f8fafc; text-align: left; border-bottom: 1px solid #e2e8f0;">
                <th style="padding: 15px; font-size: 0.75rem; color: #94a3b8; text-transform: uppercase;">Exam Name</th>
                <th style="padding: 15px; font-size: 0.75rem; color: #94a3b8; text-transform: uppercase;">Year</th>
                <th style="padding: 15px; font-size: 0.75rem; color: #94a3b8; text-transform: uppercase;">SMS Sending</th>
                <th style="padding: 15px; text-align: right;">Action</th>
            </tr>
        </thead>
        <tbody>
            {% for exm in exams %}
            <tr style="border-bottom: 1px solid #f1f5f9;">
                <td style="padding: 15px; font-weight: 800; color: #0f172a;">{{ exm.name }}</td>
                <td style="padding: 15px; font-weight: 700; color: #64748b;">{{ exm.year }}</td>
                <td style="padding: 15px;">
                    <button class="btn btn-green" onclick="openSMSModal('{{ exm.id }}', '{{ exm.name }}')">
                        <i class="fas fa-paper-plane"></i> SEND BULK RESULT SMS
                    </button>
                </td>
                <td style="padding: 15px; text-align: right;">
                    <a href="{% url 'mark_entry' %}?exam_id={{ exm.id }}" style="color: #0f172a; font-weight: 800; text-decoration: none; font-size: 0.75rem; text-transform: uppercase;">Enter Marks</a>
                </td>
            </tr>
            {% empty %}
            <tr><td colspan="4" style="padding: 40px; text-align: center; color: #cbd5e1; font-weight: 800;">NO EXAMS RECORDED</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- BULK SMS MODAL -->
<div id="smsModal" class="modal-overlay">
    <div class="modal-content">
        <h3 id="modalExamName" style="font-weight: 900; margin-bottom: 10px; text-transform: uppercase; font-size: 1rem;">SMS RESULT</h3>
        <p style="font-size: 0.75rem; color: #64748b; margin-bottom: 20px;">Send summarized result (all subjects) to parents of selected class.</p>
        
        <div style="margin-bottom: 25px;">
            <label style="font-size: 0.65rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; display: block; margin-bottom: 5px;">Select Class</label>
            <select id="smsClassId" onchange="checkSMSStatus()" style="width: 100%; height: 45px; border: 1px solid #e2e8f0; font-weight: 700; padding: 0 10px; outline: none;">
                <option value="">-- CHOOSE CLASS --</option>
                {% for c in classes %}<option value="{{ c.id }}">{{ c.name }}</option>{% endfor %}
            </select>
            <div id="smsStatusText" style="font-size: 0.65rem; font-weight: 800; margin-top: 8px; display: none;"></div>
        </div>
        
        <div style="display: flex; gap: 10px;">
            <button type="button" class="btn" id="sendBtn" style="flex: 2; background: #10b981; color: #fff;" onclick="sendBulkSMS()">SEND ALL NOW</button>
            <button type="button" class="btn" style="flex: 1; background: #f1f5f9; color: #64748b;" onclick="closeSMSModal()">CANCEL</button>
        </div>
    </div>
</div>

<script>
    let currentExamId = null;
    function openSMSModal(id, name) {
        currentExamId = id;
        document.getElementById('modalExamName').innerText = "BULK SMS: " + name;
        document.getElementById('smsModal').style.display = 'flex';
    }
    function closeSMSModal() { document.getElementById('smsModal').style.display = 'none'; }
    
    function checkSMSStatus() {
        const classId = document.getElementById('smsClassId').value;
        const statusDiv = document.getElementById('smsStatusText');
        const sendBtn = document.getElementById('sendBtn');
        
        if(!classId) {
            statusDiv.style.display = 'none';
            return;
        }
        
        statusDiv.style.display = 'block';
        statusDiv.innerText = 'CHECKING STATUS...';
        statusDiv.style.color = '#64748b';
        
        fetch(`/school/marks/api/check-exam-sms/?exam_id=${currentExamId}&class_id=${classId}`)
            .then(res => res.json())
            .then(data => {
                if(data.sent) {
                    statusDiv.innerText = "ALREADY SENT FOR THIS CLASS & EXAM";
                    statusDiv.style.color = "#ef4444";
                    sendBtn.disabled = true;
                    sendBtn.style.background = "#94a3b8";
                    sendBtn.innerText = "LOCKED: ALREADY SENT";
                } else {
                    statusDiv.innerText = "READY TO SEND SMS";
                    statusDiv.style.color = "#10b981";
                    sendBtn.disabled = false;
                    sendBtn.style.background = "#10b981";
                    sendBtn.innerText = "SEND ALL NOW";
                }
            });
    }

    function sendBulkSMS() {
        const classId = document.getElementById('smsClassId').value;
        if(!classId) { alert('Please select a class'); return; }
        
        const btn = document.getElementById('sendBtn');
        btn.innerText = 'SENDING...';
        btn.disabled = true;
        btn.style.opacity = '0.5';
        
        fetch(`/school/marks/api/exam-bulk-sms/?exam_id=${currentExamId}&class_id=${classId}`)
            .then(res => res.json())
            .then(data => {
                if(data.success) {
                    alert(`SUCCESS! SMS sent to ${data.count} students.`);
                    location.reload();
                } else {
                    alert('Error sending SMS');
                    btn.innerText = 'SEND ALL NOW';
                    btn.disabled = false;
                    btn.style.opacity = '1';
                }
            })
            .catch(err => {
                alert('Network error');
                btn.innerText = 'SEND ALL NOW';
                btn.disabled = false;
                btn.style.opacity = '1';
            });
    }
</script>
{% endblock %}