{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('assets/css/_topnav.css') }}">
{% endblock %}

<header id="m_header" class="crm-topbar border-bottom bg-white">
    <div class="container-fluid">
        <div class="d-flex align-items-center justify-content-between gap-2 topnav-main">

            {# LEFT #}
              <div class="d-flex align-items-center gap-2 topnav-left">
                  <a href="{{ path('index') }}" class="d-inline-flex align-items-center topnav-logo">

                      <img src="{{ asset('images/logo3.png') }}" alt="Logo" height="40">
                  </a>

                  <button type="button"
                          id="m_aside_left_minimize_toggle"
                          class="btn btn-sm btn-light d-none d-lg-inline-flex"
                          aria-label="Réduire le menu">
                      <i class="fa fa-bars"></i>
                  </button>

                  <button type="button"
                          id="m_aside_left_offcanvas_toggle"
                          class="btn btn-sm btn-light d-inline-flex d-lg-none"
                          data-bs-toggle="offcanvas"
                          data-bs-target="#asideMobile"
                          aria-controls="asideMobile"
                          aria-label="Ouvrir le menu">
                      <i class="fa fa-bars"></i>
                  </button>
                  {#  icônes recherche  #}
                   <ul class="nav d-flex align-items-center gap-3 mb-0">

                      {# Actions rapides #}
                      <li class="nav-item crm-header-actions">
                          <div class="crm-header-actions-row d-flex gap-2">
                              {% if "PRODUIT_CREATE" in arrayRight %}
                                  <a class="crm-header-action-btn d-flex align-items-center justify-content-center rounded-circle bg-dark text-white shadow-sm"
                                    data-bs-toggle="modal"
                                    data-bs-target="#m_modal_produit"
                                    title="Créer un produit">
                                      <i class="flaticon-app" style="font-size:1rem;"></i>
                                  </a>
                              {% endif %}

                              {% if "USERS" in arrayRight %}
                                  <a href="#"
                                    class="modalNewUser crm-header-action-btn d-flex align-items-center justify-content-center rounded-circle bg-dark text-white shadow-sm"
                                    data-type="client"
                                    title="Créer un client"
                                    style="width:36px;height:36px;">
                                      <i class="flaticon-user-add" style="font-size:1rem;"></i>
                                  </a>
                              {% endif %}
                          </div>
                      </li>

                      <li class="nav-item dropdown crm-nav-sep"> </li>
                      {# Recherche contacts #}
                      <li class="nav-item dropdown">
                          <button class="btn btn-sm btn-light btn-search-contact"
                                  type="button"
                                  data-bs-toggle="dropdown"
                                  data-bs-auto-close="outside"

                                  title="Recherche Contacts">
                              <i class="fa fa-users text-primary"></i>
                          </button>
                          <div class="dropdown-menu p-2 shadow top-search-menu">
                              <input type="search" id="search_user"
                                    class="form-control"
                                    placeholder="Rechercher un client...">
                              <div id="loader-user-search" class="text-center py-2 d-none">
                                  <i class="fas fa-spinner fa-spin text-primary"></i>
                              </div>
                              <ul class="list-unstyled mt-2 mb-0" id="content-result-user"></ul>
                              <div id="no-user-result" class="small text-muted d-none">Aucun contact trouvé.</div>
                          </div>
                      </li>

                      {# Recherche produits #}
                      <li class="nav-item dropdown">
                          <button class="btn btn-sm btn-light btn-search-product"
                                  type="button"
                                  data-bs-toggle="dropdown"
                                  data-bs-auto-close="outside"

                                  title="Recherche Produits">
                              <i class="fa fa-cube text-primary"></i>
                          </button>
                          <div class="dropdown-menu p-2 shadow top-search-menu">
                              <input type="search" id="search_produit"
                                    class="form-control"
                                    placeholder="Rechercher un produit...">
                              <ul class="list-unstyled mt-2 mb-0" id="content-result-produit"></ul>
                          </div>
                      </li>

                      {# Recherche déclinaisons #}
                      <li class="nav-item dropdown">
                          <button class="btn btn-sm btn-light btn-search-declinaison"
                                  type="button"
                                  data-bs-toggle="dropdown"
                                  data-bs-auto-close="outside"

                                  title="Recherche Déclinaisons">
                              <i class="fa fa-cubes text-info"></i>
                          </button>
                          <div class="dropdown-menu p-2 shadow top-search-menu">
                              <input type="search" id="search_declinaison"
                                    class="form-control"
                                    placeholder="Rechercher une déclinaison...">
                              <ul class="list-unstyled mt-2 mb-0" id="content-result-declinaison"></ul>
                          </div>
                      </li>

                      {# Recherche rapide #}
                      <li class="nav-item dropdown">
                          <button class="btn btn-sm btn-light btn-search-global"
                                  type="button"
                                  id="quickSearchBtn"
                                  data-bs-toggle="dropdown"
                                  data-bs-auto-close="outside"

                                  title="Recherche rapide (client, BC, BEC, FAC...)">
                              <i class="fa fa-search text-primary"></i>
                          </button>
                          <div class="dropdown-menu p-2 shadow top-search-menu">
                              <input type="text"
                                    id="m_quicksearch_input"
                                    class="form-control"
                                    placeholder="Recherche rapide...">
                              <div class="mt-2" id="m_quicksearch_results"></div>
                          </div>
                      </li>

                  </ul>
                   {# CENTER: Raccourcis Statuts #}
                    <div class="d-none d-md-flex align-items-center topnav-center ms-2 me-auto">


                        <ul class="nav mb-0">
                            {# ===== Raccourcis Statuts : 2 blocs sur 1 ligne ===== #}
                            <li class="nav-item list-unstyled">
                                <div class="crm-quick-actions">
                                    <input type="checkbox" id="quick-actions-toggle" class="crm-quick-actions-toggle">
                                    <div class="quick-actions-row">

                                        {# --- Bloc 0 : commandes du jour --- #}
                                        <ul class="quick-actions-box quick-actions-box--compact">

                                            <li class="m-menu__item">
                                                <a href="{{ path('document_index', {'type':'commande','category':'client','date':'today'}) }}"
                                                    class="m-menu_link text-decoration-none"
                                                    data-bs-toggle="tooltip"
                                                    title="Commandes du jour">
                                                    <span class="icon-wrapper alert-accepte">
                                                        <i class="m-menu_link-icon fa fa-calendar-day topnav-kpi-icon"></i>
                                                        <span id="topnav-kpi-nb-commande" class="status-badge">0</span>
                                                    </span>
                                                </a>
                                            </li>
                                        </ul>

                                        {# --- Bloc 1 : Commandes --- #}
                                        <ul class="quick-actions-box">
                                            <li  class="qa-title qa-title-gap" data-bs-toggle="tooltip" title="Commandes à  suivre">
                                                <i class="fa fa-shopping-bag"></i>
                                            </li>
                                            <li class="m-menu__item">
                                                <a href="{{ path('document_index', {'type':'commande','category':'client','statut':'en-attente','date':'All'}) }}"
                                                    class="m-menu_link" data-bs-toggle="tooltip" title="BC en attente">
                                                    <span class="icon-wrapper alert-en-attente">
                                                        <i class="m-menu_link-icon fa fa-clock"></i>
                                                            <span class="status-badge" data-status-key="commande.en-attente">{{ Globals.getCountDocumentByType('commande','en-attente')['count'] ?? 0 }}</span>
                                                    </span>
                                                </a>
                                            </li>
                                            <li class="m-menu__item">
                                                <a href="{{ path('document_index', {'type':'commande','category':'client','statut':'accepte','date':'All'}) }}"
                                                    class="m-menu_link" data-bs-toggle="tooltip" title="BC accepté">
                                                    <span class="icon-wrapper alert-accepte">
                                                        <i class="m-menu_link-icon fa fa-check-circle"></i>
                                                            <span class="status-badge" data-status-key="commande.accepte">{{ Globals.getCountDocumentByType('commande','accepte')['count'] ?? 0 }}</span>
                                                    </span>
                                                </a>
                                            </li>
                                            <li class="m-menu__item">
                                                <a href="{{ path('document_index', {'type':'commande','category':'client','statut':'a-expedier','date':'All'}) }}"
                                                    class="m-menu_link" data-bs-toggle="tooltip" title="BC Prêts à  expédier">
                                                    <span class="icon-wrapper alert-a-expedier">
                                                        <i class="m-menu_link-icon fa fa-truck"></i>
                                                            <span class="status-badge" data-status-key="commande.a-expedier">{{ Globals.getCountDocumentByType('commande','a-expedier')['count'] ?? 0 }}</span>
                                                    </span>
                                                </a>
                                            </li>
                                            <li class="m-menu__item">
                                                <a href="{{ path('document_index', {'type':'commande','category':'client','statut':'retour-en-cours','date':'All'}) }}"
                                                    class="m-menu_link" data-bs-toggle="tooltip" title="BC Retour en cours">
                                                    <span class="icon-wrapper alert-retour-en-cours">
                                                        <i class="m-menu_link-icon fa fa-reply"></i>
                                                            <span class="status-badge" data-status-key="commande.retour-en-cours">{{ Globals.getCountDocumentByType('commande','retour-en-cours')['count'] ?? 0 }}</span>
                                                    </span>
                                                </a>
                                            </li>
                                        </ul>

                                        {# --- Bloc 2 : échanges --- #}
                                        <ul class="quick-actions-box" >
                                            <li class="qa-title qa-title-gap" data-bs-toggle="tooltip" title="échanges à  suivre">
                                                <i class="fas fa-exchange-alt"></i>
                                            </li>
                                            <li class="m-menu__item">
                                                <a href="{{ path('document_index', {'type':'echange','category':'client','statut':'en-attente','date':'All'}) }}"
                                                    class="m-menu_link" data-bs-toggle="tooltip" title="BEC En attente">
                                                    <span class="icon-wrapper alert-en-attente">
                                                        <i class="m-menu_link-icon fa fa-clock"></i>
                                                        <span class="status-badge" data-status-key="echange.en-attente">{{ Globals.getCountDocumentByType('echange','en-attente')['count'] ?? 0 }}</span>
                                                    </span>
                                                </a>
                                            </li>
                                            <li class="m-menu__item">
                                                <a href="{{ path('document_index', {'type':'echange','category':'client','statut':'accepte','date':'All'}) }}"
                                                    class="m-menu_link" data-bs-toggle="tooltip" title="BEC Accepté">
                                                    <span class="icon-wrapper alert-accepte">
                                                        <i class="m-menu_link-icon fa fa-check-circle"></i>
                                                            <span class="status-badge" data-status-key="echange.accepte">{{ Globals.getCountDocumentByType('echange','accepte')['count'] ?? 0 }}</span>
                                                    </span>
                                                </a>
                                            </li>
                                            <li class="m-menu__item">
                                                <a href="{{ path('document_index', {'type':'echange','category':'client','statut':'a-expedier','date':'All'}) }}"
                                                    class="m-menu_link" data-bs-toggle="tooltip" title="BEC Prêts à  expédier">
                                                    <span class="icon-wrapper alert-a-expedier">
                                                        <i class="m-menu_link-icon fa fa-truck"></i>
                                                            <span class="status-badge" data-status-key="echange.a-expedier">{{ Globals.getCountDocumentByType('echange','a-expedier')['count'] ?? 0 }}</span>
                                                    </span>
                                                </a>
                                            </li>
                                            <li class="m-menu__item">
                                                <a href="{{ path('document_index', {'type':'echange','category':'client','statut':'expedie','date':'All'}) }}"
                                                    class="m-menu_link" data-bs-toggle="tooltip" title="BEC non reà§u">
                                                    <span class="icon-wrapper alert-echange-non-recu">
                                                        <i class="m-menu_link-icon fa fa-exclamation-circle"></i>
                                                            <span class="status-badge" data-status-key="echange.expedie">{{ Globals.getCountDocumentByType('echange','expedie')['count'] ?? 0 }}</span>
                                                    </span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>

                                    <label class="crm-quick-actions-btn d-md-none" for="quick-actions-toggle">
                                        <span class="label-open">Voir plus</span>
                                        <span class="label-close">Voir moins</span>
                                    </label>
                                </div>
                            </li>
                        </ul>

                    </div>
                    {# MOBILE: raccourcis compacts #}
                    <div class="topnav-center-mobile d-flex d-md-none align-items-center ms-2 me-auto">
                        <div class="topnav-center-mobile-box">
                            <span class="topnav-mobile-group" data-bs-toggle="tooltip" title="Commandes par statut">
                                <i class="fa fa-shopping-bag"></i>
                            </span>
                            <a href="{{ path('document_index', {'type':'commande','category':'client','date':'today'}) }}"
                               class="m-menu_link text-decoration-none topnav-mobile-today"
                               data-bs-toggle="tooltip"
                               title="Commandes du jour">
                                <span class="icon-wrapper alert-accepte">
                                    <i class="m-menu_link-icon fa fa-calendar-day topnav-kpi-icon"></i>
                                    <span id="topnav-kpi-nb-commande-mobile" class="status-badge">0</span>
                                </span>
                            </a>
                            <a href="{{ path('document_index', {'type':'commande','category':'client','statut':'en-attente','date':'All'}) }}"
                               class="m-menu_link text-decoration-none" data-bs-toggle="tooltip" title="BC en attente">
                                <span class="icon-wrapper alert-en-attente">
                                    <i class="m-menu_link-icon fa fa-clock"></i>
                                    <span class="status-badge" data-status-key="commande.en-attente">{{ Globals.getCountDocumentByType('commande','en-attente')['count'] ?? 0 }}</span>
                                </span>
                            </a>
                            <a href="{{ path('document_index', {'type':'commande','category':'client','statut':'accepte','date':'All'}) }}"
                               class="m-menu_link text-decoration-none" data-bs-toggle="tooltip" title="BC accepté">
                                <span class="icon-wrapper alert-accepte">
                                    <i class="m-menu_link-icon fa fa-check-circle"></i>
                                    <span class="status-badge" data-status-key="commande.accepte">{{ Globals.getCountDocumentByType('commande','accepte')['count'] ?? 0 }}</span>
                                </span>
                            </a>
                            <a href="{{ path('document_index', {'type':'commande','category':'client','statut':'a-expedier','date':'All'}) }}"
                               class="m-menu_link text-decoration-none" data-bs-toggle="tooltip" title="BC à expédier">
                                <span class="icon-wrapper alert-a-expedier">
                                    <i class="m-menu_link-icon fa fa-truck"></i>
                                    <span class="status-badge" data-status-key="commande.a-expedier">{{ Globals.getCountDocumentByType('commande','a-expedier')['count'] ?? 0 }}</span>
                                </span>
                            </a>
                            <a href="{{ path('document_index', {'type':'commande','category':'client','statut':'retour-en-cours','date':'All'}) }}"
                               class="m-menu_link text-decoration-none" data-bs-toggle="tooltip" title="BC retour en cours">
                                <span class="icon-wrapper alert-retour-en-cours">
                                    <i class="m-menu_link-icon fa fa-reply"></i>
                                    <span class="status-badge" data-status-key="commande.retour-en-cours">{{ Globals.getCountDocumentByType('commande','retour-en-cours')['count'] ?? 0 }}</span>
                                </span>
                            </a>
                        </div>
                        <div class="topnav-center-mobile-box">
                            <span class="topnav-mobile-group" data-bs-toggle="tooltip" title="Échanges par statut">
                                <i class="fa fa-exchange-alt"></i>
                            </span>
                            <a href="{{ path('document_index', {'type':'echange','category':'client','statut':'en-attente','date':'All'}) }}"
                               class="m-menu_link text-decoration-none" data-bs-toggle="tooltip" title="BEC en attente">
                                <span class="icon-wrapper alert-en-attente">
                                    <i class="m-menu_link-icon fa fa-exchange-alt"></i>
                                    <span class="status-badge" data-status-key="echange.en-attente">{{ Globals.getCountDocumentByType('echange','en-attente')['count'] ?? 0 }}</span>
                                </span>
                            </a>
                            <a href="{{ path('document_index', {'type':'echange','category':'client','statut':'accepte','date':'All'}) }}"
                               class="m-menu_link text-decoration-none" data-bs-toggle="tooltip" title="BEC accepté">
                                <span class="icon-wrapper alert-accepte">
                                    <i class="m-menu_link-icon fa fa-check-circle"></i>
                                    <span class="status-badge" data-status-key="echange.accepte">{{ Globals.getCountDocumentByType('echange','accepte')['count'] ?? 0 }}</span>
                                </span>
                            </a>
                            <a href="{{ path('document_index', {'type':'echange','category':'client','statut':'a-expedier','date':'All'}) }}"
                               class="m-menu_link text-decoration-none" data-bs-toggle="tooltip" title="BEC à expédier">
                                <span class="icon-wrapper alert-a-expedier">
                                    <i class="m-menu_link-icon fa fa-truck"></i>
                                    <span class="status-badge" data-status-key="echange.a-expedier">{{ Globals.getCountDocumentByType('echange','a-expedier')['count'] ?? 0 }}</span>
                                </span>
                            </a>
                            <a href="{{ path('document_index', {'type':'echange','category':'client','statut':'expedie','date':'All'}) }}"
                               class="m-menu_link text-decoration-none" data-bs-toggle="tooltip" title="BEC non reçu">
                                <span class="icon-wrapper alert-echange-non-recu">
                                    <i class="m-menu_link-icon fa fa-exclamation-circle"></i>
                                    <span class="status-badge" data-status-key="echange.expedie">{{ Globals.getCountDocumentByType('echange','expedie')['count'] ?? 0 }}</span>
                                </span>
                            </a>
                        </div>
                    </div>
                     <span id="topnavStatusUpdate"
                            class="badge bg-success d-none"
                            style="transition:opacity .25s ease;">
                        <i class="fa fa-bell me-1"></i> Statuts mis à  jour
                        </span>
              </div>





            {# Icônes (site + alertes système) #}
            <div class="d-flex align-items-center gap-2 topnav-tools">
                <a href="{{ path('admin_pos_index') }}"
                class="btn btn-sm btn-light"
                data-bs-toggle="tooltip"
                data-bs-placement="bottom"
                title="Ouvrir la caisse">
                    <i class="fa fa-store text-warning"></i>
                </a>

                {# Lien vers le site web #}
                <a href="{{ absolute_url(path('home')) }}"
                target="_blank"
                rel="noopener"
                class="btn btn-sm btn-light"
                data-bs-toggle="tooltip"
                data-bs-placement="bottom"
                title="Voir le site web">
                    <i class="fa fa-globe text-primary"></i>
                </a>

                {# Alertes systèmes #}
                <button type="button"
                        class="btn btn-sm btn-light position-relative"
                        data-bs-toggle="offcanvas"
                        data-bs-target="#systemAlertsOffcanvas"
                        aria-controls="systemAlertsOffcanvas"
                        title="Alertes systeme">
                    <i class="fa fa-bell text-warning"></i>
                    <span id="systemAlertsBadge"
                          class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger d-none">0</span>
                </button>
            </div>
            {# RIGHT (ex: profil) #}
            <div class="d-flex align-items-center gap-2 topnav-right">


                <span id="clock" class="badge bg-dark">{{ "now"|date("H:i A") }}</span>

                <div class="dropdown">
                    <button class="btn btn-sm btn-dark dropdown-toggle" data-bs-toggle="dropdown">
                        <i class="fa fa-user-circle me-1"></i>{{ app.user ? app.user.firstName : 'Utilisateur' }}
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="{{ path('index') }}">Mon profil</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item text-danger" href="{{ path('app_logout') }}">Se déconnecter</a></li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</header>

<div class="offcanvas offcanvas-end" tabindex="-1" id="systemAlertsOffcanvas" aria-labelledby="systemAlertsOffcanvasLabel">
    <div class="offcanvas-header border-bottom">
        <h5 class="offcanvas-title" id="systemAlertsOffcanvasLabel">Alertes systeme</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div class="small text-muted mb-3">Nouveaux clients a verifier</div>
        <div id="systemAlertsEmpty" class="text-muted small">Aucune alerte pour le moment.</div>
        <div id="systemAlertsList" class="d-flex flex-column gap-2"></div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  // Tooltips (uniquement éléments tooltip)
  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (el) {
    if (!bootstrap.Tooltip.getInstance(el)) new bootstrap.Tooltip(el);
  });

  const toggles = document.querySelectorAll('.topnav-left .dropdown > button[data-bs-toggle="dropdown"]');

  function closeOtherDropdowns(currentBtn) {
    document.querySelectorAll('.topnav-left .dropdown-menu.show').forEach(function (menu) {
      const parent = menu.closest('.dropdown');
      const btn = parent ? parent.querySelector('button[data-bs-toggle="dropdown"]') : null;
      if (!btn || btn === currentBtn) return;

      const inst = bootstrap.Dropdown.getInstance(btn) || new bootstrap.Dropdown(btn);
      inst.hide();
    });
  }

  toggles.forEach(function (btn) {
    btn.addEventListener('click', function () {
      closeOtherDropdowns(btn);
    });

    btn.addEventListener('show.bs.dropdown', function () {
      closeOtherDropdowns(btn);
    });

    btn.addEventListener('shown.bs.dropdown', function () {
      const dd = btn.closest('.dropdown');
      const input = dd ? dd.querySelector('input[type="search"], input[type="text"]') : null;
      if (input) {
        input.focus();
        input.select();
      }
    });
  });
});

const TOPNAV_COUNTS_URL = '{{ path('admin_topnav_status_counts') }}';
const TOPNAV_KPIS_URL = '{{ path('admin_dashboard_kpis_today') }}';
const TOPNAV_ALERTS_URL = '{{ path('admin_user_system_alerts_new_web_clients') }}';
const TOPNAV_ALERT_USER_URL_TEMPLATE = '{{ path('user_show', {id: '__ID__'}) }}';

let topnavPrevCounts = {};

function showTopnavUpdateNotice() {
  const el = document.getElementById('topnavStatusUpdate');
  if (!el) return;
  el.classList.remove('d-none');
  el.style.opacity = '1';

  clearTimeout(showTopnavUpdateNotice._t);
  showTopnavUpdateNotice._t = setTimeout(function () {
    el.style.opacity = '0';
    setTimeout(function () {
      el.classList.add('d-none');
      el.style.opacity = '1';
    }, 250);
  }, 5000);
}

function applyTopnavCounts(data) {
  let changed = false;

  document.querySelectorAll('.status-badge[data-status-key]').forEach(function (el) {
    const key = el.getAttribute('data-status-key') || '';
    const parts = key.split('.');
    if (parts.length !== 2) return;

    const type = parts[0];
    const status = parts[1];
    const newVal = Number((data && data[type] && data[type][status]) || 0);
    const oldVal = Object.prototype.hasOwnProperty.call(topnavPrevCounts, key)
      ? Number(topnavPrevCounts[key])
      : null;

    if (oldVal !== null && oldVal !== newVal) {
      changed = true;
      el.classList.remove('is-updated');
      void el.offsetWidth; // reflow pour rejouer l’animation
      el.classList.add('is-updated');
    }

    el.textContent = String(newVal);
    topnavPrevCounts[key] = newVal;
  });

  if (changed) {
    showTopnavUpdateNotice();
  }
}

function applyTopnavAlerts(data) {
  const badge = document.getElementById('systemAlertsBadge');
  const list = document.getElementById('systemAlertsList');
  const empty = document.getElementById('systemAlertsEmpty');
  if (!badge || !list || !empty) return;

  const items = Array.isArray(data && data.items) ? data.items : [];
  const count = Number(data && data.count ? data.count : items.length);

  badge.textContent = String(count);
  badge.classList.toggle('d-none', count < 1);

  list.innerHTML = items.map(function (item) {
    const phone = item.phone ? '<div class="small text-muted"><i class="fa fa-phone me-1"></i>' + item.phone + '</div>' : '';
    const email = item.email ? '<div class="small text-muted"><i class="fa fa-envelope me-1"></i>' + item.email + '</div>' : '';
    return '' +
      '<a href="' + TOPNAV_ALERT_USER_URL_TEMPLATE.replace('__ID__', String(item.id)) + '" class="text-decoration-none border rounded-3 p-2 bg-white">' +
        '<div class="fw-semibold text-dark">' + item.name + '</div>' +
        '<div class="small text-muted mb-1">Ajoute le ' + (item.createdAt || '-') + '</div>' +
        phone +
        email +
      '</a>';
  }).join('');

  empty.classList.toggle('d-none', count > 0);
}

async function refreshTopnavAlerts() {
  try {
    const res = await fetch(TOPNAV_ALERTS_URL, {
      method: 'GET',
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      cache: 'no-store'
    });
    if (!res.ok) return;
    const data = await res.json();
    applyTopnavAlerts(data);
  } catch (e) {
    // silencieux
  }
}

function applyTopnavKpis(data) {
  const el = document.getElementById('topnav-kpi-nb-commande');
  const elMobile = document.getElementById('topnav-kpi-nb-commande-mobile');
  if (!el && !elMobile) return;
  const v = Number((data && data.nbCommandeJour) || 0);
  [el, elMobile].forEach(function (node) {
    if (!node) return;
    const prev = Number(node.textContent || 0);
    if (prev !== v) {
      node.classList.remove('is-updated');
      void node.offsetWidth;
      node.classList.add('is-updated');
    }
    node.textContent = String(v);
  });
}

async function refreshTopnavKpis() {
  try {
    const res = await fetch(TOPNAV_KPIS_URL, {
      method: 'GET',
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      cache: 'no-store'
    });
    if (!res.ok) return;
    const data = await res.json();
    applyTopnavKpis(data);
  } catch (e) {
    // silencieux
  }
}


async function refreshTopnavCounts() {
  try {
    const res = await fetch(TOPNAV_COUNTS_URL, {
      method: 'GET',
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      cache: 'no-store'
    });
    if (!res.ok) return;
    const data = await res.json();
    applyTopnavCounts(data);
  } catch (e) {
    // silencieux
  }
}

refreshTopnavCounts();
refreshTopnavKpis();
refreshTopnavAlerts();
setInterval(function () {
  if (document.visibilityState === 'visible') {
    refreshTopnavCounts();
  }
}, 15000);

setInterval(function () {
  if (document.visibilityState === 'visible') {
    refreshTopnavKpis();
  }
}, 15000);

setInterval(function () {
  if (document.visibilityState === 'visible') {
    refreshTopnavAlerts();
  }
}, 30000);


</script>