script.js

document.addEventListener('DOMContentLoaded', () => {
    // Elements
    const nameInput = document.getElementById('name');
    const idInput = document.getElementById('id-number');
    const deptInput = document.getElementById('department');
    const joinInput = document.getElementById('join-date'); // New
    const bloodInput = document.getElementById('blood-group'); // New
    const colorInput = document.getElementById('accent-color'); // New

    // Photo Controls
    const styleSelect = document.getElementById('style-select');
    const fileInput = document.getElementById('id-photo');
    const uploadBtn = document.getElementById('upload-btn');
    const fileNameDisplay = document.getElementById('file-name');
    const photoControls = document.getElementById('photo-controls');
    const zoomInput = document.getElementById('photo-zoom');
    const xInput = document.getElementById('photo-x');
    const yInput = document.getElementById('photo-y');

    const generateBtn = document.getElementById('generate-btn');

    // Preview Elements
    const card = document.getElementById('id-card');
    const previewName = document.getElementById('preview-name');
    const previewId = document.getElementById('preview-id');
    const previewDept = document.getElementById('preview-dept');
    const previewJoined = document.getElementById('preview-joined'); // New
    const previewBlood = document.getElementById('preview-blood'); // New
    const previewPhoto = document.getElementById('preview-photo');
    const qrContainer = document.getElementById('qrcode'); // New

    // Initial QR Code
    let qrcode = new QRCode(qrContainer, {
        text: "ID-00000",
        width: 64,
        height: 64,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });

    // Helper: Update QR
    const updateQR = () => {
        qrContainer.innerHTML = ""; // Clear existing
        const data = `ID:${idInput.value || '00000'}|Name:${nameInput.value || 'User'}|Dept:${deptInput.value}`;
        qrcode = new QRCode(qrContainer, {
            text: data,
            width: 64,
            height: 64,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });
    };

    // Event Listeners for Live Updates
    nameInput.addEventListener('input', (e) => {
        previewName.textContent = e.target.value || 'Unknown User';
        updateQR();
    });

    idInput.addEventListener('input', (e) => {
        previewId.textContent = e.target.value || 'ID-00000';
        updateQR();
    });

    deptInput.addEventListener('input', (e) => {
        previewDept.textContent = e.target.value || 'General';
        updateQR();
    });

    joinInput.addEventListener('input', (e) => {
        previewJoined.textContent = e.target.value || '-';
    });

    bloodInput.addEventListener('change', (e) => {
        previewBlood.textContent = e.target.value || '-';
    });

    colorInput.addEventListener('input', (e) => {
        // Update CSS variable
        card.style.setProperty('--theme-color', e.target.value);
    });

    styleSelect.addEventListener('change', (e) => {
        // Remove all previous style classes
        card.classList.remove('style-corporate', 'style-college', 'style-event');
        // Add new style class
        card.classList.add(`style-${e.target.value}`);

        // Reset or adjust colors based on theme if needed, but manual overwrite prevails
    });

    // File Upload Handling
    uploadBtn.addEventListener('click', () => {
        fileInput.click();
    });

    fileInput.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (file) {
            fileNameDisplay.textContent = file.name;
            const reader = new FileReader();
            reader.onload = (readerEvent) => {
                previewPhoto.src = readerEvent.target.result;
                // Show controls
                photoControls.style.display = 'block';
            };
            reader.readAsDataURL(file);
        }
    });

    // Photo Adjustment Logic
    const updatePhotoTransform = () => {
        const zoom = zoomInput.value;
        const x = xInput.value;
        const y = yInput.value;
        previewPhoto.style.transform = `scale(${zoom}) translate(${x}px, ${y}px)`;
    };

    zoomInput.addEventListener('input', updatePhotoTransform);
    xInput.addEventListener('input', updatePhotoTransform);
    yInput.addEventListener('input', updatePhotoTransform);


    // Generate / Download
    generateBtn.addEventListener('click', () => {
        generateBtn.textContent = 'Generating...';

        // Use html2canvas to take a snapshot of the card element
        html2canvas(card, {
            scale: 2, // Higher resolution
            backgroundColor: null, // Transparent if needed, though card has bg
            logging: false,
            useCORS: true // if checking external images
        }).then(canvas => {
            const link = document.createElement('a');
            link.download = `id-card-${nameInput.value || 'user'}.png`;
            link.href = canvas.toDataURL('image/png');
            link.click();
            generateBtn.textContent = 'Generate & Download';
        }).catch(err => {
            console.error(err);
            alert('Could not generate image. Please try again.');
            generateBtn.textContent = 'Generate & Download';
        });
    });
});