script.js

let currentStep = 1;
const totalSteps = 7;

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    updateUI();
    setupEventListeners();
    setupFileUploads();
    setupConditionalFields();
});

function setupEventListeners() {
    // Checkbox card styling
    document.querySelectorAll('.condition-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const card = this.closest('.checkbox-card');
            if (this.checked) {
                card.classList.add('selected');
            } else {
                card.classList.remove('selected');
            }
        });
    });

    // Keyboard navigation
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') {
            e.preventDefault();
            if (currentStep < totalSteps) {
                changeStep(1);
            }
        }
    });
}

function setupFileUploads() {
    // File drop zones
    document.querySelectorAll('.file-drop-zone').forEach(zone => {
        const input = zone.querySelector('input[type="file"]');
        
        zone.addEventListener('dragover', (e) => {
            e.preventDefault();
            zone.classList.add('dragover');
        });
        
        zone.addEventListener('dragleave', () => {
            zone.classList.remove('dragover');
        });
        
        zone.addEventListener('drop', (e) => {
            e.preventDefault();
            zone.classList.remove('dragover');
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                handleFileSelect(zone, files[0]);
            }
        });
        
        input.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                handleFileSelect(zone, e.target.files[0]);
            }
        });
    });
}

function handleFileSelect(zone, file) {
    // Visual feedback for file selection
    zone.style.borderColor = '#0e9692';
    zone.style.backgroundColor = '#e6f5f4';
    
    const icon = zone.querySelector('i');
    const text = zone.querySelector('p.font-medium');
    
    icon.setAttribute('data-lucide', 'check-circle');
    icon.classList.remove('text-gray-400');
    icon.classList.add('text-primary');
    lucide.createIcons();
    
    text.textContent = file.name;
    text.classList.add('text-primary', 'font-medium');
    
    // Add file size info
    const sizeText = zone.querySelector('p.text-xs');
    sizeText.textContent = `${(file.size / 1024 / 1024).toFixed(2)} MB uploaded`;
    sizeText.classList.add('text-primary');
}

function setupConditionalFields() {
    // Show/hide expiration date based on current patient status
    const currentPatientRadios = document.querySelectorAll('input[name="current-patient"]');
    const expirationField = document.getElementById('expiration-field');
    
    currentPatientRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.value === 'yes') {
                expirationField.classList.remove('hidden');
            } else {
                expirationField.classList.add('hidden');
            }
        });
    });
}

function changeStep(direction) {
    const newStep = currentStep + direction;
    
    if (newStep >= 1 && newStep <= totalSteps) {
        // Hide current step
        document.getElementById(`step-${currentStep}`).classList.add('hidden');
        
        // Show new step
        document.getElementById(`step-${newStep}`).classList.remove('hidden');
        
        currentStep = newStep;
        updateUI();
        
        // Scroll to top of form
        document.querySelector('main').scrollTop = 0;
    }
}

function updateUI() {
    // Update progress bar
    const progress = (currentStep / totalSteps) * 100;
    document.getElementById('progress-bar').style.width = `${progress}%`;
    document.getElementById('step-indicator').textContent = `Step ${currentStep} of ${totalSteps}`;
    document.getElementById('progress-percent').textContent = `${Math.round(progress)}%`;
    
    // Update buttons
    const backBtn = document.getElementById('btn-back');
    const nextBtn = document.getElementById('btn-next');
    const submitBtn = document.getElementById('btn-submit');
    
    // Back button visibility
    if (currentStep === 1) {
        backBtn.classList.add('opacity-0', 'pointer-events-none');
    } else {
        backBtn.classList.remove('opacity-0', 'pointer-events-none');
    }
    
    // Next/Submit button toggle
    if (currentStep === totalSteps) {
        nextBtn.classList.add('hidden');
        submitBtn.classList.remove('hidden');
    } else {
        nextBtn.classList.remove('hidden');
        submitBtn.classList.add('hidden');
    }
}

function submitForm() {
    // Simulate form submission
    const container = document.getElementById('form-container');
    const currentSection = document.getElementById(`step-${currentStep}`);
    
    // Hide current step
    currentSection.classList.add('hidden');
    
    // Hide footer buttons
    document.getElementById('btn-back').style.visibility = 'hidden';
    document.getElementById('btn-submit').classList.add('hidden');
    
    // Show success message
    const successSection = document.getElementById('step-success');
    successSection.classList.remove('hidden');
    
    // Update progress to 100%
    document.getElementById('progress-bar').style.width = '100%';
    document.getElementById('step-indicator').textContent = 'Complete';
    document.getElementById('progress-percent').textContent = '100%';
    
    // Success animation
    container.style.transform = 'scale(0.98)';
    setTimeout(() => {
        container.style.transform = 'scale(1)';
    }, 200);
    
    // In a real application, you would submit the form data here
    console.log('Form submitted successfully');
}

// Auto-format phone numbers
document.querySelectorAll('input[type="tel"]').forEach(input => {
    input.addEventListener('input', function(e) {
        let value = e.target.value.replace(/\D/g, '');
        if (value.length > 0 && value.length <= 10) {
            if (value.length > 6) {
                value = `(${value.slice(0, 3)}) ${value.slice(3, 6)}-${value.slice(6)}`;
            } else if (value.length > 3) {
                value = `(${value.slice(0, 3)}) ${value.slice(3)}`;
            } else if (value.length > 0) {
                value = `(${value}`;
            }
        }
        e.target.value = value;
    });
});

// Handle window resize for mobile optimization
let resizeTimer;
window.addEventListener('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        // Ensure layout stays optimized
        document.querySelector('main').scrollTop = 0;
    }, 250);
});