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

{% block title %}Inventaire
{% endblock %}

{% block body %}
	<style>
		.file-list {
			margin-top: 20px;
		}
		.file-list li {
			margin-bottom: 10px;
		}
	</style>
	<div class="row justify-content-center">
		<div class="form-container-md">
			<h1>Inventaire</h1>
			{{ form_start(form, {'attr': {'class': 'form-inline', 'enctype': 'multipart/form-data'}}) }}
			<ul class="nav nav-tabs" id="myTab" role="tablist">
				<li class="nav-item" role="presentation">
					<button class="nav-link active" id="form-tab" data-bs-toggle="tab" data-bs-target="#form" type="button" role="tab" aria-controls="form" aria-selected="true">Généralités</button>
				</li>
				{% set pieces = inventory.pieces %}
				{% set equipments = inventory.equipments %}

				{% for piece in pieces %}
					{% set index = loop.index0 %}
					<li class="nav-item" role="presentation">
						<button class="nav-link" id="form{{ index }}-tab" data-bs-toggle="tab" data-bs-target="#form{{ index }}" type="button" role="tab" aria-controls="form{{ index }}" aria-selected="false">
							{{ piece.name }}
						</button>
					</li>
				{% endfor %}
				<li class="nav-item" role="presentation">
					{% set idx = pieces|length - 1 %}
					{% if (inventory.id) %}
						<span class="nav-link">
							<i class="bi bi-plus">
								<a href="{{ path('app_inventory_addpiece', {'id': inventory.id, 'idx': idx }) }}">Nouvelle pièce</a>
							</i>
						</span>
					{% endif %}
				</li>
			</ul>
			<div class="tab-content" id="myTabContent">
				<div class="tab-pane fade show active }}" id="form" role="tabpanel" aria-labelledby="form-tab">
					<div class="row mb-3">
						<div class="col-md-6">
							{{ form_row(form.type) }}
						</div>
					</div>
					<div class="row mb-3">
						<div class="col-md-6">
							{{ form_row(form.identifiant) }}
						</div>
					</div>
					<div class="row mb-3">
						<div class="col-md-6">
							{{ form_row(form.rental) }}
						</div>
					</div>
					<div class="row mb-3">
						<div class="col-md-12">
							<h5>Equipements</h5>
							<div id="newEquipField">
								{% for equipment in equipments %}
									{% set idx = loop.index0 %}
									<div id="group_equip{{ idx }}">
										<div class="row mb-3">
											<div class="col-md-2">
												<label class="form-label">Nom</label>
												<input type="text" class="form-control" id="equip" value="{{ equipment.name }}" name="equip[]"/>
											</div>
											<div class="col-md-2">
												<label class="form-label">Index</label>
												<input type="text" class="form-control" id="rel_index" value="{{ equipment.index }}" name="rel_index[]"/>
											</div>
											<div class="col-md-2">
												<label class="form-label">Numéro de série</label>
												<input type="text" class="form-control" id="rel_numserie" value="{{ equipment.num_serie }}" name="rel_numserie[]"/>
											</div>
											<div class="col-md-3">
												<label class="form-label">Fonctionnement</label>
												<input type="text" class="form-control" id="rel_fonctionnement" value="{{ equipment.fonctionnement }}" name="rel_fonctionnement[]"/>
											</div>
											<div class="col-md-3">
												<label class="form-label">Commentaire</label>
												<input type="text" class="form-control" id="rel_commentaire" value="{{ equipment.commentaire }}" name="rel_commentaire[]"/>
											</div>
										</div>
										<div class="d-flex justify-content-end">
											<button type="button" onclick="delEquip({{ idx }})" title="Supprimer cet équipement">
												<i class="bi bi-trash"></i>
											</button>
										</div>
									</div>
								{% endfor %}
							</div>
							{% set nbEquip = equipments|length %}
							<input type="hidden" id="fieldEquipIndex" value="{{ nbEquip }}">
							<button type="button" id="add-equip-btn" onclick="addEquip()">Ajouter un équipement</button>
						</div>
					</div>
					<div class="row mb-3">
						<div class="col-md-12">
							{{ form_row(form.observation,{'attr': {'rows': 8 }}) }}
						</div>
					</div>
					<div class="row mb-3">
						{{ form_row(form.files) }}
						<ul class="file-list" id="file-list"></ul>
						<button type="button" class="btn btn-secondary" onclick="addFiles()">Ajouter des photos</button>
						{% for photo_file in photo_files %}
							<div class="col-4">
								<img width="100%" src="{{ path('app_inventory_servefile', {'id':inventory.id,'filename':photo_file}) }}">
								<a href="{{ path('app_inventory_deletefile', {'id':inventory.id,'filename': photo_file}) }}" class="btn btn-danger btn-sm" onclick="return confirm('Voulez-vous vraiment supprimer ce fichier ?');">
									<i class="bi bi-trash" title="Supprimer"></i>
								</a>
							</div>
						{% endfor %}
					</div>
					{% for label, messages in app.flashes %}
						<div class="alert alert-{{ label }}">
							{% for message in messages %}
								<p>{{ message }}</p>
							{% endfor %}
						</div>
					{% endfor %}
				</div>
				{% for piece in pieces %}
					{% set i = loop.index0 %}
					<div class="tab-pane fade" id="form{{ i }}" role="tabpanel" aria-labelledby="form{{ i }}-tab">
						<h5>Nom de la pièce</h5>
						<button class="nav-link">
							<i class="bi bi-minus"></i>
							<a href="{{ path('app_inventory_delpiece', {'id': inventory.id, 'idx': i}) }}" onclick="return confirm('Voulez-vous vraiment supprimer cette pièce ?');">Supprimer la pièce</a>
						</button>
						<div class="mb-3">
							<input type="text" class="form-control" value="{{ piece.name }}" name="pieces[]"/>
						</div>
						<div id="newField{{ i }}">
							{% for mur in piece.murs %}
								{% set j = loop.index0 %}
								<div id="piece_elem-{{ i }}-{{ j }}">
									<div class="row mb-3">
										<div class="col-md-2">
											<label for="element-{{ i }}-{{ j }}" class="form-label">Élément</label>
											<input type="text" class="form-control" id="element-{{ i }}-{{ j }}" value="{{ mur.element }}" name="elements[{{ i }}][{{ j }}]"/>
										</div>
										<div class="col-md-2">
											<label for="revetement-{{ i }}-{{ j }}" class="form-label">Revêtement</label>
											<input type="text" class="form-control" id="revetement-{{ i }}-{{ j }}" value="{{ mur.revetement }}" name="revetements[{{ i }}][{{ j }}]"/>
										</div>
										<div class="col-md-4">
											<label for="usure-{{ i }}-{{ j }}" class="form-label">Usure</label>
											<input type="text" class="form-control" id="usure-{{ i }}-{{ j }}" value="{{ mur.usure }}" name="usures[{{ i }}][{{ j }}]"/>
										</div>
										<div class="col-md-4">
											<label for="comment-{{ i }}-{{ j }}" class="form-label">Commentaire</label>
											<input type="text" class="form-control" id="comment-{{ i }}-{{ j }}" value="{{ mur.comment }}" name="comments[{{ i }}][{{ j }}]"/>
										</div>
									</div>
									<div class="d-flex justify-content-end">
										<button type="button" onclick="delElem({{ i }},{{ j }})" title="Supprimer cet élément">
											<i class="bi bi-trash"></i>
										</button>
									</div>
								</div>
							{% endfor %}
						</div>
						{% set nbMurs = piece.murs|length %}
						<input type="hidden" id="fieldIndex{{ i }}" value="{{ nbMurs }}">
						<button type="button" id="add-field-btn{{ i }}" onclick="addElem({{ i }})">Ajouter un champ</button>
					</div>
				{% endfor %}
			</div>
			<button type="submit" class="btn btn-primary mt-3">Soumettre</button>
			{{ form_end(form) }}
		</div>
	</div>
	<script src="{{asset('assets/js/uploadfiles.js?v=1')}}"></script>
{% endblock %}