script.js

// Modal Management
function showCalculator() {
    console.log('showCalculator() called');
    const gradingSection = document.getElementById('gradingSystemSection');
    const calculatorSection = document.getElementById('calculatorSection');
    const gradeReferenceSection = document.getElementById('gradeReferenceSection');
    
    // Skip grading system selection and go directly to calculator
    if (gradingSection) {
        gradingSection.classList.add('hidden');
        console.log('Grading system section hidden');
    }
    
    if (calculatorSection) {
        calculatorSection.classList.remove('hidden');
        console.log('Calculator section shown');
    } else {
        console.error('Calculator section not found');
    }
    
    if (gradeReferenceSection) {
        gradeReferenceSection.classList.remove('hidden');
        console.log('Grade reference section shown');
    }
    
    // Initialize calculators with default BMAS system
    initializeCalculators();
    updateGradeReference();
}

function selectGradingSystem(system) {
    currentGradingSystem = system;
    document.getElementById('gradingSystemSection').classList.add('hidden');
    document.getElementById('calculatorSection').classList.remove('hidden');
    document.getElementById('gradeReferenceSection').classList.remove('hidden');
    initializeCalculators();
    updateGradeReference();
}

// Global variable for current grading system
let currentGradingSystem = 'BMAS';

// Helper function to determine class based on GPA/CGPA
function getDivision(gpa) {
    if (gpa >= 4.50) return { division: 'First Class', color: 'text-green-600' };
    if (gpa >= 3.50) return { division: 'Second Class Upper', color: 'text-blue-600' };
    if (gpa >= 2.50) return { division: 'Second Class Lower', color: 'text-yellow-600' };
    if (gpa >= 1.50) return { division: 'Third Class', color: 'text-orange-600' };
    if (gpa >= 1.00) return { division: 'Pass', color: 'text-red-600' };
    return { division: 'Fail', color: 'text-red-800' };
}

// Helper function to convert score to grade and grade point
function scoreToGrade(score) {
    if (currentGradingSystem === 'BMAS') {
        if (score >= 70) return { letter: 'A', point: 5.0 };
        if (score >= 60) return { letter: 'B', point: 4.0 };
        if (score >= 50) return { letter: 'C', point: 3.0 };
        if (score >= 45) return { letter: 'D', point: 2.0 };
        if (score >= 40) return { letter: 'E', point: 1.0 };
        return { letter: 'F', point: 0.0 };
    } else {
        if (score >= 70) return { letter: 'A', point: 5.0 };
        if (score >= 60) return { letter: 'B', point: 4.0 };
        if (score >= 50) return { letter: 'C', point: 3.0 };
        if (score >= 45) return { letter: 'D', point: 2.0 };
        return { letter: 'F', point: 0.0 };
    }
}

