// admin/personnel/employee/list/main.js
const API_BASE_URL = '/est-concours/model/api/employee.php';
const API_GRADE_URL = '/est-concours/model/api/grade.php';
const API_ECHELLE_URL = '/est-concours/model/api/echelle.php';
const API_ECHELLON_URL = '/est-concours/model/api/echellon.php';
const API_TYPE_GRADE_URL = '/est-concours/model/api/type_grade.php';

let currentPage = 1;
const perPage = 10;
let totalPages = 1;
let editMode = false;
let currentDetailId = null;
let gradesMap = {};
let echellesMap = {};
let echellonsMap = {};
let typeGradesMap = {};

// ============================================
// LOAD ON PAGE LOAD
// ============================================
document.addEventListener('DOMContentLoaded', function() {
    loadSelects();
    loadEmployees();
    loadStats();
    setupSearchForm();
    setupPasswordStrength();
});

// ============================================
// SEARCH FUNCTIONS
// ============================================
function setupSearchForm() {
    var searchForm = document.getElementById('searchForm');
    if (searchForm) {
        searchForm.addEventListener('submit', function(e) {
            e.preventDefault();
            currentPage = 1;
            loadEmployees();
        });
    }
}

function resetSearch() {
    var searchForm = document.getElementById('searchForm');
    if (searchForm) searchForm.reset();
    var searchStatus = document.getElementById('searchStatus');
    if (searchStatus) searchStatus.value = '';
    currentPage = 1;
    loadEmployees();
}

// ============================================
// SWITCH TAB (pour les onglets du modal)
// ============================================
function switchTab(tabName) {
    // Cacher tous les contenus
    document.querySelectorAll('.tab-content').forEach(function(content) {
        content.classList.remove('active');
    });

    // Désactiver tous les boutons
    document.querySelectorAll('.tab-btn').forEach(function(btn) {
        btn.classList.remove('active');
    });

    // Afficher le contenu sélectionné
    var targetContent = document.getElementById('tab-' + tabName);
    if (targetContent) {
        targetContent.classList.add('active');
    }

    // Activer le bouton sélectionné
    var targetBtn = document.querySelector('.tab-btn[data-tab="' + tabName + '"]');
    if (targetBtn) {
        targetBtn.classList.add('active');
    }
}

// ============================================
// PASSWORD STRENGTH
// ============================================
function setupPasswordStrength() {
    var passwordInput = document.getElementById('new_password');
    if (passwordInput) {
        passwordInput.addEventListener('input', function() {
            var strength = getPasswordStrength(this.value);
            var bar = document.getElementById('passwordStrengthBar');
            var text = document.getElementById('passwordStrengthText');
            if (bar) {
                bar.className = 'bar ' + strength.class;
                bar.style.width = strength.percentage + '%';
            }
            if (text) {
                text.textContent = strength.label;
                text.style.color = strength.color;
            }
        });
    }
}

function getPasswordStrength(password) {
    var score = 0;
    if (password.length >= 6) score++;
    if (password.length >= 10) score++;
    if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score++;
    if (/\d/.test(password)) score++;
    if (/[^a-zA-Z0-9]/.test(password)) score++;

    var levels = [
        { class: 'weak', label: 'Faible', color: '#dc3545', percentage: 25 },
        { class: 'weak', label: 'Faible', color: '#dc3545', percentage: 25 },
        { class: 'medium', label: 'Moyen', color: '#ffc107', percentage: 50 },
        { class: 'medium', label: 'Moyen', color: '#ffc107', percentage: 50 },
        { class: 'strong', label: 'Fort', color: '#28a745', percentage: 75 },
        { class: 'very-strong', label: 'Très fort', color: '#28a745', percentage: 100 }
    ];

    return levels[Math.min(score, 5)] || levels[0];
}

