{# === Onglet Équipe === #}
<div class="tab-pane fade" id="tabEquipe">
  <div class="row">
    <div class="col-md-3">
      {# === Menu des graphiques Équipe (icônes colorées) === #}
      <div id="graphMenuEquipe" class="list-group graph-menu">

        <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center active"
            data-bs-target="#graphCmdParUser">
            <span><i class="fa fa-user-check text-info me-2"></i> Nb Cdes / CA / Marge par utilisateur</span>
            <i class="fa fa-info-circle text-secondary" data-bs-toggle="tooltip" data-placement="left"
                title="Classement des utilisateurs par nombre de commandes ou CA net (TTC − coût transporteur) ou Marge, sur la période."></i>
        </a>


        <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
           data-bs-target="#graphEquipeRoleDistribution">
          <span><i class="fa fa-users-cog text-primary me-2"></i> Répartition par rôle / fonction</span>
          <i class="fa fa-info-circle text-secondary" data-bs-toggle="tooltip" data-placement="left"
             title="Part des commandes et du CA par rôle (commercial, service client, logistique…). Permet de visualiser la charge et la contribution par fonction."></i>
        </a>



        <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
           data-bs-target="#graphEquipeSuccessFailure">
          <span><i class="fa fa-balance-scale text-warning me-2"></i> Taux de réussite vs retours/annulations</span>
          <i class="fa fa-info-circle text-secondary" data-bs-toggle="tooltip" data-placement="left"
             title="Pour chaque utilisateur: commandes validées vs commandes annulées/retournées. Vue Nombre ou Taux (%), sur la même base de période."></i>
        </a>

        <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
           data-bs-target="#graphEquipeMonthlyPerformance">
          <span><i class="fa fa-chart-line text-danger me-2"></i> Évolution mensuelle par utilisateur</span>
          <i class="fa fa-info-circle text-secondary" data-bs-toggle="tooltip" data-placement="left"
             title="Courbe mensuelle du CA, de la Marge ou du nombre de commandes par utilisateur. Permet d’analyser la dynamique."></i>
        </a>

      </div>
    </div>

    <div class="col-md-9">
      <div id="graphContainerEquipe">

        {# -- 8-1 Commandes par utilisateur -- #}
        <div id="graphCmdParUser" class="graph-block">
            <div class="card-body">

                {# Notice d’info #}
                <div class="info-hint mb-2">
                    <div class="small">
                        <i class="fa fa-info-circle me-1"></i>
                        Classement par <b>Nb commandes</b>, <b>CA net</b> (TTC − coût transporteur), <b>Marge</b> ou <b>CA+Marge</b>.
                        Par défaut <em>Cette année</em>.
                    </div>
                </div>

                {# Toolbar filtres #}
                <div class="graph-toolbar d-flex flex-wrap align-items-start w-100 mb-3">

                    {# Période — gauche #}
                    <div class="me-3 mb-2 d-inline-flex align-items-center graph-period-left order-first" title="Période">
                        <select id="quickPeriodCmdUser" class="form-control form-control-sm w-auto no-select2 period-with-icon">
                        <option value="all">Toute la période</option>
                        <option value="7days">7 derniers jours</option>
                        <option value="30days">30 derniers jours</option>
                        <option value="week">Cette semaine</option>
                        <option value="last_week">Semaine dernière</option>
                        <option value="month">Ce mois</option>
                        <option value="last_month">Mois dernier</option>
                        <option value="year" selected>Cette année</option>
                        <option value="last_year">Année dernière</option>
                        <option value="custom">Personnalisée</option>
                        </select>
                    </div>

                    {# Métrique — gauche #}
                    <div class="me-3 mb-2 d-inline-flex align-items-center" title="Métrique">
                        <label class="mb-0 me-2" for="metricCmdUser">Métrique</label>
                        <select id="metricCmdUser" class="form-control form-control-sm w-auto no-select2">
                        <option value="count" selected>Nb commandes</option>
                        <option value="amount">CA net (TND)</option>
                        <option value="margin">Marge (TND)</option>
                        <option value="ca_margin">CA + Marge</option>
                        </select>
                    </div>

                    {# Top — gauche #}
                    <div class="me-3 mb-2 d-inline-flex align-items-center">
                        <label class="mb-0 me-2" for="limitCmdUser">Top</label>
                        <select id="limitCmdUser" class="form-control form-control-sm w-auto no-select2">
                        <option>5</option><option selected>10</option><option>15</option>
                        <option>20</option><option>30</option><option>40</option><option>50</option>
                        </select>
                    </div>

                    {# Pousse à droite #}
                    <div class="ms-auto"></div>

                    {# HT/TTC — droite (si CA/Marge/CA+Marge) #}
                    <div class="mb-2 d-inline-flex align-items-center graph-basis-right" id="basisBlockCmdUser" title="Base de calcul">
                        <div id="basisCmdUser" class="btn-group btn-group-sm btn-group-toggle special-basis" data-bs-toggle="buttons">
                        <label class="btn btn-outline-dark active" data-value="ht" id="basisCmdUserHT">
                            <input type="radio" autocomplete="off" checked> HT
                        </label>
                        <label class="btn btn-outline-dark" data-value="ttc" id="basisCmdUserTTC">
                            <input type="radio" autocomplete="off"> TTC
                        </label>
                        </div>
                    </div>

                    {# Type — extrémité droite #}
                    <div class="ms-2 mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                        <select id="chartTypeCmdUser" class="form-control form-control-sm w-auto no-select2 type-select">
                        <option value="bar" selected>Barres</option>
                        <option value="doughnut">Secteur</option>
                        </select>
                    </div>
                </div>

                {# Séparateur #}
                <div class="graph-divider"></div>

                {# Mode personnalisé #}
                <div id="customCmdUserWrapper" class="w-100 d-none">
                    <div class="me-3 mb-2 d-inline-flex align-items-center">
                        <label for="modeCmdUser" class="me-2 mb-0">Mode</label>
                        <select id="modeCmdUser" class="form-control form-control-sm w-auto no-select2">
                        <option value="annee" selected>Par année</option>
                        <option value="mois">Par mois</option>
                        <option value="periode">Par période</option>
                        </select>
                    </div>

                    <div id="anneeCmdUserGroup" class="me-3 mb-2 d-inline-flex align-items-center">
                        <label for="startCmdUserYear" class="me-2 mb-0">De</label>
                        <select id="startCmdUserYear" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                        <label for="endCmdUserYear" class="me-2 mb-0">À</label>
                        <select id="endCmdUserYear" class="form-control form-control-sm w-auto no-select2"></select>
                    </div>

                    <div id="moisCmdUserGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                        <label for="singleCmdUserYear" class="me-2 mb-0">Année</label>
                        <select id="singleCmdUserYear" class="form-control form-control-sm w-auto no-select2"></select>
                    </div>

                    <div id="periodeCmdUserGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                        <label for="startDateCmdUser" class="me-2 mb-0">De</label>
                        <input type="date" id="startDateCmdUser" class="form-control form-control-sm w-auto me-2">
                        <label for="endDateCmdUser" class="me-2 mb-0">À</label>
                        <input type="date" id="endDateCmdUser" class="form-control form-control-sm w-auto">
                    </div>
                </div>

                {# Graphique #}
                <div style="height:420px;">
                    <canvas id="chartCmdParUser"></canvas>
                </div>
            </div>
        </div>




       {# 8.2 Répartition par rôle / fonction #}
        <div id="graphEquipeRoleDistribution" class="graph-block d-none">
            <div class="card-body">

                {# Bandeau info #}
                <div class="info-hint mb-2">
                <div class="small">
                    <i class="fa fa-info-circle me-1"></i>
                    Part des commandes et du <b>CA net</b> (<em>TTC − coût transporteur</em>) par rôle.
                </div>
                </div>

                {# Toolbar filtres #}
                <div class="graph-toolbar d-flex flex-wrap align-items-start w-100 mb-3">

                {# Période — gauche #}
                <div class="me-3 mb-2 d-inline-flex align-items-center graph-period-left order-first" title="Période">
                    <select id="quickPeriodEquipeRoleDistribution" class="form-control form-control-sm w-auto no-select2 period-with-icon">
                    <option value="all">Toute la période</option>
                    <option value="7days">7 derniers jours</option>
                    <option value="30days">30 derniers jours</option>
                    <option value="week">Cette semaine</option>
                    <option value="last_week">Semaine dernière</option>
                    <option value="month">Ce mois</option>
                    <option value="last_month">Mois dernier</option>
                    <option value="year" selected>Cette année</option>
                    <option value="last_year">Année dernière</option>
                    <option value="custom">Personnalisée</option>
                    </select>
                </div>

                {# Métrique — gauche #}
                <div class="me-3 mb-2 d-inline-flex align-items-center" title="Métrique">
                    <label for="metricEquipeRoleDistribution" class="mb-0 me-2">Métrique</label>
                    <select id="metricEquipeRoleDistribution" class="form-control form-control-sm w-auto no-select2">
                    <option value="orders" selected>Nb commandes</option>
                    <option value="amount">CA net (TTC)</option>
                    </select>
                </div>

                {# Top — gauche #}
                <div class="me-3 mb-2 d-inline-flex align-items-center">
                    <label class="mb-0 me-2">Top</label>
                    <select id="limitEquipeRoleDistribution" class="form-control form-control-sm w-auto no-select2">
                    <option>5</option><option selected>10</option><option>15</option>
                    <option>20</option><option>30</option><option>40</option><option>50</option>
                    </select>
                </div>

                {# Pousse à droite #}
                <div class="ms-auto"></div>

                {# Type — extrémité droite #}
                <div class="ms-2 mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                    <select id="chartTypeEquipeRoleDistribution" class="form-control form-control-sm w-auto no-select2 type-select">
                    <option value="bar" selected>Barres</option>
                    <option value="doughnut">Secteur</option>
                    </select>
                </div>
                </div>

                {# Séparateur #}
                <div class="graph-divider"></div>

                {# Mode personnalisé #}
                <div id="customEquipeRoleDistributionWrapper" class="w-100 d-none">
                <div class="me-3 mb-2 d-inline-flex align-items-center">
                    <label for="modeEquipeRole" class="me-2 mb-0">Mode</label>
                    <select id="modeEquipeRole" class="form-control form-control-sm w-auto no-select2">
                    <option value="annee" selected>Par année</option>
                    <option value="mois">Par mois</option>
                    <option value="periode">Par période</option>
                    </select>
                </div>

                <div id="anneeEquipeRoleGroup" class="me-3 mb-2 d-inline-flex align-items-center">
                    <label for="startEquipeRoleYear" class="me-2 mb-0">De</label>
                    <select id="startEquipeRoleYear" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                    <label for="endEquipeRoleYear" class="me-2 mb-0">À</label>
                    <select id="endEquipeRoleYear" class="form-control form-control-sm w-auto no-select2"></select>
                </div>

                <div id="moisEquipeRoleGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                    <label for="singleEquipeRoleYear" class="me-2 mb-0">Année</label>
                    <select id="singleEquipeRoleYear" class="form-control form-control-sm w-auto no-select2"></select>
                </div>

                <div id="periodeEquipeRoleGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                    <label for="startDateEquipeRoleDistribution" class="me-2 mb-0">De</label>
                    <input type="date" id="startDateEquipeRoleDistribution" class="form-control form-control-sm w-auto me-2">
                    <label for="endDateEquipeRoleDistribution" class="me-2 mb-0">À</label>
                    <input type="date" id="endDateEquipeRoleDistribution" class="form-control form-control-sm w-auto">
                </div>
                </div>

                {# Canvas #}
                <div style="height:420px;">
                <canvas id="chartEquipeRoleDistribution"></canvas>
                </div>

            </div>
        </div>



        {# 8.3 Taux de réussite vs retours/annulations #}
        <div id="graphEquipeSuccessFailure" class="graph-block d-none">
            <div class="card-body">

                {# Info #}
                <div class="info-hint mb-2">
                <div class="small">
                    <i class="fa fa-info-circle me-1"></i>
                    Pour chaque utilisateur : volumes d’<b>annulations/retours</b> vs commandes valides. Affichage en <b>nombre</b> ou en <b>%</b>. Par défaut <em>Cette année</em>.
                </div>
                </div>

                {# Toolbar filtres #}
                <div class="graph-toolbar d-flex flex-wrap align-items-start w-100 mb-3">

                {# Période — gauche #}
                <div class="me-3 mb-2 d-inline-flex align-items-center graph-period-left order-first">
                    <select id="quickPeriodEquipeSuccessFailure" class="form-control form-control-sm w-auto no-select2 period-with-icon">
                    <option value="all">Toute la période</option>
                    <option value="7days">7 derniers jours</option>
                    <option value="30days">30 derniers jours</option>
                    <option value="week">Cette semaine</option>
                    <option value="last_week">Semaine dernière</option>
                    <option value="month">Ce mois</option>
                    <option value="last_month">Mois dernier</option>
                    <option value="year" selected>Cette année</option>
                    <option value="last_year">Année dernière</option>
                    <option value="custom">Personnalisée</option>
                    </select>
                </div>

                {# Type de données — gauche #}
                <div class="me-3 mb-2 d-inline-flex align-items-center">
                    <label for="kindEquipeSuccessFailure" class="mb-0 me-2">Type</label>
                    <select id="kindEquipeSuccessFailure" class="form-control form-control-sm w-auto no-select2">
                    <option value="all" selected>Retours + Annulations</option>
                    <option value="retour">Retours</option>
                    <option value="annule">Annulations</option>
                    </select>
                </div>

                {# Affichage — gauche #}
                <div class="me-3 mb-2 d-inline-flex align-items-center">
                    <label for="metricEquipeSuccessFailure" class="mb-0 me-2">Affichage</label>
                    <select id="metricEquipeSuccessFailure" class="form-control form-control-sm w-auto no-select2">
                    <option value="nb" selected>Nombre</option>
                    <option value="percent">% du valide</option>
                    </select>
                </div>

                {# Top — gauche #}
                <div class="me-3 mb-2 d-inline-flex align-items-center">
                    <label class="mb-0 me-2">Top</label>
                    <select id="limitEquipeSuccessFailure" class="form-control form-control-sm w-auto no-select2">
                    <option>5</option><option selected>10</option><option>15</option>
                    <option>20</option><option>30</option><option>40</option><option>50</option>
                    </select>
                </div>

                {# Pousse à droite #}
                <div class="ms-auto"></div>

                {# Type de graphique — extrémité droite #}
                <div class="ms-2 mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                    <select id="chartTypeEquipeSuccessFailure" class="form-control form-control-sm w-auto no-select2 type-select">
                    <option value="bar" selected>Barres</option>
                    <option value="doughnut">Secteur</option>
                    </select>
                </div>
                </div>

                {# Séparateur #}
                <div class="graph-divider"></div>

                {# Mode personnalisé simple (dates) #}
                <div id="customEquipeSuccessFailureWrapper" class="w-100 d-none mt-2">
                <div class="me-3 mb-2 d-inline-flex align-items-center">
                    <label for="startDateEquipeSuccessFailure" class="mb-0 me-2">De</label>
                    <input type="date" id="startDateEquipeSuccessFailure" class="form-control form-control-sm w-auto me-2">
                    <label for="endDateEquipeSuccessFailure" class="mb-0 me-2">À</label>
                    <input type="date" id="endDateEquipeSuccessFailure" class="form-control form-control-sm w-auto">
                </div>
                </div>

                {# Canvas #}
                <div style="height:420px;">
                <canvas id="chartEquipeSuccessFailure"></canvas>
                </div>

            </div>
        </div>


        {# 8.4 Évolution mensuelle de la performance par utilisateur #}
        <div id="graphEquipeMonthlyPerformance" class="graph-block d-none">
            <div class="card-body">

                {# Notice d’info #}
                <div class="info-hint mb-2">
                <div class="small">
                    <i class="fa fa-info-circle me-1"></i>
                    Courbe par utilisateur. Granularité auto si période ≤ 30 jours (<em>jour</em>), sinon <em>mois</em>.
                </div>
                </div>

                {# Toolbar filtres #}
                <div class="graph-toolbar d-flex flex-wrap align-items-start w-100 mb-3">

                {# Métrique — gauche #}
                <div class="me-3 mb-2 d-inline-flex align-items-center" title="Métrique">
                    <label for="metricEquipeMonthlyPerformance" class="me-2 mb-0">Métrique</label>
                    <select id="metricEquipeMonthlyPerformance" class="form-control form-control-sm w-auto no-select2">
                    <option value="amount" selected>Chiffre d’affaires</option>
                    <option value="margin">Marge</option>
                    <option value="orders">Nb commandes</option>
                    </select>
                </div>

                {# Période — gauche #}
                <div class="me-3 mb-2 d-inline-flex align-items-center" title="Période">
                    <label for="quickPeriodEquipeMonthlyPerformance" class="me-2 mb-0">Période</label>
                    <select id="quickPeriodEquipeMonthlyPerformance" class="form-control form-control-sm w-auto no-select2 period-with-icon">
                    <option value="all">Toute la période</option>
                    <option value="7days">7 derniers jours</option>
                    <option value="30days">30 derniers jours</option>
                    <option value="week">Cette semaine</option>
                    <option value="last_week">Semaine dernière</option>
                    <option value="month">Ce mois</option>
                    <option value="last_month">Mois dernier</option>
                    <option value="year" selected>Cette année</option>
                    <option value="last_year">Année dernière</option>
                    <option value="custom">Personnalisée</option>
                    </select>
                </div>

                {# Utilisateurs — multi #}
                <div class="mb-2 d-inline-flex align-items-center" title="Utilisateurs">
                    <label for="usersEquipeMonthlyPerformance" class="me-2 mb-0">Utilisateurs</label>
                    <select id="usersEquipeMonthlyPerformance" class="form-control form-control-sm statistic-select-multi" multiple>
                    {# Rempli dynamiquement (Select2) #}
                    </select>
                </div>
                </div>

                {# Séparateur #}
                <div class="graph-divider"></div>

                {# Mode personnalisé (dates) #}
                <div id="customEquipeMonthlyPerformanceWrapper" class="w-100 d-none mt-2">
                <div class="me-3 mb-2 d-inline-flex align-items-center">
                    <label for="startDateEquipeMonthlyPerformance" class="me-2 mb-0">Date début</label>
                    <input type="date" id="startDateEquipeMonthlyPerformance" class="form-control form-control-sm w-auto">
                </div>
                <div class="me-3 mb-2 d-inline-flex align-items-center">
                    <label for="endDateEquipeMonthlyPerformance" class="me-2 mb-0">Date fin</label>
                    <input type="date" id="endDateEquipeMonthlyPerformance" class="form-control form-control-sm w-auto">
                </div>
                </div>

                {# Graphique #}
                <div style="height:420px;">
                <canvas id="chartEquipeMonthlyPerformance"></canvas>
                </div>

            </div>
        </div>


      </div> {# /graphContainerEquipe #}
    </div>
  </div>
</div>