script.js

// Tab Navigation
document.addEventListener('DOMContentLoaded', function() {
    // Tab switching
    const navButtons = document.querySelectorAll('.nav-btn');
    const tabPanes = document.querySelectorAll('.tab-pane');
    
    navButtons.forEach(button => {
        button.addEventListener('click', function() {
            const targetTab = this.getAttribute('data-tab');
            
            // Update URL without page reload
            const url = new URL(window.location);
            url.searchParams.set('tab', targetTab);
            window.history.pushState({}, '', url);
            
            // Update active button
            navButtons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
            
            // Show target tab
            tabPanes.forEach(pane => pane.classList.remove('active'));
            document.getElementById(targetTab).classList.add('active');
            
            // Auto-load data for list tab
            if (targetTab === 'list') {
                loadListData();
            }
        });
    });
    
    // Handle browser back/forward buttons
    window.addEventListener('popstate', function() {
        const urlParams = new URLSearchParams(window.location.search);
        const tab = urlParams.get('tab') || 'files';
        switchToTab(tab);
    });
    
    // Set active tab based on URL or default to 'files'
    const urlParams = new URLSearchParams(window.location.search);
    const initialTab = urlParams.get('tab') || 'files';
    switchToTab(initialTab);
    
    // File input styling
    const fileInputs = document.querySelectorAll('.file-input');
    fileInputs.forEach(input => {
        input.addEventListener('change', function() {
            const label = this.nextElementSibling;
            if (this.files.length > 0) {
                if (this.files.length === 1) {
                    label.textContent = this.files[0].name;
                } else {
                    label.textContent = `${this.files.length} fichiers sélectionnés`;
                }
            } else {
                label.textContent = 'Sélectionner les fichiers Excel';
            }
        });
    });
    
    // Window controls simulation
    const minimizeBtn = document.querySelector('.control-btn.minimize');
    const maximizeBtn = document.querySelector('.control-btn.maximize');
    const closeBtn = document.querySelector('.control-btn.close');
    
    minimizeBtn?.addEventListener('click', function() {
        alert('Fonction de minimisation - Simulation');
    });
    
    maximizeBtn?.addEventListener('click', function() {
        document.body.classList.toggle('maximized');
        this.textContent = document.body.classList.contains('maximized') ? '❐' : '□';
    });
    
    closeBtn?.addEventListener('click', function() {
        if (confirm('Fermer l\'application?')) {
            window.close();
        }
    });
    
    // Duplicate file checking for add form
    const addForm = document.getElementById('addForm');
    if (addForm) {
        addForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const fileInput = document.getElementById('excelFiles');
            if (!fileInput || !fileInput.files.length) {
                this.submit();
                return;
            }
            
            // Check for duplicate files
            checkDuplicateFiles(fileInput.files);
        });
    }
    
    // Modal event handlers
    const duplicateModal = document.getElementById('duplicateModal');
    const cancelUpload = document.getElementById('cancelUpload');
    const skipDuplicates = document.getElementById('skipDuplicates');
    const overwriteFiles = document.getElementById('overwriteFiles');
    
    if (cancelUpload) {
        cancelUpload.addEventListener('click', function() {
            duplicateModal.style.display = 'none';
            // Clear file input
            const fileInput = document.getElementById('excelFiles');
            if (fileInput) {
                fileInput.value = '';
                const label = document.getElementById('fileInputLabel');
                if (label) {
                    label.textContent = 'Sélectionner les fichiers Excel';
                }
            }
        });
    }
    
    if (skipDuplicates) {
        skipDuplicates.addEventListener('click', function() {
            document.getElementById('overwriteFilesInput').value = 'false';
            duplicateModal.style.display = 'none';
            document.getElementById('addForm').submit();
        });
    }
    
    if (overwriteFiles) {
        overwriteFiles.addEventListener('click', function() {
            document.getElementById('overwriteFilesInput').value = 'true';
            duplicateModal.style.display = 'none';
            document.getElementById('addForm').submit();
        });
    }
    
    // Archive search input enter key
    const archiveSearchInput = document.getElementById('archiveSearchInput');
    if (archiveSearchInput) {
        archiveSearchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                searchInArchive();
            }
        });
    }
    
    // File search input enter key
    const fileSearchInput = document.getElementById('fileSearchInput');
    if (fileSearchInput) {
        fileSearchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                searchFiles();
            }
        });
    }
    
    // Auto-load list data if on list tab
    if (document.getElementById('list').classList.contains('active')) {
        loadListData();
    }
});

