{% block javascripts %}
	<script src="/js/commande.js"></script>
{% endblock %}



{% block body %}
	{% if sav is defined %}
		{% set client = sav.commande.client %}
	{% else %} {% set client = cmd.client %}
	{% endif %}


	<div class="p-3 mb-5 absolute sav">
		{% if sav is defined %}
			{% set path = path('commande.sav.ticket.open',{id : sav.id}) %}
		{% endif %}
		{{form_start(form,{ action : path | default('') })}}
		<div class="shadow rounded w-25 p-3 d-flex justify-content-around  align-items-center mb-3">
			<img src="/img/tools.svg" alt="tools" width="40">
			<div class="fs-4 fw-bold">SAV</div>
		</div>
		<div class="shadow rounded p-3">
			<div class=" d-flex justify-content-between">
				<div>
					{% if sav is defined %}
						<span class=" fs-5">
						<b>Dernière modification :</b>


						{{sav.getDateUpdate()}}</span> {% endif %}

					<div class="m-3">
						<b>Numéro de commande :</b>
						<span>
						{% if sav is defined %}
							{{sav.commande.numero}}
						{% else %}
							{{cmd.numero}}
						{% endif %}
					</span>
					</div>
					{% if sav is defined %}
						<div class="m-3">
							<b>Numéro du SAV :</b>
							<span>
							{{ sav.numero }}</span>
						</div>
					{% endif %}
					<div class="m-3">
						{% if sav is defined %} {{sav.technicien.username}} {% else %} {{app.user.username}} {% endif %}
					</div>
				</div>


				<div class="text-end">
					{% if client.type == 'Particulier' %} {{client.civilite}} {% endif %} {{client}}
					<br> {{client.mail}}
					<br> {{client.telephone}}
					<br> {{client.rue}}
					<br> {{client.cp}} {{client.ville}}
				</div>
			</div>
			<div>


				<fieldset class="my-3">
					<legend>Problèmes :</legend>
					<div class="d-flex ">
						<select name="probleme" class="form-select" id="sav_ticket_probleme">

							{% for item in problemes %}
								<option value="{{item.getId()}}">{{item}}</option>
							{% endfor %}
						</select>
						<button type="button" id="addPbButton" class="btn btn-success mx-3" onclick="addPbToList('{{path('reparation.template')}}')"><img src="/img/check.svg" alt="check" width="30"></button>
						<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#createProblemeModal"><img src="/img/plus.svg" alt="plus" width="30"></button>
					</div>

					<div class="probleme_list container my-1">

						{% if sav is defined %} {% for pb in sav.getProbleme() %} {% include "reparations/templates/problemeLine.html.twig" with {value : pb.getDescription()} %} {% endfor %} {% endif %}


					</div>

				</fieldset>

			</div>

			<div class="my-3 pb-3 border-bottom">
				{{form_row(form.probleme_info)}}

			</div>
			<div class="my-3 pb-3 border-bottom d-flex">
				<div>
					{{form_row(form.images)}} {% if sav is defined %}
						<div class="d-flex my-3">
							{% for item in sav.getImages() %}
								<div class="d-flex flex-column align-items-center justify-items-center">
									<img src="/img/sav/{{item}}" alt="image" height="100">
									<a href="/img/sav/{{item}}" target="_blank">
										<img src="/img/eye.svg" alt="" width="20">Voir
									</a>
								</div>
							{% endfor %}
						</div>

					{% endif %}
				</div>

				<div>
					{{form_row(form.pj)}} {% if sav is defined %}
						<div class="d-flex my-3">
							{% for item in sav.getPj() %}
								<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('pj.remove',{id:item.id})}}','pj_{{item.id}}')"><img src="/img/trash.svg" alt="delete" width="20"></button>
									</div>
								</div>
							{% endfor %}
						</div>

					{% endif %}

				</div>
			</div>


			<div class="my-3 pb-3 border-bottom">
				{{form_row(form.echange_client)}}
			</div>
			<div class="my-3 pb-3 border-bottom">
				{{form_row(form.echange_boutique)}}
			</div>

			<div class="my-3 pb-3 border-bottom">


				<div class="d-flex align-items-center">
					<h5 class="me-3">Informations Techniques :</h5>


					{{form_row(form.diagnostic_date)}}</div>


				<div class=" container d-flex justify-content-around">
					<div>
						<h6>OCCT :</h6>
						<div class="d-flex mx-3">
							<div class="d-flex flex-column me-5">
								{% if sav is defined %} {% set occt = sav.getOcctCpu() %} {% endif %}

								<label for="cpu">CPU</label>
								<input type="text" class="form-control" name="cpu" value="{{occt.item}}">
								<label for="min_cpu">Min</label>
								<input type="text" class="form-control" name="min_cpu" value="{{occt.min}}">
								<label for="max_cpu">Max</label>
								<input type="text" class="form-control" name="max_cpu" value="{{occt.max}}">
							</div>
							<div class="d-flex flex-column">
								{% if sav is defined %} {% set occt = sav.getOcctGpu() %} {% endif %}


								<label for="cpu">GPU</label>
								<input type="text" class="form-control" name="gpu" value="{{occt.item}}">

								<label for="min_gpu">Min</label>
								<input type="text" class="form-control" name="min_gpu" value="{{occt.min}}">

								<label for="max_gpu">Max</label>
								<input type="text" class="form-control" name="max_gpu" value="{{occt.max}}">

							</div>

						</div>
					</div>
					<div>
						<h6>Crystal Disk Info :</h6>

						<div class="d-flex">
							<button type="button" class="btn btn-info me-3" onclick="addDisqueToSav('SSD','{{path('commande.sav.add.disque')}}')">Ajouter un SSD</button>

							<button type="button" class="btn btn-info" onclick="addDisqueToSav('HDD','{{path('commande.sav.add.disque')}}')">Ajouter un HDD</button>

						</div>

						<div id="disk_list">
							{% if sav is defined %} {% for item in sav.getDisques() %} {% include "utils/disque.html.twig" with {disque : item , name : item.getType() ~ '_' ~ loop.index} %} {% endfor %} {% endif %}

						</div>
					</div>

				</div>


			</div>

			<div class="d-flex justify-content-between">
				<div>
					<div class="d-flex align-items-center">
						<h5>Operations</h5>
						<button id="createOperationButton" class="btn btn-success mx-3" type="button" data-bs-toggle="modal" data-bs-target="#createOperationModal"><img src="/img/plus.svg" alt="plus"></button>
					</div>
					{{form_row(form.operations)}}

				</div>

				<div >
					{% if sav is defined  %}
						{{ render(path('information_table',{sav : sav.id})) }}

					{% endif %}

				</div>

			</div>


			<div class="d-flex justify-content-center">
				<a href="{{path('commande',{submenu : 'sav'})}}" class="btn btn-danger p-3 m-3">Annuler</a> {% if sav is defined %} {% if sav.isStatut('solved') %}
					<a href="{{path('commande.sav.update',{id : sav.id,status : 12})}}" class="btn bg-orange p-3 m-3">Ouvrir le ticket</a> {% else %}

					<a href="{{path('commande.sav.update',{id : sav.id,status : 11})}}" class="btn btn-success p-3 m-3">Resolu</a> {% endif %} {% endif %} {{form_row(form.submit)}} {% if sav is defined %}
				{% endif %}
			</div>
		</div>
		{{form_end(form)}}

	</div>

	{% if sav is defined %}
		{% include 'CRUD/information/modal.html.twig' with {informationFrom : informationForm} %}

	{% endif %}

	<!-- Modal Create Probleme-->
	<div class="modal fade" id="createProblemeModal" 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 probleme</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>

				<div class="modal-body">
					<label for="description">Description :</label>
					<input type="text" id="descrCreatePb" class="form-control">
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
					<button class="btn btn-success" data-bs-dismiss="modal" onclick="createPb('{{path('reparation.create.pb')}}')">Créer</button>
				</div>
			</div>
		</div>
	</div>

	<!-- Modal Create Operation-->
	<div class="modal fade" id="createOperationModal" 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 une operation</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					{{form_start(createOp)}} {{form_row(createOp.libelle)}}

					<div class="hide">
						{{ form_row(createOp.submit) }}
					</div>

					{{form_end(createOp)}}

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fermer</button>
					<button type="button" class="btn btn-success" id="createOperationButton" onclick="createOperation()" data-bs-dismiss="modal">Créer</button>


				</div>
			</div>
		</div>
	</div>
{% endblock %}