{# {% extends 'layout.twig' %} #}

{% block body %}
    <div class="detailArticle">
        <div class="titre">
            {{ article.DES_ART }}
        </div>

        <div class="code">
            {{ article.COD_ART }}
        </div>

        <div class="bloc2">
            <div class="img">
                {% if table == 'CAT' %}
                    <img src="{% if article.IMGART %}{{ article.IMGART }}{% else %}{{ baseUrl('IconeV2/Misc/image_default.png') }}{% endif %}" onerror="this.onerror=null; this.src='{{ baseUrl('IconeV2/Misc/image_default.png') }}'">
                {% endif %}
            </div>

            <div class="compl">
                {{ article.DES_COMP }}
            </div>
            <div class="prix">
                <span style="font-weight: bold;">{{ article.PX_ART | prixUnitaire }} {{ article.DEVISE }}</span>

                <span style="font-style: italic;">{{ article.libprix }}</span>
                {# <div style="color: var(--main-color-blue);">
                    Ajouter au panier
                </div> #}
            </div>

        </div>

        <hr>
        {% if article.CATCARACT %}
            <div class="clearfix">
                <div class="colonne2">
                    <div class="informations">
                        {% for chps in article.CATCARACT %}
                            {% if loop.index is odd %} 
                                <p>
                                    <span class="champs_label">{{ chps.TITRE_CAR }}</span>
                                    <span class="resultat">
                                        {% if chps.chargeDocument %}
                                            <a href="{{ path('GlobalApplication.ChargeDocument.chargeDocument', {
                                                        emplacement     : chps.chargeDocument.emplacement, 
                                                        urlFichier      : chps.chargeDocument.urlFichier, 
                                                }) }}" target="_blank">{{ chps.VAL_CAR }}</a>
                                        {% elseif chps.TYP_CAR == 'U' %}
                                            <a href="{{ chps.VAL_CAR }}" target="_blank">{{ chps.VAL_CAR }}</a>
                                        {% else %}
                                            {{ chps.VAL_CAR }}
                                        {% endif %}
                                    </span>
                                </p>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
                <div class="colonne2 last">
                    <div class="informations">
                        {% for chps in article.CATCARACT %}
                            {% if loop.index is even %} 
                                <p>
                                    <span class="champs_label">{{ chps.TITRE_CAR }}</span>
                                    <span class="resultat">
                                        {% if chps.chargeDocument %}
                                            <a href="{{ path('GlobalApplication.ChargeDocument.chargeDocument', {
                                                        emplacement     : chps.chargeDocument.emplacement, 
                                                        urlFichier      : chps.chargeDocument.urlFichier, 
                                                }) }}" target="_blank">{{ chps.VAL_CAR }}</a>
                                        {% elseif chps.TYP_CAR == 'U' %}
                                            <a href="{{ chps.VAL_CAR }}" target="_blank">{{ chps.VAL_CAR }}</a>
                                        {% else %}
                                            {{ chps.VAL_CAR }}
                                        {% endif %}
                                    </span>
                                </p>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        {% endif %}
        
        <div class="clearfix">
            <div class="colonne2">
                <div class="informations">
                    {% for chps in listeChamps %}
                        {% if loop.index is odd %} 
                            <p>
                                <span class="champs_label">{{ chps.LIB_CHP | trad }}</span>
                                <span class="resultat">{{ article[chps.CODE_CHP] }}</span>
                            </p>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
            <div class="colonne2 last">
                <div class="informations">
                    {% for chps in listeChamps %}
                        {% if loop.index is even %} 
                            <p>
                                <span class="champs_label">{{ chps.LIB_CHP | trad }}</span>
                                <span class="resultat">{{ article[chps.CODE_CHP] }}</span>
                            </p>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
        <div>
            <ul class="nav nav-tabs" role="tablist" id="tablistArt">
                {% if listeFrs %}
                    <li id="ongletFrs" role="presentation" class="perma"><a href="#Frs" aria-controls="Frs" role="tab" data-toggle="tab">
                        {{- 'Fournisseur' | trad -}}
                    </a></li>
                {% endif %}

                {% if listeArtAssoc %}
                    <li id="ongletArtAss" role="presentation" class="perma"><a href="#ArtAss" aria-controls="ArtAss" role="tab" data-toggle="tab">{{ 'Articles associés' }}</a></li>
                {% endif %}

                {% if listeArtEquiv %}
                    <li id="ongletArtEquil" role="presentation" class="perma"><a href="#ArtEquil" aria-controls="ArtEquil" role="tab" data-toggle="tab">{{ 'Articles équivalents' }}</a></li>
                {% endif %}

                {% if imputation %}
                    <li id="ongletImput" role="presentation" class="perma"><a href="#Imput" aria-controls="Imput" role="tab" data-toggle="tab">
                        {{- 'Imputations' | trad -}}
                    </a></li>
                {% endif %}

                {% if listeDoc %}
                    <li id="ongletDoc" role="presentation" class="perma"><a href="#Doc" aria-controls="Doc" role="tab" data-toggle="tab">
                        {{- 'Document' | trad -}}
                    </a></li>
                {% endif %}

                {# <li id="ongletCS" role="presentation" class="perma"><a href="#CS" aria-controls="CS" role="tab" data-toggle="tab">{{ 'Champs supplémentaires' }}</a></li> #}
                
                {% if infoStock %}
                    <li id="ongletStock" role="presentation" class="perma"><a href="#Stock" aria-controls="Stock" role="tab" data-toggle="tab">
                        {{- 'Stock' | trad -}}
                    </a></li>
                {% endif %}
            </ul>
        </div>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane clearfix" id="Imput">
                <div class="informations">
                    <div class="colonne2">
                        <p>
                            <span class="champs_label">{{ 'Section d\'imputation' | trad }}</span>
                            <span class="resultat">{{ convertLibelleGlobal('Sectimpu', '', imputation.SI, true) }}</span>
                        </p>
                        <p>
                            <span class="champs_label">{{ 'Code gestion' | trad }}</span>
                            <span class="resultat">{{ imputation.LIBGES }} ({{ imputation.CODGES }})</span>
                        </p>
                    </div>
                    <div class="colonne2 last">
                        <p>
                            <span class="champs_label">{{ 'Code complémentaire' | trad }}</span>
                            <span class="resultat">{{ convertLibelleGlobal('Codecomp', '', imputation.CDC, true) }}</span>
                        </p>
                        <p>
                            <span class="champs_label">{{ 'Sous-compte d\'analyse' | trad }}</span>
                            <span class="resultat">{{ convertLibelleGlobal('SSCPTANA', '', imputation.SCA, true) }}</span>
                        </p>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane clearfix" id="Frs">
                <table class="table table-hover">
                  	<thead class="thead-dark">
                        <tr>
                            <th scope="col">{{ 'Code' | trad }}</th>
                            <th scope="col">{{ 'Raison sociale' | trad }}</th>
                            <th scope="col">{{ 'Code Postal' | trad }}</th>
                            <th scope="col">{{ 'Ville' | trad }}</th>
                            <th scope="col">{{ 'Prix' | trad }}</th>
                        </tr>
                  	</thead>
                    </tbody>
                        {% for frs in listeFrs %}
                            <tr>
                                <td>{{ frs.CODE_FOU }}</td>
                                <td class="list">
                                    {% if frs.FRAISPORT.ARTFRPORT %}
                                        <span class="white-tooltip tooltipsFraisPort" style="position: absolute; left: -20px;">
                                            <img style="margin-right: 5px;width:16px;height:auto;" 
                                                src="{{ baseUrl('IconeV2/Gestion/postage.svg') }}"
                                                {# src="baseUrl('IconeV2/Misc/picto_fraisdeport_16x16.png')" #}
                                            />
                                            <span class="infos_tooltip right">
                                                    <ul class="dataWrapper">
                                                        <li><div>{{'Frais de port' | trad}} :</div><div>{{ frs.FRAISPORT.PRXPLBAS |prixUnitaire  }}</div></li>
                                                        <li><div>{{'Minimum franco' | trad}} :</div><div> {{ frs.FRAISPORT.MNTMINFRA |prixUnitaire  }} {{ frs.FRAISPORT.DEVISE }}</div></li>
                                                        {% if frs.FRAISPORT.FRPOBLIG | boolSql %}<li><div>{{'Port obligatoire' | trad}}</div></li>{% endif %}
                                                    </ul>
                                            </span>
                                        </span>
                                    {% endif %} {{ frs.RS_FOURN }}
                                </td>
                                <td>{{ frs.CPOSTAL }}</td>
                                <td>{{ frs.VILLE1 }}</td>
                                <td>{{ frs.PU |prixUnitaire }}&nbsp;{{frs.DEVISE}}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div role="tabpanel" class="tab-pane clearfix" id="ArtAss">
                <table class="table table-hover">
                  	<thead class="thead-dark">
                        <tr>
                            <th scope="col" width="150px">{{ 'Référence' | trad }}</th>
                            <th scope="col">{{ 'Désignation' | trad }}</th>
                            <th scope="col" width="150px">{{ 'Quantité' | trad }}</th>
                            <th scope="col" width="150px">{{ 'Prix' | trad }}</th>
                            <th scope="col" width="100px">{{ 'Obligatoire' | trad }}</th>
                        </tr>
                  	</thead>
                    <tbody>
                        {% if listeArtAssoc %}
                            {% for artAssoc in listeArtAssoc %}
                                <tr>
                                    <td>{{ artAssoc.REF_FOURN }}</td>
                                    <td>
                                        <span {% if artAssoc.DES_COMP %}class=" white-tooltip"{% endif %} >
                                            {{ artAssoc.DES_ART }}
                                            <span class="infos_tooltip top-right">
                                                {{ artAssoc.DES_COMP }}
                                            </span>
                                        </span>
                                    </td>
                                    <td class="montant">
                                        {% include '@Panier/Panier/addRemoveQte.twig' with {
                                            ligne : {
                                                id_lig : artAssoc.id_lig,
                                                qte : artAssoc.qte,
                                            },
                                            id_lig : artAssoc.id_lig,
                                        } %}
                                    </td>
                                    <td class="montant">{{ artAssoc.PX_ART }} {{ artAssoc.COD_DEV }}</td>
                                    <td>{{ artAssoc.ASS_OBLIG | boolSql | boolTrad }}</td>
                                </tr>
                            {% endfor %}

                            {% include '@Panier/Panier/scriptAddRemoveQte.twig' %}
                        {% endif %}
                    </tbody>
                </table>
            </div>
            <div role="tabpanel" class="tab-pane clearfix" id="ArtEquil">
                <table class="table table-hover">
                  	<thead class="thead-dark">
                        <tr>
                            <th scope="col">{{ 'Code article' | trad }}</th>
                            <th scope="col" width="150px">{{ 'Référence' | trad }}</th>
                            <th scope="col" width="150px">{{ 'Ref. fabricant' | trad }}</th>
                            <th scope="col">{{ 'Désignation' | trad }}</th>
                            <th scope="col">{{ 'Fournisseur' | trad }}</th>
                            <th scope="col" width="75px" class="montant">{{ 'Coeff. Conv' | trad }}</th>
                            <th scope="col" width="150px" class="montant">{{ 'Prix' | trad }}</th>
                            <th scope="col">{{ 'Pref.' | trad }}</th>
                            <th scope="col" width="100px">{{ 'Selectionné' | trad }}</th>
                        </tr>
                  	</thead>
                    <tbody>
                        {% for equiv in listeArtEquiv %}
                            <tr>
                                <td>{{ equiv.COD_ART }}</td>
                                <td>{{ equiv.REF_FOURN }}</td>
                                <td>{{ equiv.REF_FAB }}</td>
                                <td>
                                    <span {% if equiv.DES_COMP %}class=" white-tooltip"{% endif %} >
                                        {{ equiv.DES_ART }}
                                        <span class="infos_tooltip top-right">
                                            {{ equiv.DES_COMP }}
                                        </span>
                                    </span>
                                </td>
                                <td>{{ equiv.RS_FOURN }} ({{ equiv.COD_FOURN }})</td>
                                <td class="montant">{{ equiv.qte }}</td>
                                <td class="montant">{{ equiv.price }} {{ equiv.DEVISE }}</td>
                                <td>{{ equiv.frsPref | boolTrad }}</td>
                                <td style="text-align:center">
                                     <input 
                                        data-pathchange="{{ path('Panier.Articles.ajaxChangeEquivalence', {idLigne:idLigne, rowCompteur:equiv.ROW_COMPTEUR}) }}" 
                                        type="radio" 
                                        id="{{ equiv.ROW_COMPTEUR }}" 
                                        name="art_equiv" 
                                        value="{{ equiv.ROW_COMPTEUR }}" 
                                        {% if equiv.selected %}checked{% endif %}
                                     />
                                </td>
                            </tr>

                            <script>
                                document.addEventListener('change',(event) => {
                                    var target = event.target;
                                    if (!(target instanceof HTMLElement) ) {
                                        return;
                                    }

                                    if (!target.hasAttribute('data-pathchange') ){
                                        return;
                                    } 

                                    activeLoader();
                                    $.ajax({
                                        dataType: 'html',
                                        url: $(target).data('pathchange'),
                                        data: {},
                                        type: "POST",
                                        success: function(result){
                                            location.reload();
                                        }
                                    });

                                    return false;
                                });
                            </script>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div role="tabpanel" class="tab-pane clearfix" id="CS">
            </div> 
            <div role="tabpanel" class="tab-pane clearfix" id="Stock">
                <div id="divStock">
                    <span class="split">
                        <div class="titre_stock">{{ 'Quantité Physique' | trad }}</div>
                        <div class="value">{{ infoStock.QTE_PHYS | qte }}</div>
                    </span>
                    <span class="niv2">
                        <div class="titre_stock">{{ 'Quantité Réservée' | trad }}</div>
                        <div class="value">{{ infoStock.QTE_RES | qte }}</div>
                    </span>
                    <span class="niv2">
                        <div class="titre_stock">{{ 'Quantité Indisponible' | trad }}</div>
                        <div class="value">{{ infoStock.QTE_INDIS | qte }}</div>
                    </span class="niv2">
                    <span class="niv2">
                        <div class="titre_stock">{{ 'Quantité en Transfert' | trad }} </div>
                        <div class="value">{{ infoStock.QTE_TRF | qte }}</div>
                    </span>
                    <span class="niv2 split">
                        <div class="titre_stock">{{ 'Quantité en réappro' | trad }}</div>
                        <div class="value">{{ infoStock.QTE_REAP | qte }}</div>
                    </span>
                    <span class="niv3">
                        <div class="titre_stock">{{ 'Dont en commande' | trad }}</div>
                        <div class="value">{{ infoStock.QTE_LIV | qte }}</div>
                    </span>
                    <span class="niv3 split">
                        <div class="titre_stock">{{ 'Dont en acheminement' | trad }}</div>
                        <div class="value">{{ infoStock.QTE_ACHEM | qte }}</div>
                    </span>                     

                    <span>
                        <div class="titre_stock">{{ 'Stock de protection' | trad }}</div>
                        <div class="value">{{ infoStock.STK_PRO | qte }}</div>
                    </span>   
                    <span>
                        <div class="titre_stock">{{ 'Valeur unitaire' | trad }}</div>
                        <div class="value">{{ infoStock.VAL_LOCAL | prixUnitaire }}</div>
                    </span>   
                </div>
            </div> 
            <div role="tabpanel" class="tab-pane clearfix" id="Doc">
                <table class="table table-hover tableV2">
                    <thead class="thead-dark" style="display: none;">
                        <th scope="col" colspan="6"></th>
                    </thead>
                    <tbody>
                        {% for document in listeDoc %}
                            <tr id="document_{{ document.NO_ORDRE }}">
                                <td><b>{{ document.TITRE }}</b></td>
                                <td >{{ document.DT_VALID | dateTrad }}</td>
                                <td>{{ document.NOM }} ({{ document.AUTEUR }})</td>
                                <td>{{ document.RAIS_SOC }} ({{ document.CENTRE }})</td>
                                <td>
                                    {% if document.TYPE_FT == 'U' %}
                                        <a href="{{ document.NOM_FIC }}">{{ document.NOM_ORI }}</a></td>
                                    {% else %}
                                        <a href="{{ path('GlobalApplication.AjaxDocRattaches.downloadFichier', {id: document.COD_ENR, ordre: document.NO_ORDRE, NO_DA: 'ARTICLES'}) }}">{{ document.NOM_ORI }}</a></td>
                                    {% endif %}
                                <td>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div> 
        </div>
    </div>

    <script>
        $( document ).ready(function() {
            $('#tablistArt').find('li:visible a:first').trigger('click');
        });
    </script>

    <style>
        .tab-pane{
            min-height:100px;
        }
    </style>

{% endblock %}