function updateGradeReference() {
    const gradeReferenceSection = document.querySelector('#gradeReferenceSection');
    if (!gradeReferenceSection) return;
    
    let gradeTableHTML = '';
    if (currentGradingSystem === 'BMAS') {
        gradeTableHTML = '<tr class="border-b border-gray-200"><td class="py-3 px-4 font-semibold text-green-600">A</td><td class="py-3 px-4">70 - 100</td><td class="py-3 px-4 font-bold">5.0</td></tr><tr class="border-b border-gray-200"><td class="py-3 px-4 font-semibold text-blue-600">B</td><td class="py-3 px-4">60 - 69</td><td class="py-3 px-4 font-bold">4.0</td></tr><tr class="border-b border-gray-200"><td class="py-3 px-4 font-semibold text-yellow-600">C</td><td class="py-3 px-4">50 - 59</td><td class="py-3 px-4 font-bold">3.0</td></tr><tr class="border-b border-gray-200"><td class="py-3 px-4 font-semibold text-orange-600">D</td><td class="py-3 px-4">45 - 49</td><td class="py-3 px-4 font-bold">2.0</td></tr><tr class="border-b border-gray-200"><td class="py-3 px-4 font-semibold text-red-600">E</td><td class="py-3 px-4">40 - 44</td><td class="py-3 px-4 font-bold">1.0</td></tr><tr><td class="py-3 px-4 font-semibold text-red-800">F</td><td class="py-3 px-4">0 - 39</td><td class="py-3 px-4 font-bold">0.0</td></tr>';
    } else {
        gradeTableHTML = '<tr class="border-b border-gray-200"><td class="py-3 px-4 font-semibold text-green-600">A</td><td class="py-3 px-4">70 - 100</td><td class="py-3 px-4 font-bold">5.0</td></tr><tr class="border-b border-gray-200"><td class="py-3 px-4 font-semibold text-blue-600">B</td><td class="py-3 px-4">60 - 69</td><td class="py-3 px-4 font-bold">4.0</td></tr><tr class="border-b border-gray-200"><td class="py-3 px-4 font-semibold text-yellow-600">C</td><td class="py-3 px-4">50 - 59</td><td class="py-3 px-4 font-bold">3.0</td></tr><tr class="border-b border-gray-200"><td class="py-3 px-4 font-semibold text-orange-600">D</td><td class="py-3 px-4">45 - 49</td><td class="py-3 px-4 font-bold">2.0</td></tr><tr><td class="py-3 px-4 font-semibold text-red-800">F</td><td class="py-3 px-4">0 - 44</td><td class="py-3 px-4 font-bold">0.0</td></tr>';
    }
    
    const tbody = gradeReferenceSection.querySelector('tbody');
    if (tbody) {
        tbody.innerHTML = gradeTableHTML;
    }
}

// Calculator Functions
function initializeCalculators() {
    generateGPACourses();
    generateSemesters();
}

function generateGPACourses() {
    const count = parseInt(document.getElementById('gpaCourseCount').value);
    const container = document.getElementById('gpaCourses');
    container.innerHTML = '';
    
    for (let i = 1; i <= count; i++) {
        const courseDiv = document.createElement('div');
        courseDiv.className = 'border rounded p-3';
        courseDiv.innerHTML = '<h4 class="font-semibold mb-2">Course ' + i + '</h4><div class="space-y-3"><div><label class="block text-sm text-gray-600">Course Name</label><input type="text" id="courseName' + i + '" placeholder="e.g., Mathematics" class="w-full px-2 py-1 border rounded focus:outline-none focus:border-blue-500"></div><div class="grid grid-cols-2 gap-2"><div><label class="block text-sm text-gray-600">Score (0-100)</label><input type="number" id="score' + i + '" min="0" max="100" placeholder="75" class="w-full px-2 py-1 border rounded focus:outline-none focus:border-blue-500"></div><div><label class="block text-sm text-gray-600">Credits</label><input type="number" id="credits' + i + '" min="0.5" max="6" step="0.5" value="3" class="w-full px-2 py-1 border rounded focus:outline-none focus:border-blue-500"></div></div><div><label class="block text-sm text-gray-600">Grade (Auto-calculated)</label><input type="text" id="grade' + i + '" readonly class="w-full px-2 py-1 border rounded bg-gray-100"></div></div>';
        container.appendChild(courseDiv);
    }
}

function generateSemesters() {
    const count = parseInt(document.getElementById('semesterCount').value);
    const container = document.getElementById('semesters');
    container.innerHTML = '';
    
    for (let i = 1; i <= count; i++) {
        const semesterDiv = document.createElement('div');
        semesterDiv.className = 'border rounded p-3';
        semesterDiv.innerHTML = '<h4 class="font-semibold mb-2">Semester ' + i + '</h4><div class="space-y-3"><div><label class="block text-sm text-gray-600">Semester Name</label><input type="text" id="semesterName' + i + '" placeholder="e.g., First Semester" class="w-full px-2 py-1 border rounded focus:outline-none focus:border-purple-500"></div><div class="grid grid-cols-2 gap-2"><div><label class="block text-sm text-gray-600">GPA</label><input type="number" id="gpaSem' + i + '" min="0" max="5" step="0.01" value="3.0" class="w-full px-2 py-1 border rounded focus:outline-none focus:border-purple-500"></div><div><label class="block text-sm text-gray-600">Credits</label><input type="number" id="creditsSem' + i + '" min="1" max="24" value="15" class="w-full px-2 py-1 border rounded focus:outline-none focus:border-purple-500"></div></div></div>';
        container.appendChild(semesterDiv);
    }
}

