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

{% block title %}Création d'une annonce
{% endblock %}


{% block body %}
	<style>
		label {
			font-size: 1.2rem;
			font-weight: 600;
		}
	</style>
	<div class "container">
		<div class="row">
			<div class="col-md-8 mx-auto">
				<div class="card">
					<div class="card-header">
						<label>Création d'une annonce</label>
					</div>
					<div class="card-body">
						{{ form_start(form) }}
						<form>
							<div class="row">
								<div class="col-6">
									<div class="mb-3">
										<label for="category" class="form-label">Catégorie</label>
										{{form_widget(form.category)}}
										{{ form_errors(form.category) }}
									</div>
								</div>
								<div class="col-6">
									<div class="mb-3">
										<label for="room" class="form-label">Nombre de pieces</label>
										{{form_widget(form.rooms)}}
										<span class="text-danger">{{form_errors(form.rooms)}}
										</span>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-6">
									<div class="mb-3">
										<label for="titre" class="form-label">Titre de l'annonce</label>
										{{form_widget(form.titre)}}
										<span class="text-danger">{{form_errors(form.titre)}}
										</span>
									</div>
								</div>
								<div class="col-6">
									<div class="mb-3">
										<label for="introduction" class="form-label">Introduction</label>
										{{form_widget(form.introduction)}}
										<span class="text-danger">{{form_errors(form.introduction)}}
										</span>
									</div>
								</div>
							</div>
							<div class="mb-3">
								<label for="description">Description</label>
								{{form_widget(form.description)}}
								<span class="text-danger">{{form_errors(form.description)}}

								</span>
							</div>
							<div class="row">
								<div class="col-6">
									<div class="mb-3">
										<label for="price" class="form-label">Prix par nuit</label>
										{{form_widget(form.price)}}
										<span class="text-danger">{{form_errors(form.price)}}
										</span>
									</div>
								</div>
								<div class="col-6">
									<div class="mb-3">
										<label for="adresse" class="form-label">adresse</label>
										{{form_widget(form.adresse)}}
										<span class="text-danger">{{form_errors(form.adresse)}}
										</span>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-lg-6">
									<div class="form-group">
                                        <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>
								<div class="col-6">
									<div class="mb-3">
										<label for="image" class="form-label">Image de couverture</label>
										{{ form_widget(form.coverImage) }}
										{{ form_errors(form.coverImage) }}
									</div>
								</div>
							</div>
							<div class="row">
								<div class="mb-3">
									<label for="Images">Images de l'annonces</label>
									{{form_widget(form.images)}}
									<span class="text-danger">{{form_errors(form.images)}}

									</span>
								</div>
							</div>
							<div class="row">
								<div class="col-6">
									<div class="mb-3">
										<label for="wilaya" class="form-label">wilaya</label>
										{{form_widget(form.wilaya)}}
										<span class="text-danger">{{form_errors(form.wilaya)}}
										</span>
									</div>
								</div>
								<div class="col-6">
									<div class="mb-3">
										<label for="commune" class="form-label">Commune</label>
										{{form_widget(form.commune)}}
										<span class="text-danger">{{form_errors(form.commune)}}
										</span>
									</div>
								</div>
							</div>
							<button type="submit" class="btn btn-primary">Envoyer</button>
						</form>
						{{ form_end(form) }}


					</div>
				</div>

			</div>
		</div>
	</div>
{% endblock %}
{% block javascripts %}
	<script>
		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 %}