<?php

include("include/data.php");
Init_boutique();

// entete de la page

include 'menu/header.php';
?>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/modal.js"></script>
<script type="text/javascript">
	function _(elmt) {
		return document.getElementById(elmt);
	}

	function uploadFicher() {
		var file = _('file').files[0];

		// alert(file.name + " | " + file.size + " | " + file.type);

		var data = new FormData();
		data.append('file', file);

		var ajax = new XMLHttpRequest();

		ajax.upload.addEventListener("progress", progressHandler, false);
		ajax.addEventListener("load", completeHandler, false);
		ajax.addEventListener("error", errorHandler, false);
		ajax.addEventListener("abord", abortHandler, false);
		ajax.open("POST", "reception.php");
		ajax.send(data);
		showModal();

		ajax.onload = function() {
			if (this.readyState === 4) {
				hideModal();
				console.log('page charger');
			}
		}
	}

	function progressHandler(event) {
		_('status_byte').innerHTML = event.loaded + ' Bytes uploadé sur ' + event.total;
		var poucentage = (event.loaded / event.total) * 100;
		_('progressBar').value = Math.round(poucentage);
		_('status').innerHTML = Math.round(poucentage) + '% uploader ..... patientez';
	}

	function completeHandler(event) {
		_('status').innerHTML = event.target.responseText;
		_('progressBar').value = 100;
	}

	function errorHandler() {
		_('status').innerHTML = "L'upload a échoué";
	}

	function abortHandler() {
		_('status').innerHTML = "L'upload a été annulé";
	}


	$(function() {
		function timer(n) {
			$(".progress-bar").css("width", n + "%");
			if (n < 100) {
				setTimeout(function() {
					timer(n + 10);
				}, 200);
			} else {
				setTimeout(function() {
					timer(n - 100);
				}, 200);
			}
		}

		timer(1);
	});
</script>

<br>
S&eacute;l&eacute;ctionner le fichier &eacute;tiquettes au format CSV &agrave; imorter :
<br><br>
<form method="post" enctype="multipart/form-data">
	<input type="file" id="file" name="file">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="button" value="uploader" onclick="uploadFicher()"><br>
	<progress id="progressBar" value="00" max="100" style="width:500px"></progress>
</form>
<h2 id="status"></h2>
<p id="status_byte"></p>

<div id="fond"></div>
<a href="#" id="show">Afficher la fenetre modale</a>
<script src="js/modal.js" type="text/javascript"></script>
<div id="modal" class="popup"></div>

</html>
<?php
include 'menu/footer.php';
?>
