{% extends "base.html.twig" %}


{% block body %}

    <datalist id="compo">
        {% for compo in composants %}
            <option value="{{ compo }}">{{ compo }}</option>
        {% endfor %}
    </datalist>

    <div class="absolute w-75">
        <a href="{{ path('home') }}" class="btn btn-dark my-3">Retour</a>

        <div>
            <div class="bg-{{ cmd.status.color }} rounded p-2 w-25">
                <b>
                    {{ cmd.status | replace({'En attente' : 'Commandé'}) }}
                </b>
                {% if cmd.hasEtapes() %}
                    {% set etape = cmd.etapes|last %}
                    {{ etape.formattedDate }}
                {% endif %}
            </div>
        </div>
        <div class="d-flex justify-content-between">
            <div class="d-flex">
                <div class="fs-2">{{ cmd.numero }}</div>
                {% if cmd.status.id == 9 %}
                    <div class="bg-success text-white ms-3 p-3 rounded">Validé</div>
                {% endif %}


            </div>

            {% 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","Europe/paris") }}">
                            <button class="btn btn-success">Valider</button>
                        </div>


                    </form>

                </div>

            {% else %}
                <div class="d-flex">
                    <form action="{{ path('fournisseur.order.set.status',{status: 13,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","Europe/paris") }}">
                            <button class="btn btn-success">Commander</button>
                        </div>


                    </form>


                </div>

            {% endif %}
            <a href="{{ path('fournisseur.order.delete',{num : cmd.numero}) }}" class="btn btn-danger"><img
                        src="/img/trash.svg" alt="trash" width="30">Supprimer</a>
        </div>
        <div class="fs-6">{{ cmd.date }}</div>

        {% if cmd.status.id == 3 %}
            <button class="btn btn-success rounded" type="button" data-bs-toggle="modal" data-bs-target="#addCompoModal"
                    data-id="{{ cmd.numero }}"><img src="/img/plus.svg" alt="plus" width="30">
                Ajouter un composant
            </button>
        {% endif %}
        <div id="content_{{ cmd.numero }}" class="content">
            <table class="table">
                <thead>
                <tr class="text-center">
                    <td></td>
                    <td></td>
                    <td>Client</td>
                    <td>Reference</td>
                    <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>

                            <a href="{{ path('fournisseur.order.product.delete',{num : cmd.numero, item : item.id}) }}"
                               class="btn btn-danger"><img src="/img/trash.svg" alt="trash" width="20"></a>


                        </td>
                        <td>
                            {% if item.isComposant() and item.article.hasImage() %}
                                <img src="/img/" alt="">
                            {% endif %}
                        </td>
                        <td>{{ item.reference.client }}</td>
                        <td>
                            {{ item.reference }}
                            {% if item.hasDevis() %}
                                {% if item.devis.hasReparation() %}
                                    {% set url =  path('reparations',{submenu : 'all'})~'?q='~item.devis.reparation %}
                                {% elseif item.devis.hasIntervention() %}
                                    {% set url =  path('intervention',{submenu : 'all'})~'?q='~item.devis.intervention %}
                                {% else %}
                                    {% set url = '#' %}
                                {% endif %}

                                <a href="{{ url }}" target="_blank"> | {{ item.devis.reference }}</a>
                            {% endif %}

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

                                {% endif %}
                            </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">{{ item.article.quantite }}</td>

                        <td class="bg-success bg-gradient text-white">{{ item.quantite }}</td>
                        {% if cmd.status.id == 3 %}
                            <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>

        </div>

    </div>


    {# Modal ajout qte Composant #}
    <div class="modal fade" id="addCompoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Ajouter un composant</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    {{ form_start(addComposant) }}
                    <div class="fetched-data"></div>
                    <div>
                        <div class="d-flex">
                            <input type="text" class="form-control " name='search' placeholder="Nom du composant"
                                   autocomplete="off" list="compo">
                        </div>
                        <div class="shadow search-list" style="display : none"></div>
                    </div>


                    {{ form_row(addComposant.quantite) }}</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Annuler</button>
                    {{ form_row(addComposant.submit) }}
                    {{ form_end(addComposant) }}</div>
            </div>
        </div>
    </div>

    <script src="/js/fournisseur.js"></script>
{% endblock %}