{# Reprise exacte du contenu stats produit (HTML/CSS/JS) en l'appliquant
   au premier produit lie au pack. #}

{% set firstItem = pack.items|first %}
{% set produit = firstItem and firstItem.produit is defined ? firstItem.produit : null %}
{% set decliPositions = decliPositions|default([]) %}
{% set arrayRight = arrayRight|default(['STATISTIQUE']) %}

{% if produit %}
  {% include 'admin/produit/_tab/tab_statistiques.html.twig' with {
    produit: produit,
    decliPositions: decliPositions,
    arrayRight: arrayRight
  } %}

  <script>
    (function () {
      function showPackStatsContent() {
        var root = document.querySelector('#pack_stats #content_stats');
        if (!root) return;
        // Le template produit arrive en .tab-pane (cache par defaut).
        root.classList.remove('tab-pane', 'fade');
        root.classList.add('show', 'active');
        root.style.display = 'block';
      }

      function resizePackCharts() {
        var scope = document.querySelector('#pack_stats #graphContainerProduit');
        if (!scope) return;
        scope.querySelectorAll('canvas').forEach(function (cv) {
          if (cv && cv._chart && typeof cv._chart.resize === 'function') {
            cv._chart.resize();
            cv._chart.update('none');
          }
        });
      }

      document.addEventListener('DOMContentLoaded', function () {
        showPackStatsContent();
      });

      document.addEventListener('shown.bs.tab', function (e) {
        var trigger = e && e.target ? (e.target.getAttribute('href') || e.target.getAttribute('data-bs-target') || '') : '';
        if (trigger === '#pack_stats') {
          showPackStatsContent();
          setTimeout(resizePackCharts, 60);
        }
      });
    })();
  </script>
{% else %}
  <div class="alert alert-warning mb-0">
    Aucun produit lie a ce pack. Les graphiques statistiques necessitent au moins un produit.
  </div>
{% endif %}