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

{% block titre %}Edition de l'annonce :
	{{annonce.titre}}
{% endblock %}

{# {% form_theme form 'annonce/_collection.html.twig' %} #}
{% block body %}
<style>
	.image-preview-container {
    display: flex;  /* Use flexbox to display children in a row */
}

.image-preview {
    margin-right: 10px;  /* Add some space between images */
}
</style>
	<div class="container">
		<div class="container mt-4">
			<h1>Modifié annonce</h1>

			{{ form_start(form, {'attr': {'class': 'form'}}) }}

			{{ form_row(form.titre) }}
			{{ form_row(form.introduction) }}
			{{ form_row(form.description) }}
			{{ form_row(form.price) }}
			{{ form_row(form.adresse) }}
			{{ form_row(form.rooms) }}
			<div class="form-group  mb-2">
				<label class="form-label">Votre annonce contient:</label>
				<div class="d-flex flex-wrap">
					{% for key, label in form.conditions.vars.choices %}
						<div class="form-check form-check-inline">
							{{ form_widget(form.conditions[key], {'attr': {'class': 'form-check-input'}}) }}
							{{ form_label(form.conditions[key], {'label_attr': {'class': 'form-check-label'}}) }}
						</div>
					{% endfor %}
				</div>
			</div>
			<div class="form-group">
				{{ form_label(form.category) }}
				{{ form_widget(form.category) }}
			</div>

			<div class="form-group">
                {{ form_label(form.coverImage) }}
                {{ form_widget(form.coverImage, {'attr': {'class': 'form-control-file'}}) }}
                {{ form_errors(form.coverImage) }} 
                <img width="80" src="{{asset('/uploads/imagesAnnonce/'~annonce.coverImage)}}" alt="Existing Image">
                
            </div>

            {# Render the images field #}
           <div class="form-group">
				{{ form_label(form.images) }}
				{{ form_widget(form.images, {'attr': {'class': 'form-control-file', 'multiple': 'multiple'}}) }} <br>
				{{ form_errors(form.images) }} 

				{% if app.request.attributes.get('_route') == 'app_annonce_edit' %}
					<div class="image-preview-container">
						{% for image in annonce.images %}
							<div class="image-preview">
								<img src="{{ asset('/uploads/imagesAnnonce/'~image.path) }}" alt="" width="80">
								<a href="{{ path('annonces_delete_image', {id: image.id})}}" data-delete data-token="{{ csrf_token('delete' ~ image.id )}}"><i style="color: red;" class="fa fa-trash fa-2x"></i></a>
							</div>
						{% endfor %}
					</div>
				{% endif %}
			</div>

			<div class="form-group">
				{{ form_label(form.wilaya) }}
				{{ form_widget(form.wilaya) }}
			</div>

			<div class="form-group">
				{{ form_label(form.commune) }}
				{{ form_widget(form.commune) }}
			</div>

			<button type="submit" class="btn btn-primary mt-2 mb-2">
				<i class="fas fa-check"></i>
				Enregistrer les modifications</button>

			{{ form_end(form) }}
		</div>
	</div>
{% endblock %}

{% block javascripts %}
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="{{ asset('assets/js/rental.js') }}"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
	<script>
		window.onload = () => {
			// Gestion des boutons "Supprimer"
			let links = document.querySelectorAll("[data-delete]")
			
			// On boucle sur links
			for(link of links){
				// On écoute le clic
				link.addEventListener("click", function(e){
					// On empêche la navigation
					e.preventDefault()

					// On demande confirmation
					if(confirm("Voulez-vous supprimer cette image ?")){
						// On envoie une requête Ajax vers le href du lien avec la méthode DELETE
						fetch(this.getAttribute("href"), {
							method: "DELETE",
							headers: {
								"X-Requested-With": "XMLHttpRequest",
								"Content-Type": "application/json"
							},
							body: JSON.stringify({"_token": this.dataset.token})
						}).then(
							// On récupère la réponse en JSON
							response => response.json()
						).then(data => {
							if(data.success)
								this.parentElement.remove()
							else
								alert(data.error)
						}).catch(e => alert(e))
					}
				})
			}
		}
		wilaya = document.querySelector('#annonce_wilaya');
		const changeCommune = function (e) {
		commune = document.querySelector("#annonce_commune");
		options = document.querySelectorAll("#annonce_commune option");


		options.forEach(function (currentValue, index, arr) {
		currentValue.hidden = true;
		});
		options = document.querySelectorAll("#annonce_commune .wilaya_" + wilaya.value);
		options.forEach(function (currentValue, index, arr) {
		if (index === 0) {
		currentValue.selected = true;
		}
		currentValue.hidden = false;
		});
		if (options.length === 0) {
		commune.selectedIndex = -1;
		}
		}
		changeCommune(wilaya);
		wilaya.addEventListener('change', changeCommune);
	</script>
{% endblock %}