{% extends 'base.html.twig' %}
{% block stylesheets %}
<style>
    .isDisabled {
    color: currentColor;
    cursor: not-allowed;
    opacity: 0.5;
    text-decoration: none;
    }
</style>
{% endblock %}
    {% block body %}
    
        {% include "includes/header.html.twig" %}

        {% set qtescanne = 0 %}
        {% if product.qteScanne is not null %}
            {% set qtescanne = product.qteScanne %}
        {% endif %}
        <!-- App Capsule -->
        <div id="appCapsule">
            <div class="section mt-2">
                <div class="card cart-item mb-2">
                    <div class="card-body">
                        <div class="in">
                            <img src="{{product.idArticle.photo}}" alt="product" class="imaged">
                            <div class="text">
                                <h3 class="title">Produit: {{product.idArticle.nomArticle}}</h3>
                                <p>Code Barre : {{product.idArticle.codeBarre}}</p>
                                <p>Stock Informatique : 455</p>
                                <p>Categorie: ECIG Multimarque</p>
                                <p>Marque : {{product.idArticle.marqueProduit}}</p>
                                <p>Qte Demandé: {{product.qte}}</p>
                                <p>Qte Scanné: {{qtescanne}}</p>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
            <div class="section full mt-3">
            
                
            
                <div class="form-group login-form mr-1 ml-1 mt-2 ">
                    <div class="input-wrapper mb-2">
                        <div>
                        <form id="id4form" method="post">
                            <input type="hidden" name="id" class="form-control" style="display: inline; width: 95%;" id="id" placeholder="Code barre"
                                value="{{product.cptLigneFacture}}">
                            <input type="text" name="codebarre" class="form-control" style="display: inline; width: 95%;" id="codebarre" placeholder="Code barre"
                                autocomplete="off">
                            <i class="clear-input">
                                <ion-icon name="close-circle"></ion-icon>
                            </i>
                        </div>
                        <div class="mb-05">Qté scanné</div>
                        {% if product.qte == qtescanne %}
                            <div class="stepper">
                                <a href="#" class="stepper-button stepper-down isDisabled">-</a>
                                <input type="text" name="qtescan" class="form-control" value="{{qtescanne}}" disabled />
                                <a href="#" id="plus" class="stepper-button stepper-up isDisabled">+</a>
                            </div>
                        {% else %}
                            <div class="stepper">
                                <a href="#" id="minus" class="stepper-button stepper-down ">-</a>
                                <input type="text" name="qtescan" class="form-control" value="{{qtescanne}}" disabled />
                                <a href="#" id="plus" class="stepper-button stepper-up">+</a>
                            </div>
                        {% endif %}
                        </div>
                        
                     
                    <div id="alert"  class="alert  alert-dismissible fade hide" role="alert">
                        <h4 id="alerttitle" class="alert-title"></h4>
                        
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    
                    <!-- <div class="alert alert-outline-primary alert-dismissible fade show" role="alert">
                        <h4 class="alert-title">Produit</h4>
                        Box AGEIS solo 2 s1000 - grey
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div> -->
                </div>
                <section class="section full mt-2 mb-2">
                    <div class="wide-block pt-2 pb-2">
                    <div class="form-group">
                        
                        <div class="input-wrapper">
                            <div class="form-check mb-1">
                                <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                                <label class="form-check-label" for="flexRadioDefault1">
                                    Problème code à barre
                                </label>
                            </div>
                            <div class="form-check mb-1">
                                <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2">
                                <label class="form-check-label" for="flexRadioDefault2">
                                    Problème de stock
                                </label>
                            </div>
                        </div>
                    </div>
                    </div>
                </section>
                <section class="wide-block">
                    <div class="mb-1">
                        <a href="{{path('validerligne',{'id':product.idFacture.idFacture})}}" class="btn btn-block btn-primary ">
                        Valider Produit</a>
                    </div>
                     <div>
                        <button type="submit" id="correctionCB" value="corriger" class="btn btn-block btn-info ">Corriger le code barre</button>
                    </div>
                    
                </form>
                </section>   
            </div>
        </div>
        <script>
        </script>
    <!-- * App Capsule -->
    <!-- App Bottom Menu -->
        {% include "includes/menu.html.twig" %}
    <!-- * App Bottom Menu -->
  {% endblock %}