{% 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">
				  <form action="/place-order" method="post" > 

        <div class="row">
          <div class="col-lg-6">
            <div class="row">
			<input type="hidden" id="ch_val" value="0">
			<div class="woocommerce-form-login-toggle">
			  <div class="woocommerce-info"><a href="javascript:void(0);" class="showlogin" style="text-decoration: none;" onclick="$('#invoice_Address').slideToggle();">Invoice Address</a>
			  <span style="position: absolute; right:8px; font-size:12px; color:#FFFFFF">
			    <input type="checkbox" id="bill_address" value="1" style="width:20px;height:20px;vertical-align: middle;">&nbsp;Delivery to a same address?
			  </span>
			  </div>
			    <div class="row" id="invoice_Address" style="display:none;">
                  <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>
                    <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>
                    <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>
			 
			</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"> <a href="javascript:void(0);" class="showlogin" style="text-decoration: none; " onclick="$('#del_addr').slideToggle();">Delivery Address</a>
			  </div>
			</div>
            <div class="row" id="del_addr" style="display:none;">
              <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>
                <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>
                <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">
					{{cart_prdts|raw}}
				  </ul>
				</div>
			  </div>
			</div>
          </div>
        </div>
        
        <h4 class="mt-4 pt-lg-2">Order Summary</h4>
        
        <div class="table-responsive">
          <table class="cart_table">
           <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="amount"><bdi><span>Rs. </span> <span id="stotal">{{stotal | number_format(2)}}</span></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 %}
			  <input type="hidden" id="disc_val" value="{{FTCHDisc[0]['discount_value']}}">
			   {% 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>Rs. <span id="dstotal">{{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}} <span id="shtotal">{{sp}}</span>
                </td>
              </tr>
				<input type="hidden" id="ship_price" value="{{sp2}}">
				<input type="hidden" id="ship_cost" value="{{shipping_cost}}">
	 
              <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><span id="stotal1">{{tot_ord | number_format(2)}}</span></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>
          </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" id="chkout_btn" class="vs-btn style4" onclick="$('#del_addr').show();">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 %}