// File management functions
function searchFiles() {
    const searchInput = document.getElementById('fileSearchInput');
    const searchTerm = searchInput.value.toLowerCase().trim();
    const fileItems = document.querySelectorAll('.file-item');
    
    fileItems.forEach(item => {
        const fileName = item.querySelector('.file-name').textContent.toLowerCase();
        if (fileName.includes(searchTerm)) {
            item.style.display = 'flex';
        } else {
            item.style.display = 'none';
        }
    });
}

function clearFileSearch() {
    const searchInput = document.getElementById('fileSearchInput');
    searchInput.value = '';
    
    const fileItems = document.querySelectorAll('.file-item');
    fileItems.forEach(item => {
        item.style.display = 'flex';
    });
}

function showUpdateForm(formId) {
    // Hide all update forms first
    document.querySelectorAll('.update-form').forEach(form => {
        form.style.display = 'none';
    });
    
    // Hide all action buttons
    document.querySelectorAll('.action-buttons').forEach(buttons => {
        buttons.style.display = 'flex';
    });
    
    // Show the selected update form and hide its action buttons
    const updateForm = document.getElementById('updateForm_' + formId);
    const actionButtons = document.getElementById('actionButtons_' + formId);
    
    if (updateForm && actionButtons) {
        updateForm.style.display = 'block';
        actionButtons.style.display = 'none';
    }
}

function cancelUpdate(formId) {
    const updateForm = document.getElementById('updateForm_' + formId);
    const actionButtons = document.getElementById('actionButtons_' + formId);
    
    if (updateForm && actionButtons) {
        updateForm.style.display = 'none';
        actionButtons.style.display = 'flex';
        
        // Clear the file input
        const fileInput = updateForm.querySelector('input[type="file"]');
        if (fileInput) {
            fileInput.value = '';
        }
    }
}

// Filter archives by year
function filterArchivesByYear(year) {
    const url = new URL(window.location);
    url.searchParams.set('tab', 'archive');
    if (year) {
        url.searchParams.set('archive_year', year);
    } else {
        url.searchParams.delete('archive_year');
    }
    window.location.href = url.toString();
}

// Load list data automatically
function loadListData() {
    // Check if we already have data
    const hasData = document.querySelector('.data-table-container table') !== null;
    if (!hasData) {
        // Submit the search form with empty term to load all data
        const searchForm = document.getElementById('searchForm');
        if (searchForm) {
            const searchInput = searchForm.querySelector('input[name="search_term"]');
            if (searchInput) {
                searchInput.value = '';
            }
            searchForm.submit();
        }
    }
}

// Reset search and show all data
function resetSearch() {
    const searchForm = document.getElementById('searchForm');
    const searchInput = searchForm.querySelector('input[name="search_term"]');
    searchInput.value = '';
    
    // Remove page parameter from URL to ensure we start from page 1
    const url = new URL(window.location);
    url.searchParams.delete('page');
    url.searchParams.set('tab', 'list');
    window.history.replaceState({}, '', url);
    
    searchForm.submit();
}

// Check for duplicate files
function checkDuplicateFiles(files) {
    const existingFiles = Array.from(document.querySelectorAll('.file-name')).map(el => el.textContent.trim());
    const duplicates = [];
    
    for (let i = 0; i < files.length; i++) {
        if (existingFiles.includes(files[i].name)) {
            duplicates.push(files[i].name);
        }
    }
    
    if (duplicates.length > 0) {
        showDuplicateModal(duplicates);
    } else {
        // No duplicates, proceed with upload
        document.getElementById('overwriteFilesInput').value = 'false';
        document.getElementById('addForm').submit();
    }
}

