{% set route_name = app.request.attributes.get('_route') %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{ 'header.headerDescription'|trans([],'header_page') }}">
<meta name="keywords" content="{{ 'header.headerKeyword'|trans([],'header_page') }}">
<meta name="author" content="Nkap Sarl">
<!-- Balise meta robots -->
<meta name="robots" content="index">
<!-- Balise meta revisit-after -->
<meta name="revisit-after" content="1 day">
<title>Ayila'a | {% block title %}{% endblock %}</title>
<link rel="icon" href="{{ asset('build/images/logo_LogoCercle.40dd8ea1.png') }}">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-HB2H04MNE9"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-HB2H04MNE9');
</script>
<!-- Google Tag Manager -->
<script>(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({'gtm.start':new Date().getTime(), event: 'gtm.js'});
var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-5W58P9R6');
</script>
<!-- End Google Tag Manager -->
<!-- GOOGLE WEB FONT -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!-- BASE CSS -->
<link href="{{ asset('assets/css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('assets/css/style.css') }}" rel="stylesheet">
<link href="{{ asset('assets/css/vendors.css') }}" rel="stylesheet">
<link href="{{ asset('assets/css/header.css') }}" rel="stylesheet">
<link href="{{ asset('assets/css/custom.css') }}" rel="stylesheet">
<link href="{{ asset('assets/css/my-style/style.css') }}" rel="stylesheet">
<link href="{{ asset('assets/css/autocomplete-results-search.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.2/css/all.css">
{# <link href="{{ asset('assets/css/all.min.css') }}" rel="stylesheet">#}
{# <link href="{{ asset('assets/css/font-awesome.min.css') }}" rel="stylesheet">#}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<!-- YOUR CUSTOM CSS -->
<style>
body{
width: 100%;
margin: 0 auto;
box-sizing: border-box;
}
.nav-class-elements {
color: black !important;
}
.icones-second-bar {
width: 35px;
}
@media (min-width: 1024px) {
.icones-second-bar {
width: 25px;
}
}
</style>
{% block stylesheet %}
{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
</head>
<body>
{% set user = AuthGuard() %}
{% set isAuthenticated = isAuth() %}
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5W58P9R6" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '405729078674868');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=405729078674868&ev=PageView&noscript=1" />
</noscript>
<!-- End Meta Pixel Code -->
<div id="toast-container" class="toast-top-right"></div>
<div id="page">
{% block header %}
{% include 'frontend/structure/header.html.twig' %}
{% endblock %}
<!-- /header -->
<main>
{% block body %}{% endblock %}
</main>
<!--/main-->
{% block footer %}
{% include 'frontend/structure/footer.html.twig' %}
{% endblock %}
<!--/footer-->
</div>
<!-- page -->
<!-- Sign In Popup -->
<div id="sign-in-dialog" class="zoom-anim-dialog mfp-hide">
<div class="small-dialog-header">
<h3>Sign In</h3>
</div>
<form>
<div class="sign-in-wrapper">
<a href="#0" class="social_bt facebook">Login with Facebook</a>
<a href="#0" class="social_bt google">Login with Google</a>
<div class="divider"><span>Or</span></div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="email" id="email">
<i class="icon_mail_alt"></i>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="password" id="password" value="">
<i class="icon_lock_alt"></i>
</div>
<div class="clearfix add_bottom_15">
<div class="checkboxes float-start">
<label class="container_check">Remember me
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="float-end mt-1"><a id="forgot" href="javascript:void(0);">Forgot Password?</a></div>
</div>
<div class="text-center"><input type="submit" value="Log In" class="btn_1 full-width"></div>
<div class="text-center">
Don’t have an account? <a href="register.html">Sign up</a>
</div>
<div id="forgot_pw">
<div class="form-group">
<label>Please confirm login email below</label>
<input type="email" class="form-control" name="email_forgot" id="email_forgot">
<i class="icon_mail_alt"></i>
</div>
<p>You will receive an email containing a link allowing you to reset your password to a new preferred
one.</p>
<div class="text-center"><input type="submit" value="Reset Password" class="btn_1"></div>
</div>
</div>
</form>
<!--form -->
</div>
<!-- /Sign In Popup -->
<div id="toTop" onclick="scrollToTop()"></div>
<script>
window.onscroll = function () {
scrollFunction();
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("toTop").style.display = "block";
} else {
document.getElementById("toTop").style.display = "none";
}
}
function scrollToTop() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<!-- Back to top button -->
<!-- COMMON SCRIPTS -->
<script src="{{ asset('assets/js/common_scripts.js') }}"></script>
<script src="{{ asset('assets/js/main.js') }}"></script>
<script src="{{ asset('assets/js/jquery-3.6.3.min.js') }}"></script>
{#<script src="{{ asset('assets/js/bootstrap.bundle.js') }}"></script>#}
{% block javascript %}
{% endblock %}
<script>
window.onscroll = function () {
scrollFunction()
};
function scrollFunction() {
var numero = document.getElementById("nav-numero")
var langue = document.getElementById("nav-langue")
if (numero === null || langue === null) {
return;
}
// Vérifie si l'utilisateur a fait défiler vers le bas
if (window.pageYOffset > 0) {
// Ajoute la classe "sticks" à la div
numero.classList.add("nav-class-elements");
langue.classList.add("nav-class-elements");
} else {
// Retire la classe "sticks" de la div
numero.classList.remove("nav-class-elements");
langue.classList.remove("nav-class-elements");
}
}
</script>
<script src="{{ asset('assets/js/header.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="{{ asset('assets/js/fontawesome.min.js') }}"></script>
<script src="//code.tidio.co/s9ka0c7yvmz5hlz1gh0addn7u7xo3esb.js" async></script>
<script>
$(document).ready(function () {
toastr.options = {
// "closeButton": true, // Afficher le bouton de fermeture
"progressBar": true, // Afficher une barre de progression
"positionClass": "toast-top-right", // Position des messages flash
"showDuration": "300", // Durée d'affichage en millisecondes
"hideDuration": "1000", // Durée de disparition en millisecondes
"timeOut": "5000", // Temps d'affichage avant la disparition automatique en millisecondes
"extendedTimeOut": "1000", // Temps d'affichage supplémentaire si l'utilisateur survole le message en millisecondes
"showEasing": "swing", // Animation d'affichage du message
"hideEasing": "linear", // Animation de disparition du message
"showMethod": "fadeIn", // Méthode d'affichage du message
"hideMethod": "fadeOut" // Méthode de disparition du message
};
});
</script>
{% for label, messages in app.flashes %}
{% for message in messages %}
{% if label == "success" %}
<script>
toastr.success('{{ message }}');
</script>
{% elseif label == "danger" %}
<script>
toastr.error('{{ message }}');
</script>
{% endif %}
{% endfor %}
{% endfor %}
{% block myscript %}
{% endblock %}
{#la section dedié à la recherche en utilisant autocomplete-results qui ne doit pas etre utiliser ailleur#}
<script>
const nameInput = document.querySelector('input[name="name"]');
const autocompleteNameResults = nameInput.parentNode.querySelector('.autocomplete-results');
const defaultImageUrl = "{{ asset('build/images/autres/1-600.c14c1b04.jpg') }}";
const cityInput = document.querySelector('input[name="city"]');
const addressInput = document.querySelector('input[name="address"]');
const autocompleteCityResults = cityInput.parentNode.querySelector('.autocomplete-results');
const autocompleteAddressResults = addressInput.parentNode.querySelector('.autocomplete-results');
var formId = document.getElementById("searchFormInput");
nameInput.addEventListener('input', function() {
const searchText = this.value;
if (searchText.length >= 3) {
fetch(search(searchText))
.then(response => response.json())
.then(data => {
autocompleteNameResults.innerHTML = '';
if (data['hydra:member']) {
data['hydra:member'].forEach(item => {
const li = document.createElement('li');
const a = document.createElement('a'); // Création d'une balise a
var REDIRECT_URL = "{{ path('app_services_attraction',{'id': 'attraction_id'})|escape('js') }}";
REDIRECT_URL = REDIRECT_URL.replace("attraction_id", item.id);
a.href = REDIRECT_URL; // Ajout de l'attribut href à la balise a
a.style.color = "black";
const imageUrl = item.url && item.url.length > 0 ? item.url : defaultImageUrl;
// Création d'une balise image avec l'URL dynamique
const image = document.createElement('img');
image.src = imageUrl;
image.alt = item.name;
image.style.width = 'auto';
image.style.borderRadius = '4px';
image.style.verticalAlign = 'middle';
image.style.maxHeight = '40px';
// Ajout de l'image et du texte dans le li
a.appendChild(image);
a.insertAdjacentHTML('beforeend', `<span>${item.name}</span>`);
li.appendChild(a);
autocompleteNameResults.appendChild(li);
});
// Afficher le bloc d'autocomplétion
autocompleteNameResults.style.display = 'block';
}
})
.catch(error => console.error('Erreur lors de la récupération des résultats d\'autocomplétion pour le nom :', error));
} else {
// Cacher le bloc d'autocomplétion si la longueur de la saisie est inférieure à 5
autocompleteNameResults.style.display = 'none';
}
});
// Fonction pour gérer l'autocomplétion de la ville (city)
cityInput.addEventListener('input', function() {
const searchText = this.value;
let cities = []; // Réinitialise le tableau à chaque nouvelle saisie
if (searchText.length >= 3) {
fetch(addressSearch(null, searchText))
.then(response => response.json())
.then(data => {
autocompleteCityResults.innerHTML = '';
if (data['hydra:member']) {
data['hydra:member'].forEach(item => {
let stateInfo = item.state != null ? `${item.state}, ` : '';
let city = `${stateInfo}${item.city}`;
// Vérifie si la ville existe déjà dans le tableau
if (!cities.includes(city)) {
const li = document.createElement('li');
li.textContent = city;
autocompleteCityResults.appendChild(li);
// Ajoute la ville au tableau
cities.push(city);
}
});
autocompleteCityResults.style.display = 'block';
}
})
.catch(error => console.error('Erreur lors de la récupération des résultats d\'autocomplétion pour la ville :', error));
} else {
autocompleteCityResults.style.display = 'none';
}
});
// Fonction pour gérer l'autocomplétion de l'adresse
addressInput.addEventListener('input', function() {
const searchText = this.value;
if (searchText.length >= 3) {
fetch(addressSearch(searchText))
.then(response => response.json())
.then(data => {
autocompleteAddressResults.innerHTML = '';
if (data['hydra:member']) {
data['hydra:member'].forEach(item => {
const li = document.createElement('li');
let neighborhoodInfo = item.neighborhood != null ? `${item.neighborhood}, ` : '';
li.textContent = `${neighborhoodInfo}${item.address}`;
autocompleteAddressResults.appendChild(li);
});
autocompleteAddressResults.style.display = 'block';
}
})
.catch(error => console.error('Erreur lors de la récupération des résultats d\'autocomplétion pour l\'adresse :', error));
} else {
autocompleteAddressResults.style.display = 'none';
}
});
// Event listener pour sélectionner une ville depuis les résultats d'autocomplétion
autocompleteCityResults.addEventListener('click', function(event) {
const clickedElement = event.target.closest('li');
if (clickedElement) {
cityInput.value = clickedElement.textContent;
autocompleteCityResults.innerHTML = '';
autocompleteCityResults.style.display = 'none';
}
});
// Event listener pour sélectionner une adresse depuis les résultats d'autocomplétion
autocompleteAddressResults.addEventListener('click', function(event) {
const clickedElement = event.target.closest('li');
if (clickedElement) {
addressInput.value = clickedElement.textContent;
autocompleteAddressResults.innerHTML = '';
autocompleteAddressResults.style.display = 'none';
}
});
autocompleteNameResults.addEventListener('click', function(event) {
const clickedElement = event.target.closest('li'); // Récupération de l'élément li le plus proche
if (clickedElement) {
const spanElement = clickedElement.querySelector('span'); // Sélection du span à l'intérieur de l'élément li
if (spanElement) {
nameInput.value = spanElement.textContent; // Récupération du texte du span
autocompleteNameResults.innerHTML = '';
autocompleteNameResults.style.display = 'none';
var newUrl = "{{ path('app_search_page') |escape('js') }}?name=" + encodeURIComponent(spanElement.textContent);
// window.location.replace(newUrl);
}
}
});
function search(name = null) {
var BASE_PATH = "{{ path('search_attraction_with_api',{'name': 'name_id'})|escape('js') }}";
BASE_PATH = BASE_PATH.replace("name_id", name);
return BASE_PATH;
}
function addressSearch(address = null, city = null, page = 1) {
// Définition des paramètres de recherche
let BASE_PATH = "";
// Ajout des paramètres non nuls
if (city != null){
BASE_PATH = "{{ path('search_address_city_with_api',{'city': 'city_id'})|escape('js') }}";
BASE_PATH = BASE_PATH.replace("city_id", city);
}
if (address != null){
BASE_PATH = "{{ path('search_address_neighborhood_with_api',{'address': 'address_id'})|escape('js') }}";
BASE_PATH = BASE_PATH.replace("address_id", address);
}
return BASE_PATH;
}
formId.addEventListener("submit", function(event) {
event.preventDefault(); // Empêche l'envoi du formulaire par défaut
var name = document.querySelector('input[name="name"]').value;
var city = document.querySelector('input[name="city"]').value;
var state = document.querySelector('input[name="city"]').value;
var address = document.querySelector('input[name="address"]').value;
var neighborhood = document.querySelector('input[name="address"]').value;
// console.log(typeof name.length,typeof city.length,typeof address.length)
if(name !== "" || city !== "" || address !== ""){
// Construction de la nouvelle URL
var newUrl = "{{ path('app_search_page') |escape('js') }}?name=" + encodeURIComponent(name) + "&city=" + encodeURIComponent(city) + "&state=" + encodeURIComponent(state) + "&address=" + encodeURIComponent(address) + "&neighborhood=" + encodeURIComponent(neighborhood);
// Redirection vers la nouvelle URL
window.location.replace(newUrl);
// window.location.href = newUrl;
}
});
document.addEventListener('click', function(event) {
const isClickInsideAutocomplete = autocompleteNameResults.contains(event.target)
|| autocompleteCityResults.contains(event.target)
|| autocompleteAddressResults.contains(event.target);
if (!isClickInsideAutocomplete) {
autocompleteNameResults.style.display = 'none';
autocompleteCityResults.style.display = 'none';
autocompleteAddressResults.style.display = 'none';
}
});
</script>
</body>
</html>