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

{% block title %}
	Len's Backoffice - Commandes
{% endblock %}

{% block stylesheets %}
	<link rel="stylesheet" href="/css/commande.css">
{% endblock %}

{% block header %}
	<div>
		<div class="submenu mx-3">
			<a href="{{ path('commande',{submenu : 'all'}) }}" class="p-3 border  {% if submenu == 'all' %}border-3 border-dark{% endif %}">
				<img src="{{ asset('img/cart.svg') }}" alt="" width="50"/><br/>
				<span>Commande ({{cmds.findAll() | length}})</span>
			</a>
			<!-- Button trigger modal -->
			<div class="d-flex flex-column align-items-center text-center">
				<button type="button" class="btn bg-purple" data-bs-toggle="modal" data-bs-target="#uploadCommande">
					Charger Commande
				</button>
				<p>
					<b>Dernière importation :</b>

					<br>
					{{lastImport}}</p>
			</div>
<a href="{{ path('commande',{submenu : 'processing'}) }}" class="p-3 border  {% if submenu == 'processing' %}border-3 border-dark{% endif %}">
				<img src="{{ asset('img/process.svg') }}" alt="" width="30"/><br/>
				<span>A Traiter ({{ cmds.findByFilter("",'processing')|length }})</span>
			</a>
		</div>

		<div class="submenu mx-3">

			
			<div class="d-flex flex-column item">
				<a href="{{ path('commande',{submenu : 'reservation'}) }}" class="p-3 border  {% if submenu == 'reservation' %}border-3 border-dark{% endif %}">
					<img src="{{ asset('img/checklist.svg') }}" alt="" width="50"/>
					<span>Reservation Composant ({{ status.find(5).getCommande()|length }})</span>
				</a>
				<a href="{{ path('commande',{submenu : 'assemblage'}) }}" class="p-3 border  {% if submenu == 'assemblage' %}border-3 border-dark{% endif %}">
					<img src="{{ asset('img/pc-tower.svg') }}" alt="" width="50"/>
					<span>Pret pour l'assemblage ({{ status.find(2).getCommande()|length }})</span>
				</a>
				<a href="{{ path('commande',{submenu : 'install'}) }}" class="p-3 border   {% if submenu == 'install' %}border-3 border-dark{% endif %}">
					<img src="{{ asset('img/windows.svg') }}" alt="" width="50"/>
					<span>Installation et Test ({{ status.find(19).getCommande()|length }})</span>
				</a>
			</div>

			<div class="d-flex flex-column item">
				<a href="{{ path('commande',{submenu : 'shipping'}) }}" class="p-3 border {% if submenu == 'shipping' %}border-3 border-dark{% endif %}">
					<img src="{{ asset('img/check.svg') }}" alt="" width="50"/>
					<span>Pc Terminé ({{ status.find(1).getCommande()|length + status.find(37).getCommande() | length}})</span>
				</a>
				<a href="{{ path('commande',{submenu : 'paiement'}) }}" class="p-3 border {% if submenu == 'paiement' %}border-3 border-dark{% endif %}">
					<img src="{{ asset('img/euro.svg') }}" alt="" width="50"/>
					<span>En attente de paiement ({{ status.find(23).getCommande()|length }})</span>
				</a>
			</div>

			<a href="{{ path('commande',{submenu : 'late'}) }}" class="p-3 border  {% if submenu == 'late' %}border-3 border-dark{% endif %}">
				<img src="{{ asset('img/alarm.svg') }}" alt="" width="50"/>
				<span>En retard ({{cmds.findByFilter('','late') | length}})</span>
			</a>

			<div class="d-flex flex-column item">

				<a href="{{ path('commande',{submenu : 'sav'}) }}" class="p-3 border {% if submenu == 'sav' %}border-3 border-dark{% endif %}">
					<img src="{{ asset('img/tools.svg') }}" alt="" width="50"/>
					<span>SAV ({{ savs.findBySolved(false)|length }})</span>
				</a>
				<a href="{{ path('commande',{submenu : 'sav_solved'}) }}" class="p-3 border  {% if submenu == 'sav_solved' %}border-3 border-dark{% endif %}">
					<img src="{{ asset('/img/thumbup.svg') }}" alt="" width="70"/>
					<span>SAV  Résolu ({{ savs.findBySolved(true)|length }})</span>
				</a>
			</div>


			<a href="{{ path('commande',{submenu : 'cancel'}) }}" class="p-3 border {% if submenu == 'cancel' %}border-3 border-dark{% endif %}">
				<img src="{{ asset('img/cancel.svg') }}" alt="" width="50"/>
				<span>Annulée ({{ status.find(4).getCommande()|length }})</span>

			</a>


		</div>

	</div>


	<!-- Modal -->
	<div class="modal fade" id="uploadCommande" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">
						Charger les commandes
					</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					{{ form_start(uploadCommande,{'action':path('commande.loadCmd')}) }}
					<div class="m-3 d-flex flex-column">

						<div><input type="radio" class="radio-import" name="type" value="boulanger" id="boulanger">
							<label for="boulanger">Boulanger / Darty</label>
						</div>


						<div><input type="radio" class="radio-import" name="type" value="fnac" id="fnac">
							<label for="fnac">Fnac</label>
						</div>
					</div>
					{{ form_row(uploadCommande.commande) }}
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
						Close
					</button>
					{{ form_row(uploadCommande.submit) }}
					{{ form_end(uploadCommande) }}
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block drawer_button %}
	<button id="drawer_button" class="btn btn-info m-3" onclick="openSubmenuDrawer()">
		Sous-Menu
	</button>
{% endblock %}