// Show duplicate file confirmation modal
function showDuplicateModal(duplicates) {
    const modal = document.getElementById('duplicateModal');
    const filesList = document.getElementById('duplicateFilesList');
    
    if (!modal || !filesList) return;
    
    let html = '<p>Les fichiers suivants existent déjà :</p><ul style="margin: 10px 0; padding-left: 20px;">';
    duplicates.forEach(file => {
        html += `<li style="margin: 5px 0;">${file}</li>`;
    });
    html += '</ul><p>Que souhaitez-vous faire ?</p>';
    
    filesList.innerHTML = html;
    modal.style.display = 'flex';
}

// View archive contents
function viewArchive(archiveName) {
    const modal = document.getElementById('archiveModal');
    const title = document.getElementById('archiveModalTitle');
    const content = document.getElementById('archiveContent');
    
    if (!modal || !title || !content) return;
    
    title.textContent = `Inspection de l'Archive: ${archiveName}`;
    content.innerHTML = '<p>Chargement des données...</p>';
    modal.style.display = 'flex';
    
    // Load archive data via AJAX
    fetch('ajax-handler.php?action=view_archive&archive_name=' + encodeURIComponent(archiveName))
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                displayArchiveData(data, archiveName);
            } else {
                content.innerHTML = `<p class="error">${data.message}</p>`;
            }
        })
        .catch(error => {
            content.innerHTML = '<p class="error">Erreur lors du chargement de l\'archive.</p>';
            console.error('Error:', error);
        });
}

// Display archive data in modal
function displayArchiveData(data, archiveName) {
    const content = document.getElementById('archiveContent');
    
    if (!data.data || data.data.length === 0) {
        content.innerHTML = '<p class="no-data">Aucune donnée trouvée dans cette archive.</p>';
        return;
    }
    
    let html = `
        <div class="archive-stats">
            <p><strong>${data.data.length}</strong> enregistrement(s) trouvé(s)</p>
        </div>
        <div class="archive-data" style="margin-top: 15px;">
    `;
    
    // Create a simple table showing only name, last name, and CIN
    html += '<div style="overflow-x: auto;"><table style="width: 100%; border-collapse: collapse; margin-top: 10px;">';
    
    // Table headers
    html += '<thead><tr>';
    html += '<th style="border: 1px solid #333; padding: 8px; background: #2a2a2a;">Nom</th>';
    html += '<th style="border: 1px solid #333; padding: 8px; background: #2a2a2a;">Prénom</th>';
    html += '<th style="border: 1px solid #333; padding: 8px; background: #2a2a2a;">CIN</th>';
    html += '<th style="border: 1px solid #333; padding: 8px; background: #2a2a2a;">Actions</th>';
    html += '</tr></thead>';
    
    // Table body
    html += '<tbody>';
    data.data.forEach((row, index) => {
        // Extract name, last name, and CIN with flexible field detection
        const nameFields = ['Nom', 'nom', 'Name', 'name', 'NOM', 'Last Name', 'last name'];
        const firstNameFields = ['Prénom', 'prenom', 'Prenom', 'PRENOM', 'First Name', 'first name'];
        const cinFields = ['CIN', 'cin', 'ID', 'id', 'Id', 'Identifiant', 'identifiant', 'CNE', 'cne', 'Numéro CIN', 'numéro cin', 'Carte Identité'];
        
        let lastName = 'N/A';
        let firstName = 'N/A';
        let cin = 'N/A';
        
        // Find last name
        for (const field of nameFields) {
            if (row[field] && row[field] !== 'N/A' && row[field] !== '' && row[field] !== null) {
                lastName = row[field];
                break;
            }
        }
        
        // Find first name
        for (const field of firstNameFields) {
            if (row[field] && row[field] !== 'N/A' && row[field] !== '' && row[field] !== null) {
                firstName = row[field];
                break;
            }
        }
        
        // Find CIN - more comprehensive search
        for (const field of cinFields) {
            if (row[field] && row[field] !== 'N/A' && row[field] !== '' && row[field] !== null) {
                cin = row[field];
                break;
            }
        }
        
        // If CIN still not found, search in all fields for ID-like values
        if (cin === 'N/A') {
            for (const [key, value] of Object.entries(row)) {
                if (key !== '_source_file' && value && value !== 'N/A' && value !== '' && value !== null) {
                    // Check if value looks like an ID (alphanumeric, 6+ characters)
                    if (/^[A-Za-z0-9]{6,20}$/.test(value)) {
                        cin = value;
                        break;
                    }
                }
            }
        }
        
        html += '<tr>';
        html += `<td style="border: 1px solid #333; padding: 6px;">${lastName}</td>`;
        html += `<td style="border: 1px solid #333; padding: 6px;">${firstName}</td>`;
        html += `<td style="border: 1px solid #333; padding: 6px;">${cin}</td>`;
        html += `<td style="border: 1px solid #333; padding: 6px;">
                    <button class="cmd-button small" onclick="showArchiveDetails(${index})">Détails</button>
                 </td>`;
        html += '</tr>';
    });
    html += '</tbody>';
    html += '</table></div>';
    html += '</div>';
    
    content.innerHTML = html;
    
    // Store the full data for searching and details
    window.currentArchiveData = data.data;
    window.currentArchiveName = archiveName;
}

