{% extends "@Flexy/FrontBundle/Themes/CoWorking/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;
}


    .tips-shipping-agent .item{
        padding:10px 15px;
        margin:0 10px;
        font-weight:bold;
        background:#45dae9;
        color:white;
        border-radius:50px;
        text-align:center;
    }
    .tips-shipping-agent .item.selected{
        
        background:#febc4a;
    }


.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot{
    background:#d5d5d5;
}

.owl-dots {
     bottom:-35px; 
}

</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-->
                                
                            </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>
                                    {% if order %}
                                    <a id="payzone-btn" class="payzone-btn btn btn-success d-none" href="{{path("paymentPayzone",{id:order.id})}}"  >Payer par payzone</a>
                                    {% endif %}


                                    <div class="col-12 mt-5 tips-shipping-agent-container d-none" >
                                        <h6>Pourboire pour le livreur</h6>
                                        {{form_widget(formOrder.shippingTips)}}
                                        <div class="owl-carousel tips-shipping-agent d-none mt-4">
                                        <div data-value="0" class="item selected"> 0 DH</div>
                                            <div data-value="10" class="item"> 10 DH</div>
                                            <div data-value="15" class="item"> 15 DH </div>
                                            <div data-value="20" class="item"> 20 DH </div>
                                            <div data-value="30" class="item"> 30 DH </div>
                                            <div data-value="40" class="item"> 40 DH </div>
                                            <div data-value="50" class="item"> 50 DH </div>
                                            <div data-value="100" class="item"> 100 DH </div>
                                            </div>

                                    </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.description}}<strong class="product-quantity"> × {{orderItem.quantity}}</strong></td>
                                              <td class="cart-product-total"><span class="amount">{{orderItem.price}} MAD</span></td>  
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                        <tfoot>
                                            <tr class="cart-subtotal-s">
                                                <th>Sous total</th>
                                                <td><span class="amount total-checkouts">{{order.totalAmount}} MAD </span></td>
                                            </tr>
                                            
                                           <tr class="cart-subtotal">
                                                <th>Pourboire pour le livreur</th>
                                                <td><span class="amount shipping-tips">0,00 MAD </span></td>
                                            </tr>
                                            {% if order.coupon  %}
                                            <tr class="cart-subtotal-s">
                                                <th>
                                                Reduction par coupon
                                                <br>
                                                <small>{{order.coupon.code}}</small>
                                                </th>
                                                <td><span class="amount total-checkouts">{{order.reductionOnCoupon}} MAD</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}} MAD </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}}  MAD</span></strong></td>
                                            </tr>
                                            <tr class="order-total-s">
                                                <th>Montant á payer</th>
                                                <td>
                                                <strong><span class="amount total-checkouts total-to-pay">{{order.fullTotalAmount }} MAD</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(){


                    shippingFees = {{order.shippingFees}};
                    reductionCoupon = {{order.reductionOnCoupon}};

                     $(".tips-shipping-agent").owlCarousel({
                                        dots:true,
                                        items:5,
                                        nav:false,
                                        onChanged:function(){
                                        $(".tips-shipping-agent").removeClass("d-none");
                                        }
                                });

                      $(".tips-shipping-agent .item").click(function(){
                        $(".tips-shipping-agent .item").removeClass("selected");
                        $(this).addClass("selected");
                        shippingTips = parseFloat($(this).attr("data-value"));
                        
                        $(".shipping-tips").html( (shippingTips) + " DH");
                        $(".total-to-pay").html(((total) - (amount) - (reductionCoupon) - (walletPayment)) + (shippingFees) + (shippingTips) + " DH");
                        $("#order_shippingTips").val(shippingTips);
                    });


                    $("#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();
                    });


                    // Select Payment Method

                    

                    $("input[name='order[paymentMethod]']").click(function(){
                        var id = $(this).val();
                        $.ajax({
                        url: "/api/payment_methods/"+id,
                        
                        success:function(data){
                            if(data.type == "transaction"){
                                
                                 $(".tips-shipping-agent-container").removeClass("d-none");
                            }else{

                                shippingTips = 0;
                        
                                $(".shipping-tips").html( (shippingTips) + " DH");
                                $(".total-to-pay").html(((total) - (amount) - (reductionCoupon) - (walletPayment)) + (shippingFees) + (shippingTips) + " DH");

                                $(".tips-shipping-agent .item").removeClass("selected");
                                $("#order_shippingTips").val(0);
                                $(".tips-shipping-agent-container").addClass("d-none");
                            }
                        },
                    });
                    });

                    // Default Departement 
                    $.ajax({
                        url: "{{path('departements_ajax')}}",
                        data:{
                            city:$("select[name='city']").val()
                        },
                        success:function(data){
                            $("select[name='departement']").html(data);
                        },
                    });

                    $.ajax({
                        url: "{{path('departements_ajax')}}",
                        data:{
                            city:$("select[name='city_billing']").val()
                        },
                        success:function(data){
                            $("select[name='departement_billing']").html(data);
                        },
                    });

                    

                    $("select[name='city']").change(function(){
                    $.ajax({
                        url: "{{path('departements_ajax')}}",
                        data:{
                            city:$(this).val()
                        },
                        success:function(data){
                            $("select[name='departement']").html(data);
                        },
                    });
                    });


                    $("select[name='city_billing']").change(function(){
                    $.ajax({
                        url: "{{path('departements_ajax')}}",
                        data:{
                            city:$(this).val()
                        },
                        success:function(data){
                            $("select[name='departement_billing']").html(data);
                        },
                    });
                    });

                    $("select[name='customer-address-choice-shipping']").change(function(){
                        var value = $(this).val();

                        if(value!=0){
                            $(".shipping-form .checkout-form-list").fadeOut()
                        }else{
                            $(".shipping-form .checkout-form-list").fadeIn()
                        }
                    });

                    $("select[name='customer-address-choice-billing']").change(function(){
                        var value = $(this).val();

                        if(value!=0){
                            $(".billing-form .checkout-form-list").fadeOut()
                        }else{
                            $(".billing-form .checkout-form-list").fadeIn()
                        }
                    });

                    


                    if(cartLS.list().length == 0){
                        //$(".checkout-area").html($(".cart-is-empty").html());
                    }

                    $("#order_paymentMethod_3").click(function(){
                        if($("#payzone-btn").hasClass("d-none")){
                            $("#payzone-btn").removeClass("d-none");
                        }else{
                            $("#payzone-btn").addClass("d-none");
                        }
                        
                    });

                    



                    




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