{% extends 'base.html.twig' %}
{% block body %}
<div class="breadcumb-wrapper col d-none d-lg-block" data-bg-src="../../assets/img/breadcumb/breadcumb-bg.jpg">
    <div class="container z-index-common">
      <div class="breadcumb-content">
        <h1 class="breadcumb-title">Checkout</h1>
        <div class="breadcumb-menu-wrap">
          <ul class="breadcumb-menu">
            <li><a href="/index">Home</a></li>
            <li>Shop</li>
            <li>Checkout</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <section class="vs-checkout-wrapper space">
    <div class="container">
      <div class="woocommerce-form-login-toggle">
        <!--<div class="woocommerce-info">Checkout</a></div>-->
        <!--<form action="#" class="woocommerce-form-login bg-smoke">
          <div class="row">
            <div class="col-lg-4">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Username or email">
              </div>
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Password">
              </div>
              <div class="form-group">
                <div class="custom-checkbox">
                  <input type="checkbox" id="remembermylogin">
                  <label for="remembermylogin">Remember Me</label>
                </div>
              </div>
              <div class="form-group">
                <button type="submit" class="vs-btn style4">Login</button>
                <p class="fs-xs mt-2 mb-0"><a class="text-reset" href="#">Lost your password?</a></p>
              </div>
            </div>
          </div>
        </form>-->
      </div>
      <!--<div class="woocommerce-form-coupon-toggle">
        <div class="woocommerce-info">
          Have a coupon? <a href="#" class="showcoupon">Click here to enter your code</a>
        </div>
      </div>
      <form action="#" class="woocommerce-form-coupon bg-smoke" style="display: block;">
        <div class="row">
          <div class="col-lg-4">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Write your coupon code">
            </div>
            <div class="form-group">
              <button type="submit" class="vs-btn style4">Apply coupon Code</button>
            </div>
          </div>
        </div>
      </form>-->
      
        <div class="row">
          <div class="col-lg-6">
            <div class="row">
			<!-- Invoice Address [Start] -->
			<div class="woocommerce-form-login-toggle">
			  <div class="woocommerce-info"><a href="javascript:void(0);" class="showlogin" style="text-decoration: none;">Invoice Address</a>
			  <span style="position: absolute; right:8px; font-size:12px; color:#FFFFFF">
			      <input type="checkbox" class="" id="bill_address" onchange="chk_same();" value="1">
			      <label for="ship-to-different-address-checkbox" style="font-size:12px; color:#FFFFFF">
                    Delivery to a same address?
                  </label>
			  </span>
			  </div>
			  <!--<form action="#" class="woocommerce-form-login bg-smoke">-->
			  <form action="/place-order" method="post" class="woocommerce-form-login bg-smoke"> 
			    <div class="row">
                  <div class="col-md-6 form-group">
                    <label>First Name *</label>
                    <input type="text" name="txt_first" id="txt_first" class="form-control" required value="{% if(FTCHUser[0]['first_name'] is defined )%}{{FTCHUser[0]['first_name']}}{% endif %}" placeholder="First Name" onkeyup="same_addr();">
                  </div>
                  <div class="col-md-6 form-group">
                    <label>Last Name *</label>
                    <input type="text" name="txt_last" id="txt_last" class="form-control" required value="{% if(FTCHUser[0]['last_name'] is defined )%}{{FTCHUser[0]['last_name']}}{% endif %}" placeholder="Last Name" onkeyup="same_addr();">
                  </div>
                  <div class="col-12 form-group">
                    <label>Door No./Apartment No. *</label>
                    <input type="text" name="txt_street1" id="txt_street1" class="form-control" placeholder="Door No./Apartment No" required value="{% if(FTCHUser[0]['street1'] is defined )%}{{FTCHUser[0]['street1']}}{% endif %}" onkeyup="same_addr();">
                  </div>
                  <div class="col-12 form-group">
                    <label>Street Name *</label>
                    <input type="text" name="txt_street2"  id="txt_street2" class="form-control" placeholder="Appartments, suite, unit etc ..." required value="{% if(FTCHUser[0]['street'] is defined )%}{{FTCHUser[0]['street']}}{% endif %}" onkeyup="same_addr();">
                  </div>
                  <div class="col-md-12 form-group">
                    <label>State *</label>
                    <!--<input type="text" name="txt_state" id="txt_state" class="form-control" required value="{% if(FTCHUser[0]['state'] is defined )%}{{FTCHUser[0]['state']}}{% endif %}" placeholder="State" onkeyup="same_addr();">-->
                    <select class="form-control" name="txt_state" id="txt_state" required onchange="sel_city_checkout(this.value);same_addr();" >
                      <option value=""  >-Select State-</option>
                	  {{state_list |raw}}
                    </select>
                  </div>
                  <div class="col-12 form-group">
                    <label>City *</label>
                    <!--<input type="text" name="txt_city" id="txt_city" class="form-control" required value="{% if(FTCHUser[0]['city'] is defined )%}{{FTCHUser[0]['city']}}{% endif %}" placeholder="Town / City" onkeyup="same_addr();"> -->
                    <select class="form-control" name="txt_city" id="txt_city" required onchange="same_addr();">
                      <option value="">-Select City-</option>
                 	  {{city_list |raw }}
                    </select>
                  </div>
                  <div class="col-md-6 form-group">
                    <label>Country *</label>
                    <input type="text" name="txt_country" id="txt_country" class="form-control" required value="{% if(FTCHUser[0]['country'] is defined )%}{{FTCHUser[0]['country']}}{% endif %}" placeholder="Country" onkeyup="same_addr();">
                  </div>
                  <div class="col-md-6 form-group">
                    <label>Postal Code *</label>
                    <input type="text" name="txt_zip" id="txt_zip" class="form-control" required value="{% if(FTCHUser[0]['zipcode'] is defined )%}{{FTCHUser[0]['zipcode']}}{% endif %}" placeholder="Postcode / Zip" onkeyup="same_addr();">
                  </div>
                  <div class="col-12 form-group">
                    <label>Email *</label>
                    <input type="email" name="txt_email" id="txt_email" readonly class="form-control" required value="{% if(FTCHUser[0]['email_id'] is defined )%}{{FTCHUser[0]['email_id']}}{% endif %}" placeholder="Email Address" readonly onkeyup="same_addr();">
                  </div>
                  <div class="col-12 form-group">
                    <label>Phone *</label>
                    <input type="text" name="txt_phone" id="txt_phone" class="form-control" required value="{% if(FTCHUser[0]['mobile_no'] is defined )%}{{FTCHUser[0]['mobile_no']}}{% endif %}" placeholder="Phone number" readonly onkeyup="same_addr();">
                  </div>
                  <!--<div class="col-12 form-group">
                        <textarea class="form-control" name="txtr_notes" id="txtr_notes" cols="30" rows="4" placeholder="Notes about your order, e.g. special notes for delivery">{% if(FTCHAddr[0]['order_comments'] is defined )%}{{FTCHAddr[0]['order_comments']}}{% endif %}</textarea>
                      </div>-->
                </div>
			 </form>
			</div>
			<!-- Invoice Address [End] -->
            </div>
            <div class="row">
			<!-- Delivery Address [Start] -->
			<div class="woocommerce-form-coupon-toggle" style="background-color:#FFFFFF">
			  <div class="woocommerce-info" style="color:#FFFFFF">Delivery to <a href="javascript:void(0);" class="showlogin" style="text-decoration: none;">Peter</a> 		
			  	<a href="javascript:void(0);" class="showlogin" style="text-decoration: none;">
					<span style="position: absolute; right:8px; font-size:12px; color:#FFFFFF">New Address <i class="fa fa-plus" aria-hidden="true"></i>
					</span>
				</a>
			  </div>
			</div>
            <div class="row">
              <div class="col-md-6 form-group">
                <label>First Name *</label>
                <input type="text" name="ctxt_first" id="ctxt_first" class="form-control" required placeholder="First Name">
              </div>
              <div class="col-md-6 form-group">
                <label>Last Name *</label>
                <input type="text" name="ctxt_last" id="ctxt_last" class="form-control" required  placeholder="Last Name">
              </div>
              <div class="col-12 form-group">
                <label>Door No./Apartment No. *</label>
                <input type="text" name="ctxt_street1" id="ctxt_street1" class="form-control" placeholder="Door No./Apartment No" required >
              </div>
              <div class="col-12 form-group">
                <label>Street Name *</label>
                <input type="text" name="ctxt_street2"  id="ctxt_street2" class="form-control" placeholder="Appartments, suite, unit etc ..." required >
              </div>
              <div class="col-md-12 form-group">
                <label>State *</label>
                <!--<input type="text" name="ctxt_state" id="ctxt_state" class="form-control" required placeholder="State">-->
                <select class="form-control" name="ctxt_state" id="ctxt_state" required onchange="sel_city_checkout1(this.value);same_addr();" >
                  <option value="">-Select State-</option>
            		{{state_list1 |raw}}
                </select>
              </div>
              <div class="col-12 form-group">
                <label>City *</label>
                <!--<input type="text" name="ctxt_city" id="ctxt_city" class="form-control" required placeholder="Town / City">-->
                <select class="form-control" name="ctxt_city" id="ctxt_city" required>
                  <option value="">-Select City-</option>
            		{{city_list1 |raw }}
                </select>
              </div>
              <div class="col-md-6 form-group">
                <label>Country *</label>
                <input type="text" name="ctxt_country" id="ctxt_country" class="form-control" required  placeholder="Country">
              </div>
              <div class="col-md-6 form-group">
                <label>Postal Code *</label>
                <input type="text" name="ctxt_zip" id="ctxt_zip" class="form-control" required  placeholder="Postcode / Zip">
              </div>
              <div class="col-12 form-group">
                <label>Email </label>
                <input type="email" name="ctxt_email" id="ctxt_email" class="form-control" placeholder="Email Address">
              </div>
              <div class="col-12 form-group">
                <label>Phone *</label>
                <input type="text" name="ctxt_phone" id="ctxt_phone" class="form-control" required placeholder="Phone number">
              </div>
              <div class="col-12 form-group">
                <label>Shipping Instruction</label>
                <textarea class="form-control" name="txtr_notes" id="txtr_notes" cols="30" rows="4" placeholder="Notes about your order, e.g. special notes for delivery">{% if(FTCHAddr[0]['order_comments'] is defined )%}{{FTCHAddr[0]['order_comments']}}{% endif %}</textarea>
              </div>
            </div>	 
			<!-- Delivery Address [End] -->
            </div>
          </div>
          <div class="col-lg-6">
		  <!-- Cart Items [Start] -->
			<div class="sidemenu-content">
			  <div class="widget widget_shopping_cart">
				<h3 class="widget_title">Cart Items</h3>
				<div class="widget_shopping_cart_content">
				  <ul class="cart_list">
					<!--
					<li class="mini_cart_item" id="cart_57">
					    <a href="javascript:;"><img src="https://mngpro.fotindia.com/products/8-1-25-01-18-11-48-35.jpeg" alt="Cart Image">
					        <span style="font-size:15px;">Freeze - Dried Sugarcane Juice Powder – Naturally Sweet</span> - <span style="font-size:12px; color:gray;">(Pack of 3 - 105g)</span>
					    </a>
					    <div class="cart_table quantity">
                            <i class="far fa-minus quantity-minus" style="color:gray;"></i>
                            <input type="number" class="qty-input" value="1" min="1" max="99" readonly style="border:2px solid gray" />
                            <i class="far fa-plus quantity-plus" style="color:gray"></i>
                        </div>
                        <span class="quantity" style="font-weight:600; margin-top:-2px;">Rs. 882.00</span>
					    <a href="javascript:;" class="remove" title="Remove Product" onclick="remove_hcart('57','27');"><i class="fal fa-trash-alt"></i></a>
					</li>
					-->
					{{cart_prdts|raw}}
				  </ul>
				  <!--
				  <div class="total"> <strong>Cart Total:</strong> <span class="amount"><span>Rs.</span><span id="sprice">2,342.20</span></span> </div>
				  <div class="buttons"> <a href="/cart" class="vs-btn style4">View cart</a> <a href="/checkout" class="vs-btn style4">Checkout</a> </div>
				  -->
				</div>
			  </div>
			</div>
			<!-- Cart Items [End] -->
          </div>
        </div>
        
        <h4 class="mt-4 pt-lg-2">Order Summary</h4>
        
        <div class="table-responsive">
          <table class="cart_table">
            {#
            <thead>
              <tr>
                <th class="cart-col-image" style="text-align:left;">Image11</th>
                <th class="cart-col-productname" style="text-align:left;">Product Name</th>
                <th class="cart-col-price" style="text-align:right;">Price</th>
                <th class="cart-col-quantity" style="text-align:center;">Quantity</th>
                <th class="cart-col-total"  style="text-align:right;">Total</th>
              </tr>
            </thead>
            <tbody>
              {{cart_prdts|raw}}
            </tbody>
            #}
            <tfoot class="checkout-ordertable">
              <tr class="cart-subtotal">
                <th style="border-top:1px solid white;">Cart Total</th>
                <td data-title="Subtotal" colspan="4"><span class="woocommerce-Price-amount amount"><bdi><span
				class="woocommerce-Price-currencySymbol">Rs.</span>{{stotal | number_format(2)}}</bdi></span></td>
              </tr>
			  
			  {% set shprice = 0%}
			  {% set tot_ord = 0%}
			  {% if(stotal<420) %}
			  {% set shprice = shipping_cost %}
			  {% endif %}
			  {% if(shprice ==0) %}
			  {% set sp = "Free Shipping" %}
			  {% set sp1 = '' %}
			  {% set sp2 = 0 %}
			  {% set tot_ord = stotal %}
			  {% else %}
			  {% set sp = shprice | number_format(2) %}
			  {% set sp1 = 'Rs. ' %}
			  {% set tot_ord = stotal+sp %}
			  {% set sp2 = shprice %}
			  {% endif %}
			  {% if(FTCHDisc|length >0) %}
			  {% set dsc = (tot_ord*FTCHDisc[0]['discount_value'])/100 %}
			  {% set tot_ord = tot_ord-dsc%}
			  {% else %}
			  {% set dsc = 0 %}
			  {% endif %}
			   {% if(FTCHDisc|length >0) %}
				<tr class="Discount">
                <th>Discount ({{FTCHDisc[0]['discount_value']}}%)</th>
                <td data-title="Discount" colspan="4">
                <span class="amount"><bdi><span>(-)</span> <span id="dstotal">Rs. {{dsc| number_format(2)}}</span></bdi></span> 
                </td>
              </tr>
			  {% endif %}
              <tr class="woocommerce-shipping-totals shipping">
                <th>Shipping</th>
                <td data-title="Shipping" colspan="4">(+)
                  {{sp1}}{{sp}}
                </td>
              </tr>
			 
              <tr class="order-total">
                <th>Total</th>
                <td data-title="Total" colspan="4"><strong><span class="woocommerce-Price-amount amount"><bdi><span
                class="woocommerce-Price-currencySymbol">
				Rs. </span>{{tot_ord | number_format(2)}}</bdi></span></strong>
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
      <div class="mt-lg-3">
        <div class="woocommerce-checkout-payment">
          <ul class="wc_payment_methods payment_methods methods">
		  {% if(gst_no!='') %}
		  <li class="wc_payment_method gst_method_cheque">
              <input id="gst_method_cheque" name="gst_apply" type="checkbox"  value="1">
              <label for="gst_method_cheque">Apply GSTIN No - {{gst_no}} </label>
              <div class="payment_box gst_method_cheque">
                <p>
                </p>
              </div>
            </li>
			{% endif %}
            <li class="wc_payment_method payment_method_cheque">
              <input id="payment_method_cheque" type="radio" class="input-radio" checked name="opt_pay" value="2" required>
              <label for="payment_method_cheque">Razor Pay </label>
              <div class="payment_box payment_method_cheque" style="background-color:#ffccb1">
                <p>Pay with Razor Pay securely.
                </p>
              </div>
            </li>
           <!-- <li class="wc_payment_method payment_method_cod">
              <input id="payment_method_cod" type="radio" class="input-radio" name="opt_pay" value="1" >
              <label for="payment_method_cod">Cash On Delivery</label>
              <div class="payment_box payment_method_cod">
                <p>Pay with cash upon delivery.</p>
              </div>
            </li>-->
          </ul>
		  <input type="hidden" name="price" value="{{tot_ord}}">
		  <input type="hidden" name="shipping" value="{{sp}}">
		  <input type="hidden" name="discount" value="{{dsc}}">
		  <input type="hidden" name="cart_id" value="{{cart_order_id}}">
		  
		  {% if(tot_ord>=1)%}
          <div class="form-row place-order pt-lg-2">
            <button type="submit" class="vs-btn style4">Place order</button>
          </div>
		  {% else %}
		  <div class="form-row place-order pt-lg-2" style="color:red;">
		  Your order amount is less than minimum order value. <br>
		  Minimum order amount greater than Rs. 1.00 <br>
		  Kindly make it euqal or greater than minimum amount.			
		  </div>
		  {% endif %}
        </div>
      </div>
    
	</form>
	</div>
  </section>
 
{% endblock %}