// Show archive individual details
function showArchiveDetails(index) {
    const data = window.currentArchiveData?.[index];
    if (!data) return;
    
    let detailsHtml = '<div class="details-modal" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 1000;">';
    detailsHtml += '<div style="background: #1a1a1a; border: 2px solid #333; padding: 20px; max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto;">';
    detailsHtml += '<h3 style="margin-bottom: 15px; border-bottom: 1px solid #333; padding-bottom: 10px;">Détails Complets</h3>';
    detailsHtml += '<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">';
    
    for (const [key, value] of Object.entries(data)) {
        if (key !== '_source_file') {
            detailsHtml += `<div><strong>${key}:</strong> ${value || 'N/A'}</div>`;
        }
    }
    
    detailsHtml += '</div>';
    detailsHtml += '<div style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #333;">';
    detailsHtml += `<strong>Fichier source:</strong> ${data._source_file || 'N/A'}`;
    detailsHtml += '</div>';
    detailsHtml += '<button onclick="closeDetails()" class="cmd-button" style="margin-top: 20px; width: 100%;">Fermer</button>';
    detailsHtml += '</div></div>';
    
    document.body.insertAdjacentHTML('beforeend', detailsHtml);
}

// Search in archive - maintains table format
function searchInArchive() {
    const searchInput = document.getElementById('archiveSearchInput');
    const content = document.getElementById('archiveContent');
    
    if (!searchInput || !content || !window.currentArchiveData) return;
    
    const searchTerm = searchInput.value.trim().toLowerCase();
    
    if (!searchTerm) {
        // If search is empty, show original data
        displayArchiveData({
            success: true,
            data: window.currentArchiveData,
            message: `Archive: ${window.currentArchiveName}`
        }, window.currentArchiveName);
        return;
    }
    
    const results = window.currentArchiveData.filter(row => {
        for (const key in row) {
            if (row[key] && row[key].toString().toLowerCase().includes(searchTerm)) {
                return true;
            }
        }
        return false;
    });
    
    if (results.length === 0) {
        content.innerHTML = `<p class="no-data">Aucun résultat trouvé pour "${searchTerm}"</p>`;
    } else {
        // Display results in the same table format
        let html = `
            <div class="archive-stats">
                <p><strong>${results.length}</strong> résultat(s) trouvé(s) pour "${searchTerm}"</p>
            </div>
            <div class="archive-data" style="margin-top: 15px;">
        `;
        
        html += '<div style="overflow-x: auto;"><table style="width: 100%; border-collapse: collapse; margin-top: 10px;">';
        
        // Table headers
        html += '<thead><tr>';
        html += '<th style="border: 1px solid #333; padding: 8px; background: #2a2a2a;">Nom</th>';
        html += '<th style="border: 1px solid #333; padding: 8px; background: #2a2a2a;">Prénom</th>';
        html += '<th style="border: 1px solid #333; padding: 8px; background: #2a2a2a;">CIN</th>';
        html += '<th style="border: 1px solid #333; padding: 8px; background: #2a2a2a;">Actions</th>';
        html += '</tr></thead>';
        
        // Table body
        html += '<tbody>';
        results.forEach((row, index) => {
            // Extract name, last name, and CIN with flexible field detection
            const nameFields = ['Nom', 'nom', 'Name', 'name', 'NOM', 'Last Name', 'last name'];
            const firstNameFields = ['Prénom', 'prenom', 'Prenom', 'PRENOM', 'First Name', 'first name'];
            const cinFields = ['CIN', 'cin', 'ID', 'id', 'Id', 'Identifiant', 'identifiant', 'CNE', 'cne', 'Numéro CIN', 'numéro cin', 'Carte Identité'];
            
            let lastName = 'N/A';
            let firstName = 'N/A';
            let cin = 'N/A';
            
            // Find last name
            for (const field of nameFields) {
                if (row[field] && row[field] !== 'N/A' && row[field] !== '' && row[field] !== null) {
                    lastName = row[field];
                    break;
                }
            }
            
            // Find first name
            for (const field of firstNameFields) {
                if (row[field] && row[field] !== 'N/A' && row[field] !== '' && row[field] !== null) {
                    firstName = row[field];
                    break;
                }
            }
            
            // Find CIN
            for (const field of cinFields) {
                if (row[field] && row[field] !== 'N/A' && row[field] !== '' && row[field] !== null) {
                    cin = row[field];
                    break;
                }
            }
            
            // Highlight search term
            const highlight = (text) => {
                if (!text || text === 'N/A') return text;
                return text.toString().replace(
                    new RegExp(searchTerm, 'gi'),
                    match => `<span style="background: yellow; color: black;">${match}</span>`
                );
            };
            
            html += '<tr>';
            html += `<td style="border: 1px solid #333; padding: 6px;">${highlight(lastName)}</td>`;
            html += `<td style="border: 1px solid #333; padding: 6px;">${highlight(firstName)}</td>`;
            html += `<td style="border: 1px solid #333; padding: 6px;">${highlight(cin)}</td>`;
            html += `<td style="border: 1px solid #333; padding: 6px;">
                        <button class="cmd-button small" onclick="showArchiveDetails(${window.currentArchiveData.indexOf(row)})">Détails</button>
                     </td>`;
            html += '</tr>';
        });
        html += '</tbody>';
        html += '</table></div></div>';
        
        content.innerHTML = html;
    }
}

