{"id":650,"date":"2025-04-03T21:30:07","date_gmt":"2025-04-03T19:30:07","guid":{"rendered":"https:\/\/preprod.proxi.systems\/lloyd\/?page_id=650"},"modified":"2025-05-08T23:28:57","modified_gmt":"2025-05-08T21:28:57","slug":"trouver-une-agence-informations","status":"publish","type":"page","link":"https:\/\/preprod.proxi.systems\/lloyd\/trouver-une-agence-informations\/","title":{"rendered":"Trouver une agence"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"650\" class=\"elementor elementor-650\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b87d147 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"b87d147\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-43004ad\" data-id=\"43004ad\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-59ebef4 elementor-align-left elementor-widget elementor-widget-pages-header\" data-id=\"59ebef4\" data-element_type=\"widget\" data-widget_type=\"pages-header.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\t\t\t\t<section class=\"page-title-section\" style=\"background-image: url(https:\/\/shtheme.com\/demosd\/insuren\/wp-content\/uploads\/2022\/09\/page-title-bg.jpg);\">\n\t\t\t\t\t<div class=\"container\">\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<div class=\"col-xl-12\">\n\t\t\t\t\t\t<div class=\"breadcrumb-area\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h2 class=\"page-title\">Trouver une Agence<\/h2>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ul class=\"breadcrumbs-link\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<li><a href=\"\">Accueil<\/a><\/li>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/section>\n\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f15c8ae elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"f15c8ae\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-dbe7551\" data-id=\"dbe7551\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6ea5b12 elementor-widget elementor-widget-agency_search_widget\" data-id=\"6ea5b12\" data-element_type=\"widget\" data-widget_type=\"agency_search_widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"search-layout-container\"><div class=\"search-filter-column\"><h4>Rechercher une agence<\/h4><form id=\"ajax-search-form\" style=\"margin-bottom: 20px;\"><input type=\"text\" id=\"search_query\" name=\"search_query\" placeholder=\"Nom, ville, adresse...\" style=\"padding: 10px; width: 100%; box-sizing: border-box; margin-bottom: 15px;\" class=\"search-input\"\/><div id=\"search_button\" class=\"nav-link nav-link-button\" style=\"cursor: pointer; width: 100%; margin-top: 5px; margin-bottom: 5px; \/* Autres styles inline si n\u00e9cessaires, mais privil\u00e9gier les classes du th\u00e8me *\/\">    <div class=\"nav-link-icon\">        <div class=\"nav-link-icon-arrow\">            <!-- Le contenu SVG\/ic\u00f4ne est g\u00e9n\u00e9ralement g\u00e9r\u00e9 par le CSS de votre th\u00e8me pour ces classes -->        <\/div>        <div class=\"nav-link-icon-background\"><\/div>    <\/div>    <div class=\"nav-link-text p-5 m-5\">Rechercher<\/div><\/div><\/form><div id=\"quick-results-list\" style=\"margin-top: 15px; max-height: 300px; overflow-y: auto; border: 1px solid #eee; padding: 5px;\"><\/div><\/div><div class=\"search-map-column\"><div id=\"map\" style=\"height: 500px; width: 100%;\"><\/div><\/div><\/div>             \n\n            <style>\n                .agency-card-content {\n                    font-family: Arial, sans-serif;\n                    line-height: 1.6;\n                }\n                .search-layout-container {\n                    display: flex;\n                    flex-wrap: wrap; \/* Allow wrapping on smaller screens if needed *\/\n                    gap: 20px;\n                }\n                .search-filter-column {\n                    flex: 1 1 300px; \/* Grow, shrink, basis 300px *\/\n                    min-width: 250px; \/* Minimum width before wrapping *\/\n                }\n                .search-map-column {\n                    flex: 2 1 60%; \/* Grow more, basis 60% *\/\n                    min-width: 300px;\n                    line-height: 1.6;\n                }\n                .agency-card-content .agency-name {\n                    color: #333;\n                    font-size: 1.2em;\n                    margin-bottom: 15px;\n                }\n                .agency-card-content .agency-detail {\n                    margin-bottom: 8px;\n                    font-size: 0.9em;\n                }\n                .agency-card-content .detail-label {\n                    font-weight: bold;\n                    color: #555;\n                }\n                .agency-card-content .detail-value {\n                    color: #777;\n                }\n                .agency-card-content .agency-map-link a {\n                    display: inline-block;\n                    margin-top: 10px;\n                    padding: 8px 12px;\n                    background-color: #0073aa;\n                    color: white;\n                    text-decoration: none;\n                    border-radius: 4px;\n                    font-size: 0.9em;\n                }\n                .agency-card-content .agency-map-link a:hover {\n                    background-color: #005a87;\n                }\n                 #search-results .loading-message,\n                 #search-results .no-results-message,\n                 #search-results .error-message {\n                    width: 100%;\n                    text-align: center;\n                    padding: 20px;\n                    font-size: 1.1em;\n                }\n                #pagination button.active-page {\n                    background-color: #0073aa;\n                    color: white;\n                    font-weight: bold;\n                }\n                \/* Les styles pour #search_button background-color et hover sont supprim\u00e9s pour laisser les classes du th\u00e8me agir *\/\n                 #ajax-search-form .search-input {\n                     border: 1px solid #ddd;\n                 }\n\n                .search-filter-column h4 {\n                 font-size: 1.3rem;\n                  margin-bottom: 1rem;\n                }\n\n                .search-filter-column p {\n                margin-bottom: 0.5rem;\n                }\n                #quick-results-list .quick-result-item {\n                    padding: 8px;\n                    border-bottom: 1px solid #f0f0f0;\n                    cursor: pointer;\n                    font-size: 0.9em;\n                }\n                #quick-results-list .quick-result-item:hover {\n                    background-color: #f5f5f5;\n                }\n                #quick-results-list .quick-result-item:last-child {\n                    border-bottom: none;\n                }\n            <\/style>\n                        <script>\n                document.addEventListener('DOMContentLoaded', function () {\n                    \/\/ const resultsContainer = document.getElementById('search-results'); \/\/ No longer used for listing cards\n                    \/\/ const paginationContainer = document.getElementById('pagination'); \/\/ No longer used\n                    const searchButton = document.getElementById('search_button');\n                    const quickResultsList = document.getElementById('quick-results-list');\n                    const searchQueryInput = document.getElementById('search_query');\n                    const mapContainer = document.getElementById('map'); \/\/ Add a map container\n\n                    \/\/ Initialize the map\n                    const map = L.map(mapContainer).setView([0, 0], 2); \/\/ Default center and zoom level\n\n                    \/\/ Add OpenStreetMap tiles\n                    L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n                        attribution: '&copy; <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a> contributors'\n                    }).addTo(map);\n\n                    let markers = [];\n                    let agencyMarkersMap = {}; \/\/ Pour stocker les marqueurs par un ID unique (ex: ORD)\n\n                    \/\/ Fetch results and update the map\n                    function fetchResults(page = 1, query = '') {\n                        \/\/ resultsContainer.innerHTML = '<p class=\"loading-message\">Chargement des r\u00e9sultats...<\/p>'; \/\/ No longer needed here\n                        const data = {\n                            action: 'ajax_search',\n                            search_query: query,\n                            page: page,\n                            file_path: '\/home\/jinfosj\/preprodpw\/lloyd\/wp-content\/uploads\/2025\/05\/Reseau-LLOYD-Mis-a-jour-2-3.csv'\n                        };\n\n                        const ajaxUrl = 'https:\/\/preprod.proxi.systems\/lloyd\/wp-admin\/admin-ajax.php';\n                        fetch(`${ajaxUrl}?action=ajax_search`, { \/\/ Ajout de action=ajax_search \u00e0 l'URL\n                            method: 'POST',\n                            headers: {\n                                'Content-Type': 'application\/json',\n                            },\n                            body: JSON.stringify(data),\n                        })\n                        .then(response => {\n                            if (!response.ok) {\n                                throw new Error('Network response was not ok');\n                            }\n                            return response.json();\n\n                        })\n                        .then(data => {\n                            \/\/ resultsContainer.innerHTML = ''; \/\/ No longer used for listing cards\n                            \/\/ paginationContainer.innerHTML = ''; \/\/ No longer used\n                            markers.forEach(marker => map.removeLayer(marker)); \/\/ Clear previous markers\n                            quickResultsList.innerHTML = ''; \/\/ Vider la liste rapide pr\u00e9c\u00e9dente\n                            markers = [];\n                            agencyMarkersMap = {};\n\n                            console.log('Received data from server:', data);\n                            if (data.success && data.data.results && data.data.results.length > 0) {\n                                data.data.results.forEach(result => {\n                                    console.log('Processing result for map:', result); \/\/ Log l'objet result entier\n                                    console.log('Latitude value:', result.latitude, 'Type:', typeof result.latitude);\n                                    console.log('Longitude value:', result.longitude, 'Type:', typeof result.longitude);\n\n                                    \/\/ G\u00e9rer les num\u00e9ros de mobile multiples\n                                    let mobileLinksHtml = 'N\/A';\n                                    if (result.MOBILE && result.MOBILE.trim() !== '') {\n                                        const mobileNumbers = result.MOBILE.split('\/');\n                                        mobileLinksHtml = mobileNumbers.map(num => {\n                                            const trimmedNum = num.trim();\n                                            if (trimmedNum) { \/\/ S'assurer que le num\u00e9ro n'est pas vide apr\u00e8s le trim\n                                                return `<a href=\"tel:${trimmedNum.replace(\/\\s+\/g, '')}\">${trimmedNum}<\/a>`; \/\/ Enlever les espaces pour le href\n                                            }\n                                            return '';\n                                        }).filter(link => link !== '').join(' \/ ');\n                                        if (!mobileLinksHtml) mobileLinksHtml = 'N\/A'; \/\/ Si tous les num\u00e9ros \u00e9taient invalides\n                                    }\n                                    \/\/ Add marker to the map\n                                    \/\/ Ajouter le lien \"Voir sur la carte\" et \"Obtenir l'itin\u00e9raire\" \u00e0 la popup\n                                    const popupContent = `\n                                        <div class=\"agency-card-content\" style=\"min-width: 250px;\">\n                                            <h3 class=\"agency-name\">${result.AGENCE || 'N\/A'}<\/h3>\n                                            <p class=\"agency-detail\"><span class=\"detail-label\">Adresse:<\/span> <span class=\"detail-value\">${result.ADRESSE || 'N\/A'}<\/span><\/p>\n                                            <p class=\"agency-detail\"><span class=\"detail-label\">T\u00e9l\u00e9phone:<\/span> <span class=\"detail-value\">${result.TEL ? `<a href=\"tel:${result.TEL.replace(\/\\s+\/g, '')}\">${result.TEL}<\/a>` : 'N\/A'}<\/span><\/p>\n                                            <p class=\"agency-detail\"><span class=\"detail-label\">Mobile:<\/span> <span class=\"detail-value\">${mobileLinksHtml}<\/span><\/p>\n                                            <p class=\"agency-detail\"><span class=\"detail-label\">Email:<\/span> <span class=\"detail-value\">${result['Adresse E-MAIL LLOYD'] ? `<a href=\"mailto:${result['Adresse E-MAIL LLOYD']}\">${result['Adresse E-MAIL LLOYD']}<\/a>` : 'N\/A'}<\/span><\/p>\n                                            <div class=\"agency-map-links\" style=\"margin-top: 10px;\">\n                                                ${result['Lien Maps'] ? `<a href=\"${result['Lien Maps']}\" target=\"_blank\" style=\"margin-right: 10px;\">Voir sur la carte Google<\/a>` : ''}\n                                                ${(result.latitude && result.longitude) ? `<a href=\"https:\/\/www.google.com\/maps\/dir\/?api=1&destination=${result.latitude},${result.longitude}\" target=\"_blank\">Obtenir l'itin\u00e9raire<\/a>` : ''}\n                                            <\/div>\n                                        <\/div>\n                                    `;\n\n                                    \/\/ Cr\u00e9er l'\u00e9l\u00e9ment pour la liste rapide\n                                    const listItem = document.createElement('div');\n                                    listItem.classList.add('quick-result-item');\n                                    listItem.innerHTML = `<strong>${result.AGENCE || 'N\/A'}<\/strong> (${result.Gouvernorat || 'N\/A'})`;\n                                    \n                                    if (result.latitude && result.longitude) {\n                                        console.log('Adding marker for:', result.AGENCE);\n                                        const marker = L.marker([parseFloat(result.latitude), parseFloat(result.longitude)]).addTo(map);\n                                        marker.bindPopup(popupContent); \/\/ Utiliser le contenu enrichi\n                                        markers.push(marker);\n                                        if (result.ORD) { \/\/ Utiliser ORD comme identifiant unique\n                                            agencyMarkersMap[result.ORD] = marker;\n                                        }\n\n                                        \/\/ Ajouter un \u00e9couteur de clic \u00e0 l'\u00e9l\u00e9ment de la liste rapide\n                                        listItem.addEventListener('click', function() {\n                                            map.setView([parseFloat(result.latitude), parseFloat(result.longitude)], 15); \/\/ Zoomer sur l'agence\n                                            if (result.ORD && agencyMarkersMap[result.ORD]) {\n                                                agencyMarkersMap[result.ORD].openPopup();\n                                            }\n                                        });\n                                    }\n                                    quickResultsList.appendChild(listItem);\n                                });\n                                \/\/ Pagination logic removed as cards are not listed anymore\n\n                                \/\/ Fit map to markers if any markers were added\n                                if (markers.length > 0) {\n                                    const group = new L.featureGroup(markers);\n                                    map.fitBounds(group.getBounds().pad(0.1)); \/\/ pad adds a little margin\n                                } else {\n                                     \/\/ If no markers, but results were expected, maybe show a default area\n                                     \/\/ Or if search query was specific and no markers, it means no geo-located results\n                                     \/\/ For now, if no markers, we keep the current view or a default Tunisia view\n                                     if (!query) { \/\/ If it was an initial load with no query\n                                        map.setView([34.0, 9.0], 6); \/\/ Default view for Tunisia\n                                     } else if (markers.length === 0) {\n                                        alert('Aucune agence trouv\u00e9e avec des coordonn\u00e9es pour cette recherche.');\n                                     }\n                                }\n                            } else {\n                                quickResultsList.innerHTML = '<p style=\"text-align:center; padding:10px;\">Aucun r\u00e9sultat.<\/p>';\n                                alert('Aucun r\u00e9sultat trouv\u00e9 pour cette recherche.'); \/\/ Use alert or a message area in filter column\n                                map.setView([34.0, 9.0], 6); \/\/ Default view for Tunisia if no results\n                            }\n                        })\n                        .catch(error => {\n                            console.error('Error:', error);\n                            alert('Une erreur est survenue lors de la r\u00e9cup\u00e9ration des r\u00e9sultats.');\n                        });\n                    }\n\n                    \/\/ Fetch default results on page load\n                    fetchResults();\n\n                    \/\/ Fetch results on search button click\n                    searchButton.addEventListener('click', () => {\n                        fetchResults(1, searchQueryInput.value);\n                    });\n\n                    \/\/ Fetch results on Enter key press in search input\n                    searchQueryInput.addEventListener('keypress', function (e) {\n                        if (e.key === 'Enter') {\n                            e.preventDefault(); \/\/ Prevent default form submission if it were a real form\n                            fetchResults(1, searchQueryInput.value);\n                        }\n                    });\n                });\n            <\/script>\n            \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Trouver une Agence Accueil Rechercher une agence Rechercher<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"static.php","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-650","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/preprod.proxi.systems\/lloyd\/wp-json\/wp\/v2\/pages\/650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/preprod.proxi.systems\/lloyd\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/preprod.proxi.systems\/lloyd\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/preprod.proxi.systems\/lloyd\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/preprod.proxi.systems\/lloyd\/wp-json\/wp\/v2\/comments?post=650"}],"version-history":[{"count":33,"href":"https:\/\/preprod.proxi.systems\/lloyd\/wp-json\/wp\/v2\/pages\/650\/revisions"}],"predecessor-version":[{"id":1850,"href":"https:\/\/preprod.proxi.systems\/lloyd\/wp-json\/wp\/v2\/pages\/650\/revisions\/1850"}],"wp:attachment":[{"href":"https:\/\/preprod.proxi.systems\/lloyd\/wp-json\/wp\/v2\/media?parent=650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}