{% extends 'base.html.twig' %}

{% block title %}Upload Facture Fournisseur
{% endblock %}

{% block stylesheets %}
	{{ parent() }}
	<link
		rel="stylesheet"
		href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css"
		integrity="sha256-e47xOkXs1JXFbjjpoRr1/LhVcqSzRmGmPqsrUQeVs+g="
		crossorigin="anonymous"/>
	<style>
		.ri-upload-cloud-2-line {
			font-size: 7rem;
			display: block;
			margin-left: 45%;
			margin-right: 45%;
		}
		#fileList {
			margin-top: 20px;
			list-style: none;
			padding-left: 0;
		}
		#fileList li {
			padding: 5px;
			border-bottom: 1px solid #ddd;
		}
	</style>
{% endblock %}

{% block body %}
	<div
		class="content-page">
		<div
			class="content">
			<div
				class="container-fluid">
				<div
					class="row">
					<div
						class="col-12">
						<div
							class="page-title-box">
							<h1>Uploader des factures fournisseur</h1>
						</div>
					</div>
				</div>
				<div
					class="row">
					<div
						class="col-sm-12">
						<form
							action="{{ path('analyze_facture') }}" class="dropzone"
							id="factureDropzone">
							<div
								class="dz-message">
								Glissez et déposez vos factures ici ou cliquez pour uploader
							</div>
						</form>
						<button
							id="start-upload-btn"
							class="btn btn-primary mt-3">Analyser les factures</button>
					</div>
				</div>

				<!-- Bouton pour voir les fichiers défaillants et les renommer -->
				<div
					class="row mt-3">
					<div
						class="col-sm-12">
						<a
							href="{{ path('facture_previsualisation') }}" class="btn btn-warning">
							Visualiser et renommer les factures défaillantes
						</a>
					</div>
				</div>

				<div
					class="row mt-3">
					<div
						class="col-sm-12">
						<a
							href="{{ path('list_zips') }}" class="btn btn-info">Voir les factures zippées</a>
					</div>
				</div>
				{% if factures_non_traitees is not empty %}
					<h3>Factures non traitées (vous les trouverez dans la visualiseuse pour renommage complet) :</h3>
					<ul>
						{% for facture in factures_non_traitees %}
							<li>{{ facture }}</li>
						{% endfor %}
					</ul>
					{% else %}

				{% endif %}
			</div>
		</div>
	</div>
{% endblock %}

{% block javascripts %}
	{{ parent() }}
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"
		integrity="sha256-cs4thShDfjkqFGk5s2Lxj35sgSRr4MRcyccmi0WKqCM="
		crossorigin="anonymous"></script>
	<script>
		Dropzone.autoDiscover = false;

$( document ).ready( function () {
var factureDropzone = new Dropzone( "#factureDropzone", {
url: "{{ path('analyze_facture') }}", // Route de traitement
autoProcessQueue: false, // Empêcher l'envoi automatique
addRemoveLinks: true, // Permettre la suppression de fichiers avant l'envoi
maxFilesize: 10, // Taille maximale des fichiers en MB
acceptedFiles: "application/pdf", // Limiter aux fichiers PDF
uploadMultiple: true, // Autoriser l'envoi multiple
parallelUploads: 100, // Limite le nombre de fichiers envoyés simultanément (adapte selon ton serveur)
timeout: 180000, // Timeout plus long si les fichiers mettent du temps à être traités
init: function () {
var myDropzone = this;

// Quand l'utilisateur clique sur "Analyser", on envoie tous les fichiers
$( '#start-upload-btn' ).on( 'click', function ( e ) {
e.preventDefault();
console.log( "Bouton Analyser cliqué, envoi des fichiers..." );
myDropzone.processQueue(); // Envoyer tous les fichiers
} );

// Gérer l'événement de succès de l'envoi
myDropzone.on( "successmultiple", function ( files, response ) {
if ( response.errors ) {
alert( "Erreurs : " + response.errors.join( ", " ) );
}
else {
alert( "Tous les fichiers ont été traités avec succès." );
}
location.reload(); // ou une autre action pour rafraîchir l'interface
} );


// Gérer les erreurs
myDropzone.on( "errormultiple", function ( files, errorMessage ) {
console.error( "Erreur d'upload des fichiers", errorMessage );
} );

// Rafraîchir l'interface une fois que tous les fichiers (succès et erreurs) sont traités
myDropzone.on( "queuecomplete", function () {
console.log( "Tous les fichiers ont été traités, succès ou erreurs" );
// Rafraîchir la page ici pour mettre à jour la liste des fichiers non traités
location.reload();
} );
}
} );
} );
	</script>
{% endblock %}