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

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

{% block body %}

	<div class="mb-5 absolute">
		<datalist id="client">
			{% for client in clients %}
				<option value="{{client}}">{{client}}</option>
			{% endfor %}
		</datalist>

		{{form_start(form)}}

		{% if rep is defined %}
			<button type="submit" class="btn btn-info" name="save" formtarget="_blank" value=" ">
				<img src="/img/printer.svg" alt="print" width="40">
				<span>Sauvegarder et Imprimer</span>
			</button>
		{% else %}
			<button type="submit" class="btn btn-info" name="save" formtarget="_blank" value=" ">

				<img src="/img/printer.svg" alt="print" width="40">
				<span>Créer et Imprimer</span>
			</button>
		{% endif %}

		<div class="my-3">
			<label for="client">Client :</label>
			<input type="text" name='client' id="input_client" class="form-control" autocomplete="off" required="required" list="client" {% if rep is defined %} value="{{rep.client}}" readonly {% elseif exist is defined %} value="{{exist}}" readonly {% endif %}>


		</div>


		<fieldset class="my-3">
			<legend>Equipements :</legend>
			<div class="container">{{form_row(form.materiel)}}
				{{form_row(form.equipement_2)}}
				{{form_row(form.equipement_3)}}
				{{form_row(form.equipement_4)}}</div>


		</fieldset>

		<div>

			<div class="d-flex justify-content-around">

				{{form_row(form.casier)}}
				{{form_row(form.lock_infos)}}

			</div>
			<hr>
			<div class="d-flex">
				<div>
					{{form_row(form.livraison)}}
					<div id="schedule_intervention" {% if rep is not defined or not rep.livraison %} style="display: none" {% endif %}>
						{% if rep is defined and not rep.livraison %}
							<button class="btn btn-success" type="button" data-bs-toggle="modal" data-id="{{ rep.id }}" data-bs-target="#addLivraisonAjax" >Ajouter une livraison</button>
						{% endif %}
					</div>

				</div>
				{% set class = "hide mx-5" %}
				{% if rep is defined  %}
					{% if  rep.livraisons is not empty %}
						{% set class = "mx-5" %}

					{% endif %}
					{% include 'CRUD/livraison/livraisonTable.html.twig' with {livraisons : rep.livraisons,item : rep} %}
				{% endif %}


			</div>

		</div>

		<hr>
		<fieldset class="my-3">
			<legend>Problèmes :</legend>
			<div class="d-flex ">
				{{form_row(form.probleme)}}
				<button type="button" 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 rep is defined %}
					{% for pb in rep.getProblemes %}
						{% include "reparations/templates/problemeLine.html.twig" with {value : pb.getDescription()} %}
					{% endfor %}
				{% endif %}
			</div>

		</fieldset>
		<hr>
		{{form_row(form.infos_sup)}}
		<hr>
		{{form_row(form.images)}}

		{% if rep is defined %}
			<div class="d-flex my-3">
				{% for item in rep.getImages() %}

					<div class="d-flex flex-column align-items-center justify-items-center" id="{{item}}">
						<img src="/img/reparation/{{item}}" alt="image" height="100">

						<div class="d-flex my-3 justify-content-center align-content-center">
							<div>
								<button class="btn btn-danger mx-3 " type="button" onclick="removeImg('{{path('reparation.remove.img')}}','{{rep.id}}','{{item}}')"><img src="/img/trash.svg" alt="delete" width="20"></button>
							</div>
							<div>
								<a href="/img/reparation/{{item}}" target="_blank">
									<img src="/img/eye.svg" alt="voir" width="30">
								</a>
							</div>
						</div>
					</div>
				{% endfor %}
			</div>

		{% endif %}


		<div class="d-flex mt-3 mb-5">
			<a href="{{path('reparations',{submenu:'all'})}}" class="btn btn-danger mx-3">Annuler</a>
			{{form_row(form.submit)}}</div>

		{{form_end(form)}}


	</div>

	<!-- 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>

	{% include 'reparations/templates/modals.html.twig' %}
	
	<script src="/js/reparation.js"></script>
	{% if rep is defined  %}
		<script>
			document.getElementById('new_reparation_livraison_0').addEventListener('click', (e) => {

				let schedule = document.getElementById('schedule_intervention');

				schedule.style.display = 'block';


			});
			document.getElementById('new_reparation_livraison_1').addEventListener('click', (e) => {

				let schedule = document.getElementById('schedule_intervention');


				schedule.style.display = 'none';


			});
		</script>
	{% endif %}

{% endblock %}