@extends('layouts.app')

@section('title', 'Import des TASK ID - Call Center Admin')
@section('page-title', 'Import des TASK ID')

<style>
    .bg-card {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 1.2rem;
        color: #2c3e50;
        background-color: #e8f8f5;
        padding: 10px 20px;
        border-left: 5px solid #1abc9c;
        border-radius: 4px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
</style>

@section('content')
<form id="importForm" method="POST" action="{{ route('journalier') }}" enctype="multipart/form-data">
    @csrf   <!-- ✅ Obligatoire pour éviter 419 -->

    <div class="row mb-3">
        <div class="col-md-6">
            <label for="importFile" class="form-label">Fichier à importer</label>
            <input type="file" class="form-control" id="importFile" name="file"
                accept=".csv,.xlsx,.xls" required>
            <div class="form-text">
                Formats acceptés: CSV, Excel (.xlsx, .xls)
            </div>
        </div>
    </div>

    <div class="progress mb-3 d-none" id="progressContainer">
        <div class="progress-bar" id="progressBar" role="progressbar" style="width: 0%">
            0%
        </div>
    </div>

    <!-- ✅ Zone d’affichage des messages -->
    <div id="importSuccessMessage" class="alert d-none"></div>

    <button type="submit" class="btn btn-primary" id="submitBtn">
        <span><i class="fas fa-upload me-2"></i>Importer</span>
    </button>
</form>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('importForm');
    const progressContainer = document.getElementById('progressContainer');
    const progressBar = document.getElementById('progressBar');
    const messageBox = document.getElementById('importSuccessMessage');

    form.addEventListener('submit', function (e) {
        e.preventDefault(); // Empêche le rechargement de la page

        const formData = new FormData(form);
        const xhr = new XMLHttpRequest();

        // Réinitialise les messages
        messageBox.classList.add('d-none');
        messageBox.classList.remove('alert-success', 'alert-danger');

        // Affiche la barre de progression
        progressContainer.classList.remove('d-none');
        progressBar.style.width = '0%';
        progressBar.textContent = '0%';

        // Suivi de la progression
        xhr.upload.addEventListener('progress', function (ev) {
            if (ev.lengthComputable) {
                const percent = Math.round((ev.loaded / ev.total) * 100);
                progressBar.style.width = percent + '%';
                progressBar.textContent = percent + '%';
            }
        });

        // Réponse du serveur
xhr.onload = function () {
    progressContainer.classList.add('d-none');

    let msg  = 'Erreur inconnue.';
    let type = 'danger';

    try {
        const res = JSON.parse(xhr.responseText);

        if (xhr.status === 200) {
            /* SUCCÈS */
            msg  = res.message;
            if (res.created)    msg += ` Lignes créées : ${res.created}.`;
            if (res.duplicates) msg += ` Lignes ignorées (doublons) : ${res.duplicates}.`;
            type = 'success';
            form.reset();
        } else {
            /* BLOCAGE ou erreur */
            msg  = res.message;
            type = 'danger';
        }
    } catch (err) {
        msg = 'Réponse invalide du serveur.';
    }

    messageBox.textContent = msg;
    messageBox.classList.remove('d-none', 'alert-success', 'alert-danger');
    messageBox.classList.add('alert-' + type);
};

        xhr.onerror = function () {
            progressContainer.classList.add('d-none');
            messageBox.textContent = 'Erreur réseau ou serveur injoignable.';
            messageBox.classList.remove('d-none', 'alert-success');
            messageBox.classList.add('alert-danger');
        };

        xhr.open('POST', "{{ route('journalier') }}", true);
        xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');
        xhr.send(formData);
    });
});
</script>
@endsection