{% extends '@admin/base.html.twig' %}

{% block stylesheets %}
{{ parent() }}
<style>
/* ===== Toolbar (sous-header compact) ===== */
.stat-toolbar{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
}
.stat-toolbar .form-control{ height:32px; padding:.25rem .5rem; }
.stat-toolbar .btn{ height:32px; padding:.25rem .6rem; }

/* ===== Tabs : compacts, scrollables en mobile ===== */
.nav-tabs.nav-tabs-scroll{
  overflow-x:auto; white-space:nowrap; flex-wrap:nowrap; scrollbar-width:thin;
}
.nav-tabs .nav-link{
  display:flex; align-items:center; gap:.4rem; padding:.45rem .75rem;
}
.nav-tabs .nav-link .fa{ opacity:.9 }
.nav-tabs .nav-link.active{
  font-weight:600;
  box-shadow: inset 0 -2px 0 var(--primary, #3a8bfd);
}

/* ===== Contenu des onglets / cartes graphes ===== */
.tab-content{
  background:#fff; border:1px solid #dee2e6; border-top:none; border-radius:0 0 .5rem .5rem;
  padding: 14px;
}
.chart-card{
  border:1px solid #e9ecef; border-radius:.5rem; background:#fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
}
.chart-card .card-header{
  border-bottom:1px dashed #e9ecef; background:transparent;
  padding:.6rem .9rem;
}
.chart-card .card-body{ padding:.9rem; }
.chart-skeleton{
  min-height:220px; background:linear-gradient(90deg,#f6f7f8,#ececec,#f6f7f8);
  background-size:200% 100%; animation:shimmer 1.2s infinite linear;
  border-radius:.35rem;
}
@keyframes shimmer{ to{background-position:-200% 0;} }

/* ===== Menu vertical graphes ===== */
.graph-menu{ border-right:1px solid #f0f0f0; }
.graph-menu .list-group-item{
  border:0; border-radius:0; padding:.55rem .75rem; color:#495057;
}
.graph-menu .list-group-item.active{
  background:#0d6efd10; color:#0d6efd;
  border-left:3px solid #0d6efd; font-weight:600;
}

/* ===== Switch “afficher labels” compact ===== */
.m-switch.m-switch--success input:checked+span:before{ background:#10b981; }

/* ===== Select2 multiple (déjà chez toi, je renforce l’alignement) ===== */
#productIdsEvolutionProduits + .select2-container .select2-selection--multiple{
  min-width:260px!important; min-height:32px!important; padding:.15rem .25rem;
  border:1px solid #ced4da; border-radius:.25rem;
}

/* ===== Résponsivité légère ===== */
@media (max-width: 991.98px){
  .graph-menu{ margin-bottom: .75rem; border-right:0; border-bottom:1px solid #f0f0f0; }
}

/* === Cards graphiques === */
.chart-card{border:1px solid #e9ecef;border-radius:.5rem;background:#fff;overflow:hidden;margin-bottom:1rem;}
.chart-card .card-header{padding:.5rem .75rem;background:#f8f9fa;border-bottom:1px solid #e9ecef;}
.chart-card .card-body{padding:.75rem;}
.chart-toolbar{gap:.5rem;display:flex;flex-wrap:wrap;align-items:center}



/* === Petits contrôles === */
.period-with-icon{padding-left:1.6rem;background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23666'%3E%3Cpath d='M3 2h1v1h6V2h1v1h1a1 1 0 011 1v1H1V4a1 1 0 011-1h1V2zm10 4v6a2 2 0 01-2 2H3a2 2 0 01-2-2V6h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:.45rem 50%;background-size:14px}
.btn-group.special-basis .btn{padding:.15rem .5rem}

/* === Hauteur canvas === */
.chart-h420{height:420px}

/* === Espacements compacts === */
.mb-6{margin-bottom:.6rem!important}




</style>

{% endblock %}

{% block extra_scripts %}
    <script src="{{ asset('js/admin/statistic-sales-charts.js') }}"></script>
{% endblock %}

{% block subheader %}

<div class="badge-titre d-flex justify-content-between align-items-center flex-wrap w-100" style="padding: 1rem; ">

    {# ◀️ Breadcrumb à gauche #}
    <ul class="m-subheader__breadcrumbs m-nav m-nav--inline mb-0">
        <li class="m-nav__item">
            <a href="{{ path('statistic_index') }}" class="m-nav__link">
                <i class="fa fa-chart-line me-2"></i> Statistiques globales
            </a>
        </li>

    </ul>

    <div class="me-3 mb-2 d-flex align-items-center">
        <label class="m-switch m-switch--icon-check m-switch--success">
            <input type="checkbox" id="showLabelsGlobalSwitch" checked>
            <span></span>
        </label>
        <span class="ms-2">Afficher labels</span>

    </div>
</div>


{% endblock %}

{% block bodycontent %}
<div class="container-fluid">

    {# -- Onglets principaux avec icônes -- #}
    <ul class="nav nav-tabs nav-tabs-scroll mb-3" id="mainTabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-bs-toggle="tab" href="#tabVentes">
                <i class="fa fa-shopping-cart"></i> Ventes

                <i class="fa fa-info-circle text-muted ms-2" data-bs-toggle="tooltip"  data-placement="right" title="Les ventes sont calculées initialement sur les commandes dont le statut est Expidié, Livré ou Payé"></i>

            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#tabAchats">
                <i class="fa fa-hand-holding-usd "></i> Achats
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#tabCommandes">
                <i class="fa fa-file-invoice"></i> Commandes
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#tabProduits">
                <i class="fa fa-boxes"></i> Produits
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#tabClients">
                <i class="fa fa-users"></i> Clients
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#tabFournisseurs">
                <i class="fa fa-truck-loading"></i> Fournisseurs
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#tabLivraisons">
                <i class="fa fa-shipping-fast"></i> Livraison
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#tabEquipe">
                <i class="fa fa-user-tie"></i> Équipe
            </a>
        </li>
    </ul>

    <div class="tab-content">


        {# ----------------------- 1️⃣ Ventes ----------------------- #}
        {% include '@admin/statistic/_tab/tab_graph_ventes.html.twig' %}

        {# ----------------------- 2️⃣ Achats ----------------------- #}
        {% include '@admin/statistic/_tab/tab_graph_achats.html.twig' %}

        {# ----------------------- 3️⃣ Commandes -------------------- #}
        {% include '@admin/statistic/_tab/tab_graph_commandes.html.twig' %}

        {# ----------------------- 4️⃣ Produits --------------------- #}
        {% include '@admin/statistic/_tab/tab_graph_produits.html.twig' %}


        {# ------------------- 5️⃣ Clients ------------------- #}
        {% include '@admin/statistic/_tab/tab_graph_clients.html.twig' %}


        {# ------------------- 6️⃣ Fournisseurs ------------------- #}
        {% include '@admin/statistic/_tab/tab_graph_fournisseurs.html.twig' %}

        {# ------------------- 7️⃣ Livraison ------------------- #}
         {% include '@admin/statistic/_tab/tab_graph_livraisons.html.twig' %}


        {# ------------------- 8️⃣ Équipe ------------------- #}
        {% include '@admin/statistic/_tab/tab_graph_equipe.html.twig' %}


    </div>
</div>


{#modal info : description graphique #}
<div class="modal fade" id="chartHelpModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="chartHelpTitle">Aide</h5>
                <button type="button" class="bs-close" data-bs-dismiss="modal" aria-label="Fermer">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="chartHelpBody"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">J’ai compris</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>

    $(document).ready(function() {
        $('#statusTopClients').select2({
            placeholder: "Choisir des statuts",
            allowClear: true,
            width: '100%'
        });
    });

</script>
{% endblock %}