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

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

{% block stylesheets %}

	<link rel="stylesheet" href="/css/fournisseur.css">


{% endblock %}

{% block header %}


	<div>

		<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createSupplierModal">Fournisseur
			<img src="/img/plus.svg" alt="plus" width="30">
		</button>
		<a class="btn btn-primary mx-3" href="{{path('fournisseur.order.new')}}">Commande
			<img src="/img/plus.svg" alt="plus" width="30">
		</a>
	</div>

	<div class="submenu">

		<a href="{{path('fournisseur',{submenu:'all'})}}" class="btn btn-dark">
			<img src="/img/process.svg" alt="process" width="50">
			<span class='text-white'>A commander ({{ cmdRepo.findSupplierOrder(3) |length }})</span>
		</a>
		<a href="{{path('fournisseur',{submenu:'ordered'})}}" class="btn btn-orange {% if submenu == 'validate' %} border-2 border-dark{% endif %}">
			<img src="/img/pause.svg" alt="pause" width="50">
			<span class='text-white'>
				En cours de commande ({{ cmdRepo.findSupplierOrder(13) |length}})
			</span>
		</a>
		<a href="{{path('fournisseur',{submenu:'validate'})}}" class="btn btn-success {% if submenu == 'validate' %} border-2 border-dark{% endif %}">
			<img src="/img/check.svg" alt="check" width="50">
			<span class='text-white'>
				Commande reçu ({{ cmdRepo.findSupplierOrder(9) |length}})
			</span>
		</a>
		<a href="{{path('fournisseur',{submenu:'cancel'})}}" class="btn btn-danger {% if submenu == 'cancel' %} border-2 border-dark{% endif %}">
			<img src="/img/cancel.svg" alt="check" width="50">
			<span class='text-white'>
								Commande annulée ({{ cmdRepo.findSupplierOrder(4) |length}})
			</span>
		</a>

	</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">
		<button onclick="closeSubmenuDrawer()">
			<img src="/img/cross.svg" alt="" width="30">
		</button>
		<a href="{{path('fournisseur',{submenu:'all'})}}" class="btn btn-dark">
			<img src="/img/process.svg" alt="process" width="50">
			<span class='text-white'>A commander ({{ cmdRepo.findSupplierOrder(3) |length }})</span>
		</a>
		<a href="{{path('fournisseur',{submenu:'ordered'})}}" class="btn btn-orange {% if submenu == 'validate' %} border-2 border-dark{% endif %}">
			<img src="/img/pause.svg" alt="pause" width="50">
			<span class='text-white'>
				En cours de commande ({{ cmdRepo.findSupplierOrder(13) |length}})
			</span>
		</a>
		<a href="{{path('fournisseur',{submenu:'validate'})}}" class="btn btn-success {% if submenu == 'validate' %} border-2 border-dark{% endif %}">
			<img src="/img/check.svg" alt="check" width="50">
			<span class='text-white'>
				Commande reçu ({{ cmdRepo.findSupplierOrder(9) |length}})
			</span>
		</a>
		<a href="{{path('fournisseur',{submenu:'cancel'})}}" class="btn btn-danger {% if submenu == 'cancel' %} border-2 border-dark{% endif %}">
			<img src="/img/cancel.svg" alt="check" width="50">
			<span class='text-white'>
				Commande annulée ({{ cmdRepo.findSupplierOrder(4) |length}})
			</span>
		</a>

	</div>

	<datalist id="compo">
		{% for compo in composants %}
			<option value="{{compo}}">{{compo}}</option>
		{% endfor %}
	</datalist>

	<div class="d-flex">
		<input type="text" class="form-control m-3" placeholder="Rechercher" id="searchBar">

	</div>

	<div id="result" class="mx-5"></div>

	<div id="container" class="m-5">

		{% if submenu == 'validate' %}

			{% include "fournisseur/vueOrder/validate.html.twig" %}

		{% elseif submenu == 'cancel' %}

			{% include "fournisseur/vueOrder/cancel.html.twig" %}
		{% else %}
			{% include "fournisseur/vueOrder/all.html.twig" %}


		{% endif %}


	</div><!-- Modal Creation Fournisseur --><div class="modal fade" id="createSupplierModal" 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">Creer un fournisseur</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					{{form_start(createSupplier)}}
					{{form_row(createSupplier.nom)}}</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fermer</button>
					{{form_row(createSupplier.submit)}}
					{{form_end(createSupplier)}}</div>
			</div>
		</div>
	</div>

	{# Modal ajout qte Composant #}
	<div class="modal fade" id="addCompoModal" 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">Ajouter un composant</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">

					{{form_start(addComposant)}}
					<div class="fetched-data"></div>
					<div>
						<div class="d-flex">
							<input type="text" class="form-control " name='search' placeholder="Nom du composant" autocomplete="off" list="compo">
						</div>
						<div class="shadow search-list" style="display : none"></div>
					</div>


					{{form_row(addComposant.quantite)}}</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Annuler</button>
					{{form_row(addComposant.submit)}}
					{{form_end(addComposant)}}</div>
			</div>
		</div>
	</div>

	{# Modal ajout piece jointe #}
	<div class="modal fade" id="addPjModal" 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">Ajouter une piece jointe</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<form action="{{path('fournisseur.add.pj')}}" enctype="multipart/form-data" method="POST">
					<div class="modal-body">
						<div class="fetched-data"></div>
						<input type="file" name="file" id="new_pj_file">


					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Annuler</button>
						<button type="submit" class="btn btn-success">Ajouter</button>
					</div>
				</form>

			</div>
		</div>
	</div>
	<script src="/js/fournisseur.js"></script>
{% endblock %}