@extends('layouts.app')

@section('content')
<div class="container">
    <h2>Import Excel - Étape 1</h2>

    <form id="form1" method="POST" action="{{ route('importexcels.upload') }}" enctype="multipart/form-data">
        @csrf

        <!-- Input caché pour le fichier -->
        <input type="file" id="fichier" name="fichier" hidden>

        <!-- Zone de dépôt visible -->
        <div id="dropzone" 
             style="border:2px dashed #007bff; padding:30px; text-align:center; cursor:pointer; margin-bottom:15px;">
            Glissez-déposez votre fichier Excel ici<br>ou cliquez pour sélectionner
        </div>

        <!-- Affichage du fichier sélectionné -->
        <div id="dzSelected" class="hidden" style="margin-bottom: 15px;">
            Fichier sélectionné : <span id="dzFilename"></span>
        </div>

        <!-- Année -->
        <div class="form-group">
            <label for="annee">Année :</label>
            <input type="number" name="annee" id="annee" class="form-control" placeholder="Ex: 2026" required>
        </div>

        <button type="submit" id="btnSuivant" disabled class="btn btn-primary mt-3">
            <span id="btnTxt">Analyser et continuer →</span>
        </button>
    </form>
</div>

<script>
(function () {
    const dz       = document.getElementById('dropzone');
    const input    = document.getElementById('fichier');
    const selected = document.getElementById('dzSelected');
    const filename = document.getElementById('dzFilename');
    const btn      = document.getElementById('btnSuivant');
    const btnTxt   = document.getElementById('btnTxt');

    function setFile(name, file) {
        filename.textContent = name;
        selected.classList.remove('hidden');
        btn.disabled = false;

        // Affecter le fichier à l'input
        const dt = new DataTransfer();
        dt.items.add(file);
        input.files = dt.files;
    }

    // Cliquer sur la zone pour ouvrir le sélecteur
    dz.addEventListener('click', () => input.click());

    // Sélection via input classique
    input.addEventListener('change', function () {
        if (this.files[0]) setFile(this.files[0].name, this.files[0]);
    });

    // Drag & Drop visuel
    ['dragenter','dragover'].forEach(evt => {
        dz.addEventListener(evt, e => { e.preventDefault(); dz.classList.add('dragover'); });
    });
    ['dragleave','drop'].forEach(evt => {
        dz.addEventListener(evt, e => { e.preventDefault(); dz.classList.remove('dragover'); });
    });

    // Drop réel
    dz.addEventListener('drop', function (e) {
        e.preventDefault();
        dz.classList.remove('dragover');

        if (!e.dataTransfer.files.length) return;
        setFile(e.dataTransfer.files[0].name, e.dataTransfer.files[0]);
    });

    // Soumission : changer texte et désactiver bouton
    document.getElementById('form1').addEventListener('submit', function () {
        btn.disabled = true;
        btnTxt.textContent = 'Analyse en cours…';
    });
})();
</script>

<style>
#dropzone.dragover {
    background-color: #e9f5ff;
    border-color: #0056b3;
}
.hidden { display: none; }
</style>
@endsection