templates/search/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Munganyo - Recherche d'actes et publications{% endblock %}
  5. {% block body %}
  7. {# ================================================================
  8. MUNGANYO — Moteur Ibunas.IA
  9. CDC: 3 filtres obligatoires + enrichissement IA (Premium)
  10. Institutions, Chronologique, Type d'acte/annonces
  11. JS dynamique: debounce, AJAX, filter chips, autocomplete
  12. ================================================================ #}
  14. <!-- Hero Section Munganyo -->
  15. <section class="relative bg-gradient-to-br from-[#004d26] via-[#006633] to-[#008040] text-white overflow-hidden">
  16. <div class="absolute inset-0 opacity-10 pointer-events-none">
  17. <div class="absolute top-10 left-0 w-80 h-80 bg-white rounded-full blur-3xl"></div>
  18. <div class="absolute bottom-0 right-0 w-[30rem] h-[30rem] bg-[#00994d] rounded-full blur-3xl"></div>
  19. <!-- Pattern géométrique subtil -->
  20. <svg class="absolute inset-0 w-full h-full opacity-20" xmlns="http://www.w3.org/2000/svg">
  21. <pattern id="hex" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
  22. <path d="M20 2 L38 12 L38 28 L20 38 L2 28 L2 12 Z" fill="none" stroke="white" stroke-width="0.5"/>
  23. </pattern>
  24. <rect width="100%" height="100%" fill="url(#hex)" />
  25. </svg>
  26. </div>
  28. <div class="container mx-auto px-4 py-16 relative z-10">
  29. <div class="max-w-4xl mx-auto text-center">
  31. <!-- Badge moteur -->
  32. <div class="inline-flex items-center bg-white/15 backdrop-blur-sm rounded-full px-5 py-2 mb-5 border border-white/25">
  33. <span class="w-2 h-2 rounded-full bg-emerald-300 animate-pulse mr-2"></span>
  34. <span class="text-sm font-semibold tracking-wide">Moteur Ibunas.IA
  35. {% if isPremium is defined and isPremium %}
  36. <span class="ml-2 bg-amber-400 text-amber-900 text-xs font-bold px-2 py-0.5 rounded-full">PREMIUM</span>
  37. {% endif %}
  38. </span>
  39. </div>
  41. <h1 class="text-5xl md:text-6xl font-black mb-4 tracking-tight">
  42. Munganyo
  43. <span class="block text-2xl md:text-3xl font-light opacity-90 mt-2">Recherche avancée · Journal Officiel des Comores</span>
  44. </h1>
  45. <p class="text-white/80 mb-8 max-w-2xl mx-auto text-base leading-relaxed">
  46. Accédez à l'ensemble des textes juridiques, actes officiels et annonces légales publiés au Journal Officiel de l'Union des Comores.
  47. </p>
  49. <!-- Barre de recherche principale -->
  50. <div class="max-w-2xl mx-auto" id="hero-search-wrapper">
  51. <div class="relative">
  52. <i class="fas fa-search absolute left-5 top-1/2 -translate-y-1/2 text-gray-400 text-lg z-10"></i>
  53. <input
  54. type="text"
  55. id="main-search-input"
  56. name="q"
  57. value="{{ query|default('') }}"
  58. placeholder="Rechercher un décret, un arrêté, une annonce légale..."
  59. autocomplete="off"
  60. class="w-full pl-14 pr-36 py-5 text-gray-800 text-base rounded-full border-none shadow-2xl focus:outline-none focus:ring-4 focus:ring-[#006633]/40 transition-all duration-300"
  61. >
  62. <button id="hero-search-btn"
  63. class="absolute right-2 top-1/2 -translate-y-1/2 bg-gradient-to-r from-[#006633] to-[#008040] text-white px-6 py-2.5 rounded-full font-semibold hover:from-[#004d26] hover:to-[#006633] transition-all duration-300 shadow-md hover:shadow-lg">
  64. <span class="hidden md:inline"><i class="fas fa-arrow-right mr-1"></i> Rechercher</span>
  65. <span class="md:hidden"><i class="fas fa-arrow-right"></i></span>
  66. </button>
  67. <!-- Autocomplete dropdown -->
  68. <div id="autocomplete-dropdown"
  69. class="absolute top-full left-0 right-0 mt-2 bg-white rounded-2xl shadow-2xl border border-gray-100 hidden z-50 overflow-hidden">
  70. </div>
  71. </div>
  73. <!-- Suggestions rapides -->
  74. <div class="flex flex-wrap justify-center gap-2 mt-4">
  75. <span class="text-white/50 text-xs">Tendances :</span>
  76. {% for suggestion in ['Loi de finances', 'Décret nomination', 'Marché public', 'Acte foncier Moroni', 'Récépissé association'] %}
  77. <button type="button" class="quick-suggestion text-white/80 hover:text-white text-xs underline-offset-2 hover:underline transition">{{ suggestion }}</button>
  78. {% endfor %}
  79. </div>
  80. </div>
  82. <!-- Filtres rapides par type -->
  83. <div class="mt-8 flex flex-wrap justify-center gap-2" id="quick-type-filters">
  84. {% set quickTypes = [
  85. {val: '', label: 'Tous', icon: 'fa-layer-group'},
  86. {val: 'loi', label: 'Lois', icon: 'fa-gavel'},
  87. {val: 'decret', label: 'Décrets', icon: 'fa-file-signature'},
  88. {val: 'arrete', label: 'Arrêtés', icon: 'fa-clipboard-list'},
  89. {val: 'marche_public', label: 'Marchés publics', icon: 'fa-briefcase'},
  90. {val: 'acte_foncier', label: 'Foncier', icon: 'fa-map-marker-alt'},
  91. {val: 'enchere', label: 'Enchères', icon: 'fa-hammer'},
  92. ] %}
  93. {% for qt in quickTypes %}
  94. <button type="button"
  95. data-type="{{ qt.val }}"
  96. class="quick-type-btn px-4 py-2 rounded-full text-sm font-medium transition-all duration-200
  97. {% if (typeFilter is defined and typeFilter == qt.val) or (qt.val == '' and (typeFilter is not defined or typeFilter == '')) %}
  98. bg-white text-[#006633] shadow-lg
  99. {% else %}
  100. bg-white/20 text-white hover:bg-white/30 border border-white/20
  101. {% endif %}">
  102. <i class="fas {{ qt.icon }} mr-1 text-xs"></i> {{ qt.label }}
  103. </button>
  104. {% endfor %}
  105. </div>
  106. </div>
  107. </div>
  109. <div class="absolute bottom-0 left-0 right-0">
  110. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 80" class="w-full">
  111. <path fill="#f3f4f6" fill-opacity="1" d="M0,40L60,45C120,50,240,60,360,62C480,64,600,58,720,52C840,46,960,40,1080,42C1200,44,1320,54,1380,58L1440,62L1440,80L0,80Z"></path>
  112. </svg>
  113. </div>
  114. </section>
  117. <!-- ============================================================
  118. FILTRES AVANCÉS (CDC: 3 filtres officiels + 2 supplémentaires)
  119. ============================================================ -->
  120. <section class="py-8 bg-gray-50" id="filters-section">
  121. <div class="container mx-auto px-4">
  122. <div class="max-w-6xl mx-auto">
  124. <!-- Header filtres + toggle -->
  125. <div class="flex flex-wrap items-center justify-between gap-3 mb-4">
  126. <div class="flex items-center gap-3">
  127. <h2 class="text-sm font-bold text-gray-700 uppercase tracking-widest">
  128. <i class="fas fa-sliders-h text-[#006633] mr-2"></i> Affiner la recherche
  129. </h2>
  130. <!-- Compteur filtres actifs -->
  131. <span id="active-filters-count"
  132. class="hidden bg-[#006633] text-white text-xs font-bold px-2.5 py-1 rounded-full">
  133. 0
  134. </span>
  135. </div>
  136. <div class="flex items-center gap-3">
  137. <button id="toggle-filters-btn"
  138. class="flex items-center gap-2 text-sm text-gray-600 hover:text-[#006633] transition font-medium">
  139. <i class="fas fa-chevron-down transition-transform duration-300" id="toggle-filters-icon"></i>
  140. <span id="toggle-filters-label">Masquer les filtres</span>
  141. </button>
  142. <button id="reset-filters-btn"
  143. class="hidden text-sm text-red-500 hover:text-red-700 transition font-medium">
  144. <i class="fas fa-times-circle mr-1"></i> Réinitialiser
  145. </button>
  146. </div>
  147. </div>
  149. <!-- Chips des filtres actifs -->
  150. <div id="active-filter-chips" class="flex flex-wrap gap-2 mb-4 empty:hidden"></div>
  152. <!-- Panel des filtres -->
  153. <div id="filters-panel" class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden transition-all duration-300">
  155. <form id="advanced-search-form" class="p-5">
  156. <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
  158. <!-- FILTRE 1 : Institution émettrice (CDC) -->
  159. <div class="xl:col-span-2">
  160. <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">
  161. <i class="fas fa-landmark text-[#006633] mr-1"></i> Institution émettrice
  162. </label>
  163. <select name="institution" id="filter-institution"
  164. class="search-filter w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#006633]/40 bg-white">
  165. <option value="">Toutes les institutions</option>
  166. <optgroup label="🇰🇲 Union des Comores">
  167. <option value="presidence" {% if filters.institution is defined and filters.institution == 'presidence' %}selected{% endif %}>Présidence de l'Union</option>
  168. <option value="assemblee_nationale" {% if filters.institution is defined and filters.institution == 'assemblee_nationale' %}selected{% endif %}>Assemblée Nationale</option>
  169. <option value="sgg" {% if filters.institution is defined and filters.institution == 'sgg' %}selected{% endif %}>Secrétariat Général du Gouvernement</option>
  170. <option value="vice_presidence" {% if filters.institution is defined and filters.institution == 'vice_presidence' %}selected{% endif %}>Vice-Présidence</option>
  171. <option value="finances" {% if filters.institution is defined and filters.institution == 'finances' %}selected{% endif %}>Ministère des Finances</option>
  172. <option value="justice" {% if filters.institution is defined and filters.institution == 'justice' %}selected{% endif %}>Ministère de la Justice</option>
  173. <option value="interieur" {% if filters.institution is defined and filters.institution == 'interieur' %}selected{% endif %}>Ministère de l'Intérieur</option>
  174. <option value="sante" {% if filters.institution is defined and filters.institution == 'sante' %}selected{% endif %}>Ministère de la Santé</option>
  175. <option value="education" {% if filters.institution is defined and filters.institution == 'education' %}selected{% endif %}>Ministère de l'Éducation</option>
  176. <option value="transport" {% if filters.institution is defined and filters.institution == 'transport' %}selected{% endif %}>Ministère du Transport</option>
  177. <option value="agriculture" {% if filters.institution is defined and filters.institution == 'agriculture' %}selected{% endif %}>Ministère de l'Agriculture</option>
  178. <option value="travaux_publics" {% if filters.institution is defined and filters.institution == 'travaux_publics' %}selected{% endif %}>Ministère des Travaux Publics</option>
  179. <option value="autres_ministeres" {% if filters.institution is defined and filters.institution == 'autres_ministeres' %}selected{% endif %}>Autres ministères</option>
  180. </optgroup>
  181. <optgroup label="🏛 Gouvernorats">
  182. <option value="gouvernorat_ngazidja" {% if filters.institution is defined and filters.institution == 'gouvernorat_ngazidja' %}selected{% endif %}>Gouvernorat de Ngazidja (Grande Comore)</option>
  183. <option value="gouvernorat_anjouan" {% if filters.institution is defined and filters.institution == 'gouvernorat_anjouan' %}selected{% endif %}>Gouvernorat d'Anjouan (Ndzuani)</option>
  184. <option value="gouvernorat_moheli" {% if filters.institution is defined and filters.institution == 'gouvernorat_moheli' %}selected{% endif %}>Gouvernorat de Mohéli (Mwali)</option>
  185. </optgroup>
  186. <optgroup label="⚖ Juridictions">
  187. <option value="justice_cour_supreme" {% if filters.institution is defined and filters.institution == 'justice_cour_supreme' %}selected{% endif %}>Cour Suprême</option>
  188. <option value="justice_cour_appel" {% if filters.institution is defined and filters.institution == 'justice_cour_appel' %}selected{% endif %}>Cour d'Appel</option>
  189. </optgroup>
  190. </select>
  191. </div>
  193. <!-- FILTRE 2 : Chronologique (CDC) -->
  194. <div>
  195. <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">
  196. <i class="fas fa-calendar-alt text-[#006633] mr-1"></i> Période
  197. </label>
  198. <select name="period" id="filter-period"
  199. class="search-filter w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#006633]/40 bg-white">
  200. <option value="">Toutes périodes</option>
  201. {% for yr in 2026..2018 %}
  202. <option value="{{ yr }}" {% if filters.period is defined and filters.period == (yr~'') %}selected{% endif %}>{{ yr }}</option>
  203. {% endfor %}
  204. <option value="custom" {% if filters.period is defined and filters.period == 'custom' %}selected{% endif %}>Période personnalisée</option>
  205. </select>
  206. <!-- Dates personnalisées -->
  207. <div id="custom-dates-panel" class="mt-2 space-y-1.5 {% if filters.period is not defined or filters.period != 'custom' %}hidden{% endif %}">
  208. <input type="date" name="date_debut" id="filter-date-debut"
  209. value="{{ filters.date_debut|default('') }}"
  210. class="search-filter w-full border border-gray-200 rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#006633]/40">
  211. <input type="date" name="date_fin" id="filter-date-fin"
  212. value="{{ filters.date_fin|default('') }}"
  213. class="search-filter w-full border border-gray-200 rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#006633]/40">
  214. </div>
  215. </div>
  217. <!-- FILTRE 3 : Type d'acte / annonces (CDC) -->
  218. <div>
  219. <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">
  220. <i class="fas fa-file-alt text-[#006633] mr-1"></i> Type d'acte
  221. </label>
  222. <select name="type" id="filter-type"
  223. class="search-filter w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#006633]/40 bg-white">
  224. <option value="">Tous les types</option>
  225. <optgroup label="📋 Actes officiels">
  226. <option value="loi" {% if filters.type is defined and filters.type == 'loi' %}selected{% endif %}>Lois</option>
  227. <option value="decret" {% if filters.type is defined and filters.type == 'decret' %}selected{% endif %}>Décrets</option>
  228. <option value="arrete" {% if filters.type is defined and filters.type == 'arrete' %}selected{% endif %}>Arrêtés</option>
  229. <option value="circulaire" {% if filters.type is defined and filters.type == 'circulaire' %}selected{% endif %}>Circulaires</option>
  230. <option value="avis" {% if filters.type is defined and filters.type == 'avis' %}selected{% endif %}>Avis officiels</option>
  231. </optgroup>
  232. <optgroup label="📢 Annonces légales">
  233. <option value="marche_public" {% if filters.type is defined and filters.type == 'marche_public' %}selected{% endif %}>Marchés publics & DSP</option>
  234. <option value="acte_foncier" {% if filters.type is defined and filters.type == 'acte_foncier' %}selected{% endif %}>Réquisitions & actes fonciers</option>
  235. <option value="societe_rccm" {% if filters.type is defined and filters.type == 'societe_rccm' %}selected{% endif %}>Actes RCCM/OHADA (sociétés)</option>
  236. <option value="enchere" {% if filters.type is defined and filters.type == 'enchere' %}selected{% endif %}>Ventes aux enchères publiques</option>
  237. <option value="association" {% if filters.type is defined and filters.type == 'association' %}selected{% endif %}>Récépissés associations</option>
  238. </optgroup>
  239. </select>
  240. </div>
  242. <!-- FILTRE 4 : Statut juridique (CDC: En vigueur / Abrogé…) -->
  243. <div>
  244. <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">
  245. <i class="fas fa-balance-scale text-[#006633] mr-1"></i> Statut juridique
  246. </label>
  247. <select name="statut" id="filter-statut"
  248. class="search-filter w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#006633]/40 bg-white">
  249. <option value="">Tous statuts</option>
  250. <option value="en_vigueur" {% if filters.statut is defined and filters.statut == 'en_vigueur' %}selected{% endif %}>✅ En vigueur</option>
  251. <option value="modifie" {% if filters.statut is defined and filters.statut == 'modifie' %}selected{% endif %}>✏️ Modifié</option>
  252. <option value="abroge" {% if filters.statut is defined and filters.statut == 'abroge' %}selected{% endif %}>❌ Abrogé</option>
  253. <option value="suspendu" {% if filters.statut is defined and filters.statut == 'suspendu' %}selected{% endif %}>⏸️ Suspendu</option>
  254. <option value="remplace" {% if filters.statut is defined and filters.statut == 'remplace' %}selected{% endif %}>🔄 Remplacé</option>
  255. <option value="archive" {% if filters.statut is defined and filters.statut == 'archive' %}selected{% endif %}>📦 Archivé</option>
  256. </select>
  257. </div>
  258. </div>
  260. <!-- Ligne 2 : Territoire + tri + submit -->
  261. <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-4 pt-4 border-t border-gray-100">
  263. <!-- Territoire applicable (CDC) -->
  264. <div>
  265. <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">
  266. <i class="fas fa-map-marker-alt text-[#006633] mr-1"></i> Territoire applicable
  267. </label>
  268. <select name="territoire" id="filter-territoire"
  269. class="search-filter w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#006633]/40 bg-white">
  270. <option value="">Toute l'Union</option>
  271. <option value="union" {% if filters.territoire is defined and filters.territoire == 'union' %}selected{% endif %}>Union des Comores</option>
  272. <option value="ngazidja" {% if filters.territoire is defined and filters.territoire == 'ngazidja' %}selected{% endif %}>Grande Comore (Ngazidja)</option>
  273. <option value="anjouan" {% if filters.territoire is defined and filters.territoire == 'anjouan' %}selected{% endif %}>Anjouan (Ndzuani)</option>
  274. <option value="moheli" {% if filters.territoire is defined and filters.territoire == 'moheli' %}selected{% endif %}>Mohéli (Mwali)</option>
  275. <option value="moroni" {% if filters.territoire is defined and filters.territoire == 'moroni' %}selected{% endif %}>Moroni</option>
  276. <option value="mutsamudu" {% if filters.territoire is defined and filters.territoire == 'mutsamudu' %}selected{% endif %}>Mutsamudu</option>
  277. <option value="fomboni" {% if filters.territoire is defined and filters.territoire == 'fomboni' %}selected{% endif %}>Fomboni</option>
  278. </select>
  279. </div>
  281. <!-- Tri -->
  282. <div>
  283. <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">
  284. <i class="fas fa-sort text-[#006633] mr-1"></i> Trier par
  285. </label>
  286. <select name="sort" id="filter-sort"
  287. class="search-filter w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#006633]/40 bg-white">
  288. <option value="date_desc" {% if filters.sort is not defined or filters.sort == 'date_desc' %}selected{% endif %}>Date (récent → ancien)</option>
  289. <option value="date_asc" {% if filters.sort is defined and filters.sort == 'date_asc' %}selected{% endif %}>Date (ancien → récent)</option>
  290. <option value="pertinence" {% if filters.sort is defined and filters.sort == 'pertinence' %}selected{% endif %}>Pertinence</option>
  291. <option value="titre_asc" {% if filters.sort is defined and filters.sort == 'titre_asc' %}selected{% endif %}>Titre A → Z</option>
  292. </select>
  293. </div>
  295. <!-- Actions -->
  296. <div class="flex items-end gap-3">
  297. <button type="submit" id="apply-filters-btn"
  298. class="flex-1 bg-gradient-to-r from-[#006633] to-[#008040] text-white px-5 py-2.5 rounded-xl hover:from-[#004d26] hover:to-[#006633] transition shadow-md font-semibold text-sm">
  299. <i class="fas fa-search mr-2"></i> Appliquer
  300. </button>
  301. <a href="{{ path('app_search') }}"
  302. class="px-4 py-2.5 border border-gray-200 rounded-xl text-gray-500 hover:text-gray-700 hover:border-gray-300 transition text-sm font-medium">
  303. <i class="fas fa-undo-alt"></i>
  304. </a>
  305. </div>
  306. </div>
  307. </form>
  308. </div>
  309. </div>
  310. </div>
  311. </section>
  314. <!-- ============================================================
  315. ZONE DE RÉSULTATS
  316. ============================================================ -->
  317. <section class="py-10 bg-white min-h-[40vh]" id="results-section">
  318. <div class="container mx-auto px-4">
  319. <div class="max-w-6xl mx-auto">
  321. <!-- Barre de statut résultats -->
  322. <div id="results-status-bar" class="flex flex-wrap items-center justify-between gap-3 mb-6 {% if query is not defined or query is empty %}hidden{% endif %}">
  323. <div class="flex items-center gap-3">
  324. <!-- Spinner loading (caché par défaut) -->
  325. <div id="search-spinner" class="hidden">
  326. <svg class="animate-spin w-5 h-5 text-[#006633]" fill="none" viewBox="0 0 24 24">
  327. <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  328. <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
  329. </svg>
  330. </div>
  331. <h2 class="text-base font-bold text-gray-800" id="results-count-label">
  332. {% if query is defined and query is not empty %}
  333. <span id="count-number">{{ results|length }}</span> résultat(s) pour
  334. <em class="text-[#006633] not-italic font-black">"{{ query }}"</em>
  335. {% endif %}
  336. </h2>
  337. </div>
  339. <!-- Badge IA -->
  340. <div>
  341. {% if isPremium is defined and isPremium %}
  342. <div class="flex items-center gap-2 bg-gradient-to-r from-amber-50 to-yellow-50 border border-amber-200 text-amber-800 px-4 py-1.5 rounded-full text-sm font-semibold">
  343. <i class="fas fa-microchip text-amber-500"></i>
  344. Recherche enrichie Ibunas.IA activée
  345. </div>
  346. {% else %}
  347. <a href="{{ path('app_abonn') }}"
  348. class="flex items-center gap-2 bg-gray-50 border border-gray-200 text-gray-600 hover:border-[#006633] hover:text-[#006633] px-4 py-1.5 rounded-full text-sm font-medium transition">
  349. <i class="fas fa-lock text-xs"></i>
  350. Activer Ibunas.IA Premium
  351. </a>
  352. {% endif %}
  353. </div>
  354. </div>
  356. <!-- Liste des résultats (rendu SSR initial + remplacement AJAX) -->
  357. <div id="results-container">
  358. {% if query is defined and query is not empty %}
  359. {% if results is defined and results|length > 0 %}
  360. {% include '_partials/search_results_list.html.twig' with {results: results, isPremium: isPremium} %}
  361. {% else %}
  362. {% include '_partials/search_no_results.html.twig' with {query: query} %}
  363. {% endif %}
  364. {% else %}
  365. <!-- État d'accueil -->
  366. <div class="text-center py-16 bg-gradient-to-br from-gray-50 to-emerald-50/30 rounded-2xl border border-gray-100" id="welcome-state">
  367. <div class="w-20 h-20 bg-gradient-to-br from-[#006633] to-[#008040] rounded-2xl flex items-center justify-center mx-auto mb-5 shadow-lg">
  368. <i class="fas fa-search text-2xl text-white"></i>
  369. </div>
  370. <h2 class="text-2xl font-bold text-gray-800 mb-2">Que recherchez-vous ?</h2>
  371. <p class="text-gray-500 max-w-md mx-auto mb-6 text-sm">
  372. Textes législatifs, décrets présidentiels, arrêtés ministériels,
  373. marchés publics, actes fonciers… tout le Journal Officiel des Comores en un clic.
  374. </p>
  375. <div class="flex flex-wrap justify-center gap-3 text-xs text-gray-500">
  376. <span class="px-3 py-1.5 bg-white rounded-full shadow-sm border border-gray-100">
  377. <i class="fas fa-gavel text-purple-500 mr-1"></i> "Loi n°2026-…"
  378. </span>
  379. <span class="px-3 py-1.5 bg-white rounded-full shadow-sm border border-gray-100">
  380. <i class="fas fa-file-signature text-blue-500 mr-1"></i> "Décret nomination ministre"
  381. </span>
  382. <span class="px-3 py-1.5 bg-white rounded-full shadow-sm border border-gray-100">
  383. <i class="fas fa-map-marker-alt text-teal-500 mr-1"></i> "Actes fonciers Moroni"
  384. </span>
  385. <span class="px-3 py-1.5 bg-white rounded-full shadow-sm border border-gray-100">
  386. <i class="fas fa-briefcase text-emerald-500 mr-1"></i> "Appel d'offres travaux routiers"
  387. </span>
  388. </div>
  389. </div>
  390. {% endif %}
  391. </div>
  393. <!-- Pagination (rendu SSR + remplacé par AJAX) -->
  394. <div id="pagination-container">
  395. {% if totalPages is defined and totalPages > 1 %}
  396. <nav class="flex justify-center mt-8" aria-label="Pagination">
  397. <ul class="flex items-center gap-1">
  398. <li>
  399. <a href="{{ currentPage > 1 ? path('app_search', {page: currentPage - 1, q: query}) : '#' }}"
  400. class="flex items-center justify-center w-9 h-9 rounded-lg border border-gray-200 text-gray-500 hover:border-[#006633] hover:text-[#006633] transition text-sm {% if currentPage <= 1 %}opacity-40 pointer-events-none{% endif %}">
  401. <i class="fas fa-chevron-left text-xs"></i>
  402. </a>
  403. </li>
  404. {% for page in 1..totalPages %}
  405. {% if page == currentPage %}
  406. <li><span class="flex items-center justify-center w-9 h-9 rounded-lg bg-[#006633] text-white font-bold text-sm">{{ page }}</span></li>
  407. {% elseif page <= 3 or page >= totalPages - 2 or (page >= currentPage - 2 and page <= currentPage + 2) %}
  408. <li>
  409. <a href="{{ path('app_search', {page: page, q: query}) }}"
  410. class="flex items-center justify-center w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:border-[#006633] hover:text-[#006633] transition text-sm">
  411. {{ page }}
  412. </a>
  413. </li>
  414. {% elseif page == 4 and currentPage > 6 %}
  415. <li><span class="px-2 text-gray-400">…</span></li>
  416. {% elseif page == totalPages - 3 and currentPage < totalPages - 5 %}
  417. <li><span class="px-2 text-gray-400">…</span></li>
  418. {% endif %}
  419. {% endfor %}
  420. <li>
  421. <a href="{{ currentPage < totalPages ? path('app_search', {page: currentPage + 1, q: query}) : '#' }}"
  422. class="flex items-center justify-center w-9 h-9 rounded-lg border border-gray-200 text-gray-500 hover:border-[#006633] hover:text-[#006633] transition text-sm {% if currentPage >= totalPages %}opacity-40 pointer-events-none{% endif %}">
  423. <i class="fas fa-chevron-right text-xs"></i>
  424. </a>
  425. </li>
  426. </ul>
  427. </nav>
  428. {% endif %}
  429. </div>
  430. </div>
  431. </div>
  432. </section>
  435. <!-- ============================================================
  436. CONSEILS + STATS (bas de page)
  437. ============================================================ -->
  438. <section class="py-10 bg-gray-50 border-t border-gray-100">
  439. <div class="container mx-auto px-4">
  440. <div class="max-w-6xl mx-auto">
  441. <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
  442. <div class="bg-white rounded-xl p-5 shadow-sm border border-gray-100 flex gap-4 items-start">
  443. <div class="w-10 h-10 bg-emerald-100 rounded-xl flex items-center justify-center flex-shrink-0">
  444. <i class="fas fa-lightbulb text-[#006633]"></i>
  445. </div>
  446. <div>
  447. <h3 class="font-semibold text-gray-800 text-sm mb-1">Recherche par mots-clés</h3>
  448. <p class="text-xs text-gray-500">Termes précis : "impôt", "nomination", "foncier", "appel d'offres bâtiment"</p>
  449. </div>
  450. </div>
  451. <div class="bg-white rounded-xl p-5 shadow-sm border border-gray-100 flex gap-4 items-start">
  452. <div class="w-10 h-10 bg-emerald-100 rounded-xl flex items-center justify-center flex-shrink-0">
  453. <i class="fas fa-hashtag text-[#006633]"></i>
  454. </div>
  455. <div>
  456. <h3 class="font-semibold text-gray-800 text-sm mb-1">Référence exacte</h3>
  457. <p class="text-xs text-gray-500">Numéro d'acte : "LOI-2026-015", "Décret 2026-045/PR"</p>
  458. </div>
  459. </div>
  460. <div class="bg-white rounded-xl p-5 shadow-sm border border-gray-100 flex gap-4 items-start">
  461. <div class="w-10 h-10 bg-amber-100 rounded-xl flex items-center justify-center flex-shrink-0">
  462. <i class="fas fa-microchip text-amber-600"></i>
  463. </div>
  464. <div>
  465. <h3 class="font-semibold text-gray-800 text-sm mb-1">Recherche Ibunas.IA <span class="text-amber-600 text-xs font-bold">PREMIUM</span></h3>
  466. <p class="text-xs text-gray-500">Recherche dans le contenu des actes via OCR et intelligence artificielle</p>
  467. </div>
  468. </div>
  469. </div>
  470. </div>
  471. </div>
  472. </section>
  475. {# ================================================================
  476. RÉSULTATS PARTIELS (macros Twig inline pour éviter includes manquants)
  477. En production, extraire dans _partials/
  478. ================================================================ #}
  479. {% macro renderResultCard(result, isPremium) %}
  480. {% set typeColors = {
  481. 'loi': 'bg-purple-100 text-purple-700 border-purple-200',
  482. 'decret': 'bg-blue-100 text-blue-700 border-blue-200',
  483. 'arrete': 'bg-green-100 text-green-700 border-green-200',
  484. 'circulaire': 'bg-cyan-100 text-cyan-700 border-cyan-200',
  485. 'avis': 'bg-sky-100 text-sky-700 border-sky-200',
  486. 'marche_public':'bg-emerald-100 text-emerald-700 border-emerald-200',
  487. 'acte_foncier': 'bg-teal-100 text-teal-700 border-teal-200',
  488. 'societe_rccm': 'bg-indigo-100 text-indigo-700 border-indigo-200',
  489. 'association': 'bg-amber-100 text-amber-700 border-amber-200',
  490. 'enchere': 'bg-orange-100 text-orange-700 border-orange-200'
  491. } %}
  492. {% set typeIcons = {
  493. 'loi': 'fa-gavel', 'decret': 'fa-file-signature',
  494. 'arrete': 'fa-clipboard-list', 'circulaire': 'fa-envelope',
  495. 'avis': 'fa-bell', 'marche_public': 'fa-briefcase',
  496. 'acte_foncier': 'fa-map-marker-alt', 'societe_rccm': 'fa-building',
  497. 'association': 'fa-handshake', 'enchere': 'fa-hammer'
  498. } %}
  499. <article class="bg-white border border-gray-100 rounded-2xl shadow-sm hover:shadow-md transition-all duration-200 p-5 group">
  500. <div class="flex flex-wrap justify-between items-start gap-2 mb-3">
  501. <div class="flex flex-wrap items-center gap-2">
  502. <span class="inline-flex items-center gap-1.5 px-3 py-1 text-xs font-bold rounded-full border {{ typeColors[result.type]|default('bg-gray-100 text-gray-700 border-gray-200') }}">
  503. <i class="fas {{ typeIcons[result.type]|default('fa-file-alt') }} text-[10px]"></i>
  504. {{ result.typeLabel|default(result.type|upper) }}
  505. </span>
  506. {% if result.numero is defined and result.numero %}
  507. <span class="text-xs text-gray-400 font-mono bg-gray-50 px-2 py-0.5 rounded">{{ result.numero }}</span>
  508. {% endif %}
  509. {% if result.statutJuridique is defined %}
  510. <span class="text-xs px-2 py-0.5 rounded
  511. {% if result.statutJuridique == 'en_vigueur' %}bg-green-50 text-green-600
  512. {% elseif result.statutJuridique == 'abroge' %}bg-red-50 text-red-600
  513. {% else %}bg-gray-50 text-gray-500{% endif %}">
  514. {{ result.statutJuridique|replace({'_': ' '})|title }}
  515. </span>
  516. {% endif %}
  517. </div>
  518. <time class="text-xs text-gray-400 flex items-center gap-1 flex-shrink-0">
  519. <i class="far fa-calendar-alt"></i>
  520. {{ result.datePublication|date('d/m/Y') }}
  521. </time>
  522. </div>
  524. <h3 class="text-base font-bold text-gray-800 mb-2 group-hover:text-[#006633] transition leading-snug">
  525. <a href="{{ path('app_acte_show', {id: result.id}) }}">{{ result.titre }}</a>
  526. </h3>
  528. {% if result.resume is defined and result.resume %}
  529. <p class="text-gray-500 text-sm mb-3 line-clamp-2">{{ result.resume }}</p>
  530. {% endif %}
  532. {% if isPremium and result.extrait is defined and result.extrait %}
  533. <div class="mb-3 px-3 py-2 bg-amber-50 border-l-3 border-amber-400 rounded-r-lg text-xs text-gray-700">
  534. <i class="fas fa-quote-left text-amber-400 mr-1"></i>
  535. <span>{{ result.extrait }}</span>
  536. </div>
  537. {% endif %}
  539. <div class="flex flex-wrap items-center justify-between gap-2 pt-3 border-t border-gray-50">
  540. <div class="flex items-center gap-3 text-xs text-gray-500">
  541. {% if result.institution is defined %}
  542. <span><i class="fas fa-landmark text-[#006633] mr-1"></i>{{ result.institution }}</span>
  543. {% endif %}
  544. {% if result.territoire is defined %}
  545. <span><i class="fas fa-map-marker-alt text-gray-400 mr-1"></i>{{ result.territoire }}</span>
  546. {% endif %}
  547. {% if isPremium and result.relevance is defined %}
  548. <span class="text-[#006633] font-semibold">
  549. <i class="fas fa-chart-line mr-1"></i>{{ (result.relevance * 100)|round }}% pertinent
  550. </span>
  551. {% endif %}
  552. </div>
  553. <div class="flex items-center gap-3">
  554. <a href="{{ path('app_acte_show', {id: result.id}) }}"
  555. class="text-xs text-[#006633] hover:text-[#008040] font-semibold flex items-center gap-1 transition">
  556. <i class="fas fa-eye"></i> Consulter
  557. </a>
  558. {% if result.pdf_url is defined and result.pdf_url %}
  559. <a href="{{ result.pdf_url }}" target="_blank" rel="noopener"
  560. class="text-xs text-gray-400 hover:text-gray-600 flex items-center gap-1 transition">
  561. <i class="fas fa-file-pdf"></i> PDF
  562. </a>
  563. {% endif %}
  564. </div>
  565. </div>
  566. </article>
  567. {% endmacro %}
  570. <!-- ============================================================
  571. JAVASCRIPT DYNAMIQUE
  572. ============================================================ -->
  573. <script>
  574. (function () {
  575. 'use strict';
  577. // ─── Config ───────────────────────────────────────────────────────────────
  578. const SEARCH_URL = '{{ path("app_search") }}';
  579. const SEARCH_API_URL = '{{ path("app_search_ajax") }}'; // endpoint JSON
  580. const DEBOUNCE_MS = 400;
  581. const MIN_CHARS = 2;
  583. // ─── Éléments DOM ─────────────────────────────────────────────────────────
  584. const mainInput = document.getElementById('main-search-input');
  585. const heroBtnSearch = document.getElementById('hero-search-btn');
  586. const autocompleteBox = document.getElementById('autocomplete-dropdown');
  587. const resultsContainer = document.getElementById('results-container');
  588. const paginationCont = document.getElementById('pagination-container');
  589. const statusBar = document.getElementById('results-status-bar');
  590. const countNumber = document.getElementById('count-number');
  591. const countLabel = document.getElementById('results-count-label');
  592. const spinner = document.getElementById('search-spinner');
  593. const filterForm = document.getElementById('advanced-search-form');
  594. const filterSelects = filterForm.querySelectorAll('.search-filter');
  595. const resetBtn = document.getElementById('reset-filters-btn');
  596. const applyBtn = document.getElementById('apply-filters-btn');
  597. const activeCountBadge = document.getElementById('active-filters-count');
  598. const filterChips = document.getElementById('active-filter-chips');
  599. const toggleFiltersBtn = document.getElementById('toggle-filters-btn');
  600. const toggleFiltersIcon= document.getElementById('toggle-filters-icon');
  601. const toggleFiltersLbl = document.getElementById('toggle-filters-label');
  602. const filtersPanel = document.getElementById('filters-panel');
  603. const periodSelect = document.getElementById('filter-period');
  604. const customDatesPanel = document.getElementById('custom-dates-panel');
  605. const quickTypeBtns = document.querySelectorAll('.quick-type-btn');
  606. const quickSuggestions = document.querySelectorAll('.quick-suggestion');
  608. // ─── État ─────────────────────────────────────────────────────────────────
  609. let debounceTimer = null;
  610. let currentPage = 1;
  611. let filtersVisible = true;
  612. let lastQuery = mainInput ? mainInput.value.trim() : '';
  613. let currentParams = {};
  615. // ─── Noms lisibles des filtres pour les chips ─────────────────────────────
  616. const filterLabels = {
  617. institution: {
  618. presidence: 'Présidence de l\'Union',
  619. assemblee_nationale: 'Assemblée Nationale',
  620. sgg: 'SGG',
  621. finances: 'Min. Finances',
  622. justice: 'Min. Justice',
  623. interieur: 'Min. Intérieur',
  624. sante: 'Min. Santé',
  625. education: 'Min. Éducation',
  626. gouvernorat_ngazidja: 'Gouvernorat Ngazidja',
  627. gouvernorat_anjouan: 'Gouvernorat Anjouan',
  628. gouvernorat_moheli: 'Gouvernorat Mohéli',
  629. vice_presidence: 'Vice-Présidence',
  630. transport: 'Min. Transport',
  631. agriculture: 'Min. Agriculture',
  632. travaux_publics: 'Min. Travaux Publics',
  633. autres_ministeres: 'Autres ministères',
  634. justice_cour_supreme: 'Cour Suprême',
  635. justice_cour_appel: 'Cour d\'Appel',
  636. },
  637. type: {
  638. loi: 'Lois', decret: 'Décrets', arrete: 'Arrêtés',
  639. circulaire: 'Circulaires', avis: 'Avis officiels',
  640. marche_public: 'Marchés publics & DSP',
  641. acte_foncier: 'Réquisitions & actes fonciers',
  642. societe_rccm: 'Actes RCCM/OHADA',
  643. enchere: 'Ventes aux enchères',
  644. association: 'Récépissés associations',
  645. },
  646. statut: {
  647. en_vigueur: 'En vigueur', modifie: 'Modifié',
  648. abroge: 'Abrogé', suspendu: 'Suspendu',
  649. remplace: 'Remplacé', archive: 'Archivé',
  650. },
  651. territoire: {
  652. union: 'Union des Comores', ngazidja: 'Grande Comore',
  653. anjouan: 'Anjouan', moheli: 'Mohéli',
  654. moroni: 'Moroni', mutsamudu: 'Mutsamudu', fomboni: 'Fomboni',
  655. },
  656. sort: {
  657. date_desc: 'Récent → Ancien', date_asc: 'Ancien → Récent',
  658. pertinence: 'Pertinence', titre_asc: 'Titre A→Z',
  659. },
  660. };
  662. // ─── Utilitaires ──────────────────────────────────────────────────────────
  663. function debounce(fn, delay) {
  664. return function (...args) {
  665. clearTimeout(debounceTimer);
  666. debounceTimer = setTimeout(() => fn.apply(this, args), delay);
  667. };
  668. }
  670. function getFormParams() {
  671. const params = {};
  672. if (mainInput && mainInput.value.trim()) params.q = mainInput.value.trim();
  673. filterSelects.forEach(el => {
  674. if (el.value) params[el.name] = el.value;
  675. });
  676. return params;
  677. }
  679. function buildQueryString(params) {
  680. return Object.entries(params)
  681. .filter(([, v]) => v)
  682. .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
  683. .join('&');
  684. }
  686. // ─── Chips filtres actifs ──────────────────────────────────────────────────
  687. function updateFilterChips() {
  688. if (!filterChips) return;
  689. filterChips.innerHTML = '';
  690. let count = 0;
  692. filterSelects.forEach(el => {
  693. if (!el.value || el.name === 'sort') return;
  694. count++;
  695. const label = (filterLabels[el.name] || {})[el.value] || el.value;
  696. const chip = document.createElement('span');
  697. chip.className = 'inline-flex items-center gap-1.5 bg-[#006633]/10 text-[#006633] border border-[#006633]/20 text-xs font-semibold px-3 py-1 rounded-full';
  698. chip.innerHTML = `${label} <button type="button" data-filter="${el.name}" class="remove-chip ml-0.5 hover:text-red-500 transition"><i class="fas fa-times text-[10px]"></i></button>`;
  699. filterChips.appendChild(chip);
  700. });
  702. // Badge compteur
  703. if (count > 0) {
  704. activeCountBadge.textContent = count;
  705. activeCountBadge.classList.remove('hidden');
  706. resetBtn.classList.remove('hidden');
  707. } else {
  708. activeCountBadge.classList.add('hidden');
  709. resetBtn.classList.add('hidden');
  710. }
  712. // Clics sur remove-chip
  713. filterChips.querySelectorAll('.remove-chip').forEach(btn => {
  714. btn.addEventListener('click', () => {
  715. const filterName = btn.dataset.filter;
  716. const el = filterForm.querySelector(`[name="${filterName}"]`);
  717. if (el) { el.value = ''; }
  718. updateFilterChips();
  719. triggerSearch(1);
  720. });
  721. });
  722. }
  724. // ─── Toggle panel filtres ─────────────────────────────────────────────────
  725. if (toggleFiltersBtn) {
  726. toggleFiltersBtn.addEventListener('click', () => {
  727. filtersVisible = !filtersVisible;
  728. filtersPanel.style.maxHeight = filtersVisible ? filtersPanel.scrollHeight + 'px' : '0';
  729. filtersPanel.style.overflow = filtersVisible ? 'visible' : 'hidden';
  730. toggleFiltersIcon.style.transform = filtersVisible ? 'rotate(0deg)' : 'rotate(-90deg)';
  731. toggleFiltersLbl.textContent = filtersVisible ? 'Masquer les filtres' : 'Afficher les filtres';
  732. });
  733. }
  735. // ─── Période personnalisée ────────────────────────────────────────────────
  736. if (periodSelect) {
  737. periodSelect.addEventListener('change', function () {
  738. customDatesPanel.classList.toggle('hidden', this.value !== 'custom');
  739. });
  740. }
  742. // ─── Boutons filtres rapides (Hero) ───────────────────────────────────────
  743. quickTypeBtns.forEach(btn => {
  744. btn.addEventListener('click', () => {
  745. // Update visuel
  746. quickTypeBtns.forEach(b => {
  747. b.className = b.className.replace('bg-white text-[#006633] shadow-lg', 'bg-white/20 text-white hover:bg-white/30 border border-white/20');
  748. });
  749. btn.className = btn.className.replace('bg-white/20 text-white hover:bg-white/30 border border-white/20', 'bg-white text-[#006633] shadow-lg');
  751. // Synchro avec le select type
  752. const typeFilter = document.getElementById('filter-type');
  753. if (typeFilter) typeFilter.value = btn.dataset.type;
  754. updateFilterChips();
  755. triggerSearch(1);
  756. });
  757. });
  759. // ─── Suggestions rapides ──────────────────────────────────────────────────
  760. quickSuggestions.forEach(btn => {
  761. btn.addEventListener('click', () => {
  762. if (mainInput) mainInput.value = btn.textContent.trim();
  763. triggerSearch(1);
  764. });
  765. });
  767. // ─── Autocomplete ─────────────────────────────────────────────────────────
  768. const debouncedAutocomplete = debounce(fetchAutocomplete, 300);
  770. if (mainInput) {
  771. mainInput.addEventListener('input', function () {
  772. const q = this.value.trim();
  773. if (q.length >= MIN_CHARS) {
  774. debouncedAutocomplete(q);
  775. } else {
  776. hideAutocomplete();
  777. }
  778. // Live search
  779. debouncedSearch();
  780. });
  782. mainInput.addEventListener('keydown', function (e) {
  783. if (e.key === 'Enter') {
  784. e.preventDefault();
  785. hideAutocomplete();
  786. triggerSearch(1);
  787. }
  788. if (e.key === 'Escape') hideAutocomplete();
  789. });
  790. }
  792. if (heroBtnSearch) {
  793. heroBtnSearch.addEventListener('click', () => {
  794. hideAutocomplete();
  795. triggerSearch(1);
  796. });
  797. }
  799. function hideAutocomplete() {
  800. if (autocompleteBox) autocompleteBox.classList.add('hidden');
  801. }
  803. async function fetchAutocomplete(q) {
  804. try {
  805. const res = await fetch(`${SEARCH_API_URL}?q=${encodeURIComponent(q)}&autocomplete=1&limit=6`);
  806. if (!res.ok) return;
  807. const data = await res.json();
  808. renderAutocomplete(data.suggestions || []);
  809. } catch (e) {
  810. // silencieux
  811. }
  812. }
  814. function renderAutocomplete(suggestions) {
  815. if (!autocompleteBox || suggestions.length === 0) {
  816. hideAutocomplete();
  817. return;
  818. }
  819. autocompleteBox.innerHTML = suggestions.map(s => `
  820. <button type="button" class="autocomplete-item w-full text-left px-4 py-3 hover:bg-emerald-50 flex items-center gap-3 border-b border-gray-50 last:border-none transition-colors">
  821. <i class="fas fa-search text-gray-300 text-xs flex-shrink-0"></i>
  822. <span class="text-sm text-gray-700">${escapeHtml(s.titre || s)}</span>
  823. ${s.type ? `<span class="ml-auto text-xs text-gray-400 font-mono">${escapeHtml(s.type)}</span>` : ''}
  824. </button>
  825. `).join('');
  826. autocompleteBox.classList.remove('hidden');
  828. autocompleteBox.querySelectorAll('.autocomplete-item').forEach((item, idx) => {
  829. item.addEventListener('click', () => {
  830. const s = suggestions[idx];
  831. if (mainInput) mainInput.value = s.titre || s;
  832. hideAutocomplete();
  833. triggerSearch(1);
  834. });
  835. });
  836. }
  838. document.addEventListener('click', e => {
  839. if (!autocompleteBox?.contains(e.target) && e.target !== mainInput) hideAutocomplete();
  840. });
  842. // ─── Changement de filtre → rechargement live ─────────────────────────────
  843. filterSelects.forEach(el => {
  844. el.addEventListener('change', () => {
  845. updateFilterChips();
  846. if (el.name !== 'date_debut' && el.name !== 'date_fin') triggerSearch(1);
  847. });
  848. });
  850. // Dates personnalisées: déclencher à la perte de focus
  851. ['filter-date-debut', 'filter-date-fin'].forEach(id => {
  852. const el = document.getElementById(id);
  853. if (el) el.addEventListener('change', () => triggerSearch(1));
  854. });
  856. // ─── Formulaire submit ────────────────────────────────────────────────────
  857. if (filterForm) {
  858. filterForm.addEventListener('submit', e => {
  859. e.preventDefault();
  860. triggerSearch(1);
  861. });
  862. }
  864. // ─── Recherche principale (AJAX) ──────────────────────────────────────────
  865. const debouncedSearch = debounce(() => triggerSearch(1), DEBOUNCE_MS);
  867. async function triggerSearch(page = 1) {
  868. currentPage = page;
  869. const params = getFormParams();
  870. params.page = page;
  872. currentParams = { ...params };
  874. // Mettre à jour l'URL sans rechargement
  875. const qs = buildQueryString(params);
  876. window.history.replaceState({}, '', `${SEARCH_URL}${qs ? '?' + qs : ''}`);
  878. if (!params.q && Object.keys(params).filter(k => k !== 'sort' && k !== 'page').length === 0) {
  879. // Aucun critère: afficher état accueil
  880. showWelcomeState();
  881. return;
  882. }
  884. showLoading();
  886. try {
  887. const res = await fetch(`${SEARCH_API_URL}?${qs}`, {
  888. headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
  889. });
  891. // Si la route API n'existe pas encore (404/405/500), fallback SSR silencieux
  892. if (res.status === 404 || res.status === 405) {
  893. window.location.href = `${SEARCH_URL}?${qs}`;
  894. return;
  895. }
  897. if (!res.ok) throw new Error('HTTP ' + res.status);
  899. const data = await res.json();
  900. renderResults(data, params.q || '');
  901. } catch (err) {
  902. // Erreur réseau : fallback vers SSR plutôt qu'afficher un message d'erreur
  903. console.warn('[Munganyo] API indisponible, fallback SSR:', err.message);
  904. window.location.href = `${SEARCH_URL}?${qs}`;
  905. }
  906. }
  908. function showLoading() {
  909. if (spinner) spinner.classList.remove('hidden');
  910. if (statusBar) statusBar.classList.remove('hidden');
  911. if (resultsContainer) {
  912. resultsContainer.style.opacity = '0.4';
  913. resultsContainer.style.pointerEvents = 'none';
  914. }
  915. }
  917. function hideLoading() {
  918. if (spinner) spinner.classList.add('hidden');
  919. if (resultsContainer) {
  920. resultsContainer.style.opacity = '1';
  921. resultsContainer.style.pointerEvents = '';
  922. }
  923. }
  925. function showWelcomeState() {
  926. hideLoading();
  927. if (statusBar) statusBar.classList.add('hidden');
  928. if (resultsContainer) {
  929. resultsContainer.innerHTML = document.getElementById('welcome-state')
  930. ? document.getElementById('welcome-state').outerHTML
  931. : `<div class="text-center py-16 text-gray-500"><i class="fas fa-search text-4xl mb-4 text-gray-300"></i><p>Effectuez une recherche ci-dessus</p></div>`;
  932. }
  933. if (paginationCont) paginationCont.innerHTML = '';
  934. }
  936. function showErrorState() {
  937. hideLoading();
  938. if (statusBar) statusBar.classList.add('hidden');
  939. if (paginationCont) paginationCont.innerHTML = '';
  940. const q = mainInput ? mainInput.value.trim() : '';
  941. if (resultsContainer) {
  942. resultsContainer.innerHTML = `
  943. <div class="text-center py-16 bg-orange-50 rounded-2xl border border-orange-100">
  944. <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-5">
  945. <i class="fas fa-wifi text-2xl text-orange-400"></i>
  946. </div>
  947. <h3 class="text-lg font-semibold text-orange-700 mb-2">Connexion temporairement indisponible</h3>
  948. <p class="text-sm text-gray-500 max-w-sm mx-auto mb-5">
  949. La recherche en temps réel est momentanément inaccessible.
  950. Vous pouvez relancer manuellement votre recherche.
  951. </p>
  952. <a href="${SEARCH_URL}${q ? '?q=' + encodeURIComponent(q) : ''}"
  953. class="inline-flex items-center gap-2 bg-[#006633] text-white px-6 py-2.5 rounded-xl text-sm font-semibold hover:bg-[#004d26] transition shadow-md">
  954. <i class="fas fa-redo-alt"></i> Relancer la recherche
  955. </a>
  956. </div>`;
  957. }
  958. }
  960. function renderResults(data, query) {
  961. hideLoading();
  963. // Mise à jour compteur
  964. if (statusBar) statusBar.classList.remove('hidden');
  965. if (countLabel) {
  966. const q = query ? `pour <em class="text-[#006633] not-italic font-black">"${escapeHtml(query)}"</em>` : '';
  967. countLabel.innerHTML = `<span id="count-number">${data.total || 0}</span> résultat(s) ${q}`;
  968. }
  970. // Résultats
  971. if (!resultsContainer) return;
  973. if (!data.results || data.results.length === 0) {
  974. resultsContainer.innerHTML = renderNoResults(query);
  975. } else {
  976. resultsContainer.innerHTML = `<div class="space-y-4">${data.results.map(r => renderResultCard(r, data.isPremium)).join('')}</div>`;
  977. }
  979. // Pagination
  980. if (paginationCont) {
  981. paginationCont.innerHTML = data.totalPages > 1
  982. ? renderPagination(data.currentPage, data.totalPages, currentParams)
  983. : '';
  984. }
  986. // Scroll doux vers résultats
  987. document.getElementById('results-section')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  988. }
  990. // ─── Rendu côté client (fallback / AJAX) ─────────────────────────────────
  991. const TYPE_COLORS = {
  992. loi: 'bg-purple-100 text-purple-700 border-purple-200',
  993. decret: 'bg-blue-100 text-blue-700 border-blue-200',
  994. arrete: 'bg-green-100 text-green-700 border-green-200',
  995. circulaire: 'bg-cyan-100 text-cyan-700 border-cyan-200',
  996. avis: 'bg-sky-100 text-sky-700 border-sky-200',
  997. marche_public: 'bg-emerald-100 text-emerald-700 border-emerald-200',
  998. acte_foncier: 'bg-teal-100 text-teal-700 border-teal-200',
  999. societe_rccm: 'bg-indigo-100 text-indigo-700 border-indigo-200',
  1000. association: 'bg-amber-100 text-amber-700 border-amber-200',
  1001. enchere: 'bg-orange-100 text-orange-700 border-orange-200',
  1002. };
  1003. const TYPE_ICONS = {
  1004. loi: 'fa-gavel', decret: 'fa-file-signature', arrete: 'fa-clipboard-list',
  1005. circulaire: 'fa-envelope', avis: 'fa-bell', marche_public: 'fa-briefcase',
  1006. acte_foncier: 'fa-map-marker-alt', societe_rccm: 'fa-building',
  1007. association: 'fa-handshake', enchere: 'fa-hammer',
  1008. };
  1009. const STATUT_COLORS = {
  1010. en_vigueur: 'bg-green-50 text-green-600',
  1011. abroge: 'bg-red-50 text-red-600',
  1012. modifie: 'bg-yellow-50 text-yellow-700',
  1013. suspendu: 'bg-orange-50 text-orange-600',
  1014. };
  1016. function renderResultCard(r, isPremium) {
  1017. const colorClass = TYPE_COLORS[r.type] || 'bg-gray-100 text-gray-700 border-gray-200';
  1018. const iconClass = TYPE_ICONS[r.type] || 'fa-file-alt';
  1019. const statutClr = STATUT_COLORS[r.statutJuridique] || 'bg-gray-50 text-gray-500';
  1020. const date = r.datePublication ? new Date(r.datePublication).toLocaleDateString('fr-FR') : 'N/A';
  1022. return `
  1023. <article class="bg-white border border-gray-100 rounded-2xl shadow-sm hover:shadow-md transition-all duration-200 p-5 group">
  1024. <div class="flex flex-wrap justify-between items-start gap-2 mb-3">
  1025. <div class="flex flex-wrap items-center gap-2">
  1026. <span class="inline-flex items-center gap-1.5 px-3 py-1 text-xs font-bold rounded-full border ${colorClass}">
  1027. <i class="fas ${iconClass} text-[10px]"></i> ${escapeHtml(r.typeLabel || r.type)}
  1028. </span>
  1029. ${r.numero ? `<span class="text-xs text-gray-400 font-mono bg-gray-50 px-2 py-0.5 rounded">${escapeHtml(r.numero)}</span>` : ''}
  1030. ${r.statutJuridique ? `<span class="text-xs px-2 py-0.5 rounded ${statutClr}">${escapeHtml(r.statutJuridique.replace('_', ' '))}</span>` : ''}
  1031. </div>
  1032. <time class="text-xs text-gray-400 flex items-center gap-1 flex-shrink-0">
  1033. <i class="far fa-calendar-alt"></i> ${date}
  1034. </time>
  1035. </div>
  1036. <h3 class="text-base font-bold text-gray-800 mb-2 group-hover:text-[#006633] transition leading-snug">
  1037. <a href="/acte/${r.id}">${escapeHtml(r.titre)}</a>
  1038. </h3>
  1039. ${r.resume ? `<p class="text-gray-500 text-sm mb-3 line-clamp-2">${escapeHtml(r.resume)}</p>` : ''}
  1040. ${isPremium && r.extrait ? `
  1041. <div class="mb-3 px-3 py-2 bg-amber-50 border-l-4 border-amber-400 rounded-r-lg text-xs text-gray-700">
  1042. <i class="fas fa-quote-left text-amber-400 mr-1"></i>${escapeHtml(r.extrait)}
  1043. </div>` : ''}
  1044. <div class="flex flex-wrap items-center justify-between gap-2 pt-3 border-t border-gray-50">
  1045. <div class="flex items-center gap-3 text-xs text-gray-500">
  1046. ${r.institution ? `<span><i class="fas fa-landmark text-[#006633] mr-1"></i>${escapeHtml(r.institution)}</span>` : ''}
  1047. ${r.territoire ? `<span><i class="fas fa-map-marker-alt text-gray-400 mr-1"></i>${escapeHtml(r.territoire)}</span>` : ''}
  1048. ${isPremium && r.relevance ? `<span class="text-[#006633] font-semibold"><i class="fas fa-chart-line mr-1"></i>${Math.round(r.relevance * 100)}%</span>` : ''}
  1049. </div>
  1050. <div class="flex items-center gap-3">
  1051. <a href="/acte/${r.id}" class="text-xs text-[#006633] hover:text-[#008040] font-semibold flex items-center gap-1 transition">
  1052. <i class="fas fa-eye"></i> Consulter
  1053. </a>
  1054. ${r.pdf_url ? `<a href="${escapeHtml(r.pdf_url)}" target="_blank" rel="noopener" class="text-xs text-gray-400 hover:text-gray-600 flex items-center gap-1 transition"><i class="fas fa-file-pdf"></i> PDF</a>` : ''}
  1055. </div>
  1056. </div>
  1057. </article>`;
  1058. }
  1060. function renderNoResults(query) {
  1061. const activeFilters = [];
  1062. const typeEl = document.getElementById('filter-type');
  1063. const instEl = document.getElementById('filter-institution');
  1064. const periodEl = document.getElementById('filter-period');
  1065. if (typeEl && typeEl.options[typeEl.selectedIndex]?.text && typeEl.value)
  1066. activeFilters.push(typeEl.options[typeEl.selectedIndex].text);
  1067. if (instEl && instEl.options[instEl.selectedIndex]?.text && instEl.value)
  1068. activeFilters.push(instEl.options[instEl.selectedIndex].text);
  1069. if (periodEl && periodEl.value && periodEl.value !== 'custom')
  1070. activeFilters.push('année ' + periodEl.value);
  1072. let searchDesc = '';
  1073. if (query) searchDesc += `<strong class="text-gray-800">&laquo;&nbsp;${escapeHtml(query)}&nbsp;&raquo;</strong>`;
  1074. if (activeFilters.length) {
  1075. searchDesc += (query ? ' avec les filtres ' : 'les critères ');
  1076. searchDesc += activeFilters.map(f => `<span class="inline-flex items-center gap-1 bg-[#006633]/10 text-[#006633] text-xs font-semibold px-2 py-0.5 rounded-full">${escapeHtml(f)}</span>`).join(' ');
  1077. }
  1078. if (!searchDesc) searchDesc = 'ces critères de recherche';
  1080. return `
  1081. <div class="text-center py-16 bg-gray-50 rounded-2xl border border-gray-100">
  1082. <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-5">
  1083. <i class="fas fa-file-search text-2xl text-gray-400"></i>
  1084. </div>
  1085. <h3 class="text-xl font-bold text-gray-800 mb-3">
  1086. Aucun acte trouvé pour ${searchDesc}
  1087. </h3>
  1088. <p class="text-gray-500 text-sm max-w-md mx-auto mb-6 leading-relaxed">
  1089. Votre recherche ${query ? `avec <strong class="text-gray-700">&laquo;&nbsp;${escapeHtml(query)}&nbsp;&raquo;</strong>` : ''} ne correspond
  1090. à aucun acte publié au Journal Officiel de l'Union des Comores.
  1091. </p>
  1092. <div class="flex flex-wrap justify-center gap-3 text-xs text-gray-500 mb-6">
  1093. <span class="flex items-center gap-1.5 bg-white border border-gray-200 px-3 py-1.5 rounded-full shadow-sm">
  1094. <i class="fas fa-lightbulb text-amber-400"></i> Vérifiez l'orthographe des mots-clés
  1095. </span>
  1096. <span class="flex items-center gap-1.5 bg-white border border-gray-200 px-3 py-1.5 rounded-full shadow-sm">
  1097. <i class="fas fa-expand-alt text-blue-400"></i> Élargissez ou supprimez les filtres
  1098. </span>
  1099. <span class="flex items-center gap-1.5 bg-white border border-gray-200 px-3 py-1.5 rounded-full shadow-sm">
  1100. <i class="fas fa-hashtag text-[#006633]"></i> Essayez la référence exacte de l'acte
  1101. </span>
  1102. </div>
  1103. <div class="flex flex-wrap justify-center gap-3">
  1104. <button type="button" onclick="document.getElementById('main-search-input').value='';document.getElementById('filter-type').value='';document.getElementById('filter-institution').value='';triggerSearch(1);"
  1105. class="inline-flex items-center gap-2 border border-gray-200 text-gray-600 px-5 py-2 rounded-xl text-sm font-medium hover:border-gray-300 hover:bg-gray-50 transition">
  1106. <i class="fas fa-undo-alt text-xs"></i> Réinitialiser la recherche
  1107. </button>
  1108. <a href="/abonnement"
  1109. class="inline-flex items-center gap-2 bg-gradient-to-r from-amber-500 to-amber-400 text-white px-5 py-2 rounded-xl text-sm font-semibold hover:from-amber-600 hover:to-amber-500 transition shadow-md">
  1110. <i class="fas fa-microchip text-xs"></i> Activer Ibunas.IA Premium
  1111. </a>
  1112. </div>
  1113. </div>`;
  1114. }
  1116. function renderPagination(current, total, params) {
  1117. let pages = '';
  1118. for (let p = 1; p <= total; p++) {
  1119. if (p === current) {
  1120. pages += `<li><span class="flex items-center justify-center w-9 h-9 rounded-lg bg-[#006633] text-white font-bold text-sm">${p}</span></li>`;
  1121. } else if (p <= 3 || p >= total - 2 || Math.abs(p - current) <= 2) {
  1122. const ps = buildQueryString({ ...params, page: p });
  1123. pages += `<li><button type="button" data-page="${p}" class="pagination-btn flex items-center justify-center w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:border-[#006633] hover:text-[#006633] transition text-sm">${p}</button></li>`;
  1124. } else if (p === 4 && current > 6) {
  1125. pages += `<li><span class="px-2 text-gray-400">…</span></li>`;
  1126. } else if (p === total - 3 && current < total - 5) {
  1127. pages += `<li><span class="px-2 text-gray-400">…</span></li>`;
  1128. }
  1129. }
  1130. const prevDisabled = current <= 1 ? 'opacity-40 pointer-events-none' : '';
  1131. const nextDisabled = current >= total ? 'opacity-40 pointer-events-none' : '';
  1132. return `
  1133. <nav class="flex justify-center mt-8" aria-label="Pagination">
  1134. <ul class="flex items-center gap-1">
  1135. <li><button type="button" data-page="${current - 1}" class="pagination-btn flex items-center justify-center w-9 h-9 rounded-lg border border-gray-200 text-gray-500 hover:border-[#006633] hover:text-[#006633] transition text-sm ${prevDisabled}"><i class="fas fa-chevron-left text-xs"></i></button></li>
  1136. ${pages}
  1137. <li><button type="button" data-page="${current + 1}" class="pagination-btn flex items-center justify-center w-9 h-9 rounded-lg border border-gray-200 text-gray-500 hover:border-[#006633] hover:text-[#006633] transition text-sm ${nextDisabled}"><i class="fas fa-chevron-right text-xs"></i></button></li>
  1138. </ul>
  1139. </nav>`;
  1140. }
  1142. // Délégation pour les boutons de pagination générés dynamiquement
  1143. document.addEventListener('click', e => {
  1144. const btn = e.target.closest('.pagination-btn');
  1145. if (btn) {
  1146. const page = parseInt(btn.dataset.page);
  1147. if (page && page > 0) triggerSearch(page);
  1148. }
  1149. });
  1151. // ─── XSS helper ───────────────────────────────────────────────────────────
  1152. function escapeHtml(str) {
  1153. if (!str) return '';
  1154. return String(str)
  1155. .replace(/&/g, '&amp;')
  1156. .replace(/</g, '&lt;')
  1157. .replace(/>/g, '&gt;')
  1158. .replace(/"/g, '&quot;')
  1159. .replace(/'/g, '&#39;');
  1160. }
  1162. // ─── Init ─────────────────────────────────────────────────────────────────
  1163. function init() {
  1164. updateFilterChips();
  1166. // Si query présente dans l'URL au chargement, on l'affiche sans re-fetch (SSR)
  1167. // Si via navigation arrière/avant, on re-fetch
  1168. window.addEventListener('popstate', () => {
  1169. const urlParams = new URLSearchParams(window.location.search);
  1170. if (mainInput) mainInput.value = urlParams.get('q') || '';
  1171. filterSelects.forEach(el => {
  1172. el.value = urlParams.get(el.name) || '';
  1173. });
  1174. updateFilterChips();
  1175. const q = urlParams.get('q');
  1176. if (q) triggerSearch(parseInt(urlParams.get('page') || '1'));
  1177. });
  1178. }
  1180. init();
  1182. })();
  1183. </script>
  1185. {% endblock %}