// 1. Dual Logo Layout Toggle Logic
window.toggleDualLogo = function(checkbox) {
    const secondarySection = document.getElementById('secondaryLogoSection');
    if(checkbox.checked) {
        secondarySection.style.display = 'flex';
        secondarySection.style.animation = 'fadeIn 0.3s ease';
    } else {
        secondarySection.style.display = 'none';
        document.getElementById('secondaryUpload').value = ""; 
    }
};

// 2. Secondary Phone Toggle
window.toggleSecondaryPhone = function(checkbox) {
    const input = document.getElementById('secondaryPhoneInput');
    if (checkbox.checked) {
        input.style.display = 'block';
        input.style.animation = 'fadeIn 0.3s ease';
    } else {
        input.style.display = 'none';
        input.value = ''; 
    }
};

// 3. Secondary Email Toggle
window.toggleSecondaryEmail = function(checkbox) {
    const input = document.getElementById('secondaryEmailInput');
    if (checkbox.checked) {
        input.style.display = 'block';
        input.style.animation = 'fadeIn 0.3s ease';
    } else {
        input.style.display = 'none';
        input.value = ''; 
    }
};

// 4. Image Upload Preview Engine
window.previewImage = function(input, imgId, placeholderId) {
    const file = input.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const imgEl = document.getElementById(imgId);
            const placeholderEl = document.getElementById(placeholderId);
            if(imgEl) {
                imgEl.src = e.target.result;
                imgEl.style.display = 'block';
            }
            if(placeholderEl) placeholderEl.style.display = 'none';
        }
        reader.readAsDataURL(file);
    }
};

// 5. Color Picker Sync
window.updateColorSync = function(picker, hexId, updatePreview) {
    const hexLabel = document.getElementById(hexId);
    if(hexLabel) {
        hexLabel.textContent = picker.value.toUpperCase();
    }
    if(updatePreview && typeof window.updateIdPreview === 'function') {
        window.updateIdPreview();
    }
};

// 6. Alignment Selection Engine
window.setAlignment = function(value, btnElement) {
    const hiddenInput = document.getElementById('headerAlignmentValue');
    if(hiddenInput) hiddenInput.value = value;

    const buttons = document.querySelectorAll('.align-btn');
    buttons.forEach(btn => btn.classList.remove('active'));
    
    if(btnElement) btnElement.classList.add('active');
};

// 7. Live ID Generation Preview
window.updateIdPreview = function() {
    const formatSelect = document.getElementById('idFormatSelect');
    if(!formatSelect) return; 

    const format = formatSelect.value;
    const paddingSelect = document.getElementById('idPaddingSelect');
    const padding = paddingSelect ? parseInt(paddingSelect.value) : 5;
    
    const prefixInput = document.getElementById('idOpdPrefix');
    let prefix = prefixInput ? prefixInput.value.toUpperCase() : 'XXX';
    if(!prefix) prefix = 'XXX';

    const d = new Date();
    const yyyy = d.getFullYear().toString();
    const yy = yyyy.slice(-2);
    const mm = String(d.getMonth() + 1).padStart(2, '0');
    const seq = "1".padStart(padding, '0');

    let finalOutput = "";
    
    if (format === 'FMT_A') {
        finalOutput = `${prefix}-${yyyy}-${mm}-${seq}`;
    } else if (format === 'FMT_B') {
        finalOutput = `${prefix}-${yy}-${seq}`;
    } else if (format === 'FMT_C') {
        finalOutput = `${prefix}${yyyy}${seq}`;
    } else if (format === 'FMT_D') {
        finalOutput = `${yyyy}${mm}-${prefix}-${seq}`;
    } else if (format === 'FMT_E') {
        finalOutput = `${seq}-${prefix}-${yy}`;
    }

    const previewIdNumber = document.getElementById('previewIdNumber');
    if (previewIdNumber) previewIdNumber.textContent = finalOutput;

    // Hospital Name Sync
    const hospNameInput = document.getElementById('hospitalNameInput');
    const previewHospName = document.getElementById('previewHospName');
    if (hospNameInput && previewHospName) {
        previewHospName.textContent = hospNameInput.value || "Facility Name";
    }

    // Header Color Sync
    const primaryColorInput = document.getElementById('primaryColor');
    const cardHeaderColor = document.getElementById('cardHeaderColor');
    if (primaryColorInput && cardHeaderColor) {
        cardHeaderColor.style.backgroundColor = primaryColorInput.value;
    }
};

// Force initialize preview if the UI is injected
setTimeout(function() {
    if (document.getElementById('idFormatSelect')) {
        window.updateIdPreview();
    }
}, 300);