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

{% block title %}Devis - Nouveau
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="/css/devis.css">

{% endblock %}


{% block body %}

    <div class="absolute mb-5">


        <div class="container">
            <datalist id="client">
                {% for client in clients %}
                    <option value="{{ client }}">{{ client }}</option>
                {% endfor %}
            </datalist>

            <datalist id="products">
                {% for compo in composants %}
                    <option value="{{ compo }}">{{ compo }}</option>
                {% endfor %}
                {% for pc in pcs %}
                    <option value="{{ pc }}">{{ pc }}</option>
                {% endfor %}
                {% for item in laptops %}
                    <option value="{{ item }}">{{ item }}</option>
                {% endfor %}
            </datalist>

            <form action="" method="post" enctype="multipart/form-data">

                <div class="d-flex justify-content-between mb-3">
                    <div>
                        <div class=" rounded shadow-sm p-3">
                            <div>
                                <b>Total HT :</b>

                                <span id="total_HT">
								{% if devis is defined %}
                                    {{ devis.getTotalHT(tva) }}
                                {% else %}
                                    0
                                {% endif %}
							</span>

                                €
                            </div>
                            <div>
                                <b>TVA :</b>

                                <span id="tva">{{ tva }}</span>

                                %
                            </div>
                            <div>
                                <b>Total TTC :</b>

                                <span id="total_TTC">
								{% if devis is defined %}
                                    {{ devis.getTotalTTC() }}
                                {% else %}
                                    0
                                {% endif %}

							</span>
                                €
                            </div>
                        </div>

                    </div>
                    <div>
                       <div id="banner-container" class="mx-3">
                           {% if devis is defined %}
                               <div class="rounded shadow-sm p-3">
                                   {% include 'client/banner.html.twig' with {client : devis.client} %}
                               </div>
                           {% endif %}
                       </div>

                        <div class="btn btn-info d-flex flex-column">
                            <label for="pj">
                                <img src="/img/attachment.svg" alt="" width="20">
                                Ajouter une piece jointe</label>
                            <input type="file" name="pj[]" multiple></div>

                    </div>
                </div>


                <div class="d-flex justify-content-between">
                    <p class="rounded shadow-sm p-2">
                        <b>Date de la commande:</b>
                        {{ date }}</p>
                    <p class="rounded shadow-sm p-2"><b>Reference Devis :</b>
                        {{ num }}
                    </p>

                </div>

                <div class="my-3 w-50">
                    <div>
                        <label for="remise">Remise (%) :</label>
                        <input type="number" name="remise" id="remise" value="0" class="form-control">
                    </div>
                </div>

                <div class="m-3">
                    <div>
                        <label for="client">Client :</label>
                        <input type="text" name='client' id="input_client" class="form-control" autocomplete="off"
                               required="required"
                               list="client" {% if devis is defined %} value="{{ devis.client }}" readonly {% elseif client is defined %} value="{{ client }}" readonly {% endif %}>

                    </div>



                    <div class="my-3 d-flex flex-column">
                        <label for="infos">Informations :</label>
                        <textarea class="form-control" name="infos" id="infos" cols="30" rows="7">
							{% if devis is defined %}
                                {{ devis.infos }}
                            {% endif %}
						</textarea>
                    </div>

                </div>

                <div class="d-flex">
                    {% if devis is defined %}
                        {% for item in devis.pj %}
                            <div class="m-3 d-flex flex-column align-items-center justify-content-between"
                                 id="pj_{{ item.id }}">
                                <div>{{ item }}</div>
                                <div>{{ item.originalName }}</div>
                                <div>
                                    <button class="btn btn-danger mx-3 " type="button"
                                            onclick="removePj('{{ path('pj.remove',{id:item.id}) }}','pj_{{ item.id }}')">
                                        <img src="/img/trash.svg" alt="delete" width="20"></button>
                                </div>
                            </div>
                        {% endfor %}

                    {% endif %}
                </div>

                <div>

                    <input type="radio" name="service" value="commande" id="commande"
                           required {% if devis is defined and devis.service == 'commande' %} checked {% endif %}>
                    <label for="commande">Commande</label>
                    <input type="radio" name="service" value="reparation"
                           id="reparation" {% if devis is defined and devis.service == 'reparation' %} checked {% endif %}>

                    <label for="reparation">Réparation</label>


                </div>


                <ul class="nav nav-tabs my-3" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#product"
                                type="button" role="tab" aria-controls="product" aria-selected="true">Produit
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#service"
                                type="button" role="tab" aria-controls="service" aria-selected="false">Service
                        </button>
                    </li>

                </ul>

                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="product" role="tabpanel" aria-labelledby="product-tab">
                        <button id="open_add_compo_modal" type="button" class="btn btn-success" data-bs-toggle="modal"
                                data-bs-target="#AddComposantModal">
                            <img src="/img/plus.svg" alt="" width="30">
                            <span>Créer un composant</span>
                        </button>
                        <div class="d-flex my-3">
                            <input type="text" id="searchCompo" class="form-control w-100" value="" autocomplete="off"
                                   placeholder="Rechercher un Composant" name='search' list="products">
                            <div class="mx-3">
                                <label for="qte">Quantité</label>
                                <input type="number" class="form-control" min="0" value="1" name="qte" id="qteCompo">
                            </div>

                            <button id="add_item_to_cmd_button" class="btn btn-success" type="button"
                                    onclick="addProductToDevis('{{ path('reparation.template') }}')">Ajouter
                            </button>
                        </div>


                    </div>
                    <div class="tab-pane fade" id="service" role="tabpanel" aria-labelledby="service-tab">
                        <div class="d-flex justify-content-between align-items-center m-5">
                            <div>
                                <label for="descr">Description :</label>
                                <br>
                                <textarea name="descr" id="descr" cols="50" rows="5"></textarea>
                            </div>
                            <div>
                                <label for="qte">Quantité</label>
                                <input type="number" class="form-control" min="0" value="1" name="qte" id="qte">
                            </div>


                            <div>
                                <label for="price">Montant TTC :</label>
                                <input type="number" class="form-control" min="0" value="0.00" name="price"
                                       id="price_TTC">

                            </div>
                            <button id="add_service_to_cmd_button" class="btn btn-success p-3" type="button"
                                    onclick="addLineToDevis('{{ path('reparation.template') }}')">Ajouter
                            </button>

                        </div>

                    </div>
                </div>


                <table class="w-100 mb-3">
                    <thead>
                    <tr class="text-center">
                        <td></td>
                        <td>Description</td>
                        <td>Quantité</td>
                        <td>HT Unitaire</td>
                        <td>TTC Unitaire</td>
                        <td>Total TTC</td>
                    </tr>
                    </thead>
                    <tbody id="product_list">
                    {% if devis is defined %}
                        {% for article in devis.getArticles() %}
                            {{ article.type }}
                            {% if article.isComposant() %}

                                {% set compo = compoRepo.findOneByConcat(article.article.__toString()) %}
                                {% include "reparations/templates/devisLine.html.twig" with { qte : article.quantite, tva :tva, id : loop.index, compo : compo} %}
                                {% set compo = null %}
                            {% elseif article.isPc() %}
                                {% if app.user.is('dev') %}

                                {% endif %}
                                {% set pc =  pcRepo.findOneBy({'modele' : article.article.getModele() }) %}


                                {% include "reparations/templates/devisLine.html.twig" with { qte : article.quantite,tva :tva, id : loop.index, pc : pc} %}

                                {% set pc = null %}

                            {% elseif article.isLaptop() %}
                                {% set compo = laptopRepo.findOneByConcat(article.article.__toString()) %}
                                {% include "reparations/templates/devisLine.html.twig" with { qte : article.quantite, tva :tva, id : loop.index, compo : compo} %}
                                {% set compo = null %}
                            {% else %}

                                {% include "reparations/templates/devisLine.html.twig" with {presta : article.article, tva :tva, id : loop.index} %}

                            {% endif %}
                        {% endfor %}

                    {% endif %}
                    </tbody>
                </table>


                <a href="{{ path('commande.devis',{submenu: 'all'}) }}" class="btn btn-danger mb-5">Annuler</a>

                <button type="submit" class="btn btn-success mb-5">
                    {% if devis is defined %}
                        Modifier le devis
                    {% else %}
                        Créer un devis


                    {% endif %}
                </button>


            </form>
        </div>

        {% include 'devis/commande/modals.html.twig' %}

        <script src="{{ asset('js/commande.js') }}"></script>
        <script>
            document.getElementById('infos').innerHTML = document.getElementById('infos').innerHTML.trim();
        </script>
    </div>
{% endblock %}