{% extends 'school/base_school.html' %}
{% block title %}Schedule Class | STD Lab{% endblock %}
{% block page_title %}Schedule Virtual Session{% endblock %}

{% block content %}
<style>
    .card-sharp { background: #fff; border: 1px solid #e2e8f0; padding: 32px; max-width: 900px; margin: 0 auto; }
    .form-section-title { font-size: 0.75rem; font-weight: 900; color: #10b981; text-transform: uppercase; margin-bottom: 20px; border-left: 4px solid #10b981; padding-left: 12px; }
    label { display: block; font-size: 0.65rem; font-weight: 900; color: #64748b; text-transform: uppercase; margin-bottom: 5px; }
    input, select { width: 100%; height: 45px; border: 1px solid #e2e8f0; border-radius: 0; padding: 0 12px; font-weight: 700; color: #0f172a; outline: none; margin-bottom: 20px; }
    .grid-box { border: 1.5px solid #f1f5f9; padding: 10px; max-height: 250px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 20px; background: #fafafa; }
    .check-label { 
        display: flex; 
        align-items: center; 
        gap: 8px; 
        font-size: 0.72rem; 
        font-weight: 800; 
        color: #334155; 
        cursor: pointer; 
        margin: 0; 
        background: #fff; 
        padding: 5px 10px; 
        border: 1px solid #e2e8f0; 
        transition: 0.2s; 
    }
    .check-label:hover { border-color: #10b981; background: #f0fdf4; }
    .check-label input[type="checkbox"] {
        width: 14px;
        height: 14px;
        margin: 0;
        accent-color: #10b981;
        flex-shrink: 0;
    }
    .btn-sharp { border-radius: 0; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 15px 30px; cursor: pointer; border: none; }
    
    /* Subject Filter Pills */
    .subject-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        padding: 4px 10px;
        font-size: 0.65rem;
        font-weight: 800;
        color: #64748b;
        cursor: pointer;
        transition: 0.2s;
        margin-right: 5px;
        margin-bottom: 5px;
    }
    .subject-pill input { display: none; }
    .subject-pill.active {
        background: #10b981;
        color: #fff;
        border-color: #10b981;
    }
</style>

<div class="card-sharp">
    <form method="post">
        {% csrf_token %}
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px;">
            <!-- LEFT COLUMN: Logistics -->
            <div>
                <div class="form-section-title">Session Details</div>
                
                <label>Class Title / Topic</label>
                <input type="text" name="title" required placeholder="ENVIRONMENTAL SCIENCE - CHAPTER 4">

                <div style="display: flex; gap: 15px;">
                    <div style="flex: 1;">
                        <label>Select Class</label>
                        <select id="classSelect" name="class_id" required>
                            <option value="">-- CHOOSE --</option>
                            {% for c in student_classes %}<option value="{{ c.id }}">{{ c.name }}</option>{% endfor %}
                        </select>
                    </div>
                    <div style="flex: 1;">
                        <label>Teacher</label>
                        <select name="teacher_id">
                            <option value="">-- ADMIN --</option>
                            {% for t in teachers %}<option value="{{ t.id }}">{{ t.user.get_full_name }}</option>{% endfor %}
                        </select>
                    </div>
                </div>

                <label>Schedule Date & Time</label>
                <input type="datetime-local" name="schedule_time" required>

                <label>Joining Link (Zoom / Meet)</label>
                <input type="url" name="join_link" required placeholder="https://meet.google.com/xyz">

                <label>Meeting Code / Password (Optional)</label>
                <input type="text" name="meeting_code" placeholder="XYZ-123">

                <div style="background: rgba(16, 185, 129, 0.05); padding: 15px; border: 1px solid #10b981; margin-top: 10px;">
                    <label style="display: flex; align-items: center; gap: 10px; cursor: pointer; color: #10b981; margin: 0;">
                        <input type="checkbox" name="send_sms" checked style="width: 20px; height: 20px; accent-color: #10b981;">
                        SEND SMS NOTIFICATION TO PARENTS
                    </label>
                    <p style="font-size: 0.6rem; color: #64748b; font-weight: 700; margin-top: 5px;">* SMS WILL INCLUDE JOIN LINK AND SCHEDULE TIME.</p>
                </div>
            </div>

            <!-- RIGHT COLUMN: Filters & Students -->
            <div>
                <div class="form-section-title">Target Participants</div>
                
                <div style="margin-bottom: 25px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                        <label style="margin-bottom: 0;">Narrow by Subjects</label>
                        <button type="button" onclick="clearSubjectFilters()" style="font-size: 0.6rem; font-weight: 900; color: #ef4444; border: none; background: none; cursor: pointer; text-decoration: underline;">RESET FILTERS</button>
                    </div>
                    <div id="subjectsBox" style="min-height: 40px; display: flex; flex-wrap: wrap;">
                        <div style="font-size: 0.72rem; color: #94a3b8; font-weight: 700;">Select a class first...</div>
                    </div>
                </div>

                <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px;">
                    <label style="margin-bottom: 0;">Enroll Students (<span id="countDisplay" style="color: #10b981;">0</span> Selected)</label>
                    <div style="display: flex; gap: 8px;">
                        <button type="button" onclick="selectAll(true)" style="font-size: 0.6rem; font-weight: 900; background: #f1f5f9; border: 1px solid #e2e8f0; padding: 4px 8px; cursor: pointer;">ALL</button>
                        <button type="button" onclick="selectAll(false)" style="font-size: 0.6rem; font-weight: 900; background: #f1f5f9; border: 1px solid #e2e8f0; padding: 4px 8px; cursor: pointer;">NONE</button>
                    </div>
                </div>
                
                <div id="studentsBox" class="grid-box" style="max-height: 400px; grid-template-columns: 1fr;">
                    <div style="font-size: 0.72rem; color: #94a3b8; font-weight: 700; padding: 15px; text-align: center;">Choose a class to populate students</div>
                </div>
            </div>
        </div>

        <div style="display: flex; gap: 15px; margin-top: 40px; padding-top: 30px; border-top: 3px solid #000;">
            <button type="submit" class="btn-sharp" style="flex: 2; background: #0f172a; color: #fff; font-size: 1rem; font-weight: 950;">SCHEDULE SESSION & TRANSMIT SMS</button>
            <a href="{% url 'virtual_class_list' %}" class="btn-sharp" style="flex: 1; text-align: center; background: #f1f5f9; color: #64748b; text-decoration: none; display: flex; align-items: center; justify-content: center; font-weight: 900;">ABORT</a>
        </div>
    </form>
</div>

<script>
    const classSelect = document.getElementById('classSelect');
    const subjectsBox = document.getElementById('subjectsBox');
    const studentsBox = document.getElementById('studentsBox');
    const countDisplay = document.getElementById('countDisplay');

    function updateStudentCount() {
        if (!studentsBox) return;
        const checked = studentsBox.querySelectorAll('input:checked').length;
        countDisplay.innerText = checked;
    }

    function selectAll(val) {
        studentsBox.querySelectorAll('input').forEach(i => i.checked = val);
        updateStudentCount();
    }

    function clearSubjectFilters() {
        subjectsBox.querySelectorAll('.subject-pill').forEach(p => {
            p.classList.remove('active');
            p.querySelector('input').checked = false;
        });
        fetchStudents();
    }

    function toggleSubjectPill(pill) {
        pill.classList.toggle('active');
        const input = pill.querySelector('input');
        input.checked = !input.checked;
        fetchStudents();
    }

    if (classSelect) {
        classSelect.addEventListener('change', function() {
            const cid = this.value;
            if(!cid) return;

            fetch(`/school/students/api/get-subjects/?class_id=${cid}`)
                .then(r => r.json())
                .then(data => {
                    subjectsBox.innerHTML = '';
                    if(data.subjects.length === 0) {
                        subjectsBox.innerHTML = '<div style="font-size: 0.65rem; color: #94a3b8;">No subjects found for this class.</div>';
                    }
                    data.subjects.forEach(sub => {
                        const pill = document.createElement('div');
                        pill.className = 'subject-pill active';
                        pill.innerHTML = `<input type="checkbox" value="${sub.id}" checked>${sub.name}`;
                        pill.onclick = () => toggleSubjectPill(pill);
                        subjectsBox.appendChild(pill);
                    });
                    fetchStudents();
                });
        });
    }

    function fetchStudents() {
        const cid = classSelect.value;
        if(!cid) return;
        const subIds = Array.from(subjectsBox.querySelectorAll('input:checked')).map(i => i.value);
        
        const params = new URLSearchParams();
        params.append('class_id', cid);
        subIds.forEach(id => params.append('subject_ids[]', id));

        fetch(`/school/virtual-classes/api/get-students/?${params.toString()}`)
            .then(r => r.json())
            .then(data => {
                studentsBox.innerHTML = '';
                if(data.students.length === 0) {
                    studentsBox.innerHTML = '<div style="font-size: 0.7rem; color: #ef4444; font-weight: 800; padding: 20px; text-align: center;">No students match this selection.</div>';
                }
                data.students.forEach(std => {
                    const l = document.createElement('label');
                    l.className = 'check-label';
                    l.style.marginBottom = '4px';
                    l.innerHTML = `
                        <input type="checkbox" name="student_ids" value="${std.id}" checked onchange="updateStudentCount()">
                        <div style="flex:1">${std.name}</div>
                        <div style="font-size:0.6rem; color: #94a3b8; font-weight: 900; background: #f8fafc; padding: 2px 6px; border: 1px solid #e2e8f0;">#${std.roll||'N/A'}</div>
                    `;
                    studentsBox.appendChild(l);
                });
                updateStudentCount();
            });
    }
</script>
{% endblock %}