{% extends "base.html" %}
{% load static %}

{%block entete%}Gestion de la Coopé Technopôle Metz{%endblock%}

{% block navbar %}
<ul>
	{% if perms.gestion.add_consumptionhistory %}<li><a href="#first">Commande</a></li>{% endif %}
	{% if perms.gestion.add_reload %}<li><a href="#second">Rechargement Client</a></li>{% endif %}
	{% if perms.gestion.add_refund %}<li><a href="#third">Remboursement client</a><li>{% endif %}
</ul>
{% endblock %}


{% block content %}
{% if floating_buttons %}
<div class="alt_payment_buttons">
	{% for pm in pay_buttons %}
		<button class="button small pay_button" data-payment="{{pm.pk}}"><i class="fa fa-{{pm.icon}}"></i></button><br>
	{% endfor %}
</div>
{% endif %}
<a class="up_button" href="#intro">
	UP
</a>
<style>
.alt_payment_buttons{
	display:block;
	background-color:white;
	position:fixed;
	right:0;
	padding-right: 1em;
	top:50%;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
.alt_payment_buttons button{
	min-width: 0 !important;
	background-color: white !important;
}
.up_button{
	display:block;
	background-color:white;
	position:fixed;
	border-radius:100%;
	width:50px;
	height:50px;
	color:black;
	text-align:center;
	line-height:50px;
	right:1em;
	bottom : 1em;
}
</style>
{% if perms.gestion.add_consumptionhistory %}
<section id="first" class="main">
	<div class="spotlight">
		<div class="content">
			<header class="major">
				<h2>Transaction</h2>
			</header>
			<div class="row uniform">
				<div class="12u$">
					{{gestion_form}}
				</div>
			</div>
			<div class="row uniform">
				<h3>Récapitulatif</h3>
			</div>
			<div class="row uniform">
				<div class="12u$">
					<table id="sumUpTable">
						<thead>
							<tr>
								<th>Solde</th>
								<th>Montant total de la commande</th>
								<th>Solde après la commande</th>
								<th>Payer</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td id="balance">0€</td>
								<td id="totalAmount">0€</td>
								<td id="totalAfter">0€</td>
								<td>{% for pm in pay_buttons %}<button class="btn small pay_button" data-payment="{{pm.pk}}"><i class="fa fa-{{pm.icon}}"></i> {{pm.name}}</button> {% endfor %} <a class="button small" href="" tooltip="lol"><i class="fa fa-times"></i> Annuler</a></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="row uniform">
				<h3>Produits</h3>
			</div>
			<div class="row uniform">
				<div class="12u$">
					<table id="productTable" type="input" name="tableau" class="alt">
						<thead>
							<tr>
								<th>Nom Produit</th>
								<th>Prix Unitaire</th>
								<th>Quantité</th>
								<th>Sous-total</th>
							</tr>
						</thead>
						<tbody id="items">
						</tbody>
					</table>
				</div>
			</div>
			<div class="row uniform">
				<div class="12u$">
					<div class="boutonProduit">
						<table>
							<tbody class="actions" id="bouton Produit">
								<tr class="cotisation-hidden" style="text-align:center; font-weight:bold;"><td colspan="4">Cotisations</td></tr>
								{% for cotisation in cotisations %}
								{% if forloop.counter0|divisibleby:3 %}
								<tr class="cotisation-hidden" style="text-align:center">
									{% endif %}
									<td class="cotisation-hidden"><button class="cotisation" target="{{cotisation.pk}}">Cotisation {{cotisation.duration}} jours ({{cotisation.amount}} €)</button></td>
									{% if forloop.counter|divisibleby:3 %}
								</tr>
								{% endif %}
								{% endfor %}
								{% if not cotisations|divisibleby:3 %}
								</tr>
								{% endif %}
								<tr style="text-align:center; font-weight:bold;">
									<td colspan="1">Rechargements</td>
									<td>
										<div class="dropdown">
											<button onclick="dropdown('myDropdown1')" class="dropbtn small">Rechargement 1€</button>
											<div id="myDropdown1" class="dropdown-content">
												{% for pm in pay_buttons %}{% if not pm.affect_balance%}<a class="reload" data-payment="{{pm.pk}}" data-payment-name="{{pm.name}}" target="1"><i class="fa fa-{{pm.icon}}"></i> {{pm.name}}</a> {% endif %}{% endfor %}
											</div>
										</div> 
									</td>
									<td>
										<div class="dropdown">
											<button onclick="dropdown('myDropdown2')" class="dropbtn small" target="myDropdown2">Rechargement 10€</button>
											<div id="myDropdown2" class="dropdown-content">
												{% for pm in pay_buttons %}{% if not pm.affect_balance%}<a class="reload" data-payment="{{pm.pk}}" data-payment-name="{{pm.name}}" target="10"><i class="fa fa-{{pm.icon}}"></i> {{pm.name}}</a> {% endif %}{% endfor %}
											</div>
										</div> 
									</td>
								</tr>
								<tr style="text-align:center; font-weight:bold;"><td colspan="4">Bières pression</td></tr>
								{% for product in bieresPression %}
								{% if forloop.counter0|divisibleby:3 %}
								<tr style="text-align:center">
									{% endif %}
									<td><button class="product {% if product.adherentRequired %}special{% endif%}" target="{{product.pk}}">{{product}}</button></td>
									{% if forloop.counter|divisibleby:3 %}
								</tr>
								{% endif %}
								{% endfor %}
								{% if not bieresPression|divisibleby:3 %}
								</tr>
								{% endif %}
								{% for category in categories %}
								{% if category.active_products.count > 0 %}
								<tr style="text-align:center; font-weight:bold;"><td colspan="4">{{category}}</td></tr>
								{% for product in category.active_products %}
								{% if forloop.counter0|divisibleby:3 %}
								<tr style="text-align:center">
								{% endif %}
									<td><button class="product {% if product.adherentRequired %}special{% endif%}" target="{{product.pk}}">{{product}}</button></td>
								{% if forloop.counter|divisibleby:3 %}
								</tr>
								{% endif %}
								{% endfor %}
								{% if not category.active_products|divisibleby:3 %}
								</tr>
								{% endif %}
								{% endif %}
								{% endfor %}
								{% if menus %}
								<tr style="text-align:center; font-weight:bold;"><td colspan="4">Menus</td></tr>
								{% for product in menus %}
								{% if forloop.counter0|divisibleby:3 %}
								<tr style="text-align:center">
									{% endif %}
									<td><button class="menu {% if product.adherent_required %}special{% endif%}" target="{{product.pk}}">{{product}}</button></td>
									{% if forloop.counter|divisibleby:3 %}
								</tr>
								{% endif %}
								{% endfor %}
								{% if not menus|divisibleby:3 %}
								</tr>
								{% endif %}
								{% endif %}
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
{% endif %}
{% if perms.gestion.add_reload %}
<section id="second" class="main">
	<header class="major">
		<h2>Rechargement client</h2>
	</header>
	<form method="post" action="{% url 'gestion:reload' %}">
		{% csrf_token %}
		{{reload_form}}
		<br>
		<button type="submit"><i class="fa fa-hand-holding-usd"></i> Recharger</button>
	</form>
</section>
{% endif %}
{% if perms.gestion.can_refund %}
<section id="third" class="main">
	<header class="major">
		<h2>Remboursement client</h2>
	</header>
	<form method="post" action="{% url 'gestion:refund' %}">
		{% csrf_token %}
		{{refund_form}}
		<br>
		<button type="submit"><i class="fa fa-file-invoice-dollar"></i> Rembourser</button>
	</form>
</section>
{% endif %}
{{gestion_form.media}}
{{reload_form.media}}
{{refund_form.media}}
<script src="{% static 'manage.js' %}"></script>
{%endblock%}