// Global variable to store download data
let downloadData = null;

function calculateGPA() {
    const count = parseInt(document.getElementById('gpaCourseCount').value);
    let totalGradePoints = 0;
    let totalCredits = 0;
    const courses = [];
    
    for (let i = 1; i <= count; i++) {
        const courseName = document.getElementById('courseName' + i).value || 'Course ' + i;
        const score = parseFloat(document.getElementById('score' + i).value) || 0;
        const credits = parseFloat(document.getElementById('credits' + i).value) || 0;
        
        const grade = scoreToGrade(score);
        
        document.getElementById('grade' + i).value = grade.letter + ' (' + grade.point + ')';
        
        totalGradePoints += grade.point * credits;
        totalCredits += credits;
        
        courses.push({
            name: courseName,
            score: score,
            grade: grade.letter,
            gradePoint: grade.point,
            credits: credits
        });
    }
    
    const gpa = totalGradePoints / totalCredits;
    const resultDiv = document.getElementById('gpaResult');
    const division = getDivision(gpa);
    
    // Store data globally for download
    downloadData = {
        type: 'gpa',
        gpa: gpa,
        totalCredits: totalCredits,
        totalGradePoints: totalGradePoints,
        courses: courses
    };
    
    resultDiv.innerHTML = '<div class="p-4 bg-blue-50 rounded-lg"><p class="text-blue-800">Your GPA: <span class="text-2xl font-bold">' + gpa.toFixed(2) + '</span></p><p class="' + division.color + ' font-semibold mt-2">Class: ' + division.division + '</p><p class="text-sm text-blue-600 mt-1">Total Credits: ' + totalCredits + '</p><p class="text-sm text-blue-600">Total Grade Points: ' + totalGradePoints.toFixed(2) + '</p><button onclick="downloadResult()" class="mt-3 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition text-sm"><i class="fas fa-download mr-2"></i>Download Result</button></div>';
    
    saveCalculation('gpa', { gpa, totalCredits, totalGradePoints, courses });
}

function calculateCGPA() {
    const count = parseInt(document.getElementById('semesterCount').value);
    let totalGradePoints = 0;
    let totalCredits = 0;
    const semesters = [];
    
    for (let i = 1; i <= count; i++) {
        const semesterName = document.getElementById('semesterName' + i).value || 'Semester ' + i;
        const gpa = parseFloat(document.getElementById('gpaSem' + i).value) || 0;
        const credits = parseFloat(document.getElementById('creditsSem' + i).value) || 0;
        
        totalGradePoints += gpa * credits;
        totalCredits += credits;
        
        semesters.push({
            name: semesterName,
            gpa: gpa,
            credits: credits
        });
    }
    
    const cgpa = totalGradePoints / totalCredits;
    const resultDiv = document.getElementById('cgpaResult');
    const division = getDivision(cgpa);
    
    // Store data globally for download
    downloadData = {
        type: 'cgpa',
        cgpa: cgpa,
        totalCredits: totalCredits,
        totalGradePoints: totalGradePoints,
        semesters: semesters
    };
    
    resultDiv.innerHTML = '<div class="p-4 bg-purple-50 rounded-lg"><p class="text-purple-800">Your CGPA: <span class="text-2xl font-bold">' + cgpa.toFixed(2) + '</span></p><p class="' + division.color + ' font-semibold mt-2">Class: ' + division.division + '</p><p class="text-sm text-purple-600 mt-1">Total Credits: ' + totalCredits + '</p><p class="text-sm text-purple-600">Total Grade Points: ' + totalGradePoints.toFixed(2) + '</p><button onclick="downloadResult()" class="mt-3 bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 transition text-sm"><i class="fas fa-download mr-2"></i>Download Result</button></div>';
    
    saveCalculation('cgpa', { cgpa, totalCredits, totalGradePoints, semesters });
}

