<div id="importModal" class="modal-overlay hidden" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center;">
    <div class="modal-content" style="background: white; border-radius: 8px; padding: 24px; max-width: 500px; width: 90%; box-shadow: 0 4px 20px rgba(0,0,0,0.2);">
        <div class="modal-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
            <h3 style="margin: 0;">Import Data</h3>
            <button onclick="closeImportModal()" style="background: none; border: none; font-size: 24px; cursor: pointer; padding: 0; line-height: 1;">&times;</button>
        </div>
        <div class="modal-body">
            <p>Select a file to import:</p>
            <form id="importForm" enctype="multipart/form-data">
<input type="hidden" id="importTable" name="table" value="">
                <input type="hidden" id="importFormat" name="format" value="xlsx">
                <div style="margin-bottom: 16px;">
                    <label style="display: block; margin-bottom: 8px; font-weight: 500;">Format:</label>
                    <select id="formatSelector" onchange="document.getElementById('importFormat').value = this.value; document.getElementById('importFile').accept = this.value === 'csv' ? '.csv' : '.xlsx,.xls';" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 12px;">
                        <option value="xlsx">Excel (.xlsx, .xls)</option>
                        <option value="csv">CSV (.csv)</option>
                    </select>
                    <label for="importFile" style="display: block; width: 100%; padding: 8px; border: 2px dashed #ddd; border-radius: 4px; text-align: center; cursor: pointer; background: #f8f9fa;">Choose file... <span id="fileName" style="display: block; margin-top: 8px; font-size: 0.9em; color: #666;"></span></label>
                    <input type="file" id="importFile" name="file" style="display: none; width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                </div>
                <div id="importStatus" style="margin-bottom: 16px;"></div>
                <div style="display: flex; gap: 12px; justify-content: flex-end;">
                    <button type="button" onclick="closeImportModal()" style="padding: 8px 16px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer;">Cancel</button>
                    <button type="button" onclick="submitImport()" style="padding: 8px 16px; background: #0d6efd; color: white; border: none; border-radius: 4px; cursor: pointer;">Import</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
async function submitImport() {
    const fileInput = document.getElementById('importFile');
    const tableInput = document.getElementById('importTable');
    const formatInput = document.getElementById('importFormat');
    const statusDiv = document.getElementById('importStatus');
    
    if (!fileInput.files[0]) {
        statusDiv.innerHTML = '<p style="color: red;">Please select a file</p>';
        return;
    }
    
    const formData = new FormData();
    formData.append('file', fileInput.files[0]);
    formData.append('table', tableInput.value);
    formData.append('format', formatInput.value);
    
    statusDiv.innerHTML = '<p>Importing...</p>';
    
    try {
        const response = await fetch('../api/export_import.php', {
            method: 'POST',
            body: formData
        });
        const result = await response.json();
        
        if (result.success !== undefined) {
            statusDiv.innerHTML = '<p style="color: green;">Import complete: ' + result.success + ' records imported</p>';
            if (result.errors?.length) {
                console.error('Import errors:', result.errors);
            }
            setTimeout(() => {
                closeImportModal();
                location.reload();
            }, 1500);
        } else if (result.error) {
            statusDiv.innerHTML = '<p style="color: red;">Import failed: ' + result.error + '</p>';
        }
    } catch (err) {
        statusDiv.innerHTML = '<p style="color: red;">Error: ' + err.message + '</p>';
    }
}
</script>