// Close archive modal
function closeArchiveModal() {
    const modal = document.getElementById('archiveModal');
    const searchInput = document.getElementById('archiveSearchInput');
    
    if (modal) {
        modal.style.display = 'none';
    }
    if (searchInput) {
        searchInput.value = '';
    }
    
    // Clear stored data
    window.currentArchiveData = null;
    window.currentArchiveName = null;
}

// Switch to specific tab
function switchToTab(tabId) {
    const navButtons = document.querySelectorAll('.nav-btn');
    const tabPanes = document.querySelectorAll('.tab-pane');
    
    // Update active button
    navButtons.forEach(btn => {
        if (btn.getAttribute('data-tab') === tabId) {
            btn.classList.add('active');
        } else {
            btn.classList.remove('active');
        }
    });
    
    // Show target tab
    tabPanes.forEach(pane => {
        if (pane.id === tabId) {
            pane.classList.add('active');
        } else {
            pane.classList.remove('active');
        }
    });
}

// Show individual details
function showDetails(index) {
    const data = window.currentData?.[index];
    if (!data) return;
    
    let detailsHtml = '<div class="details-modal" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 1000;">';
    detailsHtml += '<div style="background: #1a1a1a; border: 2px solid #333; padding: 20px; max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto;">';
    detailsHtml += '<h3 style="margin-bottom: 15px; border-bottom: 1px solid #333; padding-bottom: 10px;">Détails de l\'Individu</h3>';
    detailsHtml += '<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">';
    
    for (const [key, value] of Object.entries(data)) {
        if (key !== '_source_file') {
            detailsHtml += `<div><strong>${key}:</strong> ${value || 'N/A'}</div>`;
        }
    }
    
    detailsHtml += '</div>';
    detailsHtml += '<div style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #333;">';
    detailsHtml += `<strong>Fichier source:</strong> ${data._source_file || 'N/A'}`;
    detailsHtml += '</div>';
    detailsHtml += '<button onclick="closeDetails()" class="cmd-button" style="margin-top: 20px; width: 100%;">Fermer</button>';
    detailsHtml += '</div></div>';
    
    document.body.insertAdjacentHTML('beforeend', detailsHtml);
}

