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

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

{% block body %}

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


	<div class="absolute ">

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

			<div id="heure_restante">
				<span>
					<b>Nombre d'heure restantes</b>
					:</span>
				<span>0</span>
				<span>H</span>
			</div>
		</div>


		{{form_start(form)}}

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

		</div>


		{{form_row(form.description)}}

		<div class="m-3 d-flex flex-column">

			<div><input type="radio" name="type" value="direct" id="direct" {% if intervention is defined and intervention.type=='direct' %} checked {% endif %}>
				<label for="direct">Intervention direct</label>
			</div>

			<div><input type="radio" name="type" value="diagnostique_sur_place" id="diagnostique_sur_place" {% if intervention is defined and intervention.type=='diagnostique_sur_place' %} checked {% endif %}>
				<label for="diagnostique_sur_place">Diagnostique sur place</label>
			</div>
			<div><input type="radio" name="type" value="retour_atelier" id="retour_atelier" {% if intervention is defined and intervention.type=='retour_atelier' %} checked {% endif %}>
				<label for="retour_atelier">Retour Atelier</label>
			</div>
		</div>

		<div id="reparation_infos" {% if intervention is defined and intervention.type == 'retour_atelier' %} class="show" {% endif %}>

			<fieldset>
				<legend>Equipements :</legend>


				<div>
					<label for="equipement_1">Equipement 1 :</label>
					<input type="text" name="equipement_1" class="form-control" {% if intervention is defined and intervention.reparation != null %} value="{{intervention.reparation.materiel}}" {% endif %}>
				</div>
				<div>
					<label for="equipement_1">Equipement 2 :</label>
					<input type="text" name="equipement_2" class="form-control" {% if intervention is defined and intervention.reparation != null %} value="{{intervention.reparation.getEquipement2}}" {% endif %}>
				</div>
				<div>
					<label for="equipement_1">Equipement 3 :</label>
					<input type="text" name="equipement_3" class="form-control" {% if intervention is defined and intervention.reparation != null %} value="{{intervention.reparation.getEquipement3}}" {% endif %}>
				</div>
				<div>
					<label for="equipement_1">Equipement 4 :</label>
					<input type="text" name="equipement_4" class="form-control" {% if intervention is defined and intervention.reparation != null %} value="{{intervention.reparation.getEquipement4}}" {% endif %}>
				</div>
				<div class="d-flex justify-content-between">
					<div>
						<label for="casier">Casier :</label>
						<input type="text" name="casier" class="form-control" {% if intervention is defined and intervention.reparation != null %} value="{{intervention.reparation.casier}}" {% endif %}>

					</div>
					{% if intervention is defined  and intervention.reparation is not null %}
						{% set lockinfo = intervention.reparation.getLockInfo() %}
					{% else %}
						{% set lockinfo = "" %}

					{% endif %}
					<div>
						<label for="lockInfos">Informations de verouillage :</label>
						<textarea type="text" name="lockInfos" class="form-control" rows="3" cols="50">{{lockinfo | trim}}</textarea>
					</div>
				</div>
			</fieldset>
			<hr>

			<div class="my-3">
				<label for="livraison">Livraison :</label>
				<input type="radio" name="livraison" value="oui" id="livraison_oui" {% if intervention is defined and intervention.reparation != null and intervention.reparation.livraison %} checked {% endif %}>
				<label for="livraison_oui">Oui</label>
				<input type="radio" name="livraison" value="non" id="livraison_non" {% if intervention is defined and intervention.reparation != null and not intervention.reparation.livraison %} checked {% endif %}>
				<label for="livraison_non">Non</label>

			</div>
			<hr>

			<div>
				<fieldset>
					<legend>Problèmes</legend>
					<div class="d-flex">
						<select name="problèmes" id="select_problemes" class="form-select w-50">
							{% for item in problemes %}
								<option value="{{item.id}}">{{item}}</option>
							{% endfor %}
						</select>
						<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 intervention is defined and intervention.reparation != null %}
							{% for pb in intervention.reparation.getProblemes() %}
								{% include "reparations/templates/problemeLine.html.twig" with {value : pb.getDescription()} %}
							{% endfor %}
						{% endif %}
					</div>
				</fieldset>
			</div>
			<hr>
			<div class="d-flex flex-column">
				{% set textareaValue = "" %}
				{% if intervention is defined and intervention.reparation != null  %}
					{% set textareaValue = intervention.reparation.getInfosSup | trim %}
				{% endif %}
				<label for="infos_sup">Informations Supplémentaires</label>
				<textarea name="infos_sup" id="infos_sup" cols="30" rows="10" class="form-control">{{textareaValue}}</textarea>
			</div>
		</div>

		<div class="my-3 d-flex align-items-center">
			{{form_row(form.distance)}}

			{{form_row(form.heure)}}


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

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

							<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('intervention.remove.img')}}','{{intervention.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>

		<div class="d-flex my-3">
			<a href="{{path('intervention',{submenu :'all'})}}" class="btn btn-danger">Annuler</a>
			<button type="submit" class="btn btn-success mx-3">
				{% if intervention is defined %}
					Modifier
				{% else %}

					Créer
				{% endif %}
			</button>
		</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>
	<script src='/js/intervention.js'></script>
	<script>
		document.getElementById('input_client').addEventListener('change', (e) => {


$.ajax({
method: "POST",
url: "{{ path('client.get.quota') }}",
data: {
ref: e.target.value
},
success: function (data) {
if (data != 'null') {
document.getElementById('heure_restante').children[1].innerHTML = data;
document.getElementById('heure_restante').style.display = 'block';
} else {
document.getElementById('heure_restante').style.display = 'none';

}
}
});
});

function getTxHeure() {
return {{ txHeure }};
}
function getTarifKm() {
return {{ tarifKm }};
}
	</script>

{% endblock %}