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

{% block subheader %}
  <style>
    /* === Dashboard scoped styles (move to crm-theme.css if you want) === */
    .dash .stat-grid{
      display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
      gap:.75rem;
    }
    .dash .status{
      display:flex; align-items:center; justify-content:space-between;
      gap:.75rem; padding:.75rem 1rem;
      border:1px solid var(--crm-border); border-radius:12px; background:#f8fafc;
      transition:box-shadow .15s ease, transform .06s ease;
      text-decoration:none;
    }
    .dash .status:hover{ box-shadow:var(--crm-shadow); transform:translateY(-1px); }
    .dash .status .label{
      display:flex; align-items:center; gap:.45rem; color:#1f2937; font-weight:600;
      font-size:.88rem; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .dash .status .label i{ font-size:16px; color:#475569; }


    /* utilisations des alert-* existantes pour teinter les fonds */
    .dash .status.alert-en-attente{ background:#fff7e6; }
    .dash .status.alert-accepte{ background:#e8f5e9; }
    .dash .status.alert-retour-en-cours{ background:#fff0f6; }
    .dash .status.alert-expediee{ background:#e6f0ff; }

    .dash .kpi-grid{
      display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
      gap:.9rem;
    }
    .dash .kpi{
      background:var(--crm-card); border:1px solid var(--crm-border);
      border-radius:var(--crm-radius); padding:1rem; box-shadow:var(--crm-shadow);
      display:flex; flex-direction:column; gap:.25rem; height:100%;
    }
    .dash .kpi .label{ color:#64748b; font-size:.85rem; }
    .dash .kpi .value{ font-size:1.4rem; font-weight:800; color:#0f172a; }
    .dash .kpi .hint{ font-size:.8rem; color:#6b7280; }
    .dash .kpi .link{ font-size:.82rem; }

    .dash .panel-actions{ margin-left:auto; }

    .kpi-updated { animation: kpiPulse .9s ease; }
    @keyframes kpiPulse {
    0% { transform: scale(1); color: inherit; }
    35% { transform: scale(1.07); color: #198754; }
    100% { transform: scale(1); color: inherit; }
    }

    @media (max-width: 767.98px) {
      .dash .crm-row { display: block; }
      .dash .crm-col-6 { width: 100%; max-width: 100%; }
      .dash .stat-grid { grid-template-columns: 1fr; gap: .5rem; }
      .dash .status { padding: .55rem .7rem; min-width: 0; }
      .dash .status .label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .82rem;
      }
    }
  </style>

  <h3 class="m-subheader__title">Dashboard</h3>
{% endblock %}

{% block breadcrumb %}{% endblock %}

{% block bodycontent %}

<div class="dash">

  {# ======================== Groupe 1 : Statuts Commandes/Échanges ======================== #}
    <div class="crm-panel mb-4">
        <div class="crm-header">
            <span class="crm-badge"><i class="fa fa-clipboard-list"></i></span>
            <h5>Commandes & échanges par statut</h5>
        </div>

        <div class="crm-body">
            <div class="crm-row">
            {# ===== Colonne 1 : Commandes ===== #}
            <div class="crm-col-6">



                <fieldset class="crm-fieldset  p-3">
                    <legend class="crm-legend">
                        <i class="fa fa-shopping-bag me-2"></i> Commandes
                    </legend>


                    <div class="stat-grid">
                       {% set cardsCommande = [
                        {'label':'En Attente','icon':'fa fa-clock','route':path('document_index', {'type':'commande','category':'client','statut':'en-attente','date':'All'}),'count': Globals.getCountDocumentByType("commande","en-attente").count, 'alert':'alert-en-attente'},
                        {'label':'Accepté','icon':'fa fa-check-circle','route':path('document_index', {'type':'commande','category':'client','statut':'accepte','date':'All'}),'count': Globals.getCountDocumentByType("commande","accepte").count, 'alert':'alert-accepte'},
                        {'label':'À Expédier','icon':'fa fa-truck','route':path('document_index', {'type':'commande','category':'client','statut':'a-expedier','date':'All'}),'count': Globals.getCountDocumentByType("commande","a-expedier").count, 'alert':'alert-a-expedier'},
                        {'label':'Retour En Cours','icon':'fa fa-reply','route':path('document_index', {'type':'commande','category':'client','statut':'retour-en-cours','date':'All'}),'count': Globals.getCountDocumentByType("commande","retour-en-cours").count, 'alert':'alert-retour-en-cours'}
                        ] %}


                        {% for item in cardsCommande %}
                        <a class="status {{ item.alert }}" href="{{ item.route }}">
                            <span class="label"><i class="{{ item.icon }}"></i> {{ item.label }}</span>
                            <span class="crm-badge-soft warning">{{ item.count }}</span>
                        </a>
                        {% endfor %}
                    </div>
                </fieldset>
            </div>

            {# ===== Colonne 2 : Échanges ===== #}
            <div class="crm-col-6">
                <fieldset class="crm-fieldset  p-3">
                    <legend class="crm-legend">
                        <i class="fa fa-exchange-alt me-2"></i> Échanges
                    </legend>

                    <div class="stat-grid">
                        {% set cardsEchange = [
                        {'label':'BEC En Attente','icon':'fa fa-clock','route':path('document_index', {'type':'echange','category':'client','statut':'en-attente','date':'All'}),'count': Globals.getCountDocumentByType("echange","en-attente").count, 'alert':'alert-en-attente'},
                        {'label':'BEC Accepté','icon':'fa fa-check-circle','route':path('document_index', {'type':'echange','category':'client','statut':'accepte','date':'All'}),'count': Globals.getCountDocumentByType("echange","accepte").count, 'alert':'alert-accepte'},
                        {'label': 'BC À Expédier', 'icon': 'fa fa-truck', 'route': path('document_index', {'type': 'echange', 'category': 'client', 'statut': 'a-expedier', 'date': 'All'}), 'count': Globals.getCountDocumentByType('echange', 'a-expedier').count, 'alert': 'alert-a-expedier' },

                        {'label':'BEC Non Reçu','icon':'fa fa-exclamation-circle','route':path('document_index', {'type':'echange','category':'client','statut':'expedie','date':'All'}),'count': Globals.getCountDocumentByType("echange","Expédié").count, 'alert':'alert-echange-non-recu'}
                        ] %}

                        {% for item in cardsEchange %}
                        <a class="status {{ item.alert }}" href="{{ item.route }}">
                            <span class="label"><i class="{{ item.icon }}"></i> {{ item.label }}</span>
                            <span class="crm-badge-soft warning">{{ item.count }}</span>
                        </a>
                        {% endfor %}
                    </div>
                </fieldset>
            </div>
            </div>
        </div>
    </div>


  {# ======================== Groupe 2 : KPIs du jour ======================== #}
    <div class="crm-panel mb-4">
        <div class="crm-header">
            <span class="crm-badge"><i class="fa fa-chart-line"></i></span>
            <h5>KPIs du jour : Aujourd'hui</h5>
        </div>
        <div class="crm-body">
            <div class="kpi-grid">

            <div class="kpi">
                <div class="label">Nb Commandes</div>
                <div class="value text-warning" id="kpi-nb-commande">{{ nbCommandeJour|default(0) }}</div>

            </div>

             {# ➜ NOUVELLE CARTE : Nb d'échanges aujourd'hui #}
            <div class="kpi">
                <div class="label">Nb d'Échanges</div>
                <div class="value text-primary" id="kpi-nb-echange">{{ nbEchangeJour|default(0) }}</div>

            </div>

            {% if is_granted('ROLE_SUPER_ADMIN') or is_granted('STATISTIQUE') %}
              <div class="kpi">
                    <div class="label">
                        <i class="fa fa-box-open  me-1"  data-bs-toggle="tooltip" data-bs-toggle="tooltip" title="Total sans frais de livraison"></i>
                        Total ventes <span class="text-muted small mb-2"> (Sans frais)</span>
                    </div>

                    {# === Bases de calcul === #}
                    {% set totalAvec = (totalVenteAvecFrais is defined and totalVenteAvecFrais is not null) ? totalVenteAvecFrais : totalVente %}
                    {% set totalSans = totalVenteSansFrais|default(0) %}
                    {% set fraisLiv = (totalAvec - totalSans)|default(0) %}

                    {# === Montant principal : SANS frais (affiché en premier) === #}
                    <div class="value text-primary mb-1" id="kpi-total-sans">{{ totalSans|number_format(3, '.', ' ') }} <sup class="crm-muted">TND</sup></div>



                    {# === Détails : AVEC frais & Frais de livraison === #}
                    <div class="d-flex justify-content-between align-items-baseline py-1 border-top">
                        <div class="text-muted small">
                        <i class="fa fa-receipt text-primary me-1"
                            data-bs-toggle="tooltip" data-bs-toggle="tooltip"
                            title="Total avec frais de livraison"></i>
                        Avec frais
                        </div>
                        <div class="fw-bold" id="kpi-total-avec">{{ totalAvec|number_format(3, '.', ' ') }} <sup class="crm-muted">TND</sup></div>

                    </div>

                    <div class="d-flex justify-content-between align-items-baseline py-1">
                        <div class="text-muted small">
                        <i class="fa fa-truck text-info me-1"
                            data-bs-toggle="tooltip" data-bs-toggle="tooltip"
                            title="Frais de livraison inclus dans le total"></i>
                        Frais de livraison
                        </div>
                        <div id="kpi-frais-liv">{{ (fraisLiv > 0 ? fraisLiv : 0)|number_format(3, '.', ' ') }} <sup class="crm-muted">TND</sup></div>

                    </div>
                </div>

            {% endif %}



            <div class="kpi">
                <div class="label">Produits</div>
                <div class="value text-info">{{ countProduit|default(0) }}</div>
                <div class="hint">En stock</div>
            </div>

            {% if is_granted('ROLE_SUPER_ADMIN') or is_granted('STATISTIQUE') %}
                <div class="kpi">
                <div class="label">Clients</div>
                <div class="value text-success">{{ countClient|number_format(0, '.', ',') }}</div>
                <div class="hint">Total inscrits</div>
                </div>
            {% endif %}

            <div class="kpi">
                <div class="label">Utilisateurs connectés</div>
                <div class="value">{{ nbUsersConnectes|default(0) }}</div>
                <div class="link"><a href="#m_widget4_tab1_content" class="text-primary">Voir l'historique</a></div>
            </div>

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


  {% if is_granted('ROLE_SUPER_ADMIN') %}
    {# ====================== Rangée à 2 colonnes : Activités & Historique connexions ====================== #}
    <div class="crm-row">

    {# ========================= Colonne 1/2 : ACTIVITÉS ÉQUIPE ========================= #}
        <div class="crm-col-6">
            <div class="crm-panel h-100">
                <div class="crm-header">
                    <span class="crm-badge"><i class="fa fa-stream"></i></span>
                    <h5>Activités de votre équipe</h5>
                </div>

                <div class="crm-body">

                {# Barre outil compacte : select étroit + dates en ligne #}
                <div class="panel-actions d-flex align-items-center flex-wrap mb-2">

                    <label for="quickPeriodClientsTop" class="mb-0 me-2">Période</label>

                    {# Select compact (largeur réduite) #}
                    <select id="quickPeriodClientsTop" class="form-control form-control-sm w-auto no-select2 period-with-icon" title = "Choisir la période"">
                        <option value="today" selected>Aujourd'hui</option>
                        <option value="3days">3 derniers jours</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">Cette année</option>
                        <option value="last_year">Année dernière</option>
                        <option value="custom">Personnalisée</option>
                    </select>

                    {# Dates + bouton sur la même ligne (masquées par défaut) #}
                    <div id="customRangeActivities" class="d-none align-items-center">
                        <input type="date" id="customStartActivities"
                                class="form-control form-control-sm date-compact me-2" autocomplete="off">
                        <span class="mx-1">→</span>
                        <input type="date" id="customEndActivities"
                                class="form-control form-control-sm date-compact mx-2" autocomplete="off">
                        <button id="btnApplyCustomActivities" class="btn btn-sm btn-dark">OK</button>
                    </div>
                </div>

                {# Contenu remplacé via AJAX #}
                <div id="activitiesContainer" style="max-height:400px; overflow-y:auto; position:relative;">

                    {% include '@admin/dashboard/_activities_timeline.html.twig' with {'activities': todayActivities|default([])} %}
                </div>

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



 {# ========================= Colonne 2/2 : HISTORIQUE CONNEXIONS (AJAX) ========================= #}
        <div class="crm-col-6">
            <div class="crm-panel h-100">
                <div class="crm-header">
                    <span class="crm-badge"><i class="fa fa-history"></i></span>
                    <h5>Historique de connexion</h5>
                </div>

                <div class="crm-body">
                    {# Barre outils en ligne : user + période + dates custom #}
                    <div class="inline-filters d-flex align-items-center flex-nowrap" style="overflow-x:auto; gap:.5rem;">
                        <label class="crm-label small mb-0">Utilisateur</label>
                        <select id="logUserSelect" class="form-control form-control-sm no-select2" style="width:160px;">
                        <option value="all" {% if log_user == 'all' %}selected{% endif %}>Tous les utilisateurs</option>
                        {% for user in users %}
                            <option value="{{ user.id }}" {% if log_user == user.id %}selected{% endif %}>{{ user.firstName }}</option>
                        {% endfor %}
                        </select>

                        <label for="logPeriodSelect" class="crm-label small mb-0">Période</label>
                        <select id="logPeriodSelect" class="form-control form-control-sm select-compact no-select2" style="width:150px;">
                        <option value="today" selected>Aujourd'hui</option>
                        <option value="3days">3 derniers jours</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">Cette année</option>
                        <option value="last_year">Année dernière</option>
                        <option value="custom">Personnalisée</option>
                        </select>

                        {# Dates custom + bouton (masqué tant que période ≠ custom) #}
                        <div id="logCustomRange" class="d-none d-flex align-items-center" style="gap:.4rem;">
                        <input type="date" id="logStart" class="form-control form-control-sm date-compact" style="width:135px;" autocomplete="off">
                        <span class="mx-1">→</span>
                        <input type="date" id="logEnd" class="form-control form-control-sm date-compact" style="width:135px;" autocomplete="off">
                        <button id="btnApplyLogCustom" class="btn btn-sm btn-dark">OK</button>
                        </div>
                    </div>

                    {# Conteneur AJAX #}
                    <div id="logHistoryContainer" style="position:relative; min-height:180px;"></div>
                </div>

            </div>
        </div>


    </div>

  {% endif %}

</div>
{% endblock %}

{% block js %}
    {{ parent() }}

    <script>
        (function () {
            var $period   = $('#quickPeriodClientsTop');
            var $box      = $('#customRangeActivities');
            var $start    = $('#customStartActivities');
            var $end      = $('#customEndActivities');
            var $wrap     = $('#activitiesContainer');
            var fetchUrl  = "{{ path('dashboard_activities_timeline') }}";

            // Init
            toggleCustom();
            if (!$wrap.children().length) {
                applyQuickPeriodActivities();
            }

            // --- OPTION B: d-none / d-flex ---
            function toggleCustom() {
                var show = $period.val() === 'custom';
                $box.toggleClass('d-none', !show)
                .toggleClass('d-flex', show);
            }

            // --- Loading overlay (Bootstrap ou fallback) ---
            function showLoading() {
                // ★ assure le positionnement pour l’overlay
                if ($wrap.css('position') === 'static') { $wrap.css('position','relative'); } // ★

                // skeleton si vide
                if (!$wrap.children().length || !$wrap.find('.timeline-skeleton').length) {
                    $wrap.html(buildSkeleton());
                }

                // Overlay spinner (Bootstrap si dispo, sinon fallback inline)
                if (!$wrap.find('.crm-loading').length) {
                var spinner = (window.bootstrap || $('.spinner-border').length)
                    ? '<div class="spinner-border" role="status" aria-label="Chargement"></div>'
                    // ★ fallback inline (pas besoin de CSS global)
                    : '<div aria-label="Chargement" style="width:28px;height:28px;border:3px solid rgba(0,0,0,.15);border-top-color:rgba(0,0,0,.55);border-radius:50%;animation:crm-spin .8s linear infinite"></div>'; // ★
                $wrap.append('<div class="crm-loading" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.6);z-index:5;">'+ spinner +'</div>');
                }
            }

            function hideLoading() {
                $wrap.find('.crm-loading').remove();
            }

            function fetchActivities(params) {
                showLoading();
                $.ajax({
                url: fetchUrl,
                type: 'GET',
                data: params,
                dataType: 'html'
                })
                .done(function (html) {
                $wrap.html(html);
                })
                .fail(function (xhr) {
                var msg = 'Erreur ' + xhr.status + ' ' + xhr.statusText;
                var body = (xhr.responseText || '').slice(0, 400);
                $wrap.html('<div class="alert alert-danger"><div>'+msg+'</div><pre class="small mb-0">'
                    + $('<div>').text(body).html() + '</pre></div>');
                })
                .always(hideLoading);
            }

            function applyQuickPeriodActivities() {
                var p = $period.val();
                var params = { period: p };
                if (p === 'custom') {
                if (!$start.val() || !$end.val()) return;
                params.start = $start.val();
                params.end   = $end.val();
                }
                fetchActivities(params);
            }

            // Listeners
            $period.on('change', function () {
                toggleCustom();
                if ($period.val() !== 'custom') {
                applyQuickPeriodActivities();
                }
            });
            $('#btnApplyCustomActivities').on('click', function (e) {
                e.preventDefault();
                applyQuickPeriodActivities();
            });

            // Init (déjà fait plus haut, on garde)
            toggleCustom();
    })();

    (function () {
        var $period = $('#logPeriodSelect');
        var $box    = $('#logCustomRange');
        var $start  = $('#logStart');
        var $end    = $('#logEnd');
        var $user   = $('#logUserSelect');
        var $wrap   = $('#logHistoryContainer');
        var fetchUrl = "{{ path('dashboard_login_history') }}";

        // toggle dates custom (Option B)
        function toggleCustom() {
            var show = ($period.val() === 'custom');
            $box.toggleClass('d-none', !show).toggleClass('d-flex', show);
        }

        // Loader (skeleton + overlay inline)
        function showLoading() {
            if ($wrap.css('position') === 'static') { $wrap.css('position', 'relative'); }
            if (!$wrap.children().length || !$wrap.find('.timeline-skeleton').length) {
                $wrap.html(buildSkeleton());
            }
            if (!$wrap.find('.crm-loading').length) {
            var spinner = (window.bootstrap || $('.spinner-border').length)
                ? '<div class="spinner-border" role="status" aria-label="Chargement"></div>'
                : '<div aria-label="Chargement" style="width:28px;height:28px;border:3px solid rgba(0,0,0,.15);border-top-color:rgba(0,0,0,.55);border-radius:50%;animation:crm-spin .8s linear infinite"></div>';
            $wrap.append('<div class="crm-loading" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.6);z-index:5;">'+ spinner +'</div>');
            }
        }
        function hideLoading() {
            $wrap.find('.crm-loading').remove();
        }

        function fetchLogHistory(params) {
            showLoading();
            $.ajax({
            url: fetchUrl,
            type: 'GET',
            data: params,
            dataType: 'html'
            })
            .done(function (html) {
            $wrap.html(html);
            })
            .fail(function (xhr) {
            var msg = 'Erreur ' + xhr.status + ' ' + xhr.statusText;
            var body = (xhr.responseText || '').slice(0, 400);
            $wrap.html('<div class="alert alert-danger"><div>'+msg+'</div><pre class="small mb-0">'
                + $('<div>').text(body).html() + '</pre></div>');
            })
            .always(hideLoading);
        }

        function applyLogFilters() {
            var p = $period.val();
            var params = { period: p, log_user: $user.val() || 'all' };
            if (p === 'custom') {
            if (!$start.val() || !$end.val()) return;
            params.start = $start.val();
            params.end   = $end.val();
            }
            fetchLogHistory(params);
        }

        // Listeners
        $period.on('change', function () {
            toggleCustom();
            if ($period.val() !== 'custom') applyLogFilters();
        });
        $('#btnApplyLogCustom').on('click', function (e) {
            e.preventDefault();
            applyLogFilters();
        });
        $user.on('change', applyLogFilters);

        // Init
        toggleCustom();
        if (!$wrap.children().length) applyLogFilters();
    })();


    document.addEventListener('DOMContentLoaded', function () {
  const url = '{{ path('admin_dashboard_kpis_today') }}';
  let prev = {};

  function pulse(el) {
    if (!el) return;
    el.classList.remove('kpi-updated');
    void el.offsetWidth;
    el.classList.add('kpi-updated');
  }

  function setTextIfChanged(id, value) {
    const el = document.getElementById(id);
    if (!el) return;
    const v = String(value);
    if (prev[id] !== undefined && prev[id] !== v) pulse(el);
    prev[id] = v;
    el.innerHTML = v;
  }

  async function refreshKpis() {
    try {
      const res = await fetch(url, { cache: 'no-store', headers: { 'X-Requested-With': 'XMLHttpRequest' } });
      if (!res.ok) return;
      const d = await res.json();

      setTextIfChanged('kpi-nb-commande', d.nbCommandeJour ?? 0);
      setTextIfChanged('kpi-nb-echange', d.nbEchangeJour ?? 0);
      setTextIfChanged('kpi-total-sans', (Number(d.totalVenteSansFrais || 0)).toFixed(3) + ' <sup class="crm-muted">TND</sup>');
      setTextIfChanged('kpi-total-avec', (Number(d.totalVenteAvecFrais || 0)).toFixed(3) + ' <sup class="crm-muted">TND</sup>');
      setTextIfChanged('kpi-frais-liv', (Number(d.fraisLivraison || 0)).toFixed(3) + ' <sup class="crm-muted">TND</sup>');
    } catch (e) {}
  }

  refreshKpis();
  setInterval(function () {
    if (document.visibilityState === 'visible') refreshKpis();
  }, 15000);
});
</script>



{% endblock %}