document.addEventListener(‘DOMContentLoaded’, () => {
// 1. Source de données pour le tableau comparateur.
// Cette donnée est intégrée directement dans le script et ne nécessite pas d’appel API externe.
const originalData = [
{‘Catégorie’: ‘Sites Historiques 🏛️’, ‘Meilleur pour’: ‘Culture, histoire, exploration’, ‘Avantages en Juin’: ‘Climat doux, moins de foule, photos sublimes’, ‘Idéal pour’: ‘Adultes, amateurs d’histoire’, ‘À noter’: ‘Prévoir eau et chapeau’},
{‘Catégorie’: ‘Médinas Authentiques 🛍️’, ‘Meilleur pour’: ‘Shopping, immersion culturelle, gastronomie’, ‘Avantages en Juin’: ‘Températures agréables, ambiance authentique’, ‘Idéal pour’: ‘Tous les âges, curieux, gourmands’, ‘À noter’: ‘Négocier avec un sourire’},
{‘Catégorie’: ‘Plages Paradisiaques 🏖️’, ‘Meilleur pour’: ‘Détente, baignade, sports nautiques’, ‘Avantages en Juin’: ‘Eau chaude, peu de monde, beau temps’, ‘Idéal pour’: ‘Familles, couples, sportifs’, ‘À noter’: ‘Crème solaire indispensable’},
{‘Catégorie’: ‘Aventure Désertique 🐪’, ‘Meilleur pour’: ‘Dépaysement, paysages grandioses, excursions’, ‘Avantages en Juin’: ‘Chaleur gérable, ciel étoilé clair’, ‘Idéal pour’: ‘Aventuriers, photographes’, ‘À noter’: ‘Partir tôt ou tard, guide obligatoire’},
{‘Catégorie’: ‘Saveurs Tunisiennes 🌶️’, ‘Meilleur pour’: ‘Expérience culinaire, madagasikara.fr/entrepreneuriat-binational-naviguer-entre-la-france-et-madagascar/">marchés locaux’, ‘Avantages en Juin’: ‘Produits frais de saison, terrasses agréables’, ‘Idéal pour’: ‘Gastronomes, épicuriens’, ‘À noter’: ‘Goûter le couscous et les brik’}
];
let currentDisplayedData = […originalData]; // Données actuellement affichées (filtrées/triées)
let sortDirection = {}; // Objet pour stocker la direction de tri par colonne (ex: {‘Catégorie’: ‘asc’})
let activeDetailRow = null; // Référence à la ligne de détails actuellement ouverte
// 2. Références aux éléments du DOM
const tableBody = document.getElementById(‘comparisonTableBody’);
const searchInput = document.getElementById(‘searchInput’);
const tableHeaders = document.querySelectorAll(‘#tunisia-explorer-table-container thead th’);
const noResultsMessage = document.getElementById(‘noResults’);
// 3. Fonction pour rendre (afficher) le tableau
function renderTable(dataToRender) {
tableBody.innerHTML = ”; // Efface toutes les lignes existantes
activeDetailRow = null; // Ferme toute vue détaillée ouverte lors du re-rendu
// Gère l’affichage du message “aucun résultat”
if (dataToRender.length === 0) {
noResultsMessage.classList.remove(‘hidden’);
return;
} else {
noResultsMessage.classList.add(‘hidden’);
}
dataToRender.forEach((item) => {
// Création de la ligne principale du tableau
const row = document.createElement(‘tr’);
row.classList.add(‘bg-white’, ‘border-b’, ‘border-gray-100’, ‘hover:bg-gray-50’, ‘cursor-pointer’);
// Un identifiant unique pour cette ligne, utile pour la gestion de la vue détaillée
row.setAttribute(‘data-item-id’, item.Catégorie.replace(/s+/g, ‘-‘).toLowerCase());
// Clés des colonnes à afficher dans la vue principale du tableau
const displayKeys = [‘Catégorie’, ‘Meilleur pour’, ‘Avantages en Juin’, ‘Idéal pour’];
displayKeys.forEach(key => {
const cell = document.createElement(‘td’);
cell.classList.add(‘px-6’, ‘py-4’, ‘font-medium’, ‘text-gray-900’, ‘whitespace-normal’);
cell.textContent = item[key];
row.appendChild(cell);
});
// Attache un écouteur d’événements ‘click’ pour basculer la vue détaillée
row.addEventListener(‘click’, () => toggleDetailView(row, item));
tableBody.appendChild(row);
});
}
// 4. Fonction pour basculer l’affichage de la vue détaillée pour une ligne
function toggleDetailView(clickedRow, itemData) {
// ID unique pour la ligne de détail, basé sur l’ID de l’élément de la ligne principale
const detailRowId = `detail-${clickedRow.getAttribute(‘data-item-id’)}`;
const existingDetailRow = document.getElementById(detailRowId);
// Ferme la ligne de détail actuellement ouverte, s’il y en a une
if (activeDetailRow) {
activeDetailRow.remove();
const previouslyActiveRow = document.querySelector(‘.active-row’);
if (previouslyActiveRow) {
previouslyActiveRow.classList.remove(‘active-row’, ‘bg-indigo-100’);
}
activeDetailRow = null;
}
// Si la ligne cliquée correspond à la ligne dont le détail vient d’être fermé, on ne fait rien (on reste fermé)
if (existingDetailRow && existingDetailRow.id === detailRowId) {
return;
}
// Création de la nouvelle ligne de détail
const detailRow = document.createElement(‘tr’);
detailRow.id = detailRowId; // Attribue l’ID pour pouvoir la cibler
detailRow.classList.add(‘detail-row’, ‘bg-indigo-50’, ‘border-b’, ‘border-indigo-200’); // Style distinct
const detailCell = document.createElement(‘td’);
detailCell.setAttribute(‘colspan’, tableHeaders.length); // La cellule s’étend sur toutes les colonnes
detailCell.classList.add(‘px-6’, ‘py-4’);
// Contenu HTML de la vue détaillée, affichant toutes les informations de l’élément
detailCell.innerHTML = `
Détails pour : ${itemData.Catégorie}
Meilleur pour : ${itemData[‘Meilleur pour’]}
Avantages en Juin : ${itemData[‘Avantages en Juin’]}
{“@context”:”https://schema.org”,”@type”:”FAQPage”,”mainEntity”:[{“@type”:”Question”,”name”:”Quel est le meilleur moment pour voyager en Tunisie en juin ?”,”acceptedAnswer”:{“@type”:”Answer”,”text”:”Juin est idu00e9al car le climat est ensoleillu00e9 et chaud, parfait pour les plages et les activitu00e9s extu00e9rieures, mais sans l’extru00eame chaleur et la foule de la haute saison estivale. C’est le mois parfait pour explorer u00e0 la fois la culture et les cu00f4tes mu00e9diterranu00e9ennes de la Tunisie.”}},{“@type”:”Question”,”name”:”Faut-il ru00e9server les hu00e9bergements et activitu00e9s u00e0 l’avance pour un voyage en Tunisie en juin ?”,”acceptedAnswer”:{“@type”:”Answer”,”text”:”Oui, il est fortement recommandu00e9 de ru00e9server votre hu00e9bergement et certaines excursions, surtout celles dans le du00e9sert ou pour les sports nautiques. Bien que ce ne soit pas encore la pleine saison, les meilleures options partent vite, et une planification anticipu00e9e garantit un voyage plus serein et optimisu00e9.”}},{“@type”:”Question”,”name”:”Quels sont les incontournables u00e0 ne pas manquer lors d’une du00e9couverte de la Tunisie en juin ?”,”acceptedAnswer”:{“@type”:”Answer”,”text”:”Les incontournables incluent la visite des sites antiques de Carthage, El Jem et Dougga, une immersion dans les mu00e9dinas animu00e9es de Tunis et Sousse, la du00e9tente sur les plages d’Hammamet ou Djerba, et une aventure mu00e9morable dans le du00e9sert du Sahara au du00e9part de Douz. N’oubliez pas de savourer la du00e9licieuse cuisine locale pour complu00e9ter votre expu00e9rience.”}},{“@type”:”Question”,”name”:”Est-il possible de faire des activitu00e9s dans le du00e9sert tunisien en juin ?”,”acceptedAnswer”:{“@type”:”Answer”,”text”:”Absolument ! Juin est une pu00e9riode propice aux aventures du00e9sertiques. Il est conseillu00e9 de planifier les excursions tu00f4t le matin ou en fin d’apru00e8s-midi pour profiter de tempu00e9ratures plus douces. Les nuits u00e9toilu00e9es y sont particuliu00e8rement spectaculaires, offrant une expu00e9rience magique et inoubliable.”}}]}