function generateRandomPassword(length) {
    if (length === undefined) length = 12;
    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()';
    var password = '';
    for (var i = 0; i < length; i++) {
        password += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    return password;
}

function changePassword() {
    var newPassword = generateRandomPassword(12);
    var passwordInput = document.getElementById('new_password');
    var confirmInput = document.getElementById('confirm_password');
    var strengthBar = document.getElementById('passwordStrengthBar');
    var strengthText = document.getElementById('passwordStrengthText');

    if (passwordInput) {
        passwordInput.value = newPassword;
        var event = new Event('input');
        passwordInput.dispatchEvent(event);
    }
    if (confirmInput) {
        confirmInput.value = newPassword;
    }

    var strength = getPasswordStrength(newPassword);
    if (strengthBar) {
        strengthBar.className = 'bar ' + strength.class;
        strengthBar.style.width = strength.percentage + '%';
    }
    if (strengthText) {
        strengthText.textContent = strength.label;
        strengthText.style.color = strength.color;
    }

    showToast('Nouveau mot de passe généré avec succès !', 'success');
}

// ============================================
// LOAD SELECTS (Grades, Echelles, Echellons)
// ============================================
function loadSelects() {
    // Load type grades FIRST (avant les grades)
    fetch(API_TYPE_GRADE_URL + '?action=all')
        .then(function(response) { return response.json(); })
        .then(function(result) {
            if (result.success) {
                var types = result.data;
                typeGradesMap = {};
                types.forEach(function(t) { typeGradesMap[t.id] = t; });

                var sel = document.getElementById('type_grade_id');
                if (sel) {
                    sel.innerHTML = '<option value="">Sélectionner un type</option>';
                    types.forEach(function(t) {
                        var opt = document.createElement('option');
                        opt.value = t.id;
                        opt.textContent = t.libelle + ' (' + t.code + ')';
                        sel.appendChild(opt);
                    });
                }
            }
        })
        .catch(function(error) { console.error('Error loading type grades:', error); });

    // Load grades (sera filtré par type)
    fetch(API_GRADE_URL + '?action=all')
        .then(function(response) { return response.json(); })
        .then(function(result) {
            if (result.success) {
                var grades = result.data;
                gradesMap = {};
                grades.forEach(function(g) { gradesMap[g.id] = g; });

                var sel = document.getElementById('grade_id');
                if (sel) {
                    sel.innerHTML = '<option value="">Sélectionner un grade</option>';
                }
            }
        })
        .catch(function(error) { console.error('Error loading grades:', error); });

    // Load echelles
    fetch(API_ECHELLE_URL + '?action=all')
        .then(function(response) { return response.json(); })
        .then(function(result) {
            if (result.success) {
                var echelles = result.data;
                echellesMap = {};
                echelles.forEach(function(e) { echellesMap[e.id] = e; });

                var sel = document.getElementById('echelle_select');
                if (sel) {
                    sel.innerHTML = '<option value="">Sélectionner une échelle</option>';
                    echelles.forEach(function(e) {
                        var opt = document.createElement('option');
                        opt.value = e.id;
                        opt.textContent = e.libelle + ' (' + e.code + ')';
                        sel.appendChild(opt);
                    });
                }
            }
        })
        .catch(function(error) { console.error('Error loading echelles:', error); });
}

function loadEchellons(echelleId) {
    var sel = document.getElementById('echellon_id');
    if (!sel) {
        console.error('Element echellon_id non trouvé');
        return;
    }

    // Réinitialiser
    sel.innerHTML = '<option value="">Sélectionner un échelon</option>';
    sel.disabled = true;

    if (!echelleId) {
        console.log('Aucune échelle sélectionnée');
        sel.disabled = true;
        return;
    }

    console.log('Chargement des échelons pour échelle ID:', echelleId);

    fetch(API_ECHELLON_URL + '?action=by_echelle&echelle_id=' + echelleId)
        .then(function(response) {
            console.log('Réponse reçue');
            return response.json();
        })
        .then(function(result) {
            sel.disabled = false;
            console.log('Résultat:', result);

            if (result.success) {
                var echellons = result.data;
                console.log('Nombre d\'échelons trouvés:', echellons ? echellons.length : 0);

                if (!echellons || echellons.length === 0) {
                    console.warn('Aucun échelon trouvé pour cette échelle');
                    sel.innerHTML = '<option value="">Aucun échelon disponible</option>';
                    return;
                }

                echellonsMap = {};
                echellons.forEach(function(e) {
                    echellonsMap[e.id] = e;
                });

                // Ajouter les options
                echellons.forEach(function(e) {
                    var opt = document.createElement('option');
                    opt.value = e.id;
                    opt.textContent = e.libelle + ' (' + e.code + ')';
                    sel.appendChild(opt);
                });

                console.log('Échelons chargés avec succès');
            } else {
                console.error('Erreur API:', result.message);
                sel.innerHTML = '<option value="">Erreur de chargement</option>';
                showToast('Erreur: ' + (result.message || 'Impossible de charger les échelons'), 'error');
            }
        })
        .catch(function(error) {
            sel.disabled = false;
            console.error('Error loading echellons:', error);
            sel.innerHTML = '<option value="">Erreur de connexion</option>';
            showToast('Erreur de connexion au serveur', 'error');
        });
}
// ============================================
// STATS
// ============================================
function loadStats() {
    fetch(API_BASE_URL + '?action=stats')
        .then(function(response) { return response.json(); })
        .then(function(result) {
            if (result.success) {
                var stats = result.data;
                var statTotal = document.getElementById('statTotal');
                var statActive = document.getElementById('statActive');
                var statBlocked = document.getElementById('statBlocked');
                if (statTotal) statTotal.textContent = stats.total || 0;
                if (statActive) statActive.textContent = stats.active || 0;
                if (statBlocked) statBlocked.textContent = stats.blocked || 0;
            }
        })
        .catch(function(error) { console.error('Error loading stats:', error); });
}

// ============================================
// LOAD EMPLOYEES
// ============================================
function loadEmployees() {
    showLoading(true);

    var searchId = document.getElementById('searchId');
    var searchNom = document.getElementById('searchNom');
    var searchPrenom = document.getElementById('searchPrenom');
    var searchCin = document.getElementById('searchCin');
    var searchEmail = document.getElementById('searchEmail');
    var searchStatus = document.getElementById('searchStatus');

    var searchData = {
        id: searchId ? searchId.value : '',
        nom: searchNom ? searchNom.value : '',
        prenom: searchPrenom ? searchPrenom.value : '',
        cin: searchCin ? searchCin.value : '',
        email: searchEmail ? searchEmail.value : '',
        status: searchStatus ? searchStatus.value : '',
        page: currentPage,
        per_page: perPage
    };

    var params = new URLSearchParams(searchData);

    fetch(API_BASE_URL + '?action=search&' + params.toString())
        .then(function(response) { return response.json(); })
        .then(function(result) {
            showLoading(false);
            if (result.success) {
                renderTable(result.data.data);
                renderPagination(result.data);
            } else {
                showToast('Erreur: ' + result.message, 'error');
            }
        })
        .catch(function(error) {
            showLoading(false);
            showToast('Erreur de connexion au serveur', 'error');
            console.error('Error:', error);
        });
}

// ============================================
// RENDER TABLE
// ============================================
function renderTable(employees) {
    var tbody = document.getElementById('tableBody');
    if (!tbody) return;

    if (!employees || employees.length === 0) {
        tbody.innerHTML = '<tr><td colspan="10" style="text-align: center; padding: 40px; color: #666;"><p style="font-size: 18px;">👤 Aucun employé trouvé</p><p style="font-size: 14px; margin-top: 5px;">Essayez de modifier vos critères de recherche</p></td></tr>';
        return;
    }

    var html = '';
    employees.forEach(function(emp) {
        html += '<tr>' +
            '<td>' + emp.id + '</td>' +
            '<td><span class="badge badge-secondary">' + escapeHtml(emp.code) + '</span></td>' +
            '<td><strong>' + escapeHtml(emp.nom) + '</strong></td>' +
            '<td>' + escapeHtml(emp.prenom) + '</td>' +
            '<td>' + escapeHtml(emp.cin) + '</td>' +
            '<td>' + escapeHtml(emp.email) + '</td>' +
            '<td><span class="badge badge-info">' + escapeHtml(emp.login) + '</span></td>' +
            '<td>' + escapeHtml(emp.grade_libelle || '-') + '</td>' +
            '<td><span class="badge-status ' + (emp.blocked ? 'blocked' : (emp.status === 'active' ? 'active' : 'inactive')) + '">' + (emp.blocked ? 'Bloqué' : (emp.status === 'active' ? 'Actif' : 'Inactif')) + '</span></td>' +
            '<td>' +
            '<button class="btn btn-info btn-sm" onclick="viewDetail(' + emp.id + ')" title="Voir les détails"><i class="fas fa-eye"></i></button> ' +
            '<button class="btn btn-warning btn-sm" onclick="openEditModal(' + emp.id + ')" title="Modifier"><i class="fas fa-edit"></i></button> ' +
            '<button class="btn btn-danger btn-sm" onclick="deleteEmployee(' + emp.id + ')" title="Supprimer"><i class="fas fa-trash"></i></button>' +
            '</td>' +
            '</tr>';
    });
    tbody.innerHTML = html;
}

// ============================================
// PAGINATION
// ============================================
function renderPagination(data) {
    var total = data.total;
    var page = data.page;
    var pages = data.totalPages;
    totalPages = pages;

    var paginationInfo = document.getElementById('paginationInfo');
    var pageNumbers = document.getElementById('pageNumbers');
    var prevBtn = document.getElementById('prevBtn');
    var nextBtn = document.getElementById('nextBtn');

    if (paginationInfo) {
        var start = (page - 1) * perPage + 1;
        var end = Math.min(page * perPage, total);
        paginationInfo.textContent = 'Affichage de ' + start + ' à ' + end + ' sur ' + total + ' employés';
    }

    if (pageNumbers) {
        var html = '';
        for (var i = 1; i <= pages; i++) {
            html += '<button onclick="goToPage(' + i + ')" ' + (i === page ? 'class="active"' : '') + '>' + i + '</button>';
        }
        pageNumbers.innerHTML = html;
    }

    if (prevBtn) prevBtn.disabled = page <= 1;
    if (nextBtn) nextBtn.disabled = page >= pages;
}

function changePage(direction) {
    if (direction === 'prev' && currentPage > 1) {
        currentPage--;
    } else if (direction === 'next' && currentPage < totalPages) {
        currentPage++;
    }
    loadEmployees();
}

function goToPage(page) {
    currentPage = page;
    loadEmployees();
}

// ============================================
// MODAL FUNCTIONS
// ============================================
function filterGradesByType(typeGradeId) {
    var gradeSelect = document.getElementById('grade_id');
    if (!gradeSelect) return;

    gradeSelect.innerHTML = '<option value="">Selectionner un grade</option>';

    if (!typeGradeId) return;

    var filteredGrades = [];
    for (var id in gradesMap) {
        if (gradesMap[id].type_grade_id == typeGradeId) {
            filteredGrades.push(gradesMap[id]);
        }
    }

    filteredGrades.forEach(function(g) {
        var opt = document.createElement('option');
        opt.value = g.id;
        opt.textContent = g.libelle + ' (' + g.code + ')';
        gradeSelect.appendChild(opt);
    });
}

// ============================================
// FILTER ECHELLES BY GRADE
// ============================================
function filterEchellesByGrade(gradeId) {
    var echelleSelect = document.getElementById('echelle_select');
    var echellonSelect = document.getElementById('echellon_id');

    if (!echelleSelect) return;

    // Réinitialiser les listes
    echelleSelect.innerHTML = '<option value="">Sélectionner une échelle</option>';
    if (echellonSelect) {
        echellonSelect.innerHTML = '<option value="">Sélectionner un échelon</option>';
        echellonSelect.disabled = true;
    }

    if (!gradeId) return;

    // Récupérer le grade pour trouver son échelle
    var grade = gradesMap[gradeId];
    if (!grade) {
        console.log('Grade non trouvé dans gradesMap');
        return;
    }

    // Récupérer les échelles liées à ce grade
    var echelles = [];
    for (var id in echellesMap) {
        if (echellesMap[id].grade_id == gradeId) {
            echelles.push(echellesMap[id]);
        }
    }

    if (echelles.length === 0) {
        console.log('Aucune échelle trouvée pour ce grade');
        return;
    }

    // Remplir la liste des échelles
    echelles.forEach(function(e) {
        var opt = document.createElement('option');
        opt.value = e.id;
        opt.textContent = e.libelle + ' (' + e.code + ')';
        echelleSelect.appendChild(opt);
    });

    // Si une seule échelle, la sélectionner automatiquement
    if (echelles.length === 1) {
        echelleSelect.value = echelles[0].id;
        // Charger les échelons de cette échelle
        loadEchellons(echelles[0].id);
    }
}

function setElementValue(id, value) {
    var el = document.getElementById(id);
    if (el) el.value = value || '';
}

// ============================================
// OPEN CREATE MODAL
// ============================================
function openCreateModal() {
    editMode = false;
    var modalTitle = document.getElementById('modalTitle');
    var employeeForm = document.getElementById('employeeForm');
    var employeeId = document.getElementById('employeeId');
    var modalOverlay = document.querySelector('.modal-overlay');

    // Afficher le message pour nouveau employé
    var passwordMessage = document.getElementById('passwordMessage');
    var passwordRequired = document.getElementById('passwordRequired');
    var confirmRequired = document.getElementById('confirmRequired');
    var passwordEditHint = document.getElementById('passwordEditHint');
    var generatePasswordContainer = document.getElementById('generatePasswordContainer');
    var changePasswordContainer = document.getElementById('changePasswordContainer');
    var generatePasswordBtn = document.getElementById('generatePasswordBtn');
    var generatePasswordText = document.getElementById('generatePasswordText');
    var generatePasswordHint = document.getElementById('generatePasswordHint');

    // Mode CREATION
    if (passwordMessage) passwordMessage.textContent = 'Pour un nouvel employé, veuillez définir un mot de passe.';
    if (passwordRequired) {
        passwordRequired.style.display = 'inline';
        passwordRequired.textContent = '*';
    }
    if (confirmRequired) {
        confirmRequired.style.display = 'inline';
        confirmRequired.textContent = '*';
    }
    if (passwordEditHint) passwordEditHint.style.display = 'none';

    // Afficher le conteneur de génération, cacher celui de changement
    if (generatePasswordContainer) generatePasswordContainer.style.display = 'block';
    if (changePasswordContainer) changePasswordContainer.style.display = 'none';

    // Configurer le bouton pour la génération
    if (generatePasswordBtn) {
        generatePasswordBtn.innerHTML = '<i class="fas fa-sync-alt"></i> Générer un mot de passe';
        generatePasswordBtn.className = 'btn btn-warning';
        generatePasswordBtn.onclick = function() { generatePassword(); };
    }
    if (generatePasswordText) generatePasswordText.textContent = 'Générer un mot de passe';
    if (generatePasswordHint) generatePasswordHint.textContent = 'Cliquez pour générer un nouveau mot de passe automatiquement';

    if (modalTitle) modalTitle.textContent = 'Nouvel Employé';
    if (employeeForm) employeeForm.reset();
    if (employeeId) employeeId.value = '';
    if (modalOverlay) modalOverlay.classList.add('active');

    // Reset password fields
    var newPassword = document.getElementById('new_password');
    var confirmPassword = document.getElementById('confirm_password');
    if (newPassword) {
        newPassword.value = '';
        newPassword.required = true;
        newPassword.placeholder = 'Au moins 6 caractères';
    }
    if (confirmPassword) {
        confirmPassword.value = '';
        confirmPassword.required = true;
        confirmPassword.placeholder = 'Confirmer le mot de passe';
    }

    // Reset password strength
    var strengthBar = document.getElementById('passwordStrengthBar');
    var strengthText = document.getElementById('passwordStrengthText');
    if (strengthBar) {
        strengthBar.className = 'bar';
        strengthBar.style.width = '0%';
    }
    if (strengthText) {
        strengthText.textContent = 'Entrez un mot de passe';
        strengthText.style.color = '#888';
    }

    // Set default tab
    document.querySelectorAll('.tab-btn').forEach(function(b) { b.classList.remove('active'); });
    document.querySelectorAll('.tab-content').forEach(function(c) { c.classList.remove('active'); });
    var firstTab = document.querySelector('.tab-btn[data-tab="personal"]');
    if (firstTab) firstTab.classList.add('active');
    var firstContent = document.getElementById('tab-personal');
    if (firstContent) firstContent.classList.add('active');

    // Réinitialiser les champs du formulaire professionnel
    var form2 = document.getElementById('employeeForm2');
    if (form2) form2.reset();
}

// ============================================
// OPEN EDIT MODAL
// ============================================
function openEditModal(id) {
    editMode = true;
    var modalTitle = document.getElementById('modalTitle');
    var employeeId = document.getElementById('employeeId');
    var modalOverlay = document.querySelector('.modal-overlay');

    // Mode EDITION
    var passwordMessage = document.getElementById('passwordMessage');
    var passwordRequired = document.getElementById('passwordRequired');
    var confirmRequired = document.getElementById('confirmRequired');
    var passwordEditHint = document.getElementById('passwordEditHint');
    var generatePasswordContainer = document.getElementById('generatePasswordContainer');
    var changePasswordContainer = document.getElementById('changePasswordContainer');
    var changePasswordBtn = document.getElementById('changePasswordBtn');
    var generatePasswordBtn = document.getElementById('generatePasswordBtn');
    var generatePasswordText = document.getElementById('generatePasswordText');
    var generatePasswordHint = document.getElementById('generatePasswordHint');

    if (passwordMessage) passwordMessage.textContent = 'Saisissez un nouveau mot de passe puis cliquez sur "Changer le mot de passe" pour l\'enregistrer.';
    if (passwordRequired) {
        passwordRequired.style.display = 'inline';
        passwordRequired.textContent = '*';
    }
    if (confirmRequired) {
        confirmRequired.style.display = 'inline';
        confirmRequired.textContent = '*';
    }
    if (passwordEditHint) passwordEditHint.style.display = 'none';

    // Cacher le conteneur de génération, afficher celui de changement
    if (generatePasswordContainer) generatePasswordContainer.style.display = 'none';
    if (changePasswordContainer) changePasswordContainer.style.display = 'block';

    // Configurer le bouton pour le changement de mot de passe
    if (changePasswordBtn) {
        changePasswordBtn.innerHTML = '<i class="fas fa-key"></i> Changer le mot de passe';
        changePasswordBtn.className = 'btn btn-warning';
        changePasswordBtn.onclick = function() { changeExistingPassword(); };
    }

    if (modalTitle) modalTitle.textContent = 'Modifier Employé';
    if (employeeId) employeeId.value = id;
    if (modalOverlay) modalOverlay.classList.add('active');

    // Reset password fields - Rendre les champs obligatoires
    var newPassword = document.getElementById('new_password');
    var confirmPassword = document.getElementById('confirm_password');
    if (newPassword) {
        newPassword.value = '';
        newPassword.required = true;
        newPassword.placeholder = 'Saisissez un nouveau mot de passe (min 6 caractères)';
    }
    if (confirmPassword) {
        confirmPassword.value = '';
        confirmPassword.required = true;
        confirmPassword.placeholder = 'Confirmer le nouveau mot de passe';
    }

    // Reset password strength
    var strengthBar = document.getElementById('passwordStrengthBar');
    var strengthText = document.getElementById('passwordStrengthText');
    if (strengthBar) {
        strengthBar.className = 'bar';
        strengthBar.style.width = '0%';
    }
    if (strengthText) {
        strengthText.textContent = 'Saisissez un nouveau mot de passe';
        strengthText.style.color = '#888';
    }

    // Set default tab
    document.querySelectorAll('.tab-btn').forEach(function(b) { b.classList.remove('active'); });
    document.querySelectorAll('.tab-content').forEach(function(c) { c.classList.remove('active'); });
    var firstTab = document.querySelector('.tab-btn[data-tab="personal"]');
    if (firstTab) firstTab.classList.add('active');
    var firstContent = document.getElementById('tab-personal');
    if (firstContent) firstContent.classList.add('active');

    // Show loading state
    document.querySelectorAll('#employeeForm input, #employeeForm select, #employeeForm textarea').forEach(function(el) {
        if (el.id !== 'employeeId' && el.id !== 'confirm_password' && el.id !== 'new_password') {
            el.disabled = true;
        }
    });

    fetch(API_BASE_URL + '?action=get&id=' + id)
        .then(function(response) { return response.json(); })
        .then(function(result) {
            document.querySelectorAll('#employeeForm input, #employeeForm select, #employeeForm textarea').forEach(function(el) {
                if (el.id !== 'employeeId' && el.id !== 'confirm_password' && el.id !== 'new_password') {
                    el.disabled = false;
                }
            });

            if (result.success) {
                var emp = result.data;

                // Personal info
                setElementValue('nom', emp.nom);
                setElementValue('nom_arab', emp.nom_arab);
                setElementValue('prenom', emp.prenom);
                setElementValue('prenom_arab', emp.prenom_arab);
                setElementValue('cin', emp.cin);
                setElementValue('email', emp.email);
                setElementValue('phone', emp.phone);
                setElementValue('genre', emp.genre);
                setElementValue('lieu_naissance', emp.lieu_naissance);
                setElementValue('date_naissance', emp.date_naissance);

                // Professional info
                setElementValue('code', emp.code);
                setElementValue('login', emp.login);
                setElementValue('specialite', emp.specialite);
                setElementValue('diplome', emp.diplome);
                setElementValue('etablissement_diplome', emp.etablissement_diplome);
                setElementValue('fonctionnaire', emp.fonctionnaire || '0');
                setElementValue('nombre_annee_fonctionnaire', emp.nombre_annee_fonctionnaire);
                setElementValue('date_recrutement', emp.date_recrutement);
                setElementValue('date_affectation_enseignement', emp.date_affectation_enseignement);
                setElementValue('status', emp.status || 'active');

                // Remplir le type de grade en premier
                if (emp.type_grade_id) {
                    setElementValue('type_grade_id', emp.type_grade_id);
                    filterGradesByType(emp.type_grade_id);

                    setTimeout(function() {
                        if (emp.grade_id) {
                            setElementValue('grade_id', emp.grade_id);
                            filterEchellesByGrade(emp.grade_id);

                            setTimeout(function() {
                                var grade = gradesMap[emp.grade_id];
                                if (grade && grade.echelle_id) {
                                    setElementValue('echelle_select', grade.echelle_id);
                                    loadEchellons(grade.echelle_id);

                                    setTimeout(function() {
                                        if (emp.echellon_id) {
                                            setElementValue('echellon_id', emp.echellon_id);
                                        }
                                    }, 300);
                                }
                            }, 300);
                        }
                    }, 300);
                }
            } else {
                showToast('Erreur: ' + result.message, 'error');
                closeModal();
            }
        })
        .catch(function(error) {
            document.querySelectorAll('#employeeForm input, #employeeForm select, #employeeForm textarea').forEach(function(el) {
                if (el.id !== 'employeeId' && el.id !== 'confirm_password' && el.id !== 'new_password') {
                    el.disabled = false;
                }
            });
            showToast('Erreur de connexion au serveur', 'error');
            closeModal();
            console.error('Error:', error);
        });
}

// ============================================
// GENERATE PASSWORD (pour création)
// ============================================
function generatePassword() {
    var newPassword = generateRandomPassword(12);
    var passwordInput = document.getElementById('new_password');
    var confirmInput = document.getElementById('confirm_password');
    var strengthBar = document.getElementById('passwordStrengthBar');
    var strengthText = document.getElementById('passwordStrengthText');
    var generateBtn = document.getElementById('generatePasswordBtn');

    if (passwordInput) {
        passwordInput.value = newPassword;
        var event = new Event('input');
        passwordInput.dispatchEvent(event);
    }
    if (confirmInput) {
        confirmInput.value = newPassword;
    }

    var strength = getPasswordStrength(newPassword);
    if (strengthBar) {
        strengthBar.className = 'bar ' + strength.class;
        strengthBar.style.width = strength.percentage + '%';
    }
    if (strengthText) {
        strengthText.textContent = 'Mot de passe généré : ' + strength.label;
        strengthText.style.color = strength.color;
    }

    if (generateBtn) {
        generateBtn.innerHTML = '<i class="fas fa-check"></i> Généré !';
        setTimeout(function() {
            generateBtn.innerHTML = '<i class="fas fa-sync-alt"></i> Générer un mot de passe';
        }, 2000);
    }

    showToast('Nouveau mot de passe généré avec succès !', 'success');
}

// ============================================
// CHANGE EXISTING PASSWORD (pour édition - envoi direct à la BDD)
// ============================================
function changeExistingPassword() {
    var employeeId = document.getElementById('employeeId').value;
    if (!employeeId) {
        showToast('ID de l\'employé manquant', 'error');
        return;
    }

    // Récupérer les mots de passe saisis
    var newPassword = document.getElementById('new_password').value;
    var confirmPassword = document.getElementById('confirm_password').value;

    // Validation
    if (!newPassword) {
        showToast('Veuillez saisir un nouveau mot de passe', 'warning');
        document.getElementById('new_password').focus();
        return;
    }

    if (newPassword.length < 6) {
        showToast('Le mot de passe doit contenir au moins 6 caractères', 'warning');
        document.getElementById('new_password').focus();
        return;
    }

    if (newPassword !== confirmPassword) {
        showToast('Les mots de passe ne correspondent pas', 'warning');
        document.getElementById('confirm_password').focus();
        return;
    }

    // Demander confirmation
    if (!confirm('Voulez-vous vraiment changer le mot de passe de cet employé ?')) {
        return;
    }

    var changeBtn = document.getElementById('changePasswordBtn');
    var originalText = changeBtn ? changeBtn.innerHTML : 'Changer le mot de passe';

    // Désactiver le bouton et afficher le chargement
    if (changeBtn) {
        changeBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Changement en cours...';
        changeBtn.disabled = true;
    }

    // Envoyer la requête pour changer le mot de passe directement
    fetch(API_BASE_URL + '?action=update_password&id=' + employeeId, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ password: newPassword })
    })
        .then(function(response) { return response.json(); })
        .then(function(result) {
            if (changeBtn) {
                changeBtn.innerHTML = originalText;
                changeBtn.disabled = false;
            }

            if (result.success) {
                // Afficher la force du mot de passe
                var strengthBar = document.getElementById('passwordStrengthBar');
                var strengthText = document.getElementById('passwordStrengthText');
                var strength = getPasswordStrength(newPassword);

                if (strengthBar) {
                    strengthBar.className = 'bar ' + strength.class;
                    strengthBar.style.width = strength.percentage + '%';
                }
                if (strengthText) {
                    strengthText.textContent = 'Mot de passe enregistré : ' + strength.label;
                    strengthText.style.color = strength.color;
                }

                // Afficher un message de succès
                showToast('Mot de passe changé avec succès !', 'success');

                // Changer le texte du bouton
                if (changeBtn) {
                    changeBtn.innerHTML = '<i class="fas fa-check"></i> Mot de passe changé !';
                    setTimeout(function() {
                        changeBtn.innerHTML = '<i class="fas fa-key"></i> Changer le mot de passe';
                    }, 3000);
                }

                // Vider les champs après succès
                document.getElementById('new_password').value = '';
                document.getElementById('confirm_password').value = '';

                // Réinitialiser la barre de force
                if (strengthBar) {
                    strengthBar.className = 'bar';
                    strengthBar.style.width = '0%';
                }
                if (strengthText) {
                    strengthText.textContent = 'Saisissez un nouveau mot de passe';
                    strengthText.style.color = '#888';
                }
            } else {
                showToast('Erreur: ' + result.message, 'error');
            }
        })
        .catch(function(error) {
            if (changeBtn) {
                changeBtn.innerHTML = originalText;
                changeBtn.disabled = false;
            }
            showToast('Erreur de connexion au serveur', 'error');
            console.error('Error:', error);
        });
}
// ============================================
// TOGGLE PASSWORD VISIBILITY
// ============================================
function togglePasswordVisibility(inputId, button) {
    var input = document.getElementById(inputId);
    if (!input) return;

    var icon = button.querySelector('i');

    if (input.type === 'password') {
        input.type = 'text';
        icon.className = 'fas fa-eye-slash';
        button.title = 'Masquer le mot de passe';
    } else {
        input.type = 'password';
        icon.className = 'fas fa-eye';
        button.title = 'Afficher le mot de passe';
    }
}
// ============================================
// VIEW DETAIL
// ============================================
function viewDetail(id) {
    currentDetailId = id;  // حفظ ID
    var detailModal = document.getElementById('detailModal');
    var detailContent = document.getElementById('detailContent');
    var editFromDetailBtn = document.getElementById('editFromDetailBtn');

    if (detailModal) detailModal.classList.add('active');
    if (detailContent) {
        detailContent.innerHTML = '<div class="loading active"><div class="spinner"></div><p style="margin-top: 10px;">Chargement des détails...</p></div>';
    }
    if (editFromDetailBtn) {
        editFromDetailBtn.style.display = 'none';
        editFromDetailBtn.dataset.employeeId = id;
    }

    fetch(API_BASE_URL + '?action=get&id=' + id)
        .then(function(response) { return response.json(); })
        .then(function(result) {
            if (result.success) {
                renderDetail(result.data);
            } else {
                var detailContent = document.getElementById('detailContent');
                if (detailContent) {
                    detailContent.innerHTML = '<div class="error-state"><i class="fas fa-exclamation-circle"></i><p>Erreur: ' + result.message + '</p></div>';
                }
            }
        })
        .catch(function(error) {
            var detailContent = document.getElementById('detailContent');
            if (detailContent) {
                detailContent.innerHTML = '<div class="error-state"><i class="fas fa-exclamation-circle"></i><p>Erreur de connexion au serveur</p></div>';
            }
            console.error('Error:', error);
        });
}

