{% for cmd in cmds %}
    <div class="mb-5">
        <div class="d-flex justify-content-between {% if cmd.status.id == 9 %}bg-success text-white p-2{% endif %}">

            <div class="d-flex">
                <a href="{{ path('fournisseur.print',{numero : cmd.numero}) }}" target="_blank" class="cmd-icon "><img
                            src="/img/printer.svg" alt="print" width="40"></a>


                <div class="mx-3"><img src="/img/carte-right.svg" alt="arrow"
                          id='arrow_{{ cmd.numero }}' {% if cmd.status.id != 9 %} class="caret active" {% endif %}
                          onclick="displayOrder('{{ cmd.numero }}')" width="30"></div>

                <div><b>{{ cmd.numero }}</b>

                    -
                    <i>
                        {{ cmd.getFormattedDateOrder() }}

                    </i></div>

                <div class="bg-{{ cmd.status.color }} rounded p-2">{{ cmd.status }}</div>

            </div>


            <div>
                {% if cmd.hasPieceJointe() %}
                    {% if cmd.pieceJointe | length > 1 %}
                        <a href="{{ path('fournisseur.order.see.pj',{id:cmd.id}) }}" class="btn btn-info">
                            <img src="/img/attachment.svg" alt="attachment" width="15">
                            Voir les Pieces Jointes</a>
                    {% else %}
                        <a href="{{ cmd.pieceJointe[0].getUrl() }}" target="_blank" class="btn btn-info">
                            <img src="/img/attachment.svg" alt="attachment" width="15">
                            Voir la Piece Jointe</button>
                        </a>


                    {% endif %}
                {% endif %}


            </div>
        </div>


        <div id="content_{{ cmd.numero }}"
             class="content" {% if cmd.status.id == 9 %} style=" display:none" {% endif %}>
            <table class="table">
                <thead>
                <tr class="text-center">
                    <td></td>
                    <th>Réference</th>
                    <td>Modele</td>
                    <td>EAN</td>
                    <td>Fournisseur</td>
                    <td>Stock Reel</td>
                    <td>A Commander</td>
                    <td></td>
                </tr>
                </thead>
                <tbody>
                {% for item in cmd.contenu | merge(cmd.details) %}

                    <tr class="text-center">
                        <td>


                        </td>
                        <td>
                            {% if item.hasCommande() %}
                                {{ item.commande }}
                            {% elseif item.hasDevis() %}
                                {{ item.devis }}
                            {% endif %}

                        </td>
                        <td data-label="Article">{{ item.article }}</td>
                        <td data-label="EAN">
                            {% if item.isComposant() %}
                                {{ item.article.isbn }}
                            {% endif %}
                        </td>
                        <td id='frn_{{ cmd.numero }}_{{ item.id }}' data-label="Fournisseur">
                            <div>
                                <span>{{ item.fournisseur }}</span>
                                <img src="/img/edit.svg" alt="edit" onclick="showFournisseurEdit()">
                            </div>

                            <div style="display:none">

                                <select name="fournisseur" id="select_{{ cmd.numero }}_{{ item.id }}"
                                        class="form-select">
                                    {% for frn in fournisseurs %}
                                        <option value="{{ frn.id }}">{{ frn.nom }}</option>
                                    {% endfor %}
                                </select>
                                <button class="btn btn-success"
                                        onclick="updateFournisseur('{{ path('fournisseur.order.compo.edit',{num : cmd.id,compo : item.article.id}) }}','{{ cmd.numero }}','{{ item.id }}')">
                                    <img src="/img/check.svg" alt="check"></button>
                            </div>
                        </td>

                        <td class="bg-danger bg-gradient text-white" data-label="Stock">{{ item.article.quantite }}</td>

                        <td class="bg-success bg-gradient text-white" data-label="A commander">{{ item.quantite }}</td>
                        {% if cmd.status.id == 13 %}
                            <td><img src="/img/dash.svg" alt="moins" width="30" onclick="removeQte(null)">


                                <span class="">0</span>
                                <img src="/img/plus.svg" alt="plus" onclick="addQte()" width="30">

                                <button class="btn btn-success"
                                        onclick="submitQteCompo('{{ path('fournisseur.order.compo.edit',{num : cmd.id,compo : item.article.id}) }}')">
                                    OK
                                </button>


                            </td>
                        {% endif %}


                    </tr>

                {% endfor %}


                </tbody>
            </table>
            {% if cmd.status.id ==  13 %}
                <div class="d-flex">
                    <form action="{{ path('fournisseur.order.set.status',{status:9,num: cmd.numero}) }}" method="POST">

                        <div class="d-flex"><input type="date" class="form-control mx-2" name="date"
                                                   value="{{ "now"|date("Y-m-d") }}">
                            <button class="btn btn-success">Valider</button>
                        </div>


                    </form>

                </div>


            {% endif %}
        </div>
    </div>

    {% if loop.index != cmds | length %}
        <hr>
    {% endif %}

{% else %}

    <div class="text-center fs-2">Il n'y a aucune commande dans ce segment</div>

{% endfor %}