@if (session('loadingComplete'))
    <script>
        document.getElementById('loadingSpinner').style.display = 'none';
    </script>
@endif

<form method="POST" action="{{ route('cartographie.check') }}" class="mt-3 mb-3" enctype="multipart/form-data">
    @csrf
    <label>Importer un fichier CSV </label>
    <div class="d-flex flex-row align-items-center">
        <input type="file"
               class="btn btn-primary p-3 mr-5"
               id="cartography"
               value="{{ old('cartography') }}"
               name="cartography"
               aria-describedby="nomenclature"
               accept=".csv"
        >
        <button
            class="btn btn-primary p-3" id="submit-button-csv" type="submit" disabled>
            Importer un nouveau CSV
        </button>
        <div class="spinner-border text-primary ml-5" role="status" id="loadingSpinner" style="display: none"></div>
    </div>
</form>

@section('unique-js')
    <script>
        document.addEventListener('DOMContentLoaded', function () {

            document.getElementById("cartography").addEventListener("change", () => {
                document.getElementById("submit-button-csv").disabled = false;
            });

            document.getElementById("submit-button-csv").addEventListener('click', function () {
                document.getElementById('loadingSpinner').style.display = 'flex';
            });
        });
    </script>
@endsection