function renderDetail(emp) {
    var detailContent = document.getElementById('detailContent');
    if (!detailContent) return;

    // تحديث زر التعديل مع ID
    var editFromDetailBtn = document.getElementById('editFromDetailBtn');
    if (editFromDetailBtn) {
        editFromDetailBtn.dataset.employeeId = emp.id;
        editFromDetailBtn.style.display = 'inline-flex';
    }

    // تحديث currentDetailId
    currentDetailId = emp.id;

    var html = '<div class="detail-section">' +
        '<div class="detail-header">' +
        '<div class="detail-avatar"><i class="fas fa-user-circle"></i></div>' +
        '<div class="detail-title">' +
        '<h2>' + escapeHtml(emp.prenom) + ' ' + escapeHtml(emp.nom) + '</h2>' +
        '<div class="detail-meta">' +
        '<span class="badge badge-secondary">' + escapeHtml(emp.code) + '</span>' +
        '<span class="badge-status ' + (emp.blocked ? 'blocked' : (emp.status === 'active' ? 'active' : 'inactive')) + '">' + (emp.blocked ? 'Bloqué' : (emp.status === 'active' ? 'Actif' : 'Inactif')) + '</span>' +
        '</div></div></div>' +
        '<div class="detail-grid-2">' +
        '<div class="detail-section-block"><h3><i class="fas fa-user"></i> Informations Personnelles</h3>' +
        '<div class="detail-grid">' +
        '<div class="detail-item"><span class="label">CIN</span><span class="value">' + escapeHtml(emp.cin) + '</span></div>' +
        '<div class="detail-item"><span class="label">Email</span><span class="value">' + escapeHtml(emp.email) + '</span></div>' +
        '<div class="detail-item"><span class="label">Téléphone</span><span class="value">' + escapeHtml(emp.phone || '-') + '</span></div>' +
        '<div class="detail-item"><span class="label">Genre</span><span class="value">' + escapeHtml(emp.genre || '-') + '</span></div>' +
        '<div class="detail-item"><span class="label">Lieu de naissance</span><span class="value">' + escapeHtml(emp.lieu_naissance || '-') + '</span></div>' +
        '<div class="detail-item"><span class="label">Date de naissance</span><span class="value">' + (emp.date_naissance || '-') + '</span></div>';

    if (emp.nom_arab) {
        html += '<div class="detail-item"><span class="label">Nom (Arabe)</span><span class="value">' + escapeHtml(emp.nom_arab) + '</span></div>';
    }
    if (emp.prenom_arab) {
        html += '<div class="detail-item"><span class="label">Prénom (Arabe)</span><span class="value">' + escapeHtml(emp.prenom_arab) + '</span></div>';
    }

    html += '</div></div>' +
        '<div class="detail-section-block"><h3><i class="fas fa-briefcase"></i> Informations Professionnelles</h3>' +
        '<div class="detail-grid">' +
        '<div class="detail-item"><span class="label">Login</span><span class="value">' + escapeHtml(emp.login) + '</span></div>' +
        '<div class="detail-item"><span class="label">Spécialité</span><span class="value">' + escapeHtml(emp.specialite || '-') + '</span></div>' +
        '<div class="detail-item"><span class="label">Diplôme</span><span class="value">' + escapeHtml(emp.diplome || '-') + '</span></div>' +
        '<div class="detail-item"><span class="label">Établissement</span><span class="value">' + escapeHtml(emp.etablissement_diplome || '-') + '</span></div>' +
        '<div class="detail-item"><span class="label">Grade</span><span class="value">' + escapeHtml(emp.grade_libelle || '-') + '</span></div>' +
        '<div class="detail-item"><span class="label">Type de grade</span><span class="value">' + escapeHtml(emp.type_grade_libelle || '-') + '</span></div>' +
        '<div class="detail-item"><span class="label">Échelon</span><span class="value">' + escapeHtml(emp.echellon_libelle || '-') + '</span></div>' +
        '<div class="detail-item"><span class="label">Fonctionnaire</span><span class="value">' + (emp.fonctionnaire ? 'Oui' : 'Non') + '</span></div>';

    if (emp.fonctionnaire) {
        html += '<div class="detail-item"><span class="label">Années fonctionnaire</span><span class="value">' + (emp.nombre_annee_fonctionnaire || 0) + '</span></div>';
    }

    html += '<div class="detail-item"><span class="label">Date recrutement</span><span class="value">' + (emp.date_recrutement || '-') + '</span></div>' +
        '<div class="detail-item"><span class="label">Date affectation</span><span class="value">' + (emp.date_affectation_enseignement || '-') + '</span></div>' +
        '</div></div></div></div>';

    detailContent.innerHTML = html;
}

