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

{% block title %}Annonces | {{ parent() }}{% endblock %}

{% block body %}
	{% if sectionAnnonce %}
		<div id="banner" class="container-fluid"
			style="background: url({{ vich_uploader_asset(sectionAnnonce, 'imageFile') }})no-repeat center center; background-size:cover; ">
		</div>
		{% else %}
		<div id="banner" class="container-fluid"
			style="background: url({{ asset('frontend/dist/assets/img/banner.jpeg') }})no-repeat center center; background-size:cover; ">
		</div>
	{% endif %}
	<div class="container">
		<div class="row">
			<div class="col-12">
				<h1 class="banner__title">{{ sectionAnnonce ? sectionAnnonce.title : 'Annonces' }}</h1>
				<div class="d-flex flex-column flex-lg-row justify-content-start align-items-center">
					<p>
						{{ sectionAnnonce ? sectionAnnonce.content|raw : 'Annonces' }}
					</p>
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid limit">
		<div class="container annonces">
			<section>
				<div class="row d-flex justify-content-between">
					<div class="col-lg-7 order-2 order-lg-1" id="mix_blog">
						<div class="alert text-center" style="display: none;"></div>
						<!-- START WHILE ANNONCES -->
						{% for annonce in annonces %}
							<div class="card news mix article" data-id="204">
								<div class="news__text no-img">
									<div class="news__cat">
										<a href="#" class="badge bg-primary">Annonces</a>
									</div>
									<h3 class="card-title">
										<a href="#">{{ annonce.description }}</a>
									</h3>
									<div class="card-text">
										<div class="row">
											<div class="col-lg-3">
												<p>{{ annonce.createdAt|date('d/m/Y') }}</p>
											</div>
											<div class="col-lg-6">
												<p>{{ annonce.title }} </p>
											</div>
											<div class="col-lg-3 text-right">
												<a href="#" class="card-link" onclick='gtag("event", "detail_annonce", { titre_annonce: "Recherche agent immobilier agréé IPI pour ses activités de courtage et régie (gestion patrimoniale)"});'>En savoir plus</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						{% endfor %}
					</div>
					<div class="col-lg-4 order-1 order-lg-2" id="annonces_filters">
						<div class="wrapper-filtre">
							<h6 class="filtre__title">Filtrer les annonces</h6>
							<div class="formSearchAnnonces">
								<div class="input-group">
									<input class="form-control py-2 border-right-0 border" type="text" placeholder="Chercher dans nos annonces" id="searchAnnonces" name="searchAnnonces">
									<input type="hidden" id="Annonces" name="Annonces" value="annonces">
									<span class="input-group-append">
										<button class="btn btn-outline-secondary border-left-0 border" type="submit">
											<i class="fa fa-search"></i>
										</button>
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
		</div>
	</div>
	<div class="modal fade" id="ModalAlert" tabindex="-1" aria-labelledby="ModalAlertLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="ModalAlertLabel">
						<i class="fas fa-bell mr-3"></i>Créer une alerte e-mail
					</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<p>Recevez un email chaque fois qu’une nouvelle annonce correspond à vos critères de recherches</p>
					<form action="#" id="formAlert">
						<div class="form-group">
							<label for="formAlert-email">Email *</label>
							<input type="email" class="form-control" id="formAlert-email" name="formAlert-email" required>
						</div>
						<div class="form-group">
							<label for="formAlert-recherche">Nom de la recherche *</label>
							<input type="text" class="form-control" id="formAlert-recherche" name="formAlert-recherche" required>
						</div>
						<button type="submit" class="btn btn-primary">Créer mon alerte</button>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!-- Etudiant Modal -->
	{# <div class="modal fade" id="ModalEtudiant" tabindex="-1" aria-labelledby="ModalEtudiantLabel"
		aria-hidden="true">
		<div class="modal-dialog modal-xl">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="modal-annonceLabel">Vous recherchez un stage ?</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<p>Complétez les informations ci-dessous et votre recherche de stage sera diffusée sur notre page Annonces</p>
					<form id="form-stage">
						<div class="row d-flex justify-content-between">
							<div class="col-lg-8">
								<p><b>Détails de l'annonce</b></p>
								<div class="form-row">
									<div class="form-group col-12">
										<label for="Date_stage">Date souhaitée du début de stage *</label>
										<input type="date" class="form-control" id="Date_stage" name="Date_stage">
									</div>
								</div>
								<div class="form-row">
									<div class="form-group col-12">
										<label for="Duree_stage">Durée du stage souhaitée *</label>
										<input type="texte" class="form-control" id="Duree_stage" name="Duree_stage">
									</div>
								</div>
								<div class="form-row">
									<div class="form-group col-lg-8">
										<label for="Ecole_annonce">Institut/ Ecole *</label>
										<input type="text" class="form-control" id="Ecole_annonce" name="Ecole_annonce" required>
									</div>
									<div class="form-group col-lg-4">
										<label for="Annees_etudes_annonce">Année(s) d’étude(s) *</label>
										<input type="number" min="0" class="form-control" id="Annees_etudes_annonce" name="Annees_etudes_annonce" required>
									</div>
								</div>
								<div class="form-row mb-3">
									<div class="col-12">
										<p>Métier *</p>
										<div class="custom-control custom-checkbox custom-control-inline">
											<input type="checkbox" class="custom-control-input metier" id="Syndic" name="Metier[]" value="1">
											<label class="custom-control-label" for="Syndic">Syndic</label>
										</div>
										<div class="custom-control custom-checkbox custom-control-inline">
											<input type="checkbox" class="custom-control-input metier" id="Courtier" name="Metier[]" value="2">
											<label class="custom-control-label" for="Courtier">Courtier</label>
										</div>
										<div class="custom-control custom-checkbox custom-control-inline">
											<input type="checkbox" class="custom-control-input metier" id="Régisseur" name="Metier[]" value="3">
											<label class="custom-control-label" for="Régisseur">Régisseur</label>
										</div>
										<div class="custom-control custom-checkbox custom-control-inline">
											<input type="checkbox" class="custom-control-input metier" id="Autre" name="Metier[]" value="4">
											<label class="custom-control-label" for="Autre">Autre</label>
										</div>
									</div>
								</div>
								<div class="form-row">
									<div class="form-group col-12">
										<label for="Presentation">Nature de la recherche *</label>
										<textarea class="form-control" id="Presentation" name="Presentation" rows="3"></textarea>
									</div>
								</div>
								<div class="form-row">
									<div class="form-group col-12">
										<label for="Profil">Profil/compétences *</label>
										<textarea class="form-control" id="Profil" name="Profil" rows="3"></textarea>
									</div>
								</div>
								<div class="form-group">
									<div class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input" id="Rgpd" name="Rgpd">
										<label class="custom-control-label" for="Rgpd">
											Je marque expressément mon
											accord pour que les données personnelles que je partage sur le présent
											formulaire soient reprises <b>intégralement</b> sur la page « Annonces »
											du site internet de FEDERIA, afin que je puisse être <b>directement</b>
											contacté(e) par les personnes intéressées par mon annonce. Je déclare
											par ailleurs avoir pris connaissance de la <a href="politique-de-confidentialite.html" target="_blank">Charte Vie
												Privée de FEDERIA</a>. *
										</label>
									</div>
								</div>
								<div class="form-group">
									<div class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input" id="Rgpd2" name="Rgpd2">
										<label class="custom-control-label" for="Rgpd2">
											Je marque expressément mon
											accord pour que l’annonce que je publie sur la page « Annonces » du site
											Internet de FEDERIA par la soumission du présent formulaire soit
											également publiée dans le prochain numéro du magazine trimestriel
											FEDERIAMAG.
										</label>
									</div>
								</div>
								<div class="form-group">
									<div class="form-group col-12">
										<small>Tous les champs munis d'un astérisque sont obligatoires.</small>
									</div>
								</div>
								<div class="form-group">
									<div class="form-group col-12">
										<div id="alerte_annonce"></div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 border-left">
								<div class="form-group" style="display:none !important;">
									<label for="Date_publication">Date de publication *</label>
									<input type="date" class="form-control" id="Date_publication" name="Date_publication" value="2024-04-18" required>
								</div>
								<div class="form-group" style="display:none !important;">
									<label for="Date_fin_pub">Date de fin de publication *</label>
									<input type="date" class="form-control" id="Date_fin_pub" name="Date_fin_pub" value="2024-05-18" required>
								</div>
								<p>Région *</p>
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input zone" id="Bruxelles" name="Zone[]" value="1">
									<label class="custom-control-label" for="Bruxelles">Bruxelles</label>
								</div>
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input zone" id="Brabant Wallon" name="Zone[]" value="2">
									<label class="custom-control-label" for="Brabant Wallon">Brabant Wallon</label>
								</div>
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input zone" id="Hainaut" name="Zone[]" value="3">
									<label class="custom-control-label" for="Hainaut">Hainaut</label>
								</div>
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input zone" id="Liège" name="Zone[]" value="4">
									<label class="custom-control-label" for="Liège">Liège</label>
								</div>
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input zone" id="Luxembourg" name="Zone[]" value="5">
									<label class="custom-control-label" for="Luxembourg">Luxembourg</label>
								</div>
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input zone" id="Namur" name="Zone[]" value="6">
									<label class="custom-control-label" for="Namur">Namur</label>
								</div>
								<p class="mt-3"><b>Informations de contact</b></p>
								<div class="form-group">
									<div class="custom-control custom-switch">
										<input type="checkbox" class="	custom-control-input" id="MembreFederia_annonce" name="MembreFederia_annonce">
										<label class="custom-control-label" for="MembreFederia_annonce">Membre Federia ?</label>
									</div>
								</div>
								<div class="form-group">
									<label for="Nom_annonce">Nom *</label>
									<input type="text" class="form-control" id="Nom_annonce" name="Nom_annonce" required>
								</div>
								<div class="form-group">
									<label for="Prenom_annonce">Prénom *</label>
									<input type="text" class="form-control" id="Prenom_annonce" name="Prenom_annonce" required>
								</div>
								<div class="form-group">
									<label for="email_contact">Email *</label>
									<input type="text" class="form-control" id="Email_contact" name="Email_contact" value="" required>
								</div>
								<div class="form-group">
									<label for="tel_contact">Téléphone *</label>
									<input type="text" class="form-control" id="Tel_contact" name="Tel_contact" value="" required>
								</div>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button id="add-stage" type="button" class="btn btn-primary">Soumettre mon annonce</button>
				</div>
			</div>
		</div>
	</div> #}
{% endblock %}