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

{% block title %}Nos membres | {{ parent() }}{% endblock %}

{% block body %}
	<div id="banner" class="container-fluid "
		style="background: url({{ asset('frontend/dist/assets/img/HOMEPAGE_2023.jpg') }})no-repeat center center; background-size:cover; ">
	</div>
	<div class="container">
		<div class="row">
			<div class="col-12">
				<h1 class="banner__title">Nos membres</h1>
				<div class="d-flex flex-column flex-lg-row justify-content-start align-items-center"></div>
			</div>
		</div>
	</div>
	<div class="container-fluid limit">
		<div class="container nos-membres">
			<section>
				<div class="row d-flex align-items-stretch mb-3">
					<div class="col-12" id="membres_filters">
						<div class="wrapper-filtre d-flex flex-column justify-content-between">
							<form class="formSearchMembre">
								<div class="form-row">
									<div class="col-12">
										<input class="form-control" type="text"
											placeholder="Chercher un membre par numéro IPI, nom de l'agent, nom de l'agence, code postal, ..."
											id="searchMember" name="searchMember">
										<input type="hidden" id="membre" name="membre" value="federia">
									</div>
								</div>
							</form>
							<div class="row">
								<div class="col-lg-8">
									<p class="filtre__label mt-0">Métiers</p>
									<div class="custom-control custom-checkbox custom-control-inline">
										<input type="checkbox" class="custom-control-input" attr-id="" id="type-Courtier" name="type[]" value="Courtier">
										<label class="custom-control-label" for="type-Courtier">Intermédiaire/Courtier</label>
									</div>
									<div class="custom-control custom-checkbox custom-control-inline">
										<input type="checkbox" class="custom-control-input" attr-id="" id="type-Syndic" name="type[]" value="Syndic">
										<label class="custom-control-label" for="type-Syndic">Syndic</label>
									</div>
									<div class="custom-control custom-checkbox custom-control-inline">
										<input type="checkbox" class="custom-control-input" attr-id="" id="type-Régisseur" name="type[]" value="Régisseur">
										<label class="custom-control-label" for="type-Régisseur">Régisseur</label>
									</div>
								</div>
								<div class="col-lg-4 d-flex justify-content-end align-items-end mt-3 mt-lg-0">
									<button class="btn btn-primary" id="btn-searchMember">Rechercher</button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row d-flex justify-content-between">
					<div class="col-lg-12 order-2 order-lg-1 text-left mb-3">
						<span class="btn btn-primary btn-sm" id="showmap">
							<i class="fas fa-map-marker-alt"></i>
							<span id="text_show_hide_map">Voir la carte</span>
						</span>
					</div>
				</div>
				<div class="row d-flex justify-content-between">
					<script src="{{ asset('frontend/polyfill.io/v3/polyfill.min2174.js') }}?features=default"></script>
					<div id="map_box" class="col-lg-12" style="min-height: 450px;margin-bottom:15px;display:none;">
						<div id="map" style="height: 100%;"></div>
					</div>
					<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBdtDjPp-GB3pLUHO2bcOdRnza310-pHhM&amp;callback=initMap&amp;libraries=&amp;v=weekly" async></script>
					<script>
						const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
						let labelIndex = 0;

						function initMap() {
							const BruxellesCenter = { lat: 50.85045, lng: 4.34878 };
							const map = new google.maps.Map(document.getElementById("map"), {
								zoom: 12,
								center: BruxellesCenter,
							});
							google.maps.event.addListener(map, "click", (event) => {
								addMarker(event.latLng, map);
							});
						}

						function addMarker(location, map) {
							new google.maps.Marker({
								position: location,
								label: labels[labelIndex++ % labels.length],
								map: map,
							});
						}
					</script>
					<div class="col-lg-12 order-2 order-lg-1" id="mix_membres">
						<div class="row">
							<div class="col-lg-4 article " data-id="1241">
								<div class="card membre match-height">
									<div class="card-header">
										<div class="membre__img">
											<img width="80px" src="https://www.federia.immo/dist/assets/img/logo-federia-bw.svg" alt="Federia logo">
										</div>
										<div class="membre__info">
											<p class="membre__name">Maxime <b>ABSIL</b></p>
											<p class="membre__societe">Absil Immobiliere</p>
											<p class="membre__ipi">N° IPI: <b>508332</b></p>
											<p>
												<a href="nos-membres71db.html?search_type=courtier" class="badge">Courtier</a>
											</p>
										</div>
									</div>
									<div class="card-body">
										<div class="row">
											<div class="col-2">
												<img src="https://www.federia.immo/dist/assets/img/icons/email.svg" width="19px" alt="">
											</div>
											<div class="col-10 pl-0">
												<p class="request_email" data-id="1241" data-token="7a9b7644abb84c6a045e270137f786b0">Voir email</p>
											</div>
										</div>
										<div class="row my-3">
											<div class="col-2">
												<img src="https://www.federia.immo/dist/assets/img/icons/laptop.svg" width="21px" alt="">
											</div>
											<div class="col-10 pl-0">
												<a href="https://www.absil-immobiliere.com/" target="_blank">www.absil-immobiliere.com/</a>
											</div>
										</div>
										<div class="row">
											<div class="col-2">
												<img src="https://www.federia.immo/dist/assets/img/icons/location-point.svg" width="15px" alt="">
											</div>
											<div class="col-10 pl-0">
												Rue Emile Vandervelde 58</br>4500 Ben-Ahin
											</div>
										</div>
										<div class="row mt-3">
											<div class="col-6 text-left"></div>
											<div class="col-6 text-right"></div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 article " data-id="1380">
								<div class="card membre match-height">
									<div class="card-header">
										<div class="membre__img">
											<img width="80px" src="https://www.federia.immo/dist/assets/img/logo-federia-bw.svg" alt="Federia logo">
										</div>
										<div class="membre__info">
											<p class="membre__name">Jean-Jacques dit John <b>AENDEKERK</b></p>
											<p class="membre__societe">ADK SYNDIC</p>
											<p class="membre__ipi">N° IPI: <b>100022</b></p>
											<p>
												<a href="nos-membres7481.html?search_type=syndic" class="badge">Syndic</a>
											</p>
										</div>
									</div>
									<div class="card-body">
										<div class="row">
											<div class="col-2">
												<img src="https://www.federia.immo/dist/assets/img/icons/email.svg" width="19px" alt="">
											</div>
											<div class="col-10 pl-0">
												<p class="request_email" data-id="1380" data-token="7a9b7644abb84c6a045e270137f786b0">Voir email</p>
											</div>
										</div>
										<div class="row my-3">
											<div class="col-2">
												<img src="https://www.federia.immo/dist/assets/img/icons/laptop.svg" width="21px" alt="">
											</div>
											<div class="col-10 pl-0">
												<a href="http://www.adksyndic.com/" target="_blank">www.adksyndic.com</a>
											</div>
										</div>
										<div class="row">
											<div class="col-2">
												<img src="https://www.federia.immo/dist/assets/img/icons/location-point.svg" width="15px" alt="">
											</div>
											<div class="col-10 pl-0">
												Rue des Fories 2</br>4020 Liège
											</div>
										</div>
										<div class="row mt-3">
											<div class="col-6 text-left"></div>
											<div class="col-6 text-right">
												<img class="logoAbsa" src="https://www.federia.immo/dist/assets/img/Federia-Logo-Syndic-Horizontal-RVB.svg" alt="Logo Federia Syndic">
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<nav id="paginations" aria-label="Page navigation example">
							<ul class="pagination justify-content-center list-unstyled"></ul>
						</nav>
					</div>
					<div class="col-lg-4 order-1 order-lg-2"></div>
			</section>
		</div>
	</div>
	<div class="modal fade" id="ModalAcp" tabindex="-1" aria-labelledby="ModalAcpLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="ModalAcpLabel">Offres pour ACP</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<div id="alerteModalAcp" class="alert" style="display: none;"></div>
					<form action="#" id="formOffre">
						<div class="row">
							<div class="form-group col-12 col-sm-6">
								<label for="Nom">Nom *</label>
								<input type="text" class="form-control" id="Nom" name="Nom" required>
							</div>
							<div class="form-group col-12 col-sm-6">
								<label for="Prenom">Prénom *</label>
								<input type="text" class="form-control" id="Prenom" name="Prenom" required>
							</div>
							<div class="form-group col-12 col-sm-8">
								<label for="Adresse">Adresse *</label>
								<input type="text" class="form-control" id="Adresse" name="Adresse" required>
							</div>
							<div class="form-group col-12 col-sm-4">
								<label for="Cp">Code Postal *</label>
								<input type="text" class="form-control" id="Cp" name="Cp" required>
							</div>

							<div class="form-group col-12">
								<label for="Localite">Localité *</label>
								<input type="text" class="form-control" id="Localite" name="Localite" required>
							</div>

							<div class="form-group col-12">
								<label for="Email">Email *</label>
								<input type="email" class="form-control" id="Email" name="Email" required>
							</div>

							<div class="form-group col-12">
								<label for="Tel">Téléphone *</label>
								<input type="text" class="form-control" id="Tel" name="Tel" required>
							</div>

							<div class="form-group col-12">
								<label for="Nom_copro">Nom de la copropriété *</label>
								<input type="text" class="form-control" id="Nom_copro" name="Nom_copro" required>
							</div>

							<div class="form-group col-12">
								<label for="Adresse_copro">Adresse de la copropriété *</label>
								<input type="text" class="form-control" id="Adresse_copro" name="Adresse_copro"
									required>
							</div>

							<div class="form-group col-12">
								<label for="BCE">N° BCE *</label>
								<input type="text" class="form-control" id="BCE" name="BCE" required>
							</div>

							<div class="form-group col-12 col-sm-6">
								<label for="Nb_appart">Nombre d’appartements / bureaux / commerces *</label>
								<input type="number" min="0" step="1" class="form-control" id="Nb_appart"
									name="Nb_appart" required>
							</div>

							<div class="form-group col-12 col-sm-6">
								<label for="Nb_garage">Nombre de garages / emplacements de parking *</label>
								<input type="number" min="0" step="1" class="form-control" id="Nb_garage"
									name="Nb_garage" required>
							</div>

							<div class="form-group col-12 col-sm-6">
								<label for="Conciergerie">Conciergerie *</label>
								<div class="custom-control custom-radio">
									<input type="radio" id="customRadio1" name="Conciergerie" value="Oui"
										class="custom-control-input">
									<label class="custom-control-label" for="customRadio1">Oui</label>
								</div>
								<div class="custom-control custom-radio">
									<input type="radio" id="customRadio2" name="Conciergerie" value="Non"
										class="custom-control-input">
									<label class="custom-control-label" for="customRadio2">Non</label>
								</div>
							</div>

							<div class="form-group col-12 col-sm-6">
								<label for="Chaufferie">Type de chaufferie *</label>
								<div class="custom-control custom-radio">
									<input type="radio" id="customRadio3" name="Chaufferie" value="Commune" class="custom-control-input">
									<label class="custom-control-label" for="customRadio3">commune </label>
								</div>
								<div class="custom-control custom-radio">
									<input type="radio" id="customRadio4" name="Chaufferie" value="Individuelle" class="custom-control-input">
									<label class="custom-control-label" for="customRadio4">individuelle</label>
								</div>
							</div>

							<div class="form-group col-12 col-sm-6">
								<label for="Consommables">Consommables *</label>
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="customCheck1" name="Conso_gaz" value="1">
									<label class="custom-control-label" for="customCheck1">gaz </label>
								</div>
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="customCheck2" name="Conso_mazout" value="1">
									<label class="custom-control-label" for="customCheck2">mazout </label>
								</div>
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="customCheck3" name="Conso_elec" value="1">
									<label class="custom-control-label" for="customCheck3">électricité </label>
								</div>
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="customCheck4" name="Conso_autre" value="1">
									<label class="custom-control-label" for="customCheck4">autre </label>
								</div>
							</div>

							<div class="form-group col-12 col-sm-6">
								<label for="Eco_aucun">Economiseurs d’énergie *</label>
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="customCheck5" name="Eco_aucun" value="1">
									<label class="custom-control-label" for="customCheck5">aucun </label>
								</div>
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="customCheck6" name="Eco_solaire" value="1">
									<label class="custom-control-label" for="customCheck6">panneaux solaires </label>
								</div>
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="customCheck7"
										name="Eco_photo" value="1">
									<label class="custom-control-label" for="customCheck7">panneaux photovoltaïques
									</label>
								</div>
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="customCheck8"
										name="Eco_cogeneration" value="1">
									<label class="custom-control-label" for="customCheck8">cogénération </label>
								</div>
							</div>

							<div class="form-group col-12 col-sm-6">
								<label for="formGroupExampleInput2">Action judiciaire *</label>
								<div class="custom-control custom-radio">
									<input type="radio" id="customRadio5" name="Judiciaire" value="Oui"
										class="custom-control-input">
									<label class="custom-control-label" for="customRadio5">Oui</label>
								</div>
								<div class="custom-control custom-radio">
									<input type="radio" id="customRadio6" name="Judiciaire" value="Non"
										class="custom-control-input">
									<label class="custom-control-label" for="customRadio6">Non</label>
								</div>
							</div>

							<div class="form-group col-12 col-sm-6">
								<label for="formGroupExampleInput2">Êtes-vous membre d’un conseil de copropriété ?
									*</label>
								<div class="custom-control custom-radio">
									<input type="radio" id="customRadio7" name="Mb_copro" value="Oui"
										class="custom-control-input">
									<label class="custom-control-label" for="customRadio7">Oui</label>
								</div>
								<div class="custom-control custom-radio">
									<input type="radio" id="customRadio8" name="Mb_copro" value="Non"
										class="custom-control-input">
									<label class="custom-control-label" for="customRadio8">Non</label>
								</div>
							</div>
							<div class="form-group col-12">
								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="customCheck9"
										name="Privacy" value="1" required>
									<label class="custom-control-label" for="customCheck9">* Je déclare avoir pris
										connaissance et accepté les <a href="politique-de-confidentialite.html"
											target="_blank">Conditions liées à la Vie Privée</a>.</label>
								</div>

								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="customCheck10"
										name="RGPD_transmi" value="1" required>
									<label class="custom-control-label" for="customCheck10">* Je déclare être
										informé(e) que ma demande d’offre ACP sera transmise à tous les membres de
										Federia Syndic.</label>
								</div>

								<div class="custom-control custom-checkbox">
									<input type="checkbox" class="custom-control-input" id="customCheck11"
										name="RGPD_duree" value="1" required>
									<label class="custom-control-label" for="customCheck11">* Je déclare être
										informé(e) que les données à caractère privé liées à cette demande d’offre
										ACP seront conservées par Federia pour une durée de 3 mois et seront, passé
										ce délai, supprimées. </label>
								</div>
							</div>

							<div class="form-group col-12 col-sm-6">
								<input type="hidden" name="Check" value="">
								<!-- <input type="submit" class="btn btn-primary btn-block" value="Envoyer" /> -->
								<button type="button" class="btn btn-primary btn-block g-recaptcha"
									data-sitekey="6LeznNweAAAAAMhzTJ_DchWvz167-py-e2WJ9GaU" data-callback='onSubmit'
									data-action='submit'>Envoyer</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
{% endblock %}