templates/partenaires/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block style %}Partenaires de santé | CAREN{% endblock %}
  5. {% block body %}
  7. <style>
  8.   /* ── Hero image ── */
  9.   .ps-hero-img {
  10.     width: 100%; height: 40vh; object-fit: cover; display: block;
  11.   }
  12.   .ps-hero-wrap {
  13.     position: relative; overflow: hidden;
  14.   }
  15.   .ps-hero-overlay {
  16.     position: absolute; inset: 0;
  17.     display: flex; flex-direction: column;
  18.     align-items: center; justify-content: center;
  19.     text-align: center; padding: 1rem;
  20.   }
  21.   .ps-hero-overlay h1 {
  22.     font-family: 'Poppins', sans-serif; font-weight: 700;
  23.     font-size: 2rem; color: #fff; margin-bottom: .4rem;
  24.   }
  25.   .ps-hero-overlay p {
  26.     color: rgba(255,255,255,.78); font-size: .9rem; margin-bottom: 1.25rem;
  27.   }
  29.   /* ── Bouton recherche hero ── */
  30.   .btn-search-toggle {
  31.     display: inline-flex; align-items: center; gap: .5rem;
  32.     padding: .55rem 1.6rem; border-radius: 50px;
  33.     background: #fff; color: #2a1266;
  34.     font-weight: 600; font-size: .85rem; border: none;
  35.     box-shadow: 0 4px 20px rgba(0,0,0,.18);
  36.     transition: transform .2s, box-shadow .2s;
  37.     cursor: pointer;
  38.   }
  39.   .btn-search-toggle:hover {
  40.     transform: translateY(-2px);
  41.     box-shadow: 0 8px 28px rgba(0,0,0,.22);
  42.   }
  43.   .btn-search-toggle .bi { font-size: 1rem; }
  45.   /* ── Search bar inline dans hero ── */
  46.   .hero-search-box {
  47.     display: none; width: 100%; max-width: 520px;
  48.     margin-top: .75rem; animation: fadeSlideDown .25s ease;
  49.   }
  50.   .hero-search-box.open { display: flex; }
  51.   @keyframes fadeSlideDown {
  52.     from { opacity: 0; transform: translateY(-8px); }
  53.     to   { opacity: 1; transform: translateY(0); }
  54.   }
  55.   .hero-search-box .form-control {
  56.     border-radius: 12px 0 0 12px; border: none;
  57.     padding: .6rem 1rem; font-size: .88rem;
  58.     box-shadow: 0 4px 20px rgba(0,0,0,.15);
  59.   }
  60.   .hero-search-box .form-control:focus { box-shadow: none; outline: none; }
  61.   .hero-search-box .btn-go {
  62.     border-radius: 0 12px 12px 0; background: #2a1266;
  63.     border: none; color: #fff; padding: .6rem 1.1rem;
  64.     display: flex; align-items: center; gap: .35rem;
  65.     font-size: .85rem; cursor: pointer;
  66.     box-shadow: 0 4px 20px rgba(0,0,0,.15);
  67.     transition: background .2s;
  68.   }
  69.   .hero-search-box .btn-go:hover { background: #1e0d4e; }
  71.   /* ── Tabs ── */
  72.   .ps-tab-bar {
  73.     background: #fff;
  74.     border-bottom: 2px solid #f0edf8;
  75.     padding: 0 1rem;
  76.     overflow-x: auto;
  77.     -webkit-overflow-scrolling: touch;
  78.     scrollbar-width: none;
  79.   }
  80.   .ps-tab-bar::-webkit-scrollbar { display: none; }
  81.   .ps-tab-bar .nav { flex-wrap: nowrap; min-width: max-content; }
  82.   .ps-tab-bar .nav-link {
  83.     border: none; border-radius: 0;
  84.     padding: .85rem clamp(.5rem, 2vw, 1.3rem);
  85.     font-family: 'Poppins', sans-serif;
  86.     font-size: clamp(.65rem, 1.5vw, .78rem);
  87.     font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  88.     color: #a098be; position: relative; white-space: nowrap;
  89.     display: flex; align-items: center; gap: .4rem;
  90.     transition: color .2s; background: none;
  91.   }
  92.   .ps-tab-bar .nav-link::after {
  93.     content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
  94.     height: 2.5px; background: #2a1266; border-radius: 2px;
  95.     transform: scaleX(0); transition: transform .25s;
  96.   }
  97.   .ps-tab-bar .nav-link.active { color: #2a1266; }
  98.   .ps-tab-bar .nav-link.active::after { transform: scaleX(1); }
  99.   .ps-tab-bar .nav-link:hover { color: #2a1266; background: none; }
  100.   .ps-tab-bar .nav-link .bi { font-size: clamp(.85rem, 2vw, 1.05rem); flex-shrink: 0; }
  101.   .ps-tab-bar .nav-link .tab-label { overflow: hidden; text-overflow: ellipsis; max-width: 18ch; }
  102.   .tab-count {
  103.     background: #ede9f8; color: #6a5aaa;
  104.     font-size: .6rem; font-weight: 600;
  105.     padding: 1px 6px; border-radius: 20px; flex-shrink: 0;
  106.   }
  107.   .ps-tab-bar .nav-link.active .tab-count { background: #2a1266; color: #fff; }
  109.   /* Très petits écrans : icône seule, libellé masqué */
  110.   @media (max-width: 300px) {
  111.     .ps-tab-bar .nav-link .tab-label { display: none; }
  112.     .ps-tab-bar .nav-link { padding: .75rem .9rem; }
  113.     .tab-count { display: none; }
  114.   }
  116.   /* ── Content ── */
  117.   .ps-content { background: #f8f7fc; padding: 2rem 0 4rem; min-height: 55vh; }
  119.   /* ── Cards ── */
  120.   .ps-card {
  121.     border: 1.5px solid #ede9f8; border-radius: 14px;
  122.     background: #fff; height: 100%; overflow: hidden;
  123.     transition: transform .2s, box-shadow .2s, border-color .2s;
  124.   }
  125.   .ps-card:hover {
  126.     transform: translateY(-4px);
  127.     box-shadow: 0 14px 36px rgba(42,18,102,.11), 0 2px 6px rgba(42,18,102,.06);
  128.     border-color: #c8bfee;
  129.   }
  130.   .ps-card .card-top-bar {
  131.     height: 3px;
  132.     background: linear-gradient(90deg, #2a1266 0%, #7c5cbf 100%);
  133.   }
  134.   .ps-card .card-body { padding: 1.1rem 1.2rem .85rem; }
  135.   .ps-card .card-icon {
  136.     width: 36px; height: 36px; border-radius: 14px;
  137.     background: rgba(42,18,102,.06);
  138.     display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  139.     padding: 6px;
  140.   }
  141.   .ps-card .card-icon img {
  142.     width: 100%; height: 100%; object-fit: contain;
  143.   }
  144.   .ps-card .card-name {
  145.     font-family: 'Poppins', sans-serif; font-weight: 700;
  146.     font-size: .9rem; color: #0d0820; line-height: 1.3;
  147.   }
  148.   .ps-card .card-addr {
  149.     font-size: .75rem; color: #9896b8; margin-top: 2px;
  150.     display: flex; align-items: center; gap: .25rem;
  151.   }
  152.   .ps-card .info-list {
  153.     margin-top: .6rem; padding-top: .6rem;
  154.     border-top: 1px solid #f0edf8;
  155.   }
  156.   .ps-card .info-row {
  157.     display: flex; align-items: center; gap: .45rem;
  158.     font-size: .79rem; color: #6a6890; padding: .12rem 0;
  159.   }
  160.   .ps-card .info-row .bi { font-size: .85rem; color: #2a1266; flex-shrink: 0; }
  161.   .ps-card .info-row a { color: #2a1266; text-decoration: none; font-weight: 500; }
  162.   .ps-card .info-row a:hover { text-decoration: underline; }
  164.   .ps-card .card-footer-btns {
  165.     padding: .7rem 1.2rem; border-top: 1px solid #f0edf8;
  166.     background: #faf9fe; display: flex; gap: .45rem;
  167.   }
  168.   .ps-card .card-footer-btns .btn-action {
  169.     flex: 1; font-size: .75rem; font-weight: 500;
  170.     border-radius: 8px; padding: .38rem .5rem;
  171.     display: flex; align-items: center; justify-content: center; gap: .3rem;
  172.     border: 1.5px solid #e0daf0; color: #2a1266; background: #fff;
  173.     text-decoration: none; transition: background .18s, border-color .18s;
  174.   }
  175.   .ps-card .card-footer-btns .btn-action:hover {
  176.     background: rgba(42,18,102,.07); border-color: #b9b0e0;
  177.   }
  178.   .ps-card .card-footer-btns .btn-action .bi { font-size: .88rem; }
  180.   /* ── Empty ── */
  181.   .ps-empty { text-align: center; padding: 3.5rem 1rem; color: #b0adcc; }
  182.   .ps-empty .bi { font-size: 3rem; display: block; margin-bottom: .75rem; color: #ddd9ef; }
  184.   /* ── Pagination ── */
  185.   .ps-pag-bar {
  186.     margin-top: 1.75rem; display: flex;
  187.     justify-content: space-between; align-items: center;
  188.     flex-wrap: wrap; gap: .5rem;
  189.   }
  190.   .ps-pag-bar .pg-info { font-size: .8rem; color: #9896b8; }
  191.   .ps-pag-bar .pagination { margin: 0; }
  192.   .ps-pag-bar .page-link {
  193.     color: #2a1266; border-color: #e0daf0;
  194.     font-size: .82rem; padding: .3rem .65rem;
  195.     border-radius: 8px !important; margin: 0 2px;
  196.   }
  197.   .ps-pag-bar .page-item.active .page-link {
  198.     background: #2a1266; border-color: #2a1266; color: #fff;
  199.   }
  200.   .ps-pag-bar .page-link:hover:not(.active) { background: rgba(42,18,102,.07); }
  201.   .ps-pag-bar .page-item.disabled .page-link { opacity: .4; }
  202. </style>
  204. {# ── Hero ── #}
  205. <div class="ps-hero-wrap wow fadeIn" data-wow-delay="0.1s">
  206.   <img class="ps-hero-img" src="{{ asset('assets/img/IMAGE4.jpg') }}" alt="Partenaires de santé" />
  207.   <div class="ps-hero-overlay">
  208.     <h1><i class="bi bi-heart-pulse-fill me-2"></i>Partenaires de santé</h1>
  209.     <p>Pharmacies, cliniques et établissements conventionnés avec CAREN</p>
  211.     {# Bouton qui révèle la recherche #}
  212.     <button class="btn-search-toggle" id="heroSearchToggle" onclick="toggleHeroSearch()">
  213.       <i class="bi bi-search"></i> Rechercher un partenaire
  214.     </button>
  216.     <div class="hero-search-box" id="heroSearchBox">
  217.       <input type="text" id="heroSearchInput" class="form-control"
  218.              placeholder="Nom ou adresse du partenaire…"
  219.              oninput="applyHeroSearch()" onkeydown="if(event.key==='Escape') closeHeroSearch()">
  220.       <button class="btn-go" onclick="applyHeroSearch()">
  221.         <i class="bi bi-search"></i> Rechercher
  222.       </button>
  223.     </div>
  224.   </div>
  225. </div>
  227. {# ── Tabs bar ── #}
  228. {% if partenaires_by_type is not empty %}
  229. <div class="ps-tab-bar shadow-sm">
  230.   <div class="container">
  231.     <ul class="nav" id="psTabs">
  232.       {% for typeLibelle, partenaires in partenaires_by_type %}
  233.       {% set tid = loop.index %}
  234.       <li class="nav-item">
  235.         <button class="nav-link {% if loop.first %}active{% endif %}"
  236.                 data-tid="{{ tid }}"
  237.                 data-bs-toggle="tab"
  238.                 data-bs-target="#panel{{ tid }}"
  239.                 type="button">
  240.           {% if typeLibelle|lower == 'pharmacie' %}
  241.             <i class="bi bi-capsule"></i>
  242.           {% elseif typeLibelle|lower in ['clinique','hôpital','hopital','polyclinique'] %}
  243.             <i class="bi bi-hospital"></i>
  244.           {% elseif typeLibelle|lower in ['laboratoire','labo'] %}
  245.             <i class="bi bi-eyedropper"></i>
  246.           {% elseif typeLibelle|lower in ['dentiste','cabinet dentaire'] %}
  247.             <i class="bi bi-emoji-smile"></i>
  248.           {% elseif typeLibelle|lower in ['opticien','optique'] %}
  249.             <i class="bi bi-eyeglasses"></i>
  250.           {% else %}
  251.             <i class="bi bi-building-plus"></i>
  252.           {% endif %}
  253.           <span class="tab-label">{{ typeLibelle }}</span>
  254.           <span class="tab-count">{{ partenaires|length }}</span>
  255.         </button>
  256.       </li>
  257.       {% endfor %}
  258.     </ul>
  259.   </div>
  260. </div>
  261. {% endif %}
  263. {# ── Content ── #}
  264. <div class="ps-content">
  265.   <div class="container">
  267.     {% if partenaires_by_type is empty %}
  268.     <div class="ps-empty">
  269.       <i class="bi bi-building-slash"></i>
  270.       <p class="mb-0">Aucun partenaire de santé enregistré pour le moment.</p>
  271.     </div>
  273.     {% else %}
  274.     <div class="tab-content" id="psTabContent">
  275.       {% for typeLibelle, partenaires in partenaires_by_type %}
  276.       {% set tid = loop.index %}
  277.       {% set tlower = typeLibelle|lower %}
  278.       {% if tlower == 'pharmacie' %}
  279.         {% set icon_file = 'pharmacie1.png' %}
  280.       {% elseif tlower in ['clinique','polyclinique'] %}
  281.         {% set icon_file = 'clinique1.png' %}
  282.       {% elseif tlower in ['hôpital','hopital','hopitaux'] %}
  283.         {% set icon_file = 'hopital1.png' %}
  284.       {% else %}
  285.         {% set icon_file = 'cabinet-medical1.png' %}
  286.       {% endif %}
  287.       <div class="tab-pane fade {% if loop.first %}show active{% endif %}"
  288.            id="panel{{ tid }}" role="tabpanel">
  290.         <div class="row g-3" id="grid{{ tid }}">
  291.           {% for p in partenaires %}
  292.           <div class="col-sm-6 col-lg-4 col-xl-3 ps-item-{{ tid }}"
  293.                data-nom="{{ p.nom|default('')|lower }}"
  294.                data-adr="{{ p.adresse|default('')|lower }}"
  295.                style="display:none;">
  296.             <div class="ps-card">
  297.               <div class="card-top-bar"></div>
  298.               <div class="card-body">
  299.                 <div class="d-flex align-items-start gap-3">
  300.                   <div class="card-icon">
  301.                     <img src="{{ asset('assets/media/partenaire_sante/' ~ icon_file) }}"
  302.                          alt="{{ typeLibelle }}">
  303.                   </div>
  304.                   <div class="flex-grow-1 min-w-0">
  305.                     <div class="card-name">{{ p.nom }}</div>
  306.                     <div class="card-addr">
  307.                       <i class="bi bi-geo-alt" style="font-size:.72rem;"></i>
  308.                       {{ p.adresse ?: '—' }}
  309.                     </div>
  310.                   </div>
  311.                 </div>
  313.                 {% if p.telephone or p.email or p.responsable %}
  314.                 <div class="info-list">
  315.                   {% if p.telephone %}
  316.                   <div class="info-row">
  317.                     <i class="bi bi-telephone-fill"></i>
  318.                     <a href="tel:{{ p.telephone }}">{{ p.telephone }}</a>
  319.                   </div>
  320.                   {% endif %}
  321.                   {% if p.email %}
  322.                   <div class="info-row">
  323.                     <i class="bi bi-envelope-fill"></i>
  324.                     <span>{{ p.email }}</span>
  325.                   </div>
  326.                   {% endif %}
  327.                   {% if p.responsable %}
  328.                   <div class="info-row">
  329.                     <i class="bi bi-person-fill"></i>
  330.                     <span>{{ p.responsable }}</span>
  331.                   </div>
  332.                   {% endif %}
  333.                 </div>
  334.                 {% endif %}
  335.               </div>
  337.               {% if p.telephone or (p.latitude and p.longitude) %}
  338.               <div class="card-footer-btns">
  339.                 {% if p.telephone %}
  340.                 <a href="tel:{{ p.telephone }}" class="btn-action">
  341.                   <i class="bi bi-telephone"></i> Appeler
  342.                 </a>
  343.                 {% endif %}
  344.                 {% if p.latitude and p.longitude %}
  345.                 <a href="https://maps.google.com/?q={{ p.latitude }},{{ p.longitude }}"
  346.                    target="_blank" rel="noopener" class="btn-action">
  347.                   <i class="bi bi-geo-alt-fill"></i> Carte
  348.                 </a>
  349.                 {% endif %}
  350.               </div>
  351.               {% endif %}
  352.             </div>
  353.           </div>
  354.           {% else %}
  355.           <div class="col-12">
  356.             <div class="ps-empty">
  357.               <i class="bi bi-building-slash"></i>
  358.               <p>Aucun partenaire enregistré pour ce type.</p>
  359.             </div>
  360.           </div>
  361.           {% endfor %}
  362.         </div>
  364.         <div class="ps-pag-bar" id="pgWrap{{ tid }}">
  365.           <span class="pg-info" id="pgInfo{{ tid }}"></span>
  366.           <ul class="pagination" id="pg{{ tid }}"></ul>
  367.         </div>
  369.       </div>
  370.       {% endfor %}
  371.     </div>
  372.     {% endif %}
  374.   </div>
  375. </div>
  376. {% endblock %}
  378. {% block script %}
  379. <script>
  380. (function () {
  381.   var PER = 12;
  382.   var tabIds = Array.from(document.querySelectorAll('[data-tid]')).map(function (el) {
  383.     return parseInt(el.dataset.tid);
  384.   });
  385.   var pages = {};
  386.   tabIds.forEach(function (id) { pages[id] = 1; });
  388.   /* ── Recherche hero ── */
  389.   window.toggleHeroSearch = function () {
  390.     var box = document.getElementById('heroSearchBox');
  391.     var toggle = document.getElementById('heroSearchToggle');
  392.     var isOpen = box.classList.contains('open');
  393.     if (isOpen) {
  394.       closeHeroSearch();
  395.     } else {
  396.       box.classList.add('open');
  397.       toggle.innerHTML = '<i class="bi bi-x-lg"></i> Fermer';
  398.       document.getElementById('heroSearchInput').focus();
  399.     }
  400.   };
  402.   window.closeHeroSearch = function () {
  403.     var box = document.getElementById('heroSearchBox');
  404.     var toggle = document.getElementById('heroSearchToggle');
  405.     box.classList.remove('open');
  406.     toggle.innerHTML = '<i class="bi bi-search"></i> Rechercher un partenaire';
  407.     document.getElementById('heroSearchInput').value = '';
  408.     applyHeroSearch();
  409.   };
  411.   window.applyHeroSearch = function () {
  412.     var q = (document.getElementById('heroSearchInput').value || '').toLowerCase().trim();
  413.     /* Applique sur l'onglet actif */
  414.     var activeTid = getActiveTid();
  415.     if (activeTid) {
  416.       applyFilter(activeTid, q);
  417.     }
  418.   };
  420.   function getActiveTid() {
  421.     var active = document.querySelector('[data-tid].active, [data-tid][aria-selected="true"]');
  422.     if (!active) active = document.querySelector('[data-tid]');
  423.     return active ? parseInt(active.dataset.tid) : null;
  424.   }
  426.   function applyFilter(tid, q) {
  427.     document.querySelectorAll('.ps-item-' + tid).forEach(function (col) {
  428.       var match = !q || col.dataset.nom.includes(q) || col.dataset.adr.includes(q);
  429.       col.style.display = match ? '' : 'none';
  430.     });
  431.     pages[tid] = 1;
  432.     paginate(tid);
  433.   }
  435.   /* ── Pagination ── */
  436.   function paginate(tid) {
  437.     var page = pages[tid];
  438.     var all  = Array.from(document.querySelectorAll('.ps-item-' + tid));
  439.     var vis  = all.filter(function (c) { return c.style.display !== 'none'; });
  440.     var total = vis.length;
  441.     var nPages = Math.ceil(total / PER) || 1;
  442.     var start  = (page - 1) * PER;
  444.     all.forEach(function (c) { c.style.display = 'none'; });
  445.     vis.forEach(function (c, i) { if (i >= start && i < start + PER) c.style.display = ''; });
  447.     var info = document.getElementById('pgInfo' + tid);
  448.     if (info) info.textContent = total ? total + ' résultat' + (total > 1 ? 's' : '') : 'Aucun résultat';
  450.     var pg = document.getElementById('pg' + tid);
  451.     if (!pg) return;
  452.     if (nPages <= 1) { pg.innerHTML = ''; return; }
  454.     var h = '<li class="page-item' + (page === 1 ? ' disabled' : '') + '">'
  455.           + '<button class="page-link" onclick="goPage(' + tid + ',' + (page - 1) + ')">'
  456.           + '<i class="bi bi-chevron-left" style="font-size:.75rem;"></i></button></li>';
  457.     for (var i = 1; i <= nPages; i++) {
  458.       if (i === 1 || i === nPages || Math.abs(i - page) <= 1) {
  459.         h += '<li class="page-item' + (i === page ? ' active' : '') + '">'
  460.            + '<button class="page-link" onclick="goPage(' + tid + ',' + i + ')">' + i + '</button></li>';
  461.       } else if (Math.abs(i - page) === 2) {
  462.         h += '<li class="page-item disabled"><span class="page-link">…</span></li>';
  463.       }
  464.     }
  465.     h += '<li class="page-item' + (page === nPages ? ' disabled' : '') + '">'
  466.        + '<button class="page-link" onclick="goPage(' + tid + ',' + (page + 1) + ')">'
  467.        + '<i class="bi bi-chevron-right" style="font-size:.75rem;"></i></button></li>';
  468.     pg.innerHTML = h;
  469.   }
  471.   window.goPage = function (tid, p) { pages[tid] = p; paginate(tid); };
  473.   /* ── Init ── */
  474.   tabIds.forEach(function (tid) { applyFilter(tid, ''); });
  476.   /* Ré-appliquer le filtre hero au changement d'onglet */
  477.   document.querySelectorAll('[data-tid]').forEach(function (btn) {
  478.     btn.addEventListener('shown.bs.tab', function () {
  479.       var tid = parseInt(this.dataset.tid);
  480.       var q = (document.getElementById('heroSearchInput').value || '').toLowerCase().trim();
  481.       applyFilter(tid, q);
  482.     });
  483.   });
  484. })();
  485. </script>
  486. {% endblock %}