function closeDetails() {
    const modal = document.querySelector('.details-modal');
    if (modal) {
        modal.remove();
    }
}

// File deletion confirmation function - FIXED VERSION
function confirmDelete(filename) {
    return confirm('Êtes-vous sûr de vouloir supprimer le fichier "' + filename + '" ?');
}

// Enhanced file deletion with debug
function deleteFileWithDebug(filename, event) {
    console.log('Delete file triggered:', filename);
    console.log('Event target:', event.target);
    
    const form = event.target.closest('form');
    console.log('Parent form:', form);
    
    if (form) {
        console.log('Form action:', form.action);
        console.log('Form method:', form.method);
        console.log('Form inputs:', Array.from(form.elements).map(el => ({
            name: el.name,
            value: el.value,
            type: el.type
        })));
    }
    
    const result = confirm('Êtes-vous sûr de vouloir supprimer le fichier "' + filename + '" ?');
    console.log('User confirmed deletion:', result);
    
    if (result) {
        // Add loading state
        const button = event.target;
        const originalHTML = button.innerHTML;
        button.innerHTML = '<span class="delete-icon">⏳</span> Suppression...';
        button.disabled = true;
        
        // Force form submission
        if (form) {
            console.log('Submitting form...');
            form.submit();
        }
        
        // Revert button after timeout (in case form doesn't submit)
        setTimeout(() => {
            button.innerHTML = originalHTML;
            button.disabled = false;
        }, 3000);
    }
    
    return result;
}

// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
    // Ctrl + S for search
    if (e.ctrlKey && e.key === 's') {
        e.preventDefault();
        switchToTab('list');
        document.querySelector('.search-input')?.focus();
    }
    
    // Ctrl + A for add files
    if (e.ctrlKey && e.key === 'a') {
        e.preventDefault();
        switchToTab('files');
    }
    
    // Ctrl + L for list
    if (e.ctrlKey && e.key === 'l') {
        e.preventDefault();
        switchToTab('list');
    }
    
    // Escape to close modals
    if (e.key === 'Escape') {
        closeDetails();
        closeArchiveModal();
        const duplicateModal = document.getElementById('duplicateModal');
        if (duplicateModal && duplicateModal.style.display === 'flex') {
            duplicateModal.style.display = 'none';
        }
    }
});

// Auto-refresh file count in status bar
function updateFileCount() {
    // This would typically make an AJAX request to get current file count
    // For now, we'll just update based on the files list
    const filesList = document.querySelector('.files-list');
    if (filesList) {
        const fileCount = filesList.querySelectorAll('.file-item').length;
        const statusItem = document.querySelector('.status-item:nth-child(2)');
        if (statusItem) {
            statusItem.textContent = `Fichiers: ${fileCount}`;
        }
    }
}

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    updateFileCount();
    
    // Update time in status bar
    function updateTime() {
        const now = new Date();
        const timeString = now.toLocaleDateString('fr-FR') + ' ' + now.toLocaleTimeString('fr-FR');
        const timeElement = document.querySelector('.status-item:last-child');
        if (timeElement) {
            timeElement.textContent = timeString;
        }
    }
    
    setInterval(updateTime, 1000);
    updateTime();
    
    // Debug: Check if delete forms are properly set up
    console.log('Delete forms found:', document.querySelectorAll('form[action*="delete"]').length);
});