// Responsive utilities
function handleViewportChanges() {
    const viewportWidth = window.innerWidth;
    const elements = document.querySelectorAll('[data-responsive]');
    
    elements.forEach(el => {
        const config = JSON.parse(el.getAttribute('data-responsive'));
        Object.keys(config).forEach(breakpoint => {
            if (viewportWidth >= parseInt(breakpoint)) {
                Object.assign(el.style, config[breakpoint]);
            }
        });
    });
}

document.addEventListener('DOMContentLoaded', function() {
    // Initialize responsive behaviors
    handleViewportChanges();
    window.addEventListener('resize', handleViewportChanges);
    
    // Form submission handler for result search
const resultForm = document.querySelector('form');
    if (resultForm && resultForm.id !== 'studentForm') {
        resultForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const examType = document.getElementById('exam-type')?.value;
            const examYear = document.getElementById('exam-year')?.value;
            const examNumber = document.getElementById('exam-number')?.value;
            
            if (!examType || !examYear || !examNumber) {
                alert('Please fill in all fields');
                return;
            }
            
            // In a real app, this would make an API call
            console.log('Searching for:', { examType, examYear, examNumber });
            
            // Simulate loading
            const submitBtn = resultForm.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Searching...';
            submitBtn.disabled = true;
            
            setTimeout(() => {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
                feather.replace();
                
                // Redirect to results page (would be dynamic in real app)
                window.location.href = `results.html?type=${examType}&year=${examYear}&number=${examNumber}`;
            }, 1500);
        });
    }
    
    // Parse URL parameters for results page
    if (window.location.pathname.includes('results.html')) {
        const urlParams = new URLSearchParams(window.location.search);
        const examType = urlParams.get('type');
        const examYear = urlParams.get('year');
        const examNumber = urlParams.get('number');
        
        // In a real app, we would use these parameters to fetch the specific result
        console.log('Loading result for:', { examType, examYear, examNumber });
    }
// Initialize tooltips
    const tooltipElements = document.querySelectorAll('[data-tooltip]');
    tooltipElements.forEach(el => {
        el.addEventListener('mouseenter', showTooltip);
        el.addEventListener('mouseleave', hideTooltip);
    });
});

function showTooltip(e) {
    const tooltipText = this.getAttribute('data-tooltip');
    const tooltip = document.createElement('div');
    tooltip.className = 'tooltip absolute bg-gray-800 text-white text-xs px-2 py-1 rounded z-50';
    tooltip.textContent = tooltipText;
    
    document.body.appendChild(tooltip);
    
    const rect = this.getBoundingClientRect();
    tooltip.style.top = `${rect.top - tooltip.offsetHeight - 5}px`;
    tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`;
    
    this.tooltip = tooltip;
}

function hideTooltip() {
    if (this.tooltip) {
        this.tooltip.remove();
        this.tooltip = null;
    }
}