function downloadResult() {
    if (!downloadData) {
        alert('No calculation data available. Please calculate first.');
        return;
    }
    
    // Check if mobile device
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    
    // Create HTML content
    let content = '<!DOCTYPE html><html><head><title>';
    let filename = "";
    
    if (downloadData.type === 'gpa') {
        const division = getDivision(downloadData.gpa);
        filename = "GPA_Result_" + currentGradingSystem + "_" + new Date().toISOString().split("T")[0];
        content += 'GPA CALCULATION RESULT';
        content += '</title><style>';
        content += 'body { font-family: Arial, sans-serif; margin: 20px; line-height: 1.6; color: #1f2937; }';
        content += '.header { text-align: center; margin-bottom: 30px; }';
        content += '.title { font-size: 28px; font-weight: bold; color: #1f2937; }';
        content += '.subtitle { font-size: 18px; color: #6b7280; margin-top: 10px; }';
        content += '.info { margin: 15px 0; font-size: 16px; }';
        content += '.summary { background: #f9fafb; padding: 15px; border-radius: 8px; margin: 20px 0; }';
        content += '.summary h3 { font-size: 20px; margin-bottom: 10px; color: #1f2937; }';
        content += '.summary-item { font-size: 16px; margin: 6px 0; }';
        content += '.class-result { font-size: 24px; font-weight: bold; margin: 10px 0; }';
        content += 'table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; }';
        content += 'th, td { border: 1px solid #e5e7eb; padding: 8px; text-align: left; }';
        content += 'th { background: #f3f4f6; font-weight: bold; }';
        content += '.grade-a { color: #059669; font-weight: bold; }';
        content += '.grade-b { color: #2563eb; font-weight: bold; }';
        content += '.grade-c { color: #ca8a04; font-weight: bold; }';
        content += '.grade-d { color: #ea580c; font-weight: bold; }';
        content += '.grade-e { color: #dc2626; font-weight: bold; }';
        content += '.grade-f { color: #991b1b; font-weight: bold; }';
        content += '@media print { body { margin: 10px; } .mobile-only { display: none; } }';
        content += '@media screen { .print-only { display: none; } }';
        content += '</style></head><body>';
        
        content += '<div class="header">';
        content += '<div class="title">GPA CALCULATION RESULT</div>';
        content += '<div class="subtitle">=====================</div>';
        content += '</div>';
        
        content += '<div class="info"><strong>Grading System:</strong> ' + currentGradingSystem + '</div>';
        content += '<div class="info"><strong>Calculation Date:</strong> ' + new Date().toLocaleString() + '</div>';
        
        content += '<h3>COURSE DETAILS</h3>';
        content += '<table>';
        content += '<tr><th>Course</th><th>Score</th><th>Grade</th><th>Credits</th><th>Grade Points</th></tr>';
        
        downloadData.courses.forEach(function(course, index) {
            let gradeClass = 'grade-' + course.grade.toLowerCase();
            content += '<tr>';
            content += '<td>' + course.name + '</td>';
            content += '<td>' + course.score + '</td>';
            content += '<td class="' + gradeClass + '">' + course.grade + ' (' + course.gradePoint + ')</td>';
            content += '<td>' + course.credits + '</td>';
            content += '<td>' + (course.gradePoint * course.credits).toFixed(2) + '</td>';
            content += '</tr>';
        });
        
        content += '</table>';
        
        content += '<div class="summary">';
        content += '<h3>SUMMARY</h3>';
        content += '<div class="summary-item"><strong>Total Credits:</strong> ' + downloadData.totalCredits + '</div>';
        content += '<div class="summary-item"><strong>Total Grade Points:</strong> ' + downloadData.totalGradePoints.toFixed(2) + '</div>';
        content += '<div class="summary-item"><strong>GPA:</strong> ' + downloadData.gpa.toFixed(2) + '</div>';
        content += '<div class="class-result" style="color: ' + division.color + '"><strong>Class: ' + division.division + '</strong></div>';
        content += '</div>';
        
    } else if (downloadData.type === 'cgpa') {
        const division = getDivision(downloadData.cgpa);
        filename = "CGPA_Result_" + currentGradingSystem + "_" + new Date().toISOString().split("T")[0];
        content += 'CGPA CALCULATION RESULT';
        content += '</title><style>';
        content += 'body { font-family: Arial, sans-serif; margin: 20px; line-height: 1.6; color: #1f2937; }';
        content += '.header { text-align: center; margin-bottom: 30px; }';
        content += '.title { font-size: 28px; font-weight: bold; color: #1f2937; }';
        content += '.subtitle { font-size: 18px; color: #6b7280; margin-top: 10px; }';
        content += '.info { margin: 15px 0; font-size: 16px; }';
        content += '.summary { background: #f9fafb; padding: 15px; border-radius: 8px; margin: 20px 0; }';
        content += '.summary h3 { font-size: 20px; margin-bottom: 10px; color: #1f2937; }';
        content += '.summary-item { font-size: 16px; margin: 6px 0; }';
        content += '.class-result { font-size: 24px; font-weight: bold; margin: 10px 0; }';
        content += 'table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; }';
        content += 'th, td { border: 1px solid #e5e7eb; padding: 8px; text-align: left; }';
        content += 'th { background: #f3f4f6; font-weight: bold; }';
        content += '@media print { body { margin: 10px; } .mobile-only { display: none; } }';
        content += '@media screen { .print-only { display: none; } }';
        content += '</style></head><body>';
        
        content += '<div class="header">';
        content += '<div class="title">CGPA CALCULATION RESULT</div>';
        content += '<div class="subtitle">=======================</div>';
        content += '</div>';
        
        content += '<div class="info"><strong>Grading System:</strong> ' + currentGradingSystem + '</div>';
        content += '<div class="info"><strong>Calculation Date:</strong> ' + new Date().toLocaleString() + '</div>';
        
        content += '<h3>SEMESTER DETAILS</h3>';
        content += '<table>';
        content += '<tr><th>Semester</th><th>GPA</th><th>Credits</th><th>Grade Points</th></tr>';
        
        downloadData.semesters.forEach(function(semester, index) {
            content += '<tr>';
            content += '<td>' + semester.name + '</td>';
            content += '<td>' + semester.gpa.toFixed(2) + '</td>';
            content += '<td>' + semester.credits + '</td>';
            content += '<td>' + (semester.gpa * semester.credits).toFixed(2) + '</td>';
            content += '</tr>';
        });
        
        content += '</table>';
        
        content += '<div class="summary">';
        content += '<h3>SUMMARY</h3>';
        content += '<div class="summary-item"><strong>Total Credits:</strong> ' + downloadData.totalCredits + '</div>';
        content += '<div class="summary-item"><strong>Total Grade Points:</strong> ' + downloadData.totalGradePoints.toFixed(2) + '</div>';
        content += '<div class="summary-item"><strong>CGPA:</strong> ' + downloadData.cgpa.toFixed(2) + '</div>';
        content += '<div class="class-result" style="color: ' + division.color + '"><strong>Class: ' + division.division + '</strong></div>';
        content += '</div>';
    }
    
    // Add grade scale and class division reference
    content += '<h3>GRADE SCALE</h3>';
    content += '<table>';
    content += '<tr><th>Letter Grade</th><th>Score Range</th><th>Grade Point</th></tr>';
    
    if (currentGradingSystem === "BMAS") {
        content += '<tr><td class="grade-a">A</td><td>70 - 100</td><td>5.0</td></tr>';
        content += '<tr><td class="grade-b">B</td><td>60 - 69</td><td>4.0</td></tr>';
        content += '<tr><td class="grade-c">C</td><td>50 - 59</td><td>3.0</td></tr>';
        content += '<tr><td class="grade-d">D</td><td>45 - 49</td><td>2.0</td></tr>';
        content += '<tr><td class="grade-e">E</td><td>40 - 44</td><td>1.0</td></tr>';
        content += '<tr><td class="grade-f">F</td><td>0 - 39</td><td>0.0</td></tr>';
    } else {
        content += '<tr><td class="grade-a">A</td><td>70 - 100</td><td>5.0</td></tr>';
        content += '<tr><td class="grade-b">B</td><td>60 - 69</td><td>4.0</td></tr>';
        content += '<tr><td class="grade-c">C</td><td>50 - 59</td><td>3.0</td></tr>';
        content += '<tr><td class="grade-d">D</td><td>45 - 49</td><td>2.0</td></tr>';
        content += '<tr><td class="grade-f">F</td><td>0 - 44</td><td>0.0</td></tr>';
    }
    content += '</table>';
    
    content += '<h3>CLASS DIVISION</h3>';
    content += '<table>';
    content += '<tr><th>Class</th><th>GPA/CGPA Range</th></tr>';
    content += '<tr><td>First Class</td><td>4.50 - 5.00</td></tr>';
    content += '<tr><td>Second Class Upper</td><td>3.50 - 4.49</td></tr>';
    content += '<tr><td>Second Class Lower</td><td>2.50 - 3.49</td></tr>';
    content += '<tr><td>Third Class</td><td>1.50 - 2.49</td></tr>';
    content += '<tr><td>Pass</td><td>1.00 - 1.49</td></tr>';
    content += '<tr><td>Fail</td><td>0.00 - 0.99</td></tr>';
    content += '</table>';
    
    // Add mobile-specific instructions
    if (isMobile) {
        content += '<div class="mobile-only" style="margin-top: 30px; padding: 15px; background: #fef3c7; border-radius: 8px; border-left: 4px solid #f59e0b;">';
        content += '<h4 style="margin: 0 0 10px 0; color: #92400e;">📱 Mobile Instructions:</h4>';
        content += '<p style="margin: 5px 0; color: #78350f;">1. Share this file to your computer</p>';
        content += '<p style="margin: 5px 0; color: #78350f;">2. Open in browser and print to PDF</p>';
        content += '<p style="margin: 5px 0; color: #78350f;">3. Or use mobile apps to convert HTML to PDF</p>';
        content += '</div>';
    }
    
    content += '</body></html>';
    
    if (isMobile) {
        // Mobile: Download HTML file
        const blob = new Blob([content], { type: 'text/html' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = filename + ".html";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
        
        // Show mobile instructions
        alert('HTML file downloaded! Share to computer or use mobile app to convert to PDF.');
    } else {
        // Desktop: Print to PDF
        const printWindow = window.open('', '_blank');
        printWindow.document.write(content);
        printWindow.document.close();
        
        setTimeout(function() {
            printWindow.print();
            printWindow.close();
        }, 500);
    }
}

function saveCalculation(type, data) {
    const calculations = JSON.parse(localStorage.getItem('calculations') || '[]');
    calculations.push({ type: type, data: data, timestamp: new Date().toISOString() });
    localStorage.setItem('calculations', JSON.stringify(calculations));
    console.log('Calculation saved locally');
}

document.addEventListener('DOMContentLoaded', function() {
    const gpaCourseCount = document.getElementById('gpaCourseCount');
    const semesterCount = document.getElementById('semesterCount');
    
    if (gpaCourseCount) {
        gpaCourseCount.addEventListener('change', generateGPACourses);
    }
    
    if (semesterCount) {
        semesterCount.addEventListener('change', generateSemesters);
    }
});

window.addEventListener('load', function() {
    // Calculator is available without login
});