{% extends "base.html" %}

{% block content %}
	<nav>
		<ul>
			<a href="{{ url_for('stocks') }}"><li>Stocks</li></a>
			<a href="{{ url_for('menu') }}"><li>Menu</li></a>
			<a href="#popup"><li id="deco">Se déconnecter</li></a>
		</ul>
	</nav>
	<div id="popup">
		<h1>Voulez vous vraiment vous déconnecter ?</h1>
		<div class="container-contact2-form-btn">
			<div class="wrap-contact2-form-btn">
				<div class="contact2-form-bgbtn"></div>
				<a href="#"><button class="contact2-form-btn">
					Annuler
				</button></a>
			</div>
		</div>
		<div class="container-contact2-form-btn">
			<div class="wrap-contact2-form-btn">
				<div class="contact2-form-bgbtn"></div>
				<a href="{{ url_for('logout') }}"><button class="contact2-form-btn">
					Déconnexion
				</button></a>
			</div>
		</div>
	</div>

	<div class="bg-contact2" id="main-container" style="background-image: url('../static/images/bg-01.jpg');">
		<form class="container" action="#">
			<div id="plat">
				<h1>PLATS</h1>
				<ul>
					<li><input type="radio" name="plat" id="sandwich">
					<label for="sandwich">Sandwich</label></li>
					<li><input type="radio" name="plat" id="sandwichS">
					<label for="sandwichS">Sandwich Surprise</label></li>
				</ul>
			</div>
			<div id="ingredient">
				<h1>INGREDIENTS</h1>
				<ul>
					<li><input type="checkbox" name="ingredient" id="dinde">
					<label for="dinde">Dinde</label></li>
					<li><input type="checkbox" name="ingredient" id="jambon">
					<label for="jambon">Jambon</label></li>
				</ul>
			</div>
			<div id="sauce">
				<h1>SAUCES</h1>
				<ul>
					<li><input type="checkbox" name="sauce" id="beurre">
					<label for="beurre">Beurre</label></li>
					<li><input type="checkbox" name="sauce" id="beurreS">
					<label for="beurreS">Beurre Salé</label></li>
				</ul>
			</div>
			<div id="boisson">
				<h1>BOISSONS</h1>
				<ul>
					<li><input type="radio" name="boisson" id="coca">
					<label for="coca">Coca-Cola</label></li>
					<li><input type="radio" name="boisson" id="icetea">
					<label for="icetea">Ice-Tea</label></li>
				</ul>
			</div>
			<div id="dessert">
				<h1>DESSERTS</h1>
				<ul>
					<li><input type="radio" name="dessert" id="beignetC">
					<label for="beignetC">Beignet Chocolat</label></li>
					<li><input type="radio" name="dessert" id="beignetF">
					<label for="beignetF">Beignet Framboise</label></li>
				</ul>
			</div>
			<div id="resume">
				<h1>Commande 1</h1>
				<p>Sandwich dinde - jambon</p>
				<p>Coca-cola</p>
				<p>Beignet Chocolat</p>
				<div class="no-margin">
					<input type="checkbox" checked name="paiement" id="payer">
					<label for="payer">Payée</label>
				</div>
				<button onclick="valider()" class="validation" type="submit">Valider</button>
				<h2>3,40€</h2>
				
			</div>
		</form>
		<div class="liste">

		</div>
	</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
<script>
	let socket = io();
	let list = document.querySelector('.liste');

	function addcmd(id, plate, content, drink, dessert, state) {
		let newDiv = document.createElement("div");
		newDiv.classList.add('com');
		newDiv.id = `cmd${id}`;
		$(list).append(newDiv);
		let numCom = document.createElement("h1");
		let subDiv = document.createElement("div");
		let p1 = document.createElement("p");
		let p2 = document.createElement("p");
		let p3 = document.createElement("p");
		let p4 = document.createElement("p");
		let btn1 = document.createElement("button");
		let btn2 = document.createElement("button");
		let btn3 = document.createElement("button");
		subDiv.classList.add('spec');
		btn1.classList.add('annuler');
		btn2.classList.add('donner');
		btn3.classList.add('erreur');
		numCom.innerHTML = `Commande ${id}`;
		p1.innerHTML = plate;
		p2.innerHTML = content;
		p3.innerHTML = drink;
		p4.innerHTML = dessert;
		btn1.innerHTML = "Annuler";
		btn2.innerHTML = "Donnée";
		btn3.innerHTML = "Erreur";
		newDiv.append(numCom);
		newDiv.append(subDiv);
		subDiv.append(p1);
		subDiv.append(p2);
		subDiv.append(p3);
		subDiv.append(p4);
		subDiv.append(btn1);
		newDiv.append(btn2);
		newDiv.append(btn3);
		document.querySelector('#resume>h1').innerHTML = `Commande ${id+1}`;
		newDiv.addEventListener('click', ev => {
			newDiv.classList.toggle('show-spec');
		});
		newDiv.querySelector('.donner').addEventListener('click', ev => {
			ev.stopPropagation();
			socket.emit("give command", {"id": id});
		});
		newDiv.querySelector('.annuler').addEventListener('click', ev => {
			ev.stopPropagation();
			socket.emit("clear command", {"id": id});
		});
		newDiv.querySelector('.erreur').addEventListener('click', ev => {
			ev.stopPropagation();
			socket.emit("error command", {"id": id});
		});
		switch (state) {
			case "gave":
				give(newDiv);
				break;
			case "error":
				error(newDiv);
				break;
		}
	}

	function clear(e) {
		e.classList.remove('donnee');
		e.classList.remove('probleme');
		e.classList.remove('show-spec');
		list.prepend(e);
	}

	function give(e) {
		e.classList.remove('show-spec');
		e.classList.add('donnee');
		list.appendChild(e);
	}

	function error(e) {
		e.classList.remove('show-spec');
		e.classList.add('probleme');
		list.appendChild(e);
	}

	socket.on("command list", function (data) {
		var child = list.lastElementChild;
		while (child) {
			list.removeChild(child);
			child = list.lastElementChild;
		}
		for (let c of data.list) {
			addcmd(c.id, c.plate, c.content, c.drink, c.dessert, c.state);
		}
	});

	socket.on("new command", function (data) {
		addcmd(data.id, data.plate, data.content, data.drink, data.dessert, data.state);
	});

	socket.on("cleared command", function (data) {
		clear(document.querySelector(`.liste #cmd${data.id}`));
	});

	socket.on("gave command", function (data) {
		give(document.querySelector(`.liste #cmd${data.id}`));
	});

	socket.on("glitched command", function (data) {
		error(document.querySelector(`.liste #cmd${data.id}`));
	});

	document.querySelector('#resume button').addEventListener('click', ev => {
		socket.emit("add command", {"plate": document.querySelector('#resume :nth-child(2)'), "content": "Jambon - Tomate - Brie", "drink": "Boisson surprise", "dessert": "Panini nutella"});
	});
</script>


<!--===============================================================================================-->
<script src="{{ url_for('static', filename='vendor/jquery/jquery-3.2.1.min.js') }}"></script>
<!--===============================================================================================-->
<script src="{{ url_for('static', filename='vendor/bootstrap/js/popper.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/bootstrap/js/bootstrap.min.js') }}"></script>
<!--===============================================================================================-->
<script src="{{ url_for('static', filename='vendor/select2/select2.min.js') }}"></script>
<!--===============================================================================================-->
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
{% endblock %}