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

{% block title %}Devis - Nouveau
{% endblock %}

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

{% endblock %}


{% block body %}

	<div class="absolute mb-5">


		<div class="container">
			<datalist id="client">
				{% for client in clients %}
					<option value="{{client}}">{{client}}</option>
				{% endfor %}
			</datalist>

			<datalist id="products">
				{% for compo in composants %}
					<option value="{{compo}}">{{compo}}</option>
				{% endfor %}
				{% for pc in pcs %}
					<option value="{{pc}}">{{pc}}</option>
				{% endfor %}
				{% for item in laptops %}
					<option value="{{ item }}">{{ item }}</option>
				{% endfor %}
			</datalist>

			<form action="" method="post" enctype="multipart/form-data">

				<div class="d-flex justify-content-between mb-3">
					<div>
						<div>
							<b>Total HT :</b>

							<span id="total_HT">
								{% if devis is defined %}
									{{devis.getTotalHT(tva) }}
								{% else %}
									0
								{% endif %}
							</span>

							€
						</div>
						<div>
							<b>TVA :</b>

							<span id="tva">{{tva}}</span>

							%</div>
						<div>
							<b>Total TTC :</b>

							<span id="total_TTC">
								{% if devis is defined %}
									{{devis.getTotalTTC()}}
								{% else %}
									0
								{% endif %}

							</span>
							€
						</div>
					</div>

					<div>
						<div class="btn btn-info d-flex flex-column">
							<label for="pj">
								<img src="/img/attachment.svg" alt="" width="20">
								Ajouter une piece jointe</label>
							<input type="file" name="pj[]" multiple></div>

					</div>
				</div>


				<div class="d-flex justify-content-around">
					<p>Date :
						{{date}}</p>
					<p>Reference Devis :
						{{num}}
					</p>
				</div>
				<div class="m-3">
					<div>
						<label for="client">Client :</label>
						<input type="text" name='client' id="input_client" class="form-control" autocomplete="off" required="required" list="client" {% if devis is defined %} value="{{devis.client}}" readonly {% elseif client is defined %} value="{{client}}" readonly {% endif %}>
						<div class="my-3">
							<div id="client_mail"></div>
							<div id="client_tel"></div>
						</div>
					</div>

					{% if devis is defined %}
						{% set client = devis.client %}
						<div class=" p-3 ">
							<div>
								<b>Nom :</b>
								{{client}}
							</div>
							<div>
								<b>Mail:</b>
								{{client.mail}}
							</div>
							{% if client.rue is not empty %}
								<div>
									<b>Adresse:
									</b>
									{{client.rue}}
									<br>
									{{client.cp}}
									{{client.ville}}


								</div>
							{% endif %}
							{% if client.telephone is not empty %}
								<div>
									<b>Téléphone :</b>
									{{client.telephone}}</div>

							{% endif %}
						</div>
					{% endif %}

					<div class="my-3 d-flex flex-column">
						<label for="infos">Informations :</label>
						<textarea class="form-control" name="infos" id="infos" cols="30" rows="7">
							{% if devis is defined %}
								{{devis.infos}}
							{% endif %}
						</textarea>
					</div>

				</div>

				<div class="d-flex">
					{% if devis is defined %}
						{% for item in devis.pj %}
							<div class="m-3 d-flex flex-column align-items-center justify-content-between" id="pj_{{item.id}}">
								<div>{{item}}</div>
								<div>{{item.originalName}}</div>
								<div>
									<button class="btn btn-danger mx-3 " type="button" onclick="removePj('{{path('devis.remove.pj',{id:item.id})}}','pj_{{item.id}}')"><img src="/img/trash.svg" alt="delete" width="20"></button>
								</div>
							</div>
						{% endfor %}

					{% endif %}
				</div>

				<div>

					<input type="radio" name="service" value="commande" id="commande" required {% if devis is defined and devis.service == 'commande' %} checked {% endif %}>
					<label for="commande">Commande</label>
					<input type="radio" name="service" value="reparation" id="reparation" {% if devis is defined and devis.service == 'reparation' %} checked {% endif %}>

					<label for="reparation">Réparation</label>


				</div>


				<ul class="nav nav-tabs my-3" id="myTab" role="tablist">
					<li class="nav-item" role="presentation">
						<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#product" type="button" role="tab" aria-controls="product" aria-selected="true">Produit</button>
					</li>
					<li class="nav-item" role="presentation">
						<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#service" type="button" role="tab" aria-controls="service" aria-selected="false">Service</button>
					</li>

				</ul>

				<div class="tab-content" id="myTabContent">
					<div class="tab-pane fade show active" id="product" role="tabpanel" aria-labelledby="product-tab">
						<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#AddComposantModal" >
							<img src="/img/plus.svg" alt="" width="30">
							<span>Ajouter un composant</span>
						</button>
						<div class="d-flex my-3">
							<input type="text" id="searchCompo" class="form-control w-100" value="" autocomplete="off" placeholder="Rechercher un Composant" name='search' list="products">
							<div class="mx-3">
								<label for="qte">Quantité</label>
								<input type="number" class="form-control" min="0" value="1" name="qte" id="qteCompo">
							</div>

							<button class="btn btn-success" type="button" onclick="addProductToDevis('{{path('reparation.template')}}')">Ajouter</button>
						</div>


					</div>
					<div class="tab-pane fade" id="service" role="tabpanel" aria-labelledby="service-tab">
						<div class="d-flex justify-content-between align-items-center m-5">
							<div>
								<label for="descr">Description :</label>
								<br>
								<textarea name="descr" id="descr" cols="50" rows="5"></textarea>
							</div>
							<div>
								<label for="qte">Quantité</label>
								<input type="number" class="form-control" min="0" value="1" name="qte" id="qte">
							</div>


							<div>
								<label for="price">Montant TTC :</label>
								<input type="number" class="form-control" min="0" value="0.00" name="price" id="price_TTC">

							</div>
							<button class="btn btn-success p-3" type="button" onclick="addLineToDevis('{{path('reparation.template')}}')">Ajouter</button>

						</div>

					</div>
				</div>


				<table class="w-100 mb-3">
					<thead>
						<tr class="text-center">
							<td></td>
							<td>Description</td>
							<td>Quantité</td>
							<td>HT Unitaire</td>
							<td>TTC Unitaire</td>
							<td>Total TTC</td>
						</tr>
					</thead>
					<tbody id="product_list">
						{% if devis is defined %}
							{% for article in devis.getArticles() %}
								{% if article.isComposant() %}

									{% set compo = compoRepo.findOneByConcat(article.article.__toString()) %}
									{% include "reparations/templates/devisLine.html.twig" with { qte : article.quantite, tva :tva, id : loop.index, compo : compo} %}
									{% set compo = null %}
								{% elseif article.isPc() %}
									{% set pc =  pcRepo.findOneBy({'modele' : article.article.getModele() }) %}


									{% include "reparations/templates/devisLine.html.twig" with { qte : article.quantite,tva :tva, id : loop.index, pc : pc} %}

									{% set pc = null %}

								{% elseif article.isLaptop() %}
										{% set compo = laptopRepo.findOneByConcat(article.article.__toString()) %}
										{% include "reparations/templates/devisLine.html.twig" with { qte : article.quantite, tva :tva, id : loop.index, compo : compo} %}
										{% set compo = null %}
								{% else %}

									{% include "reparations/templates/devisLine.html.twig" with {presta : article.article, tva :tva, id : loop.index} %}

								{% endif %}
							{% endfor %}

						{% endif %}
					</tbody>
				</table>


				<a href="{{path('commande.devis',{submenu: 'all'})}}" class="btn btn-danger mb-5">Annuler</a>

				<button type="submit" class="btn btn-success mb-5">
					{% if devis is defined %}
						Modifier
					{% else %}
						Créer


					{% endif %}
				</button>


			</form>
		</div>

		{% include 'devis/commande/modals.html.twig' %}

		<script src="/js/commande.js"></script>
		<script>
			document.getElementById('infos').innerHTML = document.getElementById('infos').innerHTML.trim();
		</script>
	</div>
{% endblock %}