function closeDetailModal() {
    var detailModal = document.getElementById('detailModal');
    if (detailModal) detailModal.classList.remove('active');
    currentDetailId = null;
}

// ============================================
// SAVE EMPLOYEE
// ============================================
function saveEmployee() {
    // Personal info
    var nom = getElementValue('nom');
    var prenom = getElementValue('prenom');
    var cin = getElementValue('cin');
    var email = getElementValue('email');
    var phone = getElementValue('phone');
    var genre = getElementValue('genre');
    var lieu_naissance = getElementValue('lieu_naissance');
    var date_naissance = getElementValue('date_naissance');
    var nom_arab = getElementValue('nom_arab');
    var prenom_arab = getElementValue('prenom_arab');

    // Professional info
    var code = getElementValue('code');
    var login = getElementValue('login');
    var specialite = getElementValue('specialite');
    var diplome = getElementValue('diplome');
    var etablissement_diplome = getElementValue('etablissement_diplome');
    var fonctionnaire = getElementValue('fonctionnaire');
    var nombre_annee_fonctionnaire = getElementValue('nombre_annee_fonctionnaire');
    var date_recrutement = getElementValue('date_recrutement');
    var date_affectation_enseignement = getElementValue('date_affectation_enseignement');
    var status = getElementValue('status');
    var grade_id = getElementValue('grade_id');
    var type_grade_id = getElementValue('type_grade_id');
    var echellon_id = getElementValue('echellon_id');

    // Password
    var newPassword = getElementValue('new_password');
    var confirmPassword = getElementValue('confirm_password');

    // Validations
    if (!nom) { showToast('Veuillez saisir le nom', 'warning'); focusElement('nom'); return; }
    if (!prenom) { showToast('Veuillez saisir le prénom', 'warning'); focusElement('prenom'); return; }
    if (!cin) { showToast('Veuillez saisir le CIN', 'warning'); focusElement('cin'); return; }
    if (!email) { showToast('Veuillez saisir l\'email', 'warning'); focusElement('email'); return; }
    if (!login) { showToast('Veuillez saisir le login', 'warning'); focusElement('login'); return; }

    // Password validation
    var id = getElementValue('employeeId');
    if (!id && !newPassword) {
        showToast('Veuillez saisir un mot de passe', 'warning');
        focusElement('new_password');
        return;
    }
    if (newPassword && newPassword !== confirmPassword) {
        showToast('Les mots de passe ne correspondent pas', 'warning');
        focusElement('confirm_password');
        return;
    }
    if (newPassword && newPassword.length < 6) {
        showToast('Le mot de passe doit contenir au moins 6 caractères', 'warning');
        focusElement('new_password');
        return;
    }

    var data = {
        nom: nom,
        prenom: prenom,
        cin: cin,
        email: email,
        phone: phone,
        genre: genre,
        lieu_naissance: lieu_naissance,
        date_naissance: date_naissance,
        nom_arab: nom_arab,
        prenom_arab: prenom_arab,
        code: code,
        login: login,
        specialite: specialite,
        diplome: diplome,
        etablissement_diplome: etablissement_diplome,
        fonctionnaire: fonctionnaire || '0',
        nombre_annee_fonctionnaire: nombre_annee_fonctionnaire || '0',
        date_recrutement: date_recrutement,
        date_affectation_enseignement: date_affectation_enseignement,
        status: status || 'active',
        grade_id: grade_id || null,
        type_grade_id: type_grade_id || null,
        echellon_id: echellon_id || null
    };

    if (newPassword) {
        data.password = newPassword;
    }

    var url = id ? API_BASE_URL + '?action=update&id=' + id : API_BASE_URL;
    var method = id ? 'PUT' : 'POST';

    var saveBtn = document.querySelector('.modal-footer .btn-primary');
    var originalText = saveBtn ? saveBtn.innerHTML : 'Enregistrer';
    if (saveBtn) {
        saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Enregistrement...';
        saveBtn.disabled = true;
    }

    fetch(url, {
        method: method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
        .then(function(response) { return response.json(); })
        .then(function(result) {
            if (saveBtn) {
                saveBtn.innerHTML = originalText;
                saveBtn.disabled = false;
            }
            if (result.success) {
                showToast(result.message, 'success');
                closeModal();
                loadEmployees();
                loadStats();
            } else {
                showToast('Erreur: ' + result.message, 'error');
            }
        })
        .catch(function(error) {
            if (saveBtn) {
                saveBtn.innerHTML = originalText;
                saveBtn.disabled = false;
            }
            showToast('Erreur de connexion au serveur', 'error');
            console.error('Error:', error);
        });
}

function getElementValue(id) {
    var el = document.getElementById(id);
    return el ? el.value : '';
}

function focusElement(id) {
    var el = document.getElementById(id);
    if (el) el.focus();
}

// ============================================
// DELETE EMPLOYEE
// ============================================
function deleteEmployee(id) {
    if (!confirm('Êtes-vous sûr de vouloir supprimer cet employé ?\n\nCette action est irréversible.')) return;

    var btn = document.querySelector('button[onclick="deleteEmployee(' + id + ')"]');
    if (btn) { btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>'; btn.disabled = true; }

    fetch(API_BASE_URL + '?action=delete&id=' + id, { method: 'DELETE' })
        .then(function(response) { return response.json(); })
        .then(function(result) {
            if (btn) { btn.innerHTML = '<i class="fas fa-trash"></i>'; btn.disabled = false; }
            if (result.success) {
                showToast(result.message, 'success');
                loadEmployees();
                loadStats();
            } else {
                showToast('Erreur: ' + result.message, 'error');
            }
        })
        .catch(function(error) {
            if (btn) { btn.innerHTML = '<i class="fas fa-trash"></i>'; btn.disabled = false; }
            showToast('Erreur de connexion au serveur', 'error');
            console.error('Error:', error);
        });
}

// ============================================
// EXPORT
// ============================================
function exportEmployees() {
    window.location.href = API_BASE_URL + '?action=export';
}

// ============================================
// MODAL CLOSE
// ============================================
function closeModal() {
    var modalOverlay = document.querySelector('.modal-overlay');
    if (modalOverlay) modalOverlay.classList.remove('active');
}

// ============================================
// UTILITY FUNCTIONS
// ============================================
function showLoading(show) {
    var loading = document.querySelector('.loading');
    if (loading) {
        if (show) loading.classList.add('active');
        else loading.classList.remove('active');
    }
}

function showToast(message, type) {
    if (type === undefined) type = 'info';
    var container = document.getElementById('toastContainer');
    if (!container) return;

    var toast = document.createElement('div');
    toast.className = 'toast toast-' + type;
    toast.innerHTML = '<span class="toast-icon">' + getToastIcon(type) + '</span><span class="toast-message">' + message + '</span><button class="toast-close" onclick="this.parentElement.remove()">&times;</button>';
    container.appendChild(toast);

    setTimeout(function() {
        if (toast.parentElement) {
            toast.style.opacity = '0';
            toast.style.transform = 'translateX(100%)';
            toast.style.transition = 'all 0.3s ease';
            setTimeout(function() { if (toast.parentElement) toast.remove(); }, 300);
        }
    }, 4000);
}

function getToastIcon(type) {
    var icons = { success: '✅', error: '❌', warning: '⚠️', info: 'ℹ️' };
    return icons[type] || 'ℹ️';
}

function escapeHtml(text) {
    if (!text) return '';
    var div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Close modal on overlay click
document.querySelectorAll('.modal-overlay').forEach(function(modal) {
    modal.addEventListener('click', function(e) {
        if (e.target === this) {
            if (this.id === 'detailModal') closeDetailModal();
            else closeModal();
        }
    });
});

// Close modal on Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        var detailModal = document.getElementById('detailModal');
        if (detailModal && detailModal.classList.contains('active')) {
            closeDetailModal();
        } else if (document.querySelector('.modal-overlay.active')) {
            closeModal();
        }
    }
});