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

{% block stylesheets %}
  {{ parent() }}
  <link rel="stylesheet" href="{{ asset('css/admin/fiche-user.css') }}">
{% endblock %}


{% block subheader %}
  <div class="badge-titre d-flex justify-content-between align-items-center flex-wrap w-100 mb-3">
    <div class="d-flex align-items-center gap-2">
      <span class="crm-badge">
        <i class="fa fa-user"></i>
      </span>
      <div>
        <h3 class="badge-title-main mb-0">PROFIL UTILISATEUR CRM</h3>
        <div class="small text-muted">
          {{ user.firstName ?: 'Utilisateur' }} | Ref {{ user.username ?: ('USER-' ~ user.id) }}
        </div>
      </div>
    </div>
    <div class="d-flex gap-2">
      <a href="{{ path('administration_index') }}" class="btn btn-secondary btn-sm">
        <i class="fa fa-arrow-left me-1"></i> Retour
      </a>
    </div>
  </div>
{% endblock %}

{% block bodycontent %}
  {% set docs = user.documents|default([]) %}
  {% set activities = activities|default([]) %}

  {% set commandesCount = 0 %}
  {% set echangesCount = 0 %}
  {% set facturesCount = 0 %}
  {% for d in docs %}
    {% if d.type == 'commande' %}{% set commandesCount = commandesCount + 1 %}{% endif %}
    {% if d.type == 'echange' %}{% set echangesCount = echangesCount + 1 %}{% endif %}
    {% if d.type == 'facture' %}{% set facturesCount = facturesCount + 1 %}{% endif %}
  {% endfor %}

  <div class="user-profile-card p-3 mb-3">
    <div class="row g-3 align-items-center">
      <div class="col-12 col-lg-7">
        <div class="d-flex align-items-center gap-3">
          <img src="{{ asset('images/avatar-default.png') }}" alt="Avatar" class="rounded-circle border" width="68" height="68">
          <div>
            <div class="fw-semibold" style="font-size:1.05rem;">{{ user.firstName ?: 'Nom non renseigne' }}</div>
            <div class="small text-muted mb-1">
              {{ user.userPost ? user.userPost.name : 'Sans poste' }}
              <span class="mx-1">|</span>
              {{ user.groupUser ? user.groupUser.name : 'Sans groupe' }}
            </div>
            <div>
              {% if user.isBlocked() %}
                <span class="badge bg-danger">Bloque</span>
              {% else %}
                <span class="badge bg-success">Actif</span>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-5">
        <div class="row g-2">
          <div class="col-6"><div class="user-kpi"><div class="label">Documents</div><div class="value">{{ statistiques.nbDocsTotal }}</div></div></div>
          <div class="col-6"><div class="user-kpi"><div class="label">Commandes</div><div class="value">{{ statistiques.nbCmdTotal }}</div></div></div>
          <div class="col-6"><div class="user-kpi"><div class="label">Echanges</div><div class="value">{{ statistiques.nbBeTotal }}</div></div></div>
          <div class="col-6"><div class="user-kpi"><div class="label">Factures</div><div class="value">{{ statistiques.nbFacTotal }}</div></div></div>
        </div>
      </div>
    </div>
  </div>

  <ul class="nav nav-tabs mb-3" id="crmUserTabs" role="tablist">
    <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-overview" type="button">Vue globale</button></li>
    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-contact" type="button">Coordonnees</button></li>
    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-access" type="button">Acces et securite</button></li>
    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-docs" type="button">Documents</button></li>
    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-activity" type="button">Activites</button></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane fade show active" id="tab-overview">
      <div class="user-profile-card mt-3">
        <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 commandes
          </h6>

          <table class="table table-sm table-borderless mb-0 table-client-stats kpi-table">
            <tbody>
              <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-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-row">
                <td><i class="fa fa-truck text-info"></i></td>
                <td>Expediees</td>
                <td class="text-center text-info fw-bold">{{ statistiques.cmdExpedie }}</td>
                <td class="text-muted small text-center">
                  {% if statistiques.nbCmdTotal > 0 %}
                    {% set p = (statistiques.cmdExpedie / statistiques.nbCmdTotal * 100) %}
                    <span class="badge badge-light px-2">{{ p|number_format(1) }}%</span>
                  {% endif %}
                </td>
              </tr>

              <tr class="kpi-row">
                <td><i class="fa fa-truck text-success"></i></td>
                <td>Livrees</td>
                <td class="text-center text-success fw-bold">{{ statistiques.cmdLivre }}</td>
                <td class="text-muted small text-center">
                  {% if statistiques.nbCmdTotal > 0 %}
                    {% set p = (statistiques.cmdLivre / statistiques.nbCmdTotal * 100) %}
                    <span class="badge badge-light px-2">{{ p|number_format(1) }}%</span>
                  {% endif %}
                </td>
              </tr>

              <tr class="kpi-row">
                <td><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 p = (statistiques.cmdEnAttente / statistiques.nbCmdTotal * 100) %}
                    <span class="badge badge-light px-2">{{ p|number_format(1) }}%</span>
                  {% endif %}
                </td>
              </tr>

              <tr class="kpi-row">
                <td><i class="fa fa-check text-success"></i></td>
                <td>Acceptees</td>
                <td class="text-center text-success fw-bold">{{ statistiques.cmdAccepte }}</td>
                <td class="text-muted small text-center">
                  {% if statistiques.nbCmdTotal > 0 %}
                    {% set p = (statistiques.cmdAccepte / statistiques.nbCmdTotal * 100) %}
                    <span class="badge badge-light px-2">{{ p|number_format(1) }}%</span>
                  {% endif %}
                </td>
              </tr>

              <tr class="kpi-row">
                <td><i class="fa fa-remove text-danger"></i></td>
                <td>Annulees</td>
                <td class="text-center text-danger fw-bold">{{ statistiques.cmdAnnule }}</td>
                <td class="text-muted small text-center">
                  {% if statistiques.nbCmdTotal > 0 %}
                    {% set p = (statistiques.cmdAnnule / statistiques.nbCmdTotal * 100) %}
                    <span class="badge badge-light px-2">{{ p|number_format(1) }}%</span>
                  {% endif %}
                </td>
              </tr>

              <tr class="kpi-row">
                <td><i class="fa fa-reply-all text-danger"></i></td>
                <td>Retournees</td>
                <td class="text-center text-danger fw-bold">{{ statistiques.cmdEnRetour }}</td>
                <td class="text-muted small text-center">
                  {% if statistiques.nbCmdTotal > 0 %}
                    {% set p = (statistiques.cmdEnRetour / statistiques.nbCmdTotal * 100) %}
                    <span class="badge badge-light px-2">{{ p|number_format(1) }}%</span>
                  {% endif %}
                </td>
              </tr>

              <tr class="kpi-row">
                <td><i class="fa fa-refresh text-info"></i></td>
                <td>Total echanges</td>
                <td class="text-center text-info fw-bold">{{ statistiques.nbBeTotal }}</td>
                <td></td>
              </tr>

              <tr class="kpi-row">
                <td><i class="fa fa-clock text-warning"></i></td>
                <td>Echanges en attente</td>
                <td class="text-center text-warning fw-bold">{{ statistiques.echangeEnAttente }}</td>
                <td></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

    </div>

    <div class="tab-pane fade" id="tab-contact">
        {% include '@admin/user/_tab/tab_contact_user.html.twig' %}


    </div>

    <div class="tab-pane fade" id="tab-access">
        {% include '@admin/user/_tab/tab_access_user.html.twig' %}


    </div>

    <div class="tab-pane fade" id="tab-docs">
      <input type="hidden" id="profile_user_id" value="{{ user.id }}">
      <div class="card border-0 shadow-sm mb-3">
        <div class="card-body p-3">
          <div class="row g-2 align-items-end">
            <div class="col-md-4">
              <label class="form-label small mb-1">Statut</label>
              <select id="doc_filter_status" class="form-control form-control-sm">
                <option value="">Tous</option>
                <option value="en-attente">En attente</option>
                <option value="accepte">Accepté</option>
                <option value="expedie">Expédié</option>
                <option value="livre">Livré</option>
                <option value="annule">Annulé</option>
                <option value="retour-en-cours">Retour en cours</option>
                <option value="retourne">Retourné</option>
                <option value="paye">Payé</option>
                <option value="facture">Facturé</option>
              </select>
            </div>

            <div class="col-md-3">
              <label class="form-label small mb-1">Date début</label>
              <input type="date" id="doc_filter_date_from" class="form-control form-control-sm">
            </div>

            <div class="col-md-3">
              <label class="form-label small mb-1">Date fin</label>
              <input type="date" id="doc_filter_date_to" class="form-control form-control-sm">
            </div>

            <div class="col-md-2 d-flex gap-2">
              <button type="button" id="doc_filter_apply" class="btn btn-sm btn-dark w-100">Filtrer</button>
              <button type="button" id="doc_filter_reset" class="btn btn-sm btn-secondary w-100">Reset</button>
            </div>
          </div>
        </div>
      </div>

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


    <div class="tab-pane fade" id="tab-activity">
        {% include '@admin/user/_tab/tab_activity_user.html.twig' %}


    </div>

  </div>
{% endblock %}

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