@extends('layout.app')
@section('title', __('Import'))
@section('active_import', 'active')
@section('data_col', '2-columns')
@section('body_class', '2-columns')

@push('styles')
    <style>
        :root {
            --primary-color: #009a9c;
            --primary-light: #00b5b8;
            --primary-dark: #007f81;
        }
        .card.border-danger {
            border-left: 4px solid #dc3545 !important;
        }
        .error-detail-table {
            background: #f8f9fa;
        }
        .error-detail-table td:first-child {
            width: 150px;
            font-weight: 500;
        }
        .error-list {
            list-style-type: none;
            padding-left: 0;
        }
        .error-list li {
            padding: 3px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .error-list li:last-child {
            border-bottom: none;
        }
        .import-container {
            background: #f8f9fa;
            min-height: calc(100vh - 200px);
        }
        .step-wizard {
            display: flex;
            justify-content: space-between;
            margin-bottom: 2rem;
            position: relative;
        }
        .step-wizard::before {
            content: '';
            position: absolute;
            top: 25px;
            left: 10%;
            right: 10%;
            height: 3px;
            background: #dee2e6;
            z-index: 1;
        }
        .step-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 2;
            flex: 1;
        }
        .step-circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: white;
            border: 3px solid #dee2e6;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
            transition: all 0.3s;
        }
        .step-circle.active {
            background: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
        }
        .step-circle.completed {
            background: #28a745;
            border-color: #28a745;
            color: white;
        }
        .step-label {
            font-size: 0.85rem;
            color: #6c757d;
            text-align: center;
        }
        .step-label.active {
            color: var(--primary-color);
            font-weight: bold;
        }
        .upload-area {
            border: 2px dashed #dee2e6;
            border-radius: 10px;
            padding: 3rem;
            text-align: center;
            transition: all 0.3s;
            cursor: pointer;
            background: white;
        }
        .upload-area:hover {
            border-color: var(--primary-color);
            background: rgba(0, 154, 156, 0.05);
        }
        .upload-area.dragover {
            border-color: var(--primary-color);
            background: rgba(0, 154, 156, 0.1);
        }
        .mapping-table {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .mapping-table th {
            background: var(--primary-color);
            color: white;
            font-weight: 500;
        }
        .btn-primary-custom {
            background: var(--primary-color);
            border: none;
            color: white;
            padding: 0.5rem 1.5rem;
            border-radius: 5px;
            transition: all 0.3s;
        }
        .btn-primary-custom:hover {
            background: var(--primary-dark);
            color: white;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 154, 156, 0.3);
        }
        .preview-table {
            max-height: 500px;
            overflow-y: auto;
        }
        .row-error {
            background: #fff5f5 !important;
            border-left: 3px solid #dc3545;
        }
        .row-valid {
            background: white;
        }
        .badge-error {
            background: #dc3545;
        }
        .badge-valid {
            background: #28a745;
        }
        .stats-card {
            background: white;
            border-radius: 10px;
            padding: 1.5rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            text-align: center;
        }
        .stats-number {
            font-size: 2rem;
            font-weight: bold;
            color: var(--primary-color);
        }
        .modal-header-custom {
            background: var(--primary-color);
            color: white;
        }
        .form-select:focus, .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(0, 154, 156, 0.25);
        }
        .progress-bar-custom {
            background: var(--primary-color);
        }
        .import-progress {
            height: 25px;
            border-radius: 15px;
        }
    </style>
@endpush

