@extends('layouts.app')

@section('content')
<style>
    * {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    :root {
        --primary: #3B82F6;
        --secondary: #8B5CF6;
        --success: #10B981;
        --warning: #F59E0B;
        --danger: #EF4444;
    }

    body {
        background: linear-gradient(135deg, #f5f3ff 0%, #f0f9ff 100%);
    }

    .container-users {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem 1rem;
    }

    .navbar {
        background: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 1rem 0;
        position: sticky;
        top: 0;
        z-index: 10;
        margin-bottom: 2rem;
    }

    .navbar-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .navbar-brand {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .navbar-logo {
        background: linear-gradient(135deg, var(--secondary) 0%, #7c3aed 100%);
        color: white;
        width: 50px;
        height: 50px;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
    }

    .navbar-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #111827;
    }

    .navbar-subtitle {
        font-size: 0.85rem;
        color: #6b7280;
    }

    .btn {
        padding: 0.625rem 1rem;
        border: none;
        border-radius: 0.5rem;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
    }

    .btn-primary {
        background-color: var(--primary);
        color: white;
    }

    .btn-primary:hover {
        background-color: #2563eb;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    }

    .btn-back {
        background-color: #6b7280;
        color: white;
    }

    .btn-back:hover {
        background-color: #4b5563;
    }

    .card {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        border: 1px solid #e5e7eb;
        margin-bottom: 2rem;
        overflow: hidden;
    }

    .card-header {
        padding: 1.5rem;
        border-bottom: 1px solid #e5e7eb;
        background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    }

    .card-header h3 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 700;
        color: #111827;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .card-body {
        padding: 1.5rem;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-label {
        display: block;
        font-weight: 600;
        color: #374151;
        margin-bottom: 0.5rem;
        font-size: 0.95rem;
    }

    .form-input,
    .form-select,
    .form-textarea {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid #d1d5db;
        border-radius: 0.5rem;
        font-size: 0.95rem;
        transition: all 0.3s ease;
    }

    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
        outline: none;
        border-color: var(--secondary);
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
    }

    .form-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
    }

    .table-container {
        overflow-x: auto;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th {
        background: #f9fafb;
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        color: #374151;
        border-bottom: 2px solid #e5e7eb;
        font-size: 0.9rem;
    }

    td {
        padding: 1rem;
        border-bottom: 1px solid #e5e7eb;
        color: #111827;
    }

    tr:hover {
        background: #f9fafb;
    }

    .badge {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .badge-green {
        background: #dcfce7;
        color: #166534;
    }

    .badge-red {
        background: #fee2e2;
        color: #991b1b;
    }

    .btn-icon {
        width: 2.5rem;
        height: 2.5rem;
        border: none;
        border-radius: 0.5rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        transition: all 0.3s ease;
    }

    .btn-toggle {
        background: #fef3c7;
        color: var(--warning);
    }

    .btn-toggle:hover {
        background: #fde68a;
    }

    .btn-reset {
        background: #dbeafe;
        color: var(--primary);
    }

    .btn-reset:hover {
        background: #bfdbfe;
    }

    .btn-delete {
        background: #fee2e2;
        color: var(--danger);
    }

    .btn-delete:hover {
        background: #fecaca;
    }

    .modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(5px);
        z-index: 50;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    .modal-overlay.active {
        display: flex;
    }

    .modal-content {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
        overflow: hidden;
        animation: slideIn 0.3s ease-out;
        max-width: 500px;
        width: 100%;
    }

    .modal-header {
        padding: 1.5rem;
        background: linear-gradient(to right, var(--secondary), #7c3aed);
        color: white;
    }

    .modal-header h2 {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .modal-body {
        padding: 1.5rem;
    }

    .modal-footer {
        display: flex;
        gap: 1rem;
        justify-content: flex-end;
        padding: 1rem;
        border-top: 1px solid #e5e7eb;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: scale(0.95) translateY(10px);
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    .info-box {
        background: linear-gradient(135deg, #e0e7ff 0%, #dbeafe 100%);
        border-left: 4px solid var(--primary);
        border-radius: 0.75rem;
        padding: 1.5rem;
        margin-top: 2rem;
    }

    .info-box h4 {
        margin: 0 0 1rem 0;
        font-weight: 700;
        color: var(--primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .info-box ul {
        margin: 0;
        padding-left: 0;
        list-style: none;
    }

    .info-box li {
        padding: 0.5rem 0;
        color: #1e40af;
        font-size: 0.95rem;
    }

    .debug-panel {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        border: 2px solid var(--warning);
        border-radius: 0.75rem;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .debug-panel h2 {
        margin: 0 0 1rem 0;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--warning);
    }

    .debug-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }

    .debug-item {
        background: white;
        padding: 1rem;
        border-radius: 0.5rem;
        border: 1px solid #fcd34d;
    }

    .debug-item strong {
        display: block;
        margin-bottom: 0.25rem;
        color: #92400e;
    }

    .debug-value {
        color: var(--primary);
        font-family: 'Courier New', monospace;
        word-break: break-all;
    }

    .empty-state {
        text-align: center;
        padding: 3rem 1rem;
        color: #9ca3af;
    }

    .empty-state i {
        font-size: 4rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .empty-state p {
        margin: 0;
        font-size: 1rem;
    }

    @media (max-width: 768px) {
        .form-grid {
            grid-template-columns: 1fr;
        }

        .debug-grid {
            grid-template-columns: 1fr;
        }

        table {
            font-size: 0.85rem;
        }

        th, td {
            padding: 0.75rem;
        }

        .btn-icon {
            width: 2rem;
            height: 2rem;
            font-size: 0.9rem;
        }
    }
</style>

<!-- Navbar -->
<div class="navbar">
    <div class="navbar-content">
        <div class="navbar-brand">
            <div class="navbar-logo">
                <i class="fas fa-users"></i>
            </div>
            <div>
                <div class="navbar-title">👥 Gestion des Employés</div>
                <div class="navbar-subtitle">Gérer les accès et permissions</div>
            </div>
        </div>
        <a href="{{ route('dashboard') }}" class="btn btn-back">
            <i class="fas fa-arrow-left"></i> Dashboard
        </a>
    </div>
</div>

<!-- Main Content -->
<div class="container-users">
    
    <!-- Debug Panel -->
    <div class="debug-panel">
        <h2><i class="fas fa-bug"></i> 🔍 Debug Information</h2>
        <div class="debug-grid">
            <div class="debug-item">
                <strong>User ID:</strong>
                <div class="debug-value">{{ Auth::id() }}</div>
            </div>
            <div class="debug-item">
                <strong>User Name:</strong>
                <div class="debug-value">{{ Auth::user()->name }}</div>
            </div>
            <div class="debug-item">
                <strong>User Email:</strong>
                <div class="debug-value">{{ Auth::user()->email }}</div>
            </div>
            <div class="debug-item">
                <strong>User Role:</strong>
                <div class="debug-value" style="display: inline-block; background: #dcfce7; color: var(--success); padding: 0.25rem 0.75rem; border-radius: 9999px;">
                    {{ Auth::user()->role ?? 'NULL' }}
                </div>
            </div>
            <div class="debug-item">
                <strong>isAdmin() Method:</strong>
                <div class="debug-value" style="display: inline-block; background: {{ Auth::user()->isAdmin() ? '#dcfce7' : '#fee2e2' }}; color: {{ Auth::user()->isAdmin() ? 'var(--success)' : 'var(--danger)' }}; padding: 0.25rem 0.75rem; border-radius: 9999px;">
                    {{ Auth::user()->isAdmin() ? '✅ TRUE' : '❌ FALSE' }}
                </div>
            </div>
            <div class="debug-item">
                <strong>User Code:</strong>
                <div class="debug-value">{{ Auth::user()->user_code ?? 'NULL' }}</div>
            </div>
        </div>
    </div>

    <!-- Add Employee Card -->
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-user-plus" style="color: var(--success);"></i> Ajouter un Employé</h3>
        </div>
        <div class="card-body">
            <form id="addEmployeeForm" class="form-grid">
                @csrf
                
                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-user"></i> Nom complet *
                    </label>
                    <input 
                        type="text" 
                        name="name" 
                        required
                        class="form-input"
                        placeholder="Ex: Fatima Zahra">
                </div>

                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-envelope"></i> Email *
                    </label>
                    <input 
                        type="email" 
                        name="email" 
                        required
                        class="form-input"
                        placeholder="fatima@example.com">
                </div>

                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-lock"></i> Mot de passe *
                    </label>
                    <input 
                        type="password" 
                        name="password" 
                        required
                        minlength="8"
                        class="form-input"
                        placeholder="Min 8 caractères">
                </div>

                <div style="grid-column: 1 / -1;">
                    <button 
                        type="submit"
                        style="background: linear-gradient(to right, var(--success), #059669); color: white; padding: 0.75rem 2rem; border: none; border-radius: 0.5rem; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);"
                        onmouseover="this.style.transform='translateY(-2px)'"
                        onmouseout="this.style.transform='translateY(0)'">
                        <i class="fas fa-plus-circle"></i> Créer l'employé
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Employees List Card -->
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-list" style="color: var(--primary);"></i> Liste des Employés 
                @if(isset($employees))
                    <span style="background: #dbeafe; color: var(--primary); padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.85rem; margin-left: auto;">{{ $employees->count() }}</span>
                @endif
            </h3>
        </div>
        <div class="card-body">
            @if(isset($employees) && $employees->count() > 0)
                <div class="table-container">
                    <table>
                        <thead>
                            <tr>
                                <th style="width: 50px;">#</th>
                                <th>Nom</th>
                                <th>Email</th>
                                <th style="text-align: center;">Statut</th>
                                <th style="text-align: center;">Créé le</th>
                                <th style="text-align: center; width: 150px;">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($employees as $index => $employee)
                            <tr id="employee-{{ $employee->id }}">
                                <td style="font-weight: 700; color: #6b7280;">{{ $index + 1 }}</td>
                                <td style="font-weight: 600;">
                                    <i class="fas fa-user-circle" style="color: var(--primary); margin-right: 0.5rem;"></i>
                                    {{ $employee->name }}
                                </td>
                                <td style="color: #6b7280;">
                                    <i class="fas fa-envelope" style="color: #9ca3af; margin-right: 0.5rem;"></i>
                                    {{ $employee->email }}
                                </td>
                                <td style="text-align: center;">
                                    @if($employee->is_active ?? true)
                                        <span class="badge badge-green">✅ Actif</span>
                                    @else
                                        <span class="badge badge-red">❌ Inactif</span>
                                    @endif
                                </td>
                                <td style="text-align: center; color: #6b7280;">
                                    {{ $employee->created_at->format('d/m/Y') }}
                                </td>
                                <td style="text-align: center;">
                                    <div style="display: flex; gap: 0.5rem; justify-content: center;">
                                        <!-- Toggle Status -->
                                        <button 
                                            onclick="toggleStatus({{ $employee->id }})"
                                            class="btn-icon btn-toggle"
                                            title="Activer/Désactiver">
                                            <i class="fas fa-power-off"></i>
                                        </button>
                                        
                                        <!-- Reset Password -->
                                        <button 
                                            onclick="openResetPassword({{ $employee->id }}, '{{ $employee->name }}')"
                                            class="btn-icon btn-reset"
                                            title="Réinitialiser mot de passe">
                                            <i class="fas fa-key"></i>
                                        </button>
                                        
                                        <!-- Delete -->
                                        <button 
                                            onclick="deleteEmployee({{ $employee->id }}, '{{ $employee->name }}')"
                                            class="btn-icon btn-delete"
                                            title="Supprimer">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="empty-state">
                    <i class="fas fa-users"></i>
                    <p style="font-size: 1.25rem; font-weight: 600; color: #111827; margin-bottom: 0.5rem;">Aucun employé pour le moment</p>
                    <p style="font-size: 0.95rem; color: #6b7280;">Ajoutez votre premier employé ci-dessus</p>
                </div>
            @endif
        </div>
    </div>

    <!-- Info Box -->
    <div class="info-box">
        <h4><i class="fas fa-info-circle"></i> À propos des employés</h4>
        <ul>
            <li>✅ Les employés peuvent voir toutes les données de votre compte</li>
            <li>✅ Ils peuvent ajouter des notes et statuts aux commandes</li>
            <li>❌ Ils ne peuvent PAS ajouter de colis à OzoneExpress</li>
            <li>❌ Ils ne peuvent PAS créer de bons de livraison</li>
            <li>❌ Ils ne peuvent PAS modifier les paramètres</li>
        </ul>
    </div>

</div>

<!-- Modal Reset Password -->
<div id="resetPasswordModal" class="modal-overlay">
    <div class="modal-content">
        <div class="modal-header">
            <h2><i class="fas fa-key"></i> Réinitialiser le mot de passe</h2>
        </div>
        <div class="modal-body">
            <p style="margin-bottom: 1rem; font-size: 0.95rem; color: #6b7280;">
                Employé: <strong id="resetEmployeeName" style="color: var(--secondary);"></strong>
            </p>

            <form id="resetPasswordForm">
                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-lock"></i> Nouveau mot de passe *
                    </label>
                    <input 
                        type="password" 
                        id="newPassword"
                        name="password" 
                        required
                        minlength="8"
                        class="form-input"
                        placeholder="Minimum 8 caractères">
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button 
                type="button"
                onclick="submitResetPassword()"
                style="flex: 1; background: var(--secondary); color: white; padding: 0.75rem; border: none; border-radius: 0.5rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease;"
                onmouseover="this.style.background='#7c3aed'"
                onmouseout="this.style.background='var(--secondary)'">
                <i class="fas fa-check"></i> Confirmer
            </button>
            <button 
                type="button"
                onclick="closeResetPassword()"
                style="flex: 1; background: #d1d5db; color: #374151; padding: 0.75rem; border: none; border-radius: 0.5rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-left: 0.5rem;"
                onmouseover="this.style.background='#9ca3af'"
                onmouseout="this.style.background='#d1d5db'">
                <i class="fas fa-times"></i> Annuler
            </button>
        </div>
    </div>
</div>

<script>
    console.log('👥 Users Management Page Loaded');
    console.log('Current User:', @json(Auth::user()));
    console.log('Employees:', @json($employees ?? []));

    // Add Employee
    document.getElementById('addEmployeeForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const data = Object.fromEntries(formData);
        
        console.log('Creating employee:', data);
        
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Création...';
        
        fetch('{{ route("users.store") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(async response => {
            const contentType = response.headers.get('content-type');
            console.log('Response Content-Type:', contentType);
            console.log('Response Status:', response.status);
            
            if (!contentType || !contentType.includes('application/json')) {
                const text = await response.text();
                console.error('Response is not JSON:', text.substring(0, 500));
                throw new Error('Le serveur a retourné une réponse invalide');
            }
            
            return response.json();
        })
        .then(data => {
            console.log('Response:', data);
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
            
            if (data.success) {
                showSuccessModal('✅ Employé créé!', `${data.employee.name} a été créé avec succès.\n\nEmail: ${data.employee.email}`);
                setTimeout(() => location.reload(), 2000);
            } else {
                let errorMsg = data.message || 'Erreur inconnue';
                if (data.errors) {
                    errorMsg += '\n\n' + Object.values(data.errors).flat().join('\n');
                }
                showErrorModal('❌ Erreur', errorMsg);
            }
        })
        .catch(e => {
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
            console.error('Error:', e);
            showErrorModal('❌ Erreur', e.message);
        });
    });

    // Toggle Status
    function toggleStatus(employeeId) {
        if (!confirm('⚠️ Changer le statut de cet employé?')) return;
        
        fetch(`/users/${employeeId}/toggle`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            }
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showSuccessModal('✅ Statut mis à jour!', 'Le statut de l\'employé a été changé.');
                setTimeout(() => location.reload(), 1500);
            } else {
                showErrorModal('❌ Erreur', data.message);
            }
        })
        .catch(e => {
            console.error('Error:', e);
            showErrorModal('❌ Erreur', e.message);
        });
    }

    // Open Reset Password Modal
    function openResetPassword(employeeId, employeeName) {
        document.getElementById('resetEmployeeId').value = employeeId;
        document.getElementById('resetEmployeeName').textContent = employeeName;
        document.getElementById('newPassword').value = '';
        document.getElementById('resetPasswordModal').classList.add('active');
        document.getElementById('newPassword').focus();
    }

    // Close Reset Password Modal
    function closeResetPassword() {
        document.getElementById('resetPasswordModal').classList.remove('active');
    }

    // Submit Reset Password
    function submitResetPassword() {
        const employeeId = document.getElementById('resetEmployeeId').value;
        const password = document.getElementById('newPassword').value;
        
        if (!password || password.length < 8) {
            alert('❌ Le mot de passe doit contenir au moins 8 caractères');
            return;
        }
        
        fetch(`/users/${employeeId}/reset-password`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ password: password })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showSuccessModal('✅ Mot de passe réinitialisé!', 'Le mot de passe a été mis à jour avec succès.');
                closeResetPassword();
                setTimeout(() => location.reload(), 1500);
            } else {
                showErrorModal('❌ Erreur', data.message);
            }
        })
        .catch(e => {
            console.error('Error:', e);
            showErrorModal('❌ Erreur', e.message);
        });
    }

    // Delete Employee
    function deleteEmployee(employeeId, employeeName) {
        if (!confirm(`⚠️ ATTENTION!\n\nSupprimer définitivement l'employé "${employeeName}"?\n\nCette action est irréversible!`)) return;
        
        fetch(`/users/${employeeId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            }
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showSuccessModal('✅ Employé supprimé!', 'L\'employé a été supprimé avec succès.');
                setTimeout(() => {
                    const row = document.getElementById(`employee-${employeeId}`);
                    if (row) row.remove();
                }, 500);
            } else {
                showErrorModal('❌ Erreur', data.message);
            }
        })
        .catch(e => {
            console.error('Error:', e);
            showErrorModal('❌ Erreur', e.message);
        });
    }

    // Show Success Modal
    function showSuccessModal(title, content) {
        const modal = document.createElement('div');
        modal.className = 'modal-overlay active';
        modal.innerHTML = `
            <div class="modal-content">
                <div class="modal-header" style="background: linear-gradient(to right, var(--success), #059669);">
                    <h2>${title}</h2>
                </div>
                <div class="modal-body" style="color: #111827; white-space: pre-wrap;">${content}</div>
                <div class="modal-footer">
                    <button onclick="this.closest('.modal-overlay').remove()" style="flex: 1; background: var(--success); color: white; padding: 0.75rem; border: none; border-radius: 0.5rem; cursor: pointer; font-weight: 600; transition: all 0.3s ease;" onmouseover="this.style.background='#059669'" onmouseout="this.style.background='var(--success)'">
                        <i class="fas fa-check"></i> Fermer
                    </button>
                </div>
            </div>
        `;
        document.body.appendChild(modal);
    }

    // Show Error Modal
    function showErrorModal(title, content) {
        const modal = document.createElement('div');
        modal.className = 'modal-overlay active';
        modal.innerHTML = `
            <div class="modal-content">
                <div class="modal-header" style="background: linear-gradient(to right, var(--danger), #dc2626);">
                    <h2>${title}</h2>
                </div>
                <div class="modal-body" style="color: #991b1b; white-space: pre-wrap;">${content}</div>
                <div class="modal-footer">
                    <button onclick="this.closest('.modal-overlay').remove()" style="flex: 1; background: var(--danger); color: white; padding: 0.75rem; border: none; border-radius: 0.5rem; cursor: pointer; font-weight: 600; transition: all 0.3s ease;" onmouseover="this.style.background='#dc2626'" onmouseout="this.style.background='var(--danger)'">
                        <i class="fas fa-times"></i> Fermer
                    </button>
                </div>
            </div>
        `;
        document.body.appendChild(modal);
    }

    // Close modal on ESC
    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            closeResetPassword();
        }
    });

    // Add hidden input for resetEmployeeId
    document.body.innerHTML += '<input type="hidden" id="resetEmployeeId" value="">';

    console.log('✅ Users Management Ready!');
</script>

@endsection