{% extends 'school/base_school.html' %}

{% block title %}Student Level Up | STD Lab{% endblock %}

{% block page_title %}Academic Level Up{% endblock %}

{% block content %}
<div style="margin-bottom: 35px;">
    <h2 style="font-weight: 950; color: #0f172a;">Student Promotion Hub</h2>
    <p style="color: #64748b; font-size: 0.95rem;">Seamlessly migrate students into higher academic grades.</p>
</div>

<!-- Step 1: Select Old Class -->
<div id="class-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px;">
    {% for class in classes %}
    <div class="class-card" onclick="loadStudents('{{ class.id }}', '{{ class.name }}')" style="background: #fff; border-radius: 24px; padding: 30px; border: 1px solid #f1f5f9; cursor: pointer; transition: 0.4s; position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.02);">
        <div class="card-glow"></div>
        <div style="display: flex; align-items: center; gap: 20px;">
            <div style="width: 54px; height: 54px; border-radius: 16px; background: rgba(99, 102, 241, 0.08); color: #6366f1; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;">
                <i class="fas fa-graduation-cap"></i>
            </div>
            <div>
                <div style="font-weight: 950; color: #0f172a; font-size: 1.1rem;">{{ class.name }}</div>
                <div style="font-size: 0.75rem; color: #94a3b8; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;">{{ class.students.count }} PERSPECTIVE STUDENTS</div>
            </div>
        </div>
        <div id="last-roll-{{ class.id }}" style="margin-top: 20px; font-size: 0.7rem; font-weight: 900; color: #10b981; background: rgba(16, 185, 129, 0.05); padding: 6px 12px; border-radius: 8px; width: fit-content; display: none;">
            <i class="fas fa-hashtag"></i> LAST ASSIGNED ROLL: <span class="roll-val"></span>
        </div>
    </div>
    {% endfor %}
</div>

<!-- Step 2: Student List (Initially Hidden) -->
<div id="student-section" style="display: none; margin-top: 40px; animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;">
    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; background: #fff; padding: 15px 25px; border-radius: 20px; border: 1px solid #f1f5f9;">
        <div style="display: flex; align-items: center; gap: 15px;">
            <button onclick="hideStudents()" style="background: #f1f5f9; border: none; width: 40px; height: 40px; border-radius: 12px; color: #475569; cursor: pointer;"><i class="fas fa-chevron-left"></i></button>
            <h3 id="selected-class-name" style="font-weight: 950; margin: 0; color: #0f172a;"></h3>
        </div>
        <div style="font-size: 0.75rem; color: #94a3b8; font-weight: 800; background: #f8fafc; padding: 6px 15px; border-radius: 50px;">LEVEL UP MODE ACTIVE</div>
    </div>

    <div id="student-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px;">
        <!-- Loaded via JS -->
    </div>
</div>

