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


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

{% block stylesheets %}
    {{ parent() }}
  <style>


    .blink-row {
        animation: blink 1.2s linear infinite;
    }

    @keyframes blink {
        0%, 100% { background-color: #fff8e1; }
        50% { background-color: #ffe082; }
    }
@keyframes blink-soft {
    0%, 100% { background-color: #fff3cd; }
    50% { background-color: #ffe8a1; }
}
    .table td {
        vertical-align: middle;
        padding: 0.45rem 0.75rem;
        font-size: 0.9rem;
    }

    .table i {
        min-width: 18px;
        text-align: center;
    }


    .table-client-stats td {
        padding: 0.65rem 0.85rem;
        font-size: 0.95rem;
    }

    .table-client-stats i {
        font-size: 1.1rem;
    }

    .table-client-stats .fw-bold {
        font-size: 1rem;
    }



/* Animation pulse légère */
@keyframes promoPulse {
    0%   { transform: scale(1); opacity: 0.9; }
    50%  { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); opacity: 0.9; }
}

.badge-promo-anim {
    animation: promoPulse 1.6s ease-in-out infinite;
    display: inline-block;
}

/* Taille uniforme */
.badge-promo-dot {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 50px;
}

/* Réduction de hauteur */
.kpi-row td {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Ligne Total achats plus visible */
.kpi-row-total {
    background: #e8f9f0;
    border-bottom: 1px dashed #e2e8f0;
}

/* Ligne de séparation */
.kpi-separator td {
    padding: 0 !important;
    height: 5px;
    border-bottom: 1px dotted #e5e7eb;
}

/* Statut couleur: pas d'arrondi sur la 1ere colonne */
.table-client-stats td[class^="alert-"],
.table-client-stats td[class*=" alert-"] {
    border-radius: 0;
}


.crm-admin-state-switch {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .18rem .55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    min-height: 34px;
}
.crm-admin-state-switch.is-active {
    background: rgba(22, 163, 74, .10);
    border-color: rgba(22, 163, 74, .18);
}
.crm-admin-state-switch.is-blocked {
    background: rgba(220, 38, 38, .10);
    border-color: rgba(220, 38, 38, .18);
}
.crm-admin-state-switch .form-check-input {
    width: 2.15rem;
    height: 1.15rem;
    margin-top: 0;
    cursor: pointer;
    box-shadow: none !important;
}
.crm-admin-state-switch.is-active .form-check-input {
    background-color: #16a34a;
    border-color: #16a34a;
}
.crm-admin-state-switch.is-blocked .form-check-input {
    background-color: #dc2626;
    border-color: #dc2626;
}
.crm-admin-state-label {
    font-size: .77rem;
    font-weight: 700;
    color: #1f2937;
}

</style>

{% endblock %}

{% block subheader %}
  <div class="badge-titre d-flex justify-content-between align-items-center flex-wrap w-100 mb-3" style="min-height:3.2rem;">
    <div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center gap-2">
      <span class="crm-badge me-2">
        <i class="fa fa-users"></i>
      </span>
      <div>
        <h3 class="badge-title-main mb-0" style="font-size:1.18rem;">
          FICHE CLIENT
        </h3>
        <ul class="m-subheader__breadcrumbs m-nav m-nav--inline mt-1 mb-0" style="font-size:.98rem;">
          <li class="m-nav__item">
            <a href="{{ path('user_index', {'type': user.type }) }}" class="m-nav__link">
              <i class="fa fa-users me-1"></i> Clients
            </a>
          </li>
          <li class="m-nav__separator">-</li>
          <li class="m-nav__item">
            <span class="text-dark fw-bold">{{ user.username }}</span>
          </li>
        </ul>
        {# — Avertissement si commandes/échanges en cours — #}

      </div>
    </div>
     {% set hasCmd = (statistiques.cmdEnAttente > 0 or statistiques.cmdAccepte > 0) %}
    {% set hasEch = (statistiques.echangeEnAttente > 0) %}

    {% if hasCmd or hasEch %}
     <div class="alert alert-warning d-inline-block px-4 py-2 blink-row fw-bold mb-0 mt-2 text-center" role="alert">
        <i class="fa fa-exclamation-circle me-1"></i>
        {% if hasCmd and hasEch %}
        Ce client a des <b>commandes</b> et des <b>échanges</b> en cours de traitement.
        {% elseif hasCmd %}
        Ce client a des <b>commandes</b> en cours de traitement.
        {% elseif hasEch %}
        Ce client a des <b>échanges</b> en cours de traitement.
        {% endif %}
    </div>
    {% endif %}

    <div class="d-flex align-items-center gap-2 flex-wrap mt-3 mt-md-0">
        <a href="#" class="btn btn-primary btn-sm modalEditUser" data-client="{{ user.id }}">
            <i class="fa fa-user-edit me-1"></i> Modifier
        </a>

        {# Action : Créer bon de commande (3 états client) #}
        {% if user.isBlocked %}
            {# ⛔ Blocage manuel : interdit #}
            <button class="btn btn-outline-danger btn-sm mx-2"
                    disabled
                    title="Client bloqué manuellement. Création de commande interdite.">
                <i class="fa fa-ban me-1"></i> Créer bon de commande
            </button>

        {% elseif user.isBlacklisted %}
            {# ⚠️ Blocage auto : autorisé avec alerte #}
            <a href="{{ path('new_document_commande', {'category': 'client','id': user.id }) }}"
            class="btn btn-outline-warning btn-sm mx-2"
            title="Blocage automatique détecté. Vérifiez avant de créer la commande.">
                <i class="fa fa-exclamation-triangle me-1"></i> Créer bon de commande
            </a>

        {% else %}
            {# ✅ Client normal #}
            <a href="{{ path('new_document_commande', {'category': 'client','id': user.id }) }}"
            class="btn btn-outline-success btn-sm mx-2">
                <i class="fa fa-plus-circle me-1"></i> Créer bon de commande
            </a>
        {% endif %}

        {# Menu Actions client #}

        <div class="dropdown mx-2">

            <button class="btn btn btn-secondary btn-sm dropdown-toggle"
                    type="button"
                    id="clientActionsDropdown"
                    data-bs-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false">
                <i class="fa fa-cogs me-1"></i> Actions
            </button>

            <div class="dropdown-menu dropdown-menu-end"
                aria-labelledby="clientActionsDropdown">

                {# --- Blocage / Déblocage client --- #}
                {% if is_granted('ROLE_ADMIN') %}
                    <a href="#"
                    class="dropdown-item text-danger"
                    data-bs-toggle="modal"
                    data-bs-target="#modalClientBlock">
                        <i class="fa fa-lock me-2"></i>
                        {{ user.isBlocked ? 'Gérer le blocage' : 'Bloquer le client' }}
                    </a>
                {% else %}
                    <span class="dropdown-item text-muted disabled"
                        data-bs-toggle="tooltip"
                        title="Action réservée aux administrateurs">
                        <i class="fa fa-lock me-2"></i>
                        Bloquer le client
                    </span>
                {% endif %}

                {# --- Extensions futures --- #}
                {#
                <a class="dropdown-item" href="#">
                    <i class="fa fa-history me-2"></i> Historique client
                </a>
                #}

            </div>
        </div>



    </div>
  </div>
{% endblock %}

{% block breadcrumb %}{% endblock %}
{% block stat %}{% endblock %}

{% block bodycontent %}

    {% if lastCommandeDate %}
        {% set colorClass = '' %}
        {% if daysSinceLastCommande > 360 %}
            {% set colorClass = 'text-danger' %}
        {% elseif daysSinceLastCommande > 180 %}
            {% set colorClass = 'text-warning' %}
        {% elseif daysSinceLastCommande > 90 %}
            {% set colorClass = 'text-info' %}
        {% elseif daysSinceLastCommande < 90 %}
            {% set colorClass = 'text-success' %}
        {% endif %}
     {% endif %}

    <div class="row">
        {# Colonne gauche - Profil client et statistiques #}
        <div class="col-xl-3 col-lg-4">
            <div class="card shadow-sm rounded border-0 mb-4">

                <div class="card-body px-4 py-3">

                    <div class="d-flex align-items-center">


                        {# 👤 Avatar icône selon civilité #}
                        <div class="flex-shrink-0 me-4">
                            {% if user.civility in ['Mme', 'Mlle'] %}
                                <i class="fa fa-user-circle" style="color: #d63384; font-size: 64px;"></i>
                            {% else %}
                                <i class="fa fa-user-circle text-primary" style="font-size: 64px;"></i>
                            {% endif %}
                        </div>

                        {# 🧾 Infos personnelles #}
                        <div class="flex-grow-1">
                            <h5 class="mb-1 fw-bold text-dark">
                                {{ user.civility }} {{ user.firstName }}
                            </h5>
                            <div class="text-muted mb-2" style="font-size: 0.9rem;">
                                {{ user.username }}
                            </div>

                            {# Date de création #}
                            {% if user.createdAt %}
                                <div class="mb-2">
                                    <i class="fa fa-calendar-alt text-muted me-1"></i>
                                    <span class="text-muted">Créé le {{ user.createdAt|date("d/m/Y à H:i") }}</span>
                                </div>
                            {% endif %}

                            {# Email #}
                            <div class="mb-2">
                                <i class="fa fa-envelope text-muted me-1"></i>
                                <a href="mailto:{{ user.email }}" class="text-decoration-none">{{ user.email }}</a>
                            </div>

                             {# Téléphones #}
                            <div class="mb-2">
                                <i class="fa fa-phone text-muted me-1"></i>
                                <a href="tel:{{ user.phone }}" class="text-decoration-none">{{ user.phone }}</a>
                                {% if user.secondPhone %}
                                    <span class="text-muted mx-1">|</span>
                                    <a href="tel:{{ user.secondPhone }}" class="text-decoration-none">{{ user.secondPhone }}</a>
                                {% endif %}
                            </div>

                             {# Adresse complète #}
                            <div class="small text-muted">
                                 <i class="fa fa-map-marker-alt text-muted me-1 small"></i>
                                {{ user.adress }}, {{ user.city }} - {{ user.region }}, {{ user.country }}
                            </div>
                             {# Type client + statut blocage #}

                            {% if user.clientType is defined and user.clientType %}
                                <div class="mb-2 pt-2 d-flex align-items-center flex-wrap gap-2">

                                    {# --- Badge Type client (dynamique) --- #}
                                    <span class="badge badge-pill"
                                        data-bs-toggle="tooltip"
                                        title="{{ user.clientType.description|default('') }}"
                                        style="
                                            background: {{ user.clientType.color|default('#6c757d') }};
                                            color: #fff;
                                            font-size: 11px;
                                            font-weight: 600;
                                            padding: 6px 10px;
                                            margin-right : 6px;
                                        ">
                                        {{ user.clientType.label }}
                                    </span>

                                    <div class="crm-admin-state-switch {{ user.isVerified ? 'is-active' : 'is-blocked' }}">
                                        <div class="form-check form-switch m-0 d-inline-flex align-items-center">
                                            <input type="checkbox"
                                                   class="form-check-input js-user-verify-switch"
                                                   role="switch"
                                                   data-url="{{ path('user_toggle_verify', {id: user.id}) }}"
                                                   {{ user.isVerified ? 'checked' : '' }}>
                                        </div>
                                        <span class="crm-admin-state-label js-user-verify-label">{{ user.isVerified ? 'Verifie' : 'Non verifie' }}</span>
                                    </div>

                                    {# --- Badge Client bloqué (manuel) --- #}
                                    {% if user.isBlocked %}
                                        <span class="badge badge-pill badge-danger"
                                            data-bs-toggle="tooltip"
                                            data-html="true"
                                            title="
                                                <b>Client bloqué</b><br>
                                                {% if user.blockedAt %}
                                                    <small>Depuis : {{ user.blockedAt|date('d/m/Y H:i') }}</small><br>
                                                {% endif %}
                                                {% if user.blockReason %}
                                                    <small>Motif : {{ user.blockReason }}</small>
                                                {% endif %}
                                            "
                                            style="font-size:11px;font-weight:600;padding: 6px 10px;">
                                            Client bloqué
                                        </span>
                                    {% endif %}


                                </div>
                            {% endif %}

                        </div>
                    </div>

                    {# Champ caché utilisé par JavaScript #}
                    <input type="hidden" id="client_id" name="client_id" value="{{ user.id }}">
                </div>

                <div class="card-footer px-4 pb-3 pt-4 bg-light border-top">
                    <h6 class="fw-bold text-uppercase mb-3 pb-2 border-bottom" style="font-size: 0.95rem;">
                        <i class="fa fa-chart-bar me-1 text-primary"></i> Statistiques du client
                    </h6>

                  <table class="table table-sm table-borderless mb-0 table-client-stats kpi-table">
                    <tbody>

                        {# Total achats #}
                        <tr class="kpi-row">
                            <td><i class="fa fa-credit-card"></i></td>
                            <td>Total achats</td>
                            <td colspan="2" class="text-center fw-bold">
                                {{ statistiques.totalAchat|number_format(3,',','') }} TND
                            </td>
                        </tr>
                        <tr class="kpi-separator"> <td colspan="4"></td></tr>
                        {# Total commandes #}
                        <tr class="kpi-row">
                            <td><i class="fa fa-shopping-basket"></i></td>
                            <td>Total commandes</td>
                            <td class="text-center fw-bold">
                                {{ statistiques.nbCmdTotal }}
                            </td>
                            <td></td>
                        </tr>
                        <tr class="kpi-separator"> <td colspan="4"></td></tr>

                        {# Expédiés #}
                        <tr class="kpi-row">
                            <td class="alert-expedie"><i class="fa fa-truck text-info"></i></td>
                            <td>Expédiées</td>

                            <td class="text-center text-info fw-bold">{{ statistiques.cmdExpedie }}</td>
                            <td class="text-muted small text-center">
                                {% if statistiques.nbCmdTotal > 0 %}
                                    {% set percentExpedie = (statistiques.cmdExpedie / statistiques.nbCmdTotal * 100) %}
                                    <span class="badge badge-light px-2">{{ percentExpedie|number_format(1) }}%</span>
                                    <div class="progress mt-1" style="height: 6px;">
                                        <div class="progress-bar" style="width: {{ percentExpedie|number_format(1, '.', '') }}%; background: #cbd5e1;"></div>
                                    </div>
                                {% endif %}
                            </td>
                        </tr>

                        {# Livrées #}
                        <tr class="kpi-row">
                            <td class="alert-livre"><i class="fa fa-truck text-success"></i></td>
                            <td>Livrées</td>

                            {% set livrees = statistiques.cmdLivre

                            %}

                            <td class="text-center text-success fw-bold">{{ livrees }}</td>
                            <td class="text-muted small text-center">
                                {% if statistiques.nbCmdTotal > 0 %}
                                    {% set percentLivrees = (livrees / statistiques.nbCmdTotal * 100) %}
                                    <span class="badge badge-light px-2">{{ percentLivrees|number_format(1) }}%</span>
                                    <div class="progress mt-1" style="height: 6px;">
                                        <div class="progress-bar" style="width: {{ percentLivrees|number_format(1, '.', '') }}%; background: #cbd5e1;"></div>
                                    </div>
                                {% endif %}
                            </td>
                        </tr>

                        {# En attente #}
                        <tr class="kpi-row {% if statistiques.cmdEnAttente >= 1 %}blink-row{% endif %}">
                            <td class="alert-en-attente"><i class="fa fa-hourglass-half text-warning"></i></td>
                            <td>En attente</td>

                            <td class="text-center text-warning fw-bold">
                                {{ statistiques.cmdEnAttente }}
                            </td>

                            <td class="text-muted small text-center">
                                {% if statistiques.nbCmdTotal > 0 %}
                                    {% set percentAttente = (statistiques.cmdEnAttente / statistiques.nbCmdTotal * 100) %}
                                    <span class="badge badge-light px-2">{{ percentAttente|number_format(1) }}%</span>
                                    <div class="progress mt-1" style="height: 6px;">
                                        <div class="progress-bar" style="width: {{ percentAttente|number_format(1, '.', '') }}%; background: #cbd5e1;"></div>
                                    </div>
                                {% endif %}
                            </td>
                        </tr>

                        {# Acceptées #}
                        <tr class="kpi-row {% if statistiques.cmdAccepte >= 1 %}blink-row{% endif %}">
                            <td class="alert-accepte"><i class="fa fa-check text-success"></i></td>
                            <td>Acceptées</td>

                            <td class="text-center text-success fw-bold">
                                {{ statistiques.cmdAccepte }}
                            </td>

                            <td class="text-muted small text-center">
                                {% if statistiques.nbCmdTotal > 0 %}
                                    {% set percentAccepte = (statistiques.cmdAccepte / statistiques.nbCmdTotal * 100) %}
                                    <span class="badge badge-light px-2">{{ percentAccepte|number_format(1) }}%</span>
                                    <div class="progress mt-1" style="height: 6px;">
                                        <div class="progress-bar" style="width: {{ percentAccepte|number_format(1, '.', '') }}%; background: #cbd5e1;"></div>
                                    </div>
                                {% endif %}
                            </td>
                        </tr>

                        {# Annulées #}
                        <tr class="kpi-row">
                            <td class="alert-annule"><i class="fa fa-remove text-danger"></i></td>
                            <td>Annulées</td>

                            <td class="text-center text-danger fw-bold">
                                {{ statistiques.cmdAnnule }}
                            </td>

                            <td class="text-muted small text-center">
                                {% if statistiques.nbCmdTotal > 0 %}
                                    {% set percentAnnule = (statistiques.cmdAnnule / statistiques.nbCmdTotal * 100) %}
                                    <span class="badge badge-light px-2">{{ percentAnnule|number_format(1) }}%</span>
                                    <div class="progress mt-1" style="height: 6px;">
                                        <div class="progress-bar" style="width: {{ percentAnnule|number_format(1, '.', '') }}%; background: #cbd5e1;"></div>
                                    </div>
                                {% endif %}
                            </td>
                        </tr>

                        {# Retournées #}
                        <tr class="kpi-row">
                            <td class="alert-retourne"><i class="fa fa-reply-all text-danger"></i></td>
                            <td>Retournées</td>

                            <td class="text-center text-danger fw-bold">
                                {{ statistiques.cmdEnRetour }}
                            </td>

                            <td class="text-muted small text-center">
                                {% if statistiques.nbCmdTotal > 0 %}
                                    {% set percentRetour = (statistiques.cmdEnRetour / statistiques.nbCmdTotal * 100) %}
                                    <span class="badge badge-light px-2">{{ percentRetour|number_format(1) }}%</span>
                                    <div class="progress mt-1" style="height: 6px;">
                                        <div class="progress-bar" style="width: {{ percentRetour|number_format(1, '.', '') }}%; background: #cbd5e1;"></div>
                                    </div>
                                {% endif %}
                            </td>
                        </tr>

                        {# Total échanges #}
                        <tr class="kpi-row">
                            <td class="alert-echange"><i class="fa fa-refresh text-info"></i></td>
                            <td>Total échanges</td>

                            <td class="text-center text-info fw-bold">
                                {{ statistiques.nbBeTotal }}
                            </td>

                            <td class="text-muted small text-center">
                                {% if statistiques.nbCmdTotal > 0 %}
                                    {% set percentEchange = (statistiques.nbBeTotal / statistiques.nbCmdTotal * 100) %}
                                    <span class="badge badge-light px-2">{{ percentEchange|number_format(1) }}%</span>
                                    <div class="progress mt-1" style="height: 6px;">
                                        <div class="progress-bar" style="width: {{ percentEchange|number_format(1, '.', '') }}%; background: #cbd5e1;"></div>
                                    </div>
                                {% endif %}
                            </td>
                        </tr>

                        {# Échanges en attente #}
                        <tr class="kpi-row {% if statistiques.echangeEnAttente >= 1 %}blink-row{% endif %}">
                            <td class="alert-en-attente"><i class="fa fa-clock text-warning"></i></td>
                            <td>Échanges en attente</td>

                            <td class="text-center text-warning fw-bold">
                                {{ statistiques.echangeEnAttente }}
                            </td>
                            <td></td>
                        </tr>

                        <tr class="kpi-separator"> <td colspan="4"></td></tr>

                        {# Dernière commande #}
                        <tr class="kpi-row">
                            <td><i class="fa fa-calendar"></i></td>
                            <td>Dernière commande</td>

                            <td colspan="2" class="text-center">
                                {% if lastCommandeDate %}
                                    <span class="badge badge-light px-2">{{ lastCommandeDate|date('d/m/Y') }}</span>
                                    <div class="mt-1">
                                        <span class="badge badge-light px-2 {{ colorClass }}">{{ daysSinceLastCommande }} jrs</span>
                                    </div>
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                        </tr>

                        {# Délai moyen entre commandes #}
                        <tr class="kpi-row">
                            <td><i class="fa fa-hourglass-half"></i></td>
                            <td>
                                Délai moyen entre commandes
                                <i class="fas fa-question-circle text-muted ms-1"
                                data-bs-toggle="tooltip"
                                title="Nombre de jours moyen entre deux commandes successives.">
                                </i>
                            </td>

                            <td colspan="2" class="text-center">
                                {% if averageDelay is not null %}
                                    {% set badgeClass =
                                        averageDelay < 90 ? 'badge-success' :
                                        averageDelay < 180 ? 'badge-warning' :
                                        'badge-danger'
                                    %}
                                    <span class="badge {{ badgeClass }} px-3 py-2 fw-bold">
                                        {{ averageDelay }} jrs
                                    </span>
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                        </tr>

                        {# Panier moyen #}
                        <tr class="kpi-row">
                            <td><i class="fa fa-shopping-basket"></i></td>
                            <td>
                                Panier moyen
                                <i class="fas fa-question-circle text-muted ms-1"
                                data-bs-toggle="tooltip"
                                title="Montant moyen payé par commande.">
                                </i>
                            </td>

                            <td colspan="2" class="text-center">
                                {% if averageAOV is not null %}
                                    {% set badgeClass =
                                        averageAOV < 50 ? 'badge-danger' :
                                        averageAOV < 150 ? 'badge-warning' :
                                        'badge-success'
                                    %}
                                    <span class="badge {{ badgeClass }} px-3 py-2 fw-bold">
                                        {{ averageAOV|number_format(2, '.', ' ') }} TND
                                    </span>
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                        </tr>
                        <tr class="kpi-separator"> <td colspan="4"></td></tr>
                    </tbody>
                </table>


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




        <div class="col-xl-9 col-lg-8">

            <div class="m-portlet m-portlet--full-height m-portlet--tabs">
                {% set currentTab = app.request.get('tab') %}
                {% if currentTab not in ['profile', 'promotion', 'content_documents', 'static', 'comments'] %}
                    {% set currentTab = 'content_documents' %}
                {% endif %}

               <div class="card-header border-bottom-0 pb-0">
                    <div class="crm-tabs-wrap overflow-auto">
                        <ul class="nav nav-tabs crm-tabs w-100" role="tablist">
                            {# ▸ Profil #}
                            <li class="nav-item {{ app.request.query.get('tab') == 'profile' ? 'is-active' : '' }}">
                            <a class="nav-link {{ app.request.query.get('tab') == 'profile' ? 'active' : '' }}"
                                data-bs-toggle="tab"
                                href="#profile"
                                role="tab">
                                <i class="flaticon-user-settings me-1"></i> Profil & Adresses
                            </a>
                            </li>

                            {# ▸ Documents #}
                            <li class="nav-item {{ (app.request.get('tab') == 'content_documents' or app.request.get('tab') is null) ? 'is-active' : '' }}">
                            <a class="nav-link {{ (app.request.get('tab') == 'content_documents' or app.request.get('tab') is null) ? 'active' : '' }}"
                                data-bs-toggle="tab"
                                href="#content_documents"
                                role="tab">
                                <i class="fa fa-folder-open me-1"></i> Documents
                            </a>
                            </li>

                            {# ▸ Statistiques #}
                            <li class="nav-item {{ app.request.query.get('tab') == 'static' ? 'is-active' : '' }}">
                            <a class="nav-link {{ app.request.query.get('tab') == 'static' ? 'active' : '' }}"
                                data-bs-toggle="tab"
                                href="#static"
                                role="tab">
                                <i class="flaticon-statistics me-1"></i> Statistiques
                            </a>
                            </li>

                            {# ▸ Code Promotionnel #}
                            <li class="nav-item {{ app.request.query.get('tab') == 'promotion' ? 'is-active' : '' }}">
                            <a class="nav-link {{ app.request.query.get('tab') == 'promotion' ? 'active' : '' }}"
                                data-bs-toggle="tab"
                                href="#promotion"
                                role="tab">
                                <i class="fa fa-ticket me-1"></i> Code Promotion
                                <span id="promo-status-badge" class="ms-1"></span>
                            </a>
                            </li>

                            {# ▸ Commentaires #}
                            <li class="nav-item {{ app.request.get('tab') == 'comments' ? 'is-active' : '' }}">
                            <a class="nav-link {{ app.request.get('tab') == 'comments' ? 'active' : '' }}"
                                data-bs-toggle="tab"
                                href="#comments"
                                role="tab">
                                <i class="fa fa-comments me-1"></i> Commentaires
                                <span class="m-badge {{ user.notes|length == 0 ? 'm-badge--metal' : 'm-badge--warning' }} ms-1">
                                {{ user.notes|length }}
                                </span>
                            </a>
                            </li>
                        </ul>
                    </div>
                </div>



                <div class="tab-content m-portlet__body">


                    <div class="tab-pane {% if app.request.query.get('tab') == 'profile' %}active{% endif %}" id="profile" role="tabpanel">

                        {% include '@admin/user/_tab/tab_infos_profile.html.twig' %} {#--Onglet infos profil--#}
                    </div>

                    <div class="tab-pane {% if app.request.query.get('tab') == 'promotion' %}active{% endif %}" id="promotion" role="tabpanel">
                         {% include '@admin/user/_tab/tab_code_promotion.html.twig' %} {#--Onglet Code promotion--#}
                    </div>

                    <div class="tab-pane
                        {{ (app.request.get('tab') == 'content_documents' or app.request.get('tab') is null) ? 'active' : '' }}"
                        id="content_documents" role="tabpanel">

                        {% include '@admin/user/_tab/tab_documents.html.twig' %}
                    </div>



                    <div class="tab-pane {{ currentTab == 'static' ? 'active' : '' }}" id="static">

                        <div class="col-12">
                             {% include '@admin/user/_tab/tab_statistiques.html.twig' %} {#--Onglet statistiques--#}
                        </div>
                    </div>
                    <div class="tab-pane {{ ( app.request.get('tab') is defined  and app.request.get('tab') == "comments")?'active':'' }}" id="comments" role="tabpanel">
                         {% include '@admin/user/_tab/tab_comments.html.twig' %} {#--Onglet commentaires--#}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# MODAL : Gestion du blocage client #}

    {% include '@admin/user/_modal_client_block.html.twig' %}




{% endblock %}

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

        $(document).ready(function () {

    const loadedTabs = {
        commande: false,
        echange: false,
        facture: false
    };

    // 🔹 Chargement initial (onglet actif)
    const $activeTab = $('#content_documents .nav-link.active[data-bs-toggle="pill"]');

    if ($activeTab.length) {
        const href = $activeTab.attr('href');
        const type = mapClientTabType(href);

        if (type) {
            DocumentsUnClientDatatable(type);
            loadedTabs[type] = true;
        }
    }

    // 🔹 Chargement lazy au clic
    $('#content_documents a[data-bs-toggle="pill"]').on('shown.bs.tab', function (e) {

        const href = e.target.getAttribute('href');
        const type = mapClientTabType(href);

        if (type && !loadedTabs[type]) {
            DocumentsUnClientDatatable(type);
            loadedTabs[type] = true;
        }
    });

});

/* =========================
   Mapping onglet → type
   ========================= */
function mapClientTabType(href) {
    const map = {
        '#doc_commande_client': 'commande',
        '#doc_echange_client': 'echange',
        '#doc_facture_client': 'facture'
    };
    return map[href] || null;
}


$(document).off('change.userVerifyProfile', '.js-user-verify-switch').on('change.userVerifyProfile', '.js-user-verify-switch', function () {
    var $switch = $(this);
    var verified = $switch.is(':checked');
    var url = $switch.data('url');
    var $wrap = $switch.closest('.crm-admin-state-switch');
    var $label = $wrap.find('.js-user-verify-label');

    if (!url) {
        return;
    }

    $switch.prop('disabled', true);

    $.ajax({
        url: url,
        type: 'POST',
        dataType: 'json',
        data: {
            verified: verified ? 1 : 0
        }
    }).done(function (response) {
        if (!response || response.success !== true) {
            throw new Error((response && response.message) || 'Erreur de mise a jour.');
        }

        var isVerified = !!response.isVerified;
        $switch.prop('checked', isVerified);
        $wrap.toggleClass('is-active', isVerified).toggleClass('is-blocked', !isVerified);
        $label.text(isVerified ? 'Verifie' : 'Non verifie');

        if (window.toastr && typeof window.toastr.success === 'function') {
            window.toastr.success(response.message || 'Etat mis a jour.');
        }
    }).fail(function (xhr) {
        $switch.prop('checked', !verified);
        var message = (xhr.responseJSON && xhr.responseJSON.message)
            ? xhr.responseJSON.message
            : 'Erreur lors de la mise a jour du statut de verification.';

        if (window.toastr && typeof window.toastr.error === 'function') {
            window.toastr.error(message);
        }
    }).always(function () {
        $switch.prop('disabled', false);
    });
});


    </script>

{% endblock %}