async function fetchStudents() {
    const classId = document.getElementById('classSelect').value;
    const mediumId = document.getElementById('mediumSelect')?.value || ''; // Added medium selection support
    
    if (!classId) return alert("Please select a class");

    try {
        // 1. Fetch School Settings for Branding
        const settingsRes = await fetch('api/settings/get_settings.php');
        const settingsData = await settingsRes.json();
        const school = settingsData.data;

        // 2. Fetch Students using updated PHP (Stream removed from URL params)
        const url = `api/students/get_bulk_id_cards.php?class_id=${classId}&medium_id=${mediumId}`;
        const studentRes = await fetch(url);
        const studentData = await studentRes.json();

        if (studentData.status) {
            renderCards(studentData.data, school);
        } else {
            alert(studentData.msg || "No students found in this class for the current session.");
        }
    } catch (err) {
        console.error("Error:", err);
    }
}

function renderCards(students, school) {
    const container = document.getElementById('printArea');
    container.innerHTML = ''; // Clear previous

    students.forEach(s => {
        const photo = s.student_photo ? `uploads/students/${s.student_photo}` : '../assets/img/default-user.png';
        const logo = `uploads/settings/${school.school_logo}`;
        const signature = `uploads/settings/${school.principal_signature}`;

        // Prepare Class/Section/Medium Display String (STREAM REMOVED)
        let classDisplay = s.class_name;
        
        // Add Section if exists
        if (s.section_name) {
            classDisplay += ` - ${s.section_name}`;
        }
        
        // ADDED: Medium Display in square brackets
        if (s.medium_name) {
            classDisplay += ` [${s.medium_name}]`;
        }

        const cardHtml = `
            <div class="smart-card">
                <div class="card-header">
                    <img src="${logo}" style="height: 12mm; margin-right: 8px;">
                    <div style="line-height: 1.1;">
                        <div style="font-size: 11px; font-weight: bold;">${school.school_name}</div>
                        <div style="font-size: 7px; opacity: 0.9; margin-top:2px;">${school.school_address}</div>
                    </div>
                </div>
                <div class="card-body">
                    <img src="${photo}" class="student-photo">
                    <div class="student-info">
                        <h6 style="margin-bottom: 4px; color: #000;">${s.student_name}</h6>
                        <p class="mb-1"><b>Roll No:</b> ${s.roll_no}</p>
                        <p class="mb-1"><b>Class:</b> ${classDisplay}</p>
                        <p class="mb-1"><b>DOB:</b> ${s.dob}</p>
                        <p class="mb-0"><b>Session:</b> ${s.year_name}</p>
                    </div>
                </div>
               <div style="position: absolute; bottom: 5px; width: 100%; padding: 0 10px; display: flex; justify-content: space-between; align-items: flex-end;">
                    <div style="text-align: center;">
                        <img src="${signature}" style="height: 8mm; display: block; margin: 0 auto;">
                        <div style="border-top: 1px solid #000; font-size: 7px; margin-top: 2px; width: 25mm;">
                            Authorized Signatory
                        </div>
                    </div>
                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=50x50&data=${s.id}" style="width: 10mm;">
                </div>
            </div>
        `;
        container.innerHTML += cardHtml;
    });
}