{% 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;
    }



</style>

{% endblock %}


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

        {# ◀️ Breadcrumb à gauche #}


        {# ✅ Boutons à droite #}
        <div class="d-flex align-items-center mt-3 mt-md-0 ms-auto">

            <a href="#"
            class="btn btn-primary btn-sm me-2 modalEditSupplier"
            data-supplier="{{ user.id }}">
                <i class="fa fa-user-edit me-1"></i> Modifier
            </a>

            <div class="btn-group">
                <button type="button"
                        class="btn btn-outline-success btn-sm dropdown-toggle"
                        data-bs-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false">
                    <i class="fa fa-plus-circle me-1"></i> Créer document
                </button>

                <div class="dropdown-menu dropdown-menu-end">
                    <a class="dropdown-item"
                    href="{{ path('new_document_commande', { 'category': 'fournisseur', 'id': user.id, 'type': 'achat' }) }}">
                        <i class="fa fa-file-alt me-1 text-secondary"></i> Bon d'achat
                    </a>
                    <a class="dropdown-item"
                    href="{{ path('new_document_commande', { 'category': 'fournisseur', 'id': user.id, 'type': 'reception' }) }}">
                        <i class="fa fa-box me-1 text-success"></i> Bon de réception
                    </a>
                    <a class="dropdown-item"
                    href="{{ path('new_document_commande', { 'category': 'fournisseur', 'id': user.id, 'type': 'retour' }) }}">
                        <i class="fa fa-reply me-1 text-danger"></i> Bon de retour
                    </a>
                </div>
            </div>

        </div>



    </div>

{% endblock %}

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

{% block bodycontent %}

    <div class="row">
        {# Colonne gauche - Profil fournisseurs 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">

                           <div class="flex-shrink-0 me-4 d-flex align-items-center justify-content-center"
                                style="width:64px;height:64px;">

                                {% if user.logo is defined and user.logo %}
                                    <img
                                        src="{{ user.logo starts with 'http' ? user.logo : asset(user.logo) }}"
                                        alt="Logo"
                                        style="
                                            width:64px;
                                            height:64px;
                                            object-fit:contain;
                                            border-radius:6px;
                                            background:#fff;
                                            border:1px solid #eee;
                                        "
                                        onerror="this.style.display='none'; this.nextElementSibling.style.display='inline-flex';"
                                    />

                                    {# fallback icône si image cassée #}
                                    {% if user.type == 'personne_physique' %}
                                        <i class="fa fa-user-circle text-primary"
                                        style="font-size:64px;display:none;"></i>
                                    {% else %}
                                        <i class="fa fa-industry text-secondary"
                                        style="font-size:64px;display:none;"></i>
                                    {% endif %}

                                {% else %}

                                    {% if user.type == 'personne_physique' %}
                                        <i class="fa fa-user-circle text-primary" style="font-size:64px;"></i>
                                    {% else %}
                                        <i class="fa fa-industry text-secondary" style="font-size:64px;"></i>
                                    {% endif %}

                                {% endif %}
                            </div>



                            {# Infos fournisseur #}
                            <div class="flex-grow-1">
                                <h5 class="mb-1 fw-bold text-dark">
                                    {{ user.raisonSociale is defined and user.raisonSociale ? user.raisonSociale : user.name }}
                                </h5>

                                {# Type (Société ou Personne physique) #}
                                <div class="text-muted mb-2" style="font-size: 0.9rem;">
                                    {% if user.type == 'societe' %}
                                        Société
                                    {% elseif user.type == 'personne_physique' %}
                                        Personne physique
                                    {% else %}
                                        Fournisseur
                                    {% endif %}
                                </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 %}

                                 {# statut fournisseur #}
                                 <div class="text-muted mb-2" style="font-size: 0.9rem;">
                                    <span class="text-{{ user.isActive ? 'success' : 'danger' }} me-2">
                                        <i class="fa fa-circle"></i>
                                    </span>
                                    <span class="ms-2">{{ user.isActive ? 'Actif' : 'Inactif' }}</span>
                                </div>
                                {# Email #}
                                {% if user.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>
                                {% endif %}

                                {# Téléphones #}
                                {% if user.phone %}
                                <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>
                                {% endif %}

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


                                {# Responsable #}
                                {% if user.nameResponsable or user.phoneResponsible1 %}
                                <div class="mt-3">
                                    <div class="fw-bold text-dark mb-1">
                                        <i class="fa fa-user-tie me-1"></i> Responsable
                                    </div>
                                    <div class="small text-muted">
                                        {% if user.civility is defined and user.civility %}{{ user.civility }} {% endif %}
                                        {{ user.nameResponsable }}
                                    </div>
                                    {% if user.phoneResponsible1 %}
                                        <div class="small text-muted mt-1">
                                            <i class="fa fa-phone me-1"></i>
                                            <a href="tel:{{ user.phoneResponsible1 }}" class="text-decoration-none">{{ user.phoneResponsible1 }}</a>
                                            {% if user.phoneResponsible2 %}
                                                <span class="text-muted mx-1">|</span>
                                                <a href="tel:{{ user.phoneResponsible2 }}" class="text-decoration-none">{{ user.phoneResponsible2 }}</a>
                                            {% endif %}
                                        </div>
                                    {% endif %}
                                </div>
                                {% endif %}
                            </div>
                        </div>

                        <input type="hidden" id="supplier_id" name="supplier_id" value="{{ user.id }}"> {# ligne nécesaire pour récupérer la liste des document du fournisseur  #}
                    </div>

                    {# Statistiques #}
                    <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 fournisseur
                        </h6>

                        <table class="table table-sm table-borderless mb-0 table-client-stats">
                            <tbody>
                                <tr>
                                    <td><i class="fa fa-credit-card text-success"></i></td>
                                    <td>Total des achats</td>
                                    <td class="text-end text-success fw-bold" colspan="2">
                                        {{ statistiques.totalAchat|number_format(3,',','') }} <sup class="small">TND</sup>
                                    </td>
                                </tr>

                                <tr>
                                    <td><i class="fa fa-dollar-sign text-primary"></i></td>
                                    <td>Total des ventes
                                        <i class="fa fa-info-circle ms-2 text-muted"
                                        data-bs-toggle="tooltip"
                                        data-placement="top"
                                        title="Le prix de vente prend en compte la remise par produit mais pas la remise globale du document."></i>
                                    </td>
                                    <td class="text-end text-primary fw-bold" colspan="2">
                                        {{ statistiques.totalVente|number_format(3,',','') }} <sup class="small">TND</sup>

                                    </td>
                                </tr>

                                <tr>
                                    <td><i class="fa fa-file-alt text-info"></i></td>
                                    <td>Bons d’achat</td>
                                    <td class="text-end text-info fw-bold">{{ statistiques.nbAchat }}</td>
                                    <td></td>
                                </tr>

                                <tr>
                                    <td><i class="fa fa-truck text-success"></i></td>
                                    <td>Bons de réception</td>
                                    <td class="text-end text-success fw-bold">{{ statistiques.nbReception }}</td>
                                    <td></td>
                                </tr>

                                <tr>
                                    <td><i class="fa fa-file-invoice text-warning"></i></td>
                                    <td>Factures</td>
                                    <td class="text-end text-warning fw-bold">{{ statistiques.nbFacture }}</td>
                                    <td></td>
                                </tr>

                                <tr>
                                    <td><i class="fa fa-undo text-danger"></i></td>
                                    <td>Bons de retour</td>
                                    <td class="text-end text-danger fw-bold">{{ statistiques.nbRetour }}</td>
                                    <td></td>
                                </tr>

                                <tr>
                                    <td><i class="fa fa-calendar"></i></td>
                                    <td>Dernier Bon.Réception</td>
                                    <td class="text-end">
                                        {{ lastReceptionDate  ? lastReceptionDate |date('d/m/Y') : '—' }}
                                    </td>
                                    <td class="small text-end text-muted">
                                        {% if lastReceptionDate  %}
                                            {{ daysSinceLastReception  }} jrs
                                        {% endif %}
                                    </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">
                     {# Les onglets #}
                    <div class="card-header border-bottom-0 pb-0">
                        <div class="overflow-auto" style="white-space: nowrap;">
                            <ul class="nav nav-tabs mb-3 role="tablist">
                                {# ▸ Profil #}
                                <li class="nav-item">
                                    <a class="nav-link {{ app.request.query.get('tab') == 'profile' or app.request.query.get('tab') is null ? 'active' : '' }}" data-bs-toggle="tab" href="#profile">
                                    <i class="flaticon-user-settings me-1"></i> Profil
                                    </a>
                                </li>

                                {# ▸ Adresse #}
                                <li class="nav-item">
                                    <a class="nav-link {{ app.request.query.get('tab') == 'adresses' ? 'active' : '' }}" data-bs-toggle="tab" href="#adresses">
                                    <i class="flaticon-map-location me-1"></i> Adresse(s)
                                    </a>
                                </li>

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


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

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

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

                        {# ▸ tab infos #}
                        <div class="tab-pane {% if app.request.query.get('tab') == 'profile' or app.request.query.get('tab') is null %}active{% endif %}" id="profile" role="tabpanel">
                            {% include '@admin/supplier/_tab/tab_infos_profile.html.twig' %}
                        </div>

                        {# ▸ tab adresses #}
                        <div class="tab-pane {% if app.request.query.get('tab') == 'adresses' %}active{% endif %}" id="adresses" role="tabpanel">
                            {% include '@admin/supplier/_tab/tab_adresses.html.twig' %}
                        </div>

                        <div class="tab-pane {{ app.request.get('tab') == 'documents' ? 'active' : '' }}"
                            id="content_documents_supplier">
                            {% include '@admin/supplier/_tab/tab_documents.html.twig' %}
                        </div>


                        <div class="tab-pane" id="static">
                            <div class="col-12">
                                {% include '@admin/supplier/_tab/tab_statistiques.html.twig' %}
                            </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/supplier/_tab/tab_comments.html.twig') }}
                        </div>
                    </div>
                </div>
            </div>

        </div>




{% endblock %}


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

        $(document).ready(function () {

            const loadedTabs = {
                achat: false,
                reception: false,
                facture: false,
                retour: false
            };

            // 🔹 CHARGEMENT INITIAL OBLIGATOIRE
            if (!loadedTabs.reception) {
                window.documentsSupplierDatatable('reception');
                loadedTabs.reception = true;
            }

            // 🔹 Chargement des autres onglets au clic
            $('.nav-link').on('shown.bs.tab', function (e) {

                const map = {
                    '#doc_achat': 'achat',
                    '#doc_reception': 'reception',
                    '#doc_facture': 'facture',
                    '#doc_retour': 'retour'
                };

                const type = map[e.target.getAttribute('href')] || null;

                if (type && !loadedTabs[type]) {
                    window.documentsSupplierDatatable(type);
                    loadedTabs[type] = true;
                }

                // 🔹 Correction alignement DataTables + scrollX
                setTimeout(() => {
                    $.fn.dataTable
                        .tables({ visible: true, api: true })
                        .columns.adjust();
                }, 50);

            });
        });





    </script>

{% endblock %}