{% extends "@Flexy/FrontBundle/Themes/" ~ settings.get.assetFolderName|capitalize ~ "/templates/layout.html.twig"  %}

{% block body %}


<style>
.error{
    font-size:0.8rem;
    color:white !important;
    background:red;
    padding:4px;
}

.error.valid{
    font-size:0.8rem;
    background:green;
    padding:4px;
}


input[type="radio"]{
    display:none;
}

input[type="radio"] + label{
    padding: 10px;
    border-radius: 3px;
    margin-right:10px;
    background-color: #eee;
}
input[type="radio"]:checked + label{
        background-color: #45dae9;
    padding: 10px;
    color: white;
}
.form-check{
    display:inline-block;
}

</style>




        <!-- Begin Body Wrapper -->
        <div class="body-wrapper">


        
     
                        <!-- Begin Li's Breadcrumb Area -->
            <div class="breadcrumb-area">
                <div class="container">
                     <ul id="progressbar">
    <li  class="active">Livraison
</li>
    <li class="active">Paiement et coordonnées</li>
    <li id="recap-order-step">Resumé</li>
  </ul>
                </div>
            </div>
            <!-- Li's Breadcrumb Area End Here -->
            <!--Checkout Area Strat-->
<form action="#">
            <div class="checkout-area pt-60 pb-30">
                <div class="container">
                    <div class="row">
                        <div class="col-12">

                            
                            <div class="coupon-accordion d-none">
                                <!--Accordion Start-->
                                <h3>vous n'êtes pas connecté <span id="showlogin">Se connecter</span></h3>
                                <div id="checkout-login" class="coupon-content">
                                    <div class="coupon-info">
                                        <p class="coupon-text">Quisque gravida turpis sit amet nulla posuere lacinia. Cras sed est sit amet ipsum luctus.</p>
                                        
                                            <p class="form-row-first">
                                                <label>Username or email <span class="required">*</span></label>
                                                <input type="text">
                                            </p>
                                            <p class="form-row-last">
                                                <label>Mot de passe  <span class="required">*</span></label>
                                                <input type="text">
                                            </p>
                                            <p class="form-row">
                                                <input value="Se connecter" type="submit">
                                                <label>
                                                    <input type="checkbox">
                                                     Se souvenir de moi 
                                                </label>
                                            </p>
                                            <p class="lost-password"><a href="#">Lost your password?</a></p>
                                        </form>
                                    </div>
                                </div>
                                <!--Accordion End-->
                                <!--Accordion Start-->
                                <h3>Avez-vous un coupon? <span id="showcoupon">Appliquer un coupon</span></h3>
                                <div id="checkout_coupon" class="coupon-checkout-content">
                                    <div class="coupon-info">
                                        <form action="#">
                                            <p class="checkout-coupon">
                                                <input placeholder="Coupon code" type="text">
                                                <input value="Appliquer un coupon" type="submit">
                                            </p>
                                        </form>
                                    </div>
                                </div>
                                <!--Accordion End-->
                            </div>
                        </div>
                    </div>
                    {{form_start(formOrder)}}
                    <div class="row">
                    
                        <div class="col-lg-7 col-12">

                        
                            
                                <div class="checkbox-form">
                                
                                    

                                    {% if is_granted("ROLE_CUSTOMER") %}
                            <span class="badge badge-success">Vous êtes connecté en tant que <b>{{app.user.username}}</b></span>
                            <br>
                            {% endif %}
                                                                        
                                    
                                    
                                    <div class="row" >
                                     {% if is_granted("ROLE_CUSTOMER") == false %}
                                     <br>
                                    <h4 class="p-3">Entrez vos informations de contact pour assurer la collecte
                                    et la livraison de vos articles</h4>
                                    {{form_widget(formOrder.customer,{attr:{"class":"row col-md-12"}})}}
                                    {% endif %}
                                    <div class="col-md-12" >
                                    <br>
                                    <h4>Infos de la commande</h4>
                                    {{form_row(formOrder.paymentMethod)}}
                                    </div>
                                    
                                    
                                    
                                    </div>
                                   


                                    
                                    
                                </div>
                            
                        </div>
                        <div class="col-lg-5 col-12">
                            <div class="your-order">
                                <h3>Votre commande</h3>
                                <div class="your-order-table table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th class="cart-product-name">Produit</th>
                                                <th class="cart-product-total">Total</th>
                                            </tr>
                                        </thead>
                                        {% if order %}
                                        <tbody class="">
                                        
                                            {% for orderItem in order.orderItems %}
                                            <tr class="cart_item">
                                              <td class="cart-product-name"> {{orderItem.name}}<strong class="product-quantity"> × {{orderItem.quantity}}</strong></td>
                                              <td class="cart-product-total"><span class="amount">{{orderItem.price}} EUR</span></td>  
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                        <tfoot>
                                            <tr class="cart-subtotal-s">
                                                <th>Sous total</th>
                                                <td><span class="amount total-checkouts">{{order.totalAmount}} {{settings.get.currency|trans}} </span></td>
                                            </tr>
                                            {% if order.shippingTips > 0 %}
                                            <tr class="cart-subtotal-s">
                                                <th>Pourboire pour le livreur</th>
                                                <td><span class="amount total-checkouts">{{order.shippingTips}} {{settings.get.currency|trans}} </span></td>
                                            </tr>
                                            {% endif %}
                                             {% if order.walletPaymentAmount > 0 %}
                                            <tr class="cart-subtotal-s">
                                                <th>Paiement par wallet</th>
                                                <td><span class="amount total-checkouts">{{order.walletPaymentAmount}} {{settings.get.currency|trans}} </span></td>
                                            </tr>
                                            {% endif %}
                                            <tr class="order-total-s">
                                                <th>
                                                Frais de livraison<br>
                                                <small>{{order.shippingMethod}}</small>
                                                </th>
                                                <td><strong><span class="amount total-checkouts">{{order.shippingFees}}  EUR</span></strong></td>
                                            </tr>
                                            <tr class="order-total-s">
                                                <th>Montant á payer</th>
                                                <td><strong><span class="amount total-checkouts">{{(order.totalAmount + order.shippingFees + order.shippingTips) - order.walletPaymentAmount  -  order.reductionOnTotal}} EUR</span></strong></td>
                                            </tr>
                                        </tfoot>
                                        {% endif %}
                                    </table>
                                    {{form_rest(formOrder)}}
                                    <div class="order-button-payment"> 
                                    <input class="btn btn-primary" type="submit" value="Terminer la commande" />
                                    </div>
                                </div>
                            </div>
                        </div>

                         
                                    
                                    
                    </div>
                    {{form_end(formOrder)}}
                </div>
            </div>
            
            <!--Checkout Area End-->

        </div>
        <!-- Body Wrapper End Here -->

            <!-- IF CART IS EMPTY -->
            <div class="cart-is-empty d-none">
                <div class="p-4 text-center  ">

                    <h1>Votre panier est vide !</h1>
                    <h4>Pensez á ajouter des articles pour continuer</h4>
                    <p></p>

                    <img style="width:250px;margin-top:20px;" src="https://image.flaticon.com/icons/png/512/102/102661.png"  />

                    </div>
                </div>
             <!-- IF CART IS EMPTY -->
{% endblock %}


        {% block javascripts %}
            {{parent()}}


            <script>
                $(document).ready(function(){


                    $("#order_customer_customerGroup .form-check:first-child input[type='radio']").attr("checked","true");
                    $("#order_paymentMethod .form-check:first-child input[type='radio']").attr("checked","true");


                    $("form[name='order']").submit(function(){
                        cartLS.destroy();
                    });

                    
                 

                    

                    

                   


                  


                   

                    


                   


                    




                   
                });
            </script>
        {% endblock %}