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

.body-wrapper .container:not(.simple-container) {
    padding: 65px !important;
    margin: 50px auto;
    background-color: #fff;
    box-shadow: 0 0 15px #00000010;
    border-radius: 5px;
}

</style>




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


        
     

            <!--Checkout Area Strat-->

            <div class="checkout-area pt-60 pb-30">
                <div class="container">
                    <div class="row">
                        <div class="col-12">

                            
                            
                        </div>
                    </div>
                    {{form_start(formOrder,{"attr":{"data-turbo":"false"}})}}
                    <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>
                                    
                                    {{form_widget(formOrder.customer,{attr:{"class":"row col-md-12"}})}}
                                    {% endif %}
                                    <div class="col-md-12" >
                                    <br>
                                    <h4 >Paiement par carte / Applepay / Googlepay</h4>

                                    <div  id="card-element" class="mt-5"></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.name}}<strong class="product-quantity"> × {{orderItem.quantity}} / {{"night"|trans}}</strong></td>
                                              <td class="cart-product-total"><span class="amount">{{orderItem.price}} {{settings.get.currency}}</span></td>  
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                        <tfoot>
                                        <tr class="cart-subtotal-s">
                                                <th>Mutaweef</th>
                                                <td><span class="amount total-checkouts">{{order.agent}} </span></td>
                                            </tr>
                                            <tr class="cart-subtotal-s">
                                                <th>Sous total</th>
                                                <td><span class="amount total-checkouts">{{order.totalAmount}} {{settings.get.currency}} </span></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}} {{settings.get.currency}}</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>

                    <i style="font-size:90px;color:green;" class="fa-solid fa-circle-check"></i>

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


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


            <script src="https://js.stripe.com/v3/"></script>
	<script>
			
				document.addEventListener("turbo:load",function(){
					

				
				{% if order.tokenStripe != null %}

										var stripe = Stripe('pk_test_51GuNRlCg4UkzpRv9jw3LhFRJ4M77Z5CgbxtxWPlZuq8diUEe78JTzzV7dMGGKwQXKtsXTlnuJZXhIaPhRlu2PEWN00zFpRWeVI');

						const options = {
						clientSecret: '{{ CLIENT_SECRET }}',
						// Fully customizable with appearance API.
						appearance: { /*...*/
						}
						};
						const elements = stripe.elements(options);

						// Create and mount the Payment Element
						const cardElement = elements.create('payment');
						cardElement.mount('#card-element');


						const form = document.getElementById('checkout-form');

						form.addEventListener('submit', async (event) => {
						event.preventDefault();

						const {error} = await stripe.confirmPayment({ // `Elements` instance that was used to create the Payment Element
						elements,
						confirmParams: {
						return_url: '{{urlSite}}{{ path("bookingSuccess") }}'
						}
						});


						if (error) {
						// This point will only be reached if there is an immediate error when
						// confirming the payment. Show error to your customer (for example, payment
						// details incomplete)
						const messageContainer = document.querySelector('#error-message');
						messageContainer.textContent = error.message;
						} else {
						// Your customer will be redirected to your `return_url`. For some payment
						// methods like iDEAL, your customer will be redirected to an intermediate
						// site first to authorize the payment, then redirected to the `return_url`.
						}


						});
						{% else %}


						//Update Payment Stripe : To review
						{# $.ajax({
								url: "https://api.stripe.com/v1/payment_intents/pi_3M1YezA7MugRUi1a1GXU21BY",
								method: "POST",
								data: {
								amount: 1500
								},
								beforeSend: function (xhr) {
								xhr.setRequestHeader('Authorization', 'Bearer sk_test_y8HfPRMlAF05dV3hrstYxXtc');
								},
								success: function (data) {
								console.log(data);
								}
								}); #}
						{% endif %}



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