script.js

const dropZone = document.getElementById('dropZone');
const fileInput = document.getElementById('fileInput');
const viewer = document.getElementById('viewer');
const loading = document.getElementById('loading');
const error = document.getElementById('error');

// Prevent default drag behaviors
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropZone.addEventListener(eventName, preventDefaults, false);
    document.body.addEventListener(eventName, preventDefaults, false);
});

// Highlight drop zone when dragging over it
['dragenter', 'dragover'].forEach(eventName => {
    dropZone.addEventListener(eventName, highlight, false);
});

['dragleave', 'drop'].forEach(eventName => {
    dropZone.addEventListener(eventName, unhighlight, false);
});

// Handle dropped files
dropZone.addEventListener('drop', handleDrop, false);

function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
}

function highlight(e) {
    dropZone.classList.add('drag-over');
}

function unhighlight(e) {
    dropZone.classList.remove('drag-over');
}

function handleDrop(e) {
    const dt = e.dataTransfer;
    const files = dt.files;
    handleFiles(files);
}

fileInput.addEventListener('change', function (e) {
    handleFiles(this.files);
});

function handleFiles(files) {
    if (files.length === 0) return;

    const file = files[0];
    const fileType = file.name.split('.').pop().toLowerCase();

    // Reset display
    loading.style.display = 'block';
    error.style.display = 'none';
    viewer.style.display = 'none';

    if (fileType === 'pdf') {
        handlePDF(file);
    } else {
        showError('Unsupported file type. Please upload PDF files.');
    }
}

function handlePDF(file) {
    const fileUrl = URL.createObjectURL(file);
    viewer.src = fileUrl;
    viewer.onload = function () {
        loading.style.display = 'none';
        viewer.style.display = 'block';
    };
}

function showError(message) {
    loading.style.display = 'none';
    viewer.style.display = 'none';
    error.textContent = message;
    error.style.display = 'block';
}