{% block body %}
	<div id="drawer">

		<div class="d-flex justify-content-between p-3">
			<div class="d-flex flex-column align-items-center text-center">
				<button type="button" class="btn btn-primary" id="import_button" data-bs-toggle="modal" data-bs-target="#uploadCommande">
					Charger Commande
				</button>
				<p>
					<b>Dernière importation :</b>

					<br>
					{{lastImport}}</p>
			</div>
			<button onclick="closeSubmenuDrawer()">
				<img src="/img/cross.svg" alt="" width="30">
			</button>
		</div>

		<a href="{{ path('commande',{submenu : 'all'}) }}" class="p-3 border  {% if submenu == 'all' %}border-2 border-dark{% endif %}">
			<img src="{{ asset('img/cart.svg') }}" alt="" width="50"/>
			Commande ({{cmds.findAll() | length}})
		</a>
		<a href="{{ path('commande',{submenu : 'processing'}) }}" class="p-3 border {% if submenu == 'processing' %}border-2 border-dark{% endif %}">
			<img src="{{ asset('img/process.svg') }}" alt="" width="50"/>
			A Traiter ({{ status.find(3).getCommande()|length }})
		</a>
		<a href="{{ path('commande',{submenu : 'reservation'}) }}" class="p-3 border {% if submenu == 'reservation' %}border-2 border-dark{% endif %}">
			<img src="{{ asset('img/checklist.svg') }}" alt="" width="50"/>
			Reservation Composant ({{ status.find(5).getCommande()|length }})
		</a>
		<a href="{{ path('commande',{submenu : 'assemblage'}) }}" class="p-3 border {% if submenu == 'assemblage' %}border-2 border-dark{% endif %}">
			<img src="{{ asset('img/pc-tower.svg') }}" alt="" width="50"/>
			Pret pour l'assemblage ({{ status.find(2).getCommande()|length }})
		</a>
		<a href="{{ path('commande',{submenu : 'install'}) }}" class="p-3 border {% if submenu == 'install' %}border-2 border-dark{% endif %}">
			<img src="{{ asset('img/windows.svg') }}" alt="" width="50"/>
			Installation et Test ({{ status.find(19).getCommande()|length }})
		</a>
		<a href="{{ path('commande',{submenu : 'shipping'}) }}" class="p-3 border {% if submenu == 'shipping' %}border-3 border-dark{% endif %}">
				<img src="{{ asset('img/check.svg') }}" alt="" width="50"/>
				<span>Pc Terminé ({{ status.find(1).getCommande()|length }})</span>
			</a>

		<a href="{{ path('commande',{submenu : 'paiement'}) }}" class="p-3 border {% if submenu == 'paiement' %}border-3 border-dark{% endif %}">
			<img src="{{ asset('img/euro.svg') }}" alt="" width="50"/>
			<span>En attente de paiement ({{ status.find(23).getCommande()|length }})</span>
		</a>
		<a href="{{ path('commande',{submenu : 'late'}) }}" class="p-3 border{% if submenu == 'late' %}border-2 border-dark{% endif %}">
			<img src="{{ asset('img/alarm.svg') }}" alt="" width="50"/>
			En retard ({{cmds.findByFilter('','late') | length}})
		</a>
		<a href="{{ path('commande',{submenu : 'sav'}) }}" class="p-3 border{% if submenu == 'sav' %}border-2 border-dark{% endif %}">
			<img src="{{ asset('img/tools.svg') }}" alt="" width="50"/>
			<span>SAV ({{ status.find(6).getCommande()|length }})</span>
		</a>
		<a href="{{ path('commande',{submenu : 'sav_solved'}) }}" class="p-3 border  {% if submenu == 'sav_solved' %}border-2 border-dark{% endif %}">
			<img src="{{ asset('/img/thumbup.svg') }}" alt="" width="70"/>
			<span>SAV  Résolu ({{ status.find(11).getSavs()|length }})</span>
		</a>

		<a href="{{ path('commande',{submenu : 'cancel'}) }}" class="p-3 border  {% if submenu == 'cancel' %}border-2 border-dark{% endif %}">
			<img src="{{ asset('img/cancel.svg') }}" alt="" width="50"/>
			Annulée ({{ status.find(4).getCommande()|length }})

		</a>
	</div>

	{% include 'commande/allOrder.html.twig' %}

	{% include 'commande/templates/modals.html.twig' %}
	{% include 'CRUD/livraison/modal.html.twig' with {type : 'cmd'} %}
	<script src="{{ asset('js/commande.js') }}"></script>
{% endblock %}