<!-- Promotion Dialog (Modal overlay) -->
<div id="level-up-overlay" style="display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.3); backdrop-filter: blur(8px); z-index: 2000; align-items: center; justify-content: center; padding: 20px;">
    <div class="modal-card" style="background: #fff; width: 100%; max-width: 480px; border-radius: 32px; padding: 40px; box-shadow: 0 30px 60px rgba(0,0,0,0.1); animation: modalIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);">
        <div style="text-align: center; margin-bottom: 30px;">
             <div id="target-student-photo" style="width: 80px; height: 80px; border-radius: 50%; background: #f1f5f9; margin: 0 auto 15px; overflow: hidden; border: 4px solid #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.05);"></div>
             <h3 id="target-student-name" style="font-weight: 950; margin-bottom: 5px; color: #0f172a;"></h3>
             <p style="font-size: 0.8rem; color: #94a3b8; font-weight: 700;">Promoting to Next Level</p>
        </div>

        <form id="level-up-form">
            <input type="hidden" id="form-student-id">
            <div class="form-group">
                <label>PROMOTE TO CLASS</label>
                <select id="new-class-id" required style="font-weight: 700;">
                    <option value="">Select Destination Class</option>
                    {% for c in classes %}
                    <option value="{{ c.id }}">{{ c.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label>NEW ROLL NUMBER</label>
                <input type="text" id="new-roll" placeholder="Assign Next Roll..." required style="font-weight: 700;">
                <div id="modal-last-roll-info" style="font-size: 0.65rem; color: #10b981; font-weight: 800; margin-top: 8px; display: none;">
                    * SUGGESTED NEXT ROLL: <span id="suggested-roll"></span>
                </div>
            </div>
            
            <div style="display: flex; gap: 12px; margin-top: 35px;">
                <button type="button" onclick="closeModal()" class="btn" style="flex: 1; background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; box-shadow: none;">CANCEL</button>
                <button type="submit" class="btn btn-accent" style="flex: 2; height: 50px;">LEVEL UP NOW</button>
            </div>
        </form>
    </div>
</div>

<style>
    .class-card:hover { transform: translateY(-8px); border-color: #6366f1; box-shadow: 0 20px 40px rgba(99, 102, 241, 0.08); }
    .card-glow { position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, #6366f1, #a855f7); opacity: 0; transition: 0.4s; }
    .class-card:hover .card-glow { opacity: 1; }

    .student-card { background: #fff; padding: 25px; border-radius: 22px; border: 1px solid #f1f5f9; text-align: center; cursor: pointer; transition: 0.3s; }
    .student-card:hover { transform: scale(1.03); border-color: #ffd700; box-shadow: 0 15px 30px rgba(255, 215, 0, 0.08); }
    .student-photo { width: 70px; height: 70px; border-radius: 50%; background: #f8fafc; margin: 0 auto 15px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #cbd5e1; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
    .student-photo img { width: 100%; height: 100%; object-fit: cover; }

    @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes modalIn { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }

    .btn-accent { background: #ffd700; color: #000; font-weight: 850; border: none; }
    .btn-accent:hover { background: #ffc400; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(255, 215, 0, 0.2); }
</style>

<script>
    let lastAssignedRolls = {
        {% for c in classes %} "{{ c.id }}": "{{ c.max_roll }}", {% endfor %}
    };

    // Show initial badges if rolls exist
    document.addEventListener('DOMContentLoaded', () => {
        Object.keys(lastAssignedRolls).forEach(cid => {
            const val = lastAssignedRolls[cid];
            if (val && val !== '0' && val !== 'None') {
                const b = document.getElementById(`last-roll-${cid}`);
                if (b) {
                   b.querySelector('.roll-val').innerText = val;
                   b.style.display = 'block';
                }
            }
        });
    });

    function loadStudents(classId, className) {
        document.getElementById('class-grid').style.display = 'none';
        document.getElementById('student-section').style.display = 'block';
        document.getElementById('selected-class-name').innerText = className;
        
        fetch(`?class_id=${classId}`, {
            headers: {'X-Requested-With': 'XMLHttpRequest'}
        })
        .then(res => res.json())
        .then(data => {
            const grid = document.getElementById('student-grid');
            grid.innerHTML = '';
            data.students.forEach(s => {
                const card = document.createElement('div');
                card.className = 'student-card';
                card.onclick = () => openLevelUpModal(s);
                card.innerHTML = `
                    <div class="student-photo">
                        ${s.photo ? `<img src="${s.photo}">` : `<i class="fas fa-user"></i>`}
                    </div>
                    <div style="font-weight: 900; color: #0f172a; font-size: 0.9rem; margin-bottom: 5px;">${s.name}</div>
                    <div style="font-size: 0.65rem; color: #94a3b8; font-weight: 800;">ROLL: ${s.roll}</div>
                `;
                grid.appendChild(card);
            });
        });
    }

    function hideStudents() {
        document.getElementById('student-section').style.display = 'none';
        document.getElementById('class-grid').style.display = 'grid';
    }

    function openLevelUpModal(student) {
        document.getElementById('form-student-id').value = student.id;
        document.getElementById('target-student-name').innerText = student.name;
        document.getElementById('target-student-photo').innerHTML = student.photo ? `<img src="${student.photo}" style="width: 100%; height: 100%; object-fit: cover;">` : `<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #cbd5e1;"><i class="fas fa-user"></i></div>`;
        document.getElementById('level-up-overlay').style.display = 'flex';
        
        // Listen for new class selection to show "last assigned roll"
        const select = document.getElementById('new-class-id');
        select.onchange = (e) => {
            const val = e.target.value;
            if (val && lastAssignedRolls[val]) {
                document.getElementById('modal-last-roll-info').style.display = 'block';
                document.getElementById('suggested-roll').innerText = parseInt(lastAssignedRolls[val]) + 1;
            } else {
                document.getElementById('modal-last-roll-info').style.display = 'none';
            }
        };
    }

    function closeModal() {
        document.getElementById('level-up-overlay').style.display = 'none';
        document.getElementById('level-up-form').reset();
    }

    // --- Toast Notification Helper ---
    function showToast(message, isError = false) {
        const container = document.getElementById('toast-container');
        const toast = document.createElement('div');
        toast.className = 'toast';
        toast.style.borderLeftColor = isError ? '#ef4444' : '#10b981';
        toast.innerHTML = `<i class="fas ${isError ? 'fa-times-circle' : 'fa-check-circle'}" style="color: ${isError ? '#ef4444' : '#10b981'};"></i> ${message}`;
        container.appendChild(toast);
        setTimeout(() => toast.remove(), 2400);
    }

    document.getElementById('level-up-form').onsubmit = function(e) {
        e.preventDefault();
        const formData = new FormData();
        formData.append('student_id', document.getElementById('form-student-id').value);
        formData.append('new_class_id', document.getElementById('new-class-id').value);
        formData.append('new_roll', document.getElementById('new-roll').value);
        
        fetch('', {
            method: 'POST',
            body: formData,
            headers: {'X-Requested-With': 'XMLHttpRequest', 'X-CSRFToken': '{{ csrf_token }}'}
        })
        .then(res => res.json())
        .then(data => {
            if (data.status === 'ok') {
                // Update local tracking of last roll
                const classId = document.getElementById('new-class-id').value;
                lastAssignedRolls[classId] = data.last_roll;
                
                // Update badge on card
                const badge = document.getElementById(`last-roll-${classId}`);
                if (badge) {
                     badge.querySelector('.roll-val').innerText = data.last_roll;
                     badge.style.display = 'block';
                }

                showToast(data.msg);
                closeModal();
                hideStudents();
            } else {
                showToast(data.msg || 'Promotion failed. Please try again.', true);
            }
        })
        .catch(() => showToast('An unexpected error occurred.', true));
    };
</script>
{% endblock %}