@section('content')
    <div class="app-content content import-container">
        <div class="content-overlay"></div>
        <div class="content-wrapper">
            <div class="content-header row mb-2">
                <div class="content-header-left col-md-6 col-12">
                    <h3 class="content-header-title mb-0 d-inline-block">
                        <i class="fas fa-file-import mr-2" style="color: var(--primary-color)"></i>
                        {{ __('Import des Employés') }}
                    </h3>
                </div>
                <div class="content-header-right col-md-6 col-12">
                </div>
            </div>
            <div class="content-body">
                <!-- Wizard Steps -->
                <div class="step-wizard mb-4">
                    <div class="step-item">
                        <div class="step-circle active" id="stepCircle1">1</div>
                        <div class="step-label active" id="stepLabel1">{{ __('Choisir le fichier') }}</div>
                    </div>
                    <div class="step-item">
                        <div class="step-circle" id="stepCircle2">2</div>
                        <div class="step-label" id="stepLabel2">{{ __('Mappage des colonnes') }}</div>
                    </div>
                    <div class="step-item">
                        <div class="step-circle" id="stepCircle3">3</div>
                        <div class="step-label" id="stepLabel3">{{ __("Validations") }}</div>
                    </div>
                    <div class="step-item">
                        <div class="step-circle" id="stepCircle4">4</div>
                        <div class="step-label" id="stepLabel4">{{ __('Import') }}</div>
                    </div>
                </div>
                <!-- Flash Messages -->
                <div id="alertContainer"></div>
                <!-- Step 1: File Upload -->
                <div id="step1" class="step-content">
                    <div class="card">
                        <div class="card-header" style="background: var(--primary-color); color: white;">
                            <h4 class="card-title mb-0">
                                <i class="fas fa-upload mr-2"></i>
                                {{ __('Étape 1 : Choisir le fichier Excel') }}
                            </h4>
                        </div>
                        <div class="card-body">
                            <div class="upload-area" id="uploadArea" onclick="$('#fileInput').click()">
                                <i class="fas fa-cloud-upload-alt" style="font-size: 3rem; color: var(--primary-color);"></i>
                                <h4 class="mt-3">{{ __('Cliquez pour sélectionner un fichier') }}</h4>
                                <p class="text-muted">{{ __('ou glissez-déposez votre fichier ici') }}</p>
                                <small class="text-muted">{{ __('Formats supportés : XLSX, XLS, CSV (max 10 MB)') }}</small>
                                <input type="file" id="fileInput" style="display: none;" accept=".xlsx,.xls,.csv">
                            </div>
                            <div id="fileInfo" class="mt-3" style="display: none;">
                                <div class="alert alert-success">
                                    <i class="fas fa-check-circle mr-2"></i>
                                    <span id="fileName"></span>
                                    <span id="fileSize" class="badge badge-light ml-2"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Step 2: Column Mapping -->
                <div id="step2" class="step-content" style="display: none;">
                    <div class="card">
                        <div class="card-header" style="background: var(--primary-color); color: white;">
                            <h4 class="card-title mb-0">
                                <i class="fas fa-exchange-alt mr-2"></i>
                                {{ __('Étape 2 : Mappage des colonnes') }}
                            </h4>
                        </div>
                        <div class="card-body">
                            <div class="mapping-table">
                                <table class="table table-hover mb-0">
                                    <thead>
                                        <tr>
                                            <th>{{ __('Champ Base de données') }}</th>
                                            <th>{{ __('Colonne Excel') }}</th>
                                            <th>{{ __('Requis') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="mappingTableBody">
                                        <!-- Rempli par JavaScript -->
                                    </tbody>
                                </table>
                            </div>
                            <div class="text-center mt-4">
                                <button class="btn btn-primary" onclick="validateMapping()">
                                    <i class="fas fa-check mr-2"></i>
                                    {{ __('Valider le mappage') }}
                                </button>
                                <button class="btn btn-outline-primary ml-2" onclick="resetToStep1()">
                                    <i class="fas fa-redo mr-2"></i>
                                    {{ __('Choisir un autre fichier') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Step 3: Preview & Validation -->
                <div id="step3" class="step-content" style="display: none;">
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <div class="stats-card">
                                <div class="stats-number" id="totalRows">0</div>
                                <div class="text-muted">{{ __('Lignes totales') }}</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stats-card">
                                <div class="stats-number text-success" id="validRows">0</div>
                                <div class="text-muted">{{ __('Lignes valides') }}</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stats-card">
                                <div class="stats-number text-danger" id="errorRows">0</div>
                                <div class="text-muted">{{ __('Lignes en erreur') }}</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stats-card">
                                <div class="stats-number" id="progressPercentage">0%</div>
                                <div class="text-muted">{{ __('Taux de validité') }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center" style="background: var(--primary-color); color: white;">
                            <h4 class="card-title mb-0">
                                <i class="fas fa-eye mr-2"></i>
                                {{ __('Étape 3 : Aperçu et validation') }}
                            </h4>
                            <div>
                                <button class="btn btn-success btn-sm mr-2" onclick="showImportModal('all')">
                                    <i class="fas fa-upload mr-1"></i>
                                    {{ __('Importer tout') }}
                                </button>
                                <button class="btn btn-warning btn-sm mr-2" onclick="showImportModal('valid_only')">
                                    <i class="fas fa-check-circle mr-1"></i>
                                    {{ __('Importer valides uniquement') }}
                                </button>
                                <button class="btn btn-outline-light btn-sm" onclick="resetToStep1()">
                                    <i class="fas fa-redo mr-1"></i>
                                    {{ __('Autre fichier') }}
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="preview-table">
                                <table class="table table-sm table-hover mb-0">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>#</th>
                                            <th>{{ __('Réf') }}</th>
                                            <th>{{ __('Prénom') }}</th>
                                            <th>{{ __('Nom') }}</th>
                                            <th>{{ __('Fonction') }}</th>
                                            <th>{{ __('Organisation') }}</th>
                                            <th>{{ __('Statut') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="previewTableBody">
                                        <!-- Rempli par JavaScript -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Step 4: Import Results -->
                <div id="step4" class="step-content" style="display: none;">
                    <div id="importProgress" class="mb-4" style="display: none;">
                        <div class="text-center">
                            <h5>{{ __('Import en cours...') }}</h5>
                            <div class="progress import-progress">
                                <div class="progress-bar progress-bar-custom progress-bar-striped progress-bar-animated" 
                                    role="progressbar" style="width: 0%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header" style="background: var(--primary-color); color: white;">
                            <h4 class="card-title mb-0">
                                <i class="fas fa-check-circle mr-2"></i>
                                {{ __('Étape 4 : Résultats de l\'import') }}
                            </h4>
                        </div>
                        <div class="card-body">
                            <div id="importResults">
                                <!-- Rempli par JavaScript -->
                            </div>
                            <div class="text-center mt-4">
                                <button class="btn btn-primary-custom" onclick="resetToStep1()">
                                    <i class="fas fa-upload mr-2"></i>
                                    {{ __('Nouvel import') }}
                                </button>
                                <a href="{{ route('employes.index') }}" class="btn btn-outline-secondary ml-2">
                                    <i class="fas fa-users mr-2"></i>
                                    {{ __('Voir les employés') }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Import Confirmation Modal -->
                <div class="modal fade" id="importModal" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header modal-header-custom">
                                <h5 class="modal-title">
                                    <i class="fas fa-exclamation-triangle mr-2"></i>
                                    {{ __('Confirmer l\'import') }}
                                </h5>
                                <button type="button" class="close text-white" data-dismiss="modal">
                                    <span>&times;</span>
                                </button>
                            </div>
                            <div class="modal-body" id="importModalBody">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                    {{ __('Annuler') }}
                                </button>
                                <button type="button" class="btn btn-primary-custom" id="confirmImportBtn">
                                    {{ __('Confirmer l\'import') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            let filePath = null;
            let fileMappings = null;
            let previewData = null;
            let currentImportMode = null;
            let validRowIndexes = [];
            // Drag & Drop
            const uploadArea = document.getElementById('uploadArea');
            if (uploadArea) {
                uploadArea.addEventListener('dragover', (e) => {
                    e.preventDefault();
                    uploadArea.classList.add('dragover');
                });
                uploadArea.addEventListener('dragleave', () => {
                    uploadArea.classList.remove('dragover');
                });
                uploadArea.addEventListener('drop', (e) => {
                    e.preventDefault();
                    uploadArea.classList.remove('dragover');
                    const file = e.dataTransfer.files[0];
                    handleFile(file);
                });
            }
            // Utiliser un ID unique pour l'input file
            $('#fileInput').off('change').on('change', function(e) {
                e.preventDefault();
                e.stopPropagation();
                const file = this.files[0];
                if (file) {
                    handleFile(file);
                }
            });
            // Empêcher la propagation du clic sur l'input file
            $('#fileInput').off('click').on('click', function(e) {
                e.stopPropagation();
            });
            function handleFile(file) {
                if (!file) return;
                // Validation
                const validExtensions = ['xlsx', 'xls', 'csv'];
                const extension = file.name.split('.').pop().toLowerCase();
                if (!validExtensions.includes(extension)) {
                    showAlert('danger', 'Format de fichier non supporté. Utilisez XLSX, XLS ou CSV.');
                    return;
                }
                if (file.size > 10 * 1024 * 1024) {
                    showAlert('danger', 'Le fichier est trop volumineux. Taille maximale : 10 MB.');
                    return;
                }
                const formData = new FormData();
                formData.append('file', file);
                formData.append('_token', '{{ csrf_token() }}');
                showLoading('Upload du fichier en cours...');
                $.ajax({
                    url: '{{ route("imports.upload") }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        hideLoading();
                        if (response.success) {
                            filePath = response.path;
                            // Afficher les infos du fichier
                            $('#fileName').text(file.name);
                            $('#fileSize').text(formatFileSize(file.size));
                            $('#fileInfo').show();
                            // Remplir la table de mapping
                            populateMappingTable(response.headers, response.mappedColumns);
                            // Passer à l'étape 2
                            showStep(2);
                            showAlert('success', 'Fichier uploadé avec succès !');
                        }
                    },
                    error: function(xhr) {
                        hideLoading();
                        let errorMsg = 'Erreur lors de l\'upload du fichier.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        }
                        showAlert('danger', errorMsg);
                    }
                });
            }
            function populateMappingTable(headers, mappedColumns) {
                let html = '';
                const dbFields = [
                    { key: 'reference', label: 'Référence', required: true },
                    { key: 'first_name', label: 'Prénom', required: true },
                    { key: 'last_name', label: 'Nom', required: true },
                    { key: 'email', label: 'Email', required: false },
                    { key: 'phone', label: 'Téléphone', required: false },
                    { key: 'fonction', label: 'Fonction', required: true },
                    { key: 'organisation', label: 'Organisation', required: true },
                    { key: 'is_active', label: 'Actif', required: false },
                    { key: 'is_driver', label: 'Chauffeur', required: false },
                    { key: 'superior', label: 'Supérieur', required: false },
                    { key: 'is_mediator', label: 'Médiateur', required: false },
                    { key: 'has_permit', label: 'Permis', required: false },
                    { key: 'has_account', label: 'Compte', required: false }
                ];
                dbFields.forEach(field => {
                    html += `<tr>
                        <td>
                            <strong>${field.label}</strong>
                            ${field.required ? '<span class="badge badge-danger ml-2">Requis</span>' : ''}
                        </td>
                        <td>
                            <select class="form-control form-control-sm column-mapping" data-field="${field.key}">
                                <option value="">-- Ignorer --</option>`;
                    headers.forEach((header, index) => {
                        const selected = mappedColumns[field.key] === index ? 'selected' : '';
                        html += `<option value="${index}" ${selected}>${escapeHtml(header)}</option>`;
                    });
                    html += `</select></td>
                        <td>${field.required ? '<span class="text-danger">Oui</span>' : '<span class="text-muted">Non</span>'}</td>
                    </tr>`;
                });
                $('#mappingTableBody').html(html);
            }
            window.validateMapping = function() {
                const mappings = {};
                $('.column-mapping').each(function() {
                    const field = $(this).data('field');
                    const value = $(this).val();
                    mappings[field] = value === '' ? null : parseInt(value);
                });
                // Vérifier que les champs requis sont mappés
                const requiredFields = ['reference', 'first_name', 'last_name', 'fonction', 'organisation'];
                const missingFields = requiredFields.filter(field => mappings[field] === null);
                if (missingFields.length > 0) {
                    const fieldNames = missingFields.map(f => {
                        const fieldObj = [
                            { key: 'reference', label: 'Référence' },
                            { key: 'first_name', label: 'Prénom' },
                            { key: 'last_name', label: 'Nom' },
                            { key: 'fonction', label: 'Fonction' },
                            { key: 'organisation', label: 'Organisation' }
                        ].find(dbf => dbf.key === f);
                        return fieldObj ? fieldObj.label : f;
                    });
                    showAlert('danger', 'Veuillez mapper tous les champs requis : ' + fieldNames.join(', '));
                    return;
                }
                fileMappings = mappings;
                showLoading('Validation du fichier en cours...');
                $.ajax({
                    url: '{{ route("imports.update-mapping") }}',
                    type: 'POST',
                    data: {
                        path: filePath,
                        mapping: mappings,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        hideLoading();
                        if (response.success) {
                            previewData = response;
                            validRowIndexes = [];
                            // Afficher UNIQUEMENT les erreurs avec leur détail
                            let previewHtml = '';
                            if (response.errors.length > 0) {
                                previewHtml += `
                                    <div class="mb-3">
                                        <div class="alert alert-danger">
                                            <i class="fas fa-exclamation-triangle mr-2"></i>
                                            <strong>${response.errorCount} ligne(s) en erreur trouvée(s)</strong>
                                        </div>
                                    </div>
                                `;
                                response.errors.forEach(error => {
                                    previewHtml += `
                                        <div class="card mb-3 border-danger">
                                            <div class="card-header bg-danger text-white">
                                                <strong>
                                                    <i class="fas fa-exclamation-circle mr-2"></i>
                                                    Ligne ${error.row}
                                                </strong>
                                            </div>
                                            <div class="card-body">
                                                <table class="table table-sm table-bordered mb-3">
                                                    <thead class="thead-light">
                                                        <tr>
                                                            <th>Champ</th>
                                                            <th>Valeur</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td><strong>Référence</strong></td>
                                                            <td>${escapeHtml(error.data.reference || '-')}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong>Prénom</strong></td>
                                                            <td>${escapeHtml(error.data.first_name || '-')}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong>Nom</strong></td>
                                                            <td>${escapeHtml(error.data.last_name || '-')}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong>Email</strong></td>
                                                            <td>${escapeHtml(error.data.email || '-')}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong>Fonction</strong></td>
                                                            <td>${escapeHtml(error.data.fonction || '-')}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong>Organisation</strong></td>
                                                            <td>${escapeHtml(error.data.organisation || '-')}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <div class="alert alert-danger mb-0">
                                                    <strong><i class="fas fa-list mr-2"></i>Erreurs :</strong>
                                                    <ul class="mb-0 mt-2">
                                                        ${error.errors.map(err => `<li>${escapeHtml(err)}</li>`).join('')}
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    `;
                                });
                            } else {
                                previewHtml += `
                                    <div class="alert alert-success">
                                        <i class="fas fa-check-circle mr-2"></i>
                                        <strong>Toutes les lignes sont valides !</strong>
                                    </div>
                                `;
                            }
                            // Ajouter un résumé des lignes valides
                            if (response.validCount > 0) {
                                previewHtml += `
                                    <div class="alert alert-info mt-3">
                                        <i class="fas fa-info-circle mr-2"></i>
                                        <strong>${response.validCount} ligne(s) valide(s)</strong> prête(s) à être importée(s).
                                    </div>
                                `;
                            }
                            // Ajouter l'info des lignes vides ignorées
                            if (response.skippedEmptyRows > 0) {
                                previewHtml += `
                                    <div class="alert alert-light mt-2">
                                        <i class="fas fa-info-circle mr-2"></i>
                                        <strong>${response.skippedEmptyRows} ligne(s) vide(s)</strong> ignorée(s).
                                    </div>
                                `;
                            }
                            // Collecter les index des lignes valides (pour l'import "valid_only")
                            response.preview.forEach((row, index) => {
                                if (row.errors.length === 0) {
                                    validRowIndexes.push(index);
                                }
                            });
                            $('#previewTableBody').html(previewHtml);
                            // Mettre à jour les statistiques
                            $('#totalRows').text(response.preview.length);
                            $('#validRows').text(response.validCount);
                            $('#errorRows').text(response.errorCount);
                            const percentage = response.preview.length > 0 ? 
                                Math.round((response.validCount / response.preview.length) * 100) : 0;
                            $('#progressPercentage').text(percentage + '%');
                            showStep(3);
                            if (response.errorCount > 0) {
                                showAlert('warning', `Validation terminée : ${response.validCount} lignes valides, ${response.errorCount} lignes en erreur.`);
                            } else {
                                showAlert('success', 'Toutes les lignes sont valides !');
                            }
                        }
                    },
                    error: function(xhr) {
                        hideLoading();
                        let errorMsg = 'Erreur lors de la validation.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        }
                        showAlert('danger', errorMsg);
                    }
                });
            };
            window.showImportModal = function(mode) {
                currentImportMode = mode;
                let message = '';
                if (!previewData) {
                    showAlert('danger', 'Aucune donnée à importer.');
                    return;
                }
                if (previewData.errorCount > 0 && mode === 'all') {
                    message = `
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle mr-2"></i>
                            Attention : ${previewData.errorCount} ligne(s) en erreur seront ignorées lors de l'import.
                        </div>
                        <p>Les lignes valides (${previewData.validCount}) seront importées.</p>
                    `;
                } else if (mode === 'valid_only') {
                    message = `
                        <p>${previewData.validCount} ligne(s) valide(s) seront importées.</p>
                        <p>Les lignes en erreur (${previewData.errorCount}) seront ignorées.</p>
                    `;
                } else {
                    message = `<p>Toutes les ${previewData.preview.length} lignes valides seront importées.</p>`;
                }
                $('#importModalBody').html(message);
                $('#confirmImportBtn').off('click').on('click', function() {
                    $('#importModal').modal('hide');
                    processImport(mode);
                });
                $('#importModal').modal('show');
            };
            function processImport(mode) {
                showStep(4);
                $('#importProgress').show();
                $('#importResults').html('');
                let requestData = {
                    path: filePath,
                    mapping: fileMappings,
                    import_mode: mode,
                    _token: '{{ csrf_token() }}'
                };
                if (mode === 'valid_only') {
                    requestData.valid_rows = validRowIndexes;
                }
                // Simuler une progression
                let progress = 0;
                const progressInterval = setInterval(() => {
                    progress += Math.random() * 30;
                    if (progress >= 90) {
                        progress = 90;
                        clearInterval(progressInterval);
                    }
                    $('.progress-bar').css('width', progress + '%');
                }, 500);
                $.ajax({
                    url: '{{ route("imports.process") }}',
                    type: 'POST',
                    data: requestData,
                    success: function(response) {
                        clearInterval(progressInterval);
                        $('.progress-bar').css('width', '100%');
                        setTimeout(() => {
                            $('#importProgress').hide();
                            if (response.success) {
                                const results = response.results;
                                let resultHtml = `
                                    <div class="alert alert-success">
                                        <i class="fas fa-check-circle mr-2"></i>
                                        Import terminé avec succès !
                                    </div>
                                    <div class="row mb-4">
                                        <div class="col-md-4">
                                            <div class="stats-card">
                                                <div class="stats-number text-success">${results.created || 0}</div>
                                                <div class="text-muted">Employés créés</div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="stats-card">
                                                <div class="stats-number text-info">${results.updated || 0}</div>
                                                <div class="text-muted">Employés mis à jour</div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="stats-card">
                                                <div class="stats-number text-secondary">${results.skipped || 0}</div>
                                                <div class="text-muted">Ignorés</div>
                                            </div>
                                        </div>
                                    </div>
                                `;
                                if (results.errors && results.errors.length > 0) {
                                    resultHtml += `
                                        <div class="alert alert-warning">
                                            <h5><i class="fas fa-exclamation-triangle mr-2"></i>Erreurs rencontrées :</h5>
                                            <ul class="mb-0">
                                    `;
                                    results.errors.forEach(error => {
                                        resultHtml += `<li>Ligne ${error.row} : ${escapeHtml(error.errors.join(', '))}</li>`;
                                    });
                                    resultHtml += '</ul></div>';
                                }
                                if (results.details && results.details.length > 0) {
                                    resultHtml += `
                                        <div class="table-responsive mt-3">
                                            <table class="table table-sm">
                                                <thead class="thead-light">
                                                    <tr>
                                                        <th>Référence</th>
                                                        <th>Nom</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                    `;
                                    results.details.forEach(detail => {
                                        if (detail.success) {
                                            const badgeClass = detail.action === 'created' ? 'success' : 'info';
                                            const actionText = detail.action === 'created' ? 'Créé' : 'Mis à jour';
                                            resultHtml += `
                                                <tr>
                                                    <td>${escapeHtml(detail.reference)}</td>
                                                    <td>${escapeHtml(detail.name)}</td>
                                                    <td><span class="badge badge-${badgeClass}">${actionText}</span></td>
                                                </tr>
                                            `;
                                        }
                                    });
                                    resultHtml += '</tbody></table></div>';
                                }
                                $('#importResults').html(resultHtml);
                                showAlert('success', 'Import terminé avec succès !');
                            }
                        }, 1000);
                    },
                    error: function(xhr) {
                        clearInterval(progressInterval);
                        $('#importProgress').hide();
                        let errorMsg = 'Erreur lors de l\'import.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        }
                        showAlert('danger', errorMsg);
                    }
                });
            }
            window.resetToStep1 = function() {
                filePath = null;
                fileMappings = null;
                previewData = null;
                currentImportMode = null;
                validRowIndexes = [];
                $('#fileInput').val('');
                $('#fileInfo').hide();
                $('#mappingTableBody').html('');
                $('#previewTableBody').html('');
                $('#importResults').html('');
                $('#importProgress').hide();
                $('#totalRows, #validRows, #errorRows').text('0');
                $('#progressPercentage').text('0%');
                showStep(1);
            };
            function showStep(step) {
                // Cacher toutes les étapes
                $('.step-content').hide();
                $('#step' + step).show();
                // Mettre à jour le wizard
                $('.step-circle').removeClass('active completed');
                $('.step-label').removeClass('active');
                for (let i = 1; i <= 4; i++) {
                    if (i < step) {
                        $('#stepCircle' + i).addClass('completed');
                        $('#stepCircle' + i).html('<i class="fas fa-check"></i>');
                    } else if (i === step) {
                        $('#stepCircle' + i).addClass('active');
                        $('#stepCircle' + i).html(i);
                        $('#stepLabel' + i).addClass('active');
                    } else {
                        $('#stepCircle' + i).html(i);
                    }
                }
            }
            function showAlert(type, message) {
                const iconMap = {
                    'success': 'fa-check-circle',
                    'danger': 'fa-times-circle',
                    'warning': 'fa-exclamation-triangle',
                    'info': 'fa-info-circle'
                };
                const icon = iconMap[type] || 'fa-info-circle';
                const alertHtml = `
                    <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                        <i class="fas ${icon} mr-2"></i>
                        ${message}
                        <button type="button" class="close" data-dismiss="alert">
                            <span>&times;</span>
                        </button>
                    </div>
                `;
                $('#alertContainer').html(alertHtml);
                // Auto-fermeture après 5 secondes
                setTimeout(() => {
                    $('#alertContainer .alert').alert('close');
                }, 5000);
            }
            function showLoading(message) {
                const loadingHtml = `
                    <div id="loadingOverlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
                        background: rgba(0,0,0,0.6); z-index: 10000; display: flex; 
                        justify-content: center; align-items: center;">
                        <div style="background: white; padding: 2.5rem; border-radius: 15px; text-align: center; 
                            box-shadow: 0 10px 40px rgba(0,0,0,0.3); min-width: 300px;">
                            <div class="spinner-border" style="color: #009a9c; width: 3rem; height: 3rem;" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <h5 class="mt-3 mb-0" style="color: #333;">${message}</h5>
                        </div>
                    </div>
                `;
                $('body').append(loadingHtml);
            }
            function hideLoading() {
                $('#loadingOverlay').remove();
            }
            function formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';
                const k = 1024;
                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }
            function escapeHtml(text) {
                if (!text) return '';
                const div = document.createElement('div');
                div.textContent = text;
                return div.innerHTML;
            }
        });
    </script>
@endpush