{% 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="row">
          <div class="col-lg-6">
		  {% if(app.session.get('loginId')=='') %}
				<div class="row">
				  <div class="col-md-12 form-group" id="errOTP" style="color:red; font-size:12px; display:none; text-align:center;"></div>
				</div>
		  <form method="post" id="timer_form">
            <div class="row">
                <div class="woocommerce-form-login-toggle">
                  <div class="woocommerce-info"><a href="javascript:void(0);" class="showlogin1" style="text-decoration: block; color:#FFFFFF">Verify your Mobile no. with OTP</a></span></div>
                      <div class="row" style="border:0px solid red;">
                        <div class="col-md-6 form-group">
                          <input type="text" name="mobile_otp" id="mobile_otp" class="form-control" required placeholder="Mobile No." maxlength="10" onkeypress="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">

                          <div id="resendBtn" style="border:0px solid red;">
                            <a href="javascript:void(0)" onclick="startResendTimer()" style="color:#00b300; font-size:12px; font-weight:600; position:relative; float:right;">Get OTP <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
                          </div>
                        </div>
                        <div class="col-md-6 form-group">
                          <input type="text" name="verify_mbl" id="verify_mbl" class="form-control" required placeholder="OTP" maxlength="4">
                          <div id="resendBtn" style="border:0px solid red;">
                            <p id="timer" style="color:red; font-size:12px; position:relative; float:left;"></p>
                            <a href="javascript:void(0)" onclick="verify_otp();" style="color:#00b300; font-size:12px; font-weight:600; position:relative; float:right;">Verify OTP <i class="fa fa-check" aria-hidden="true"></i></a>
                          </div>
                        </div>
                      </div>
                </div>
            </div> 
			</form>
			{% endif %}
<form action="/place-order" method="post" {% if(app.session.get('loginId')=='') %} style="pointer-events:none;" {% endif %} >
            <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>
			  </div>
			    <div class="row" id="invoice_Address">
                  <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();" autofocus>
                  </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="India"  placeholder="Country" readonly>
                  </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"  class="form-control"  value="{% if(FTCHUser[0]['email_id'] is defined )%}{{FTCHUser[0]['email_id']}}{% endif %}" placeholder="Email Address"  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; color:#FFFFFF " onclick="$('#del_addr').slideToggle();">Delivery 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>
            <div class="row" id="del_addr">
              <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"  value="India" readonly>
              </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" style="font-weight: 600;font-size: 14px; font-family: var(--body-font);">
              <input id="" name="gst_apply" type="checkbox" value="1" style="width: 3%; vertical-align: middle;height: 21px; margin-left:-7px;">Apply GSTIN No - {{gst_no}}
              <div class="payment_box gst_method_cheque">
                <p>
                </p>
              </div>
            </li>
		 <!-- <li class="wc_payment_method gst_method_cheque">
              Apply GSTIN No - {{gst_no}}<input id="" name="gst_apply" type="checkbox" value="1">
              <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)%}
		  {% if(app.session.get('loginId')!='') %} 
          <div class="form-row place-order pt-lg-2" id="place-button">
            <button type="submit" id="chkout_btn" class="vs-btn style4" onclick="$('#del_addr').show();">Place order</button>
          </div>
		  {% endif %}
		  {% 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>
	
	</form>
	</div>
  </section>
<script>
let timer;
let countdown = 40 // Set the countdown duration in seconds

function startResendTimer() {
	var mb = $('#mobile_otp').val();
	var vl=0;
	if(mb==''){
		vl=1;
		$('#errOTP').fadeIn(2000);
		$('#errOTP').html("Please enter Mobile no");
		$('#errOTP').fadeOut(2000);
		return false;
	} 
	
	if(!isValidMobileNumber(mb)){
			$('#register-mbl').val('');
			$('#register-mbl').focus();
			$('#errOTP').fadeIn(2000);
			$('#errOTP').html("Please enter valid mobile Number");
			$('#errOTP').fadeOut(2000);
			return false;
			vl=1;
		}
		if(vl==0){
    // Disable the button during the countdown
    document.getElementById('resendBtn').innerHTML = '<span style="color:gray; font-size:12px; font-weight:600; position:relative; float:right;">Get OTP <i class="fa fa-arrow-right" aria-hidden="true"></i></span>';
    // Start the countdown
    timer = setInterval(updateTimer, 1000);

	$.ajax({
			type: 'POST',
			data:{ 'mb': mb},
			url: "/sendOTP",
			dataType:'json',
		}).done(function(result){

		})

	}
}

function verify_otp(){
	var mb = $('#mobile_otp').val();
	var vmb = $('#verify_mbl').val();
	var vl=0;
	if(vmb==''){
		$('#errOTP').fadeIn(2000);
		$('#errOTP').html("Please enter OTP");
		$('#errOTP').fadeOut(2000);
		return false;
		vl=1;
	} 

	if(vl==0){
		$.ajax({
			type: 'POST',
			data:{ 'mb': mb,'vmb': vmb},
			url: "/verifyOTP",
			dataType:'json',
		}).done(function(result){
		//	alert(result);
			var res = result.split('****');
		//	alert(res[8]);
			if(res[8]==1){
			$('#timer_form').hide();
			$('#place-button').show();
			$('#txt_first').val(res[0]);
			$('#txt_last').val(res[1]);
			$('#txt_street1').val(res[2]);
			$('#txt_street2').val(res[3]);
			$('#txt_city').val(res[4]);
			$('#txt_state').val(res[5]);
			$('#txt_country').val(res[6]);
		//	$('#txt_zip').val(res[7]);
		//	$('#txt_phone').val(res[8]);
		//	$('#txt_email').val(res[9]);
			window.location.reload();
			} else if(res[8]==0){
				if(mb==''){
					$('#errOTP').fadeIn(2000);
					$('#errOTP').html("Please Enter Mobile No");
					$('#errOTP').fadeOut(2000);
					return false;
				}
				$('#errOTP').fadeIn(2000);
				$('#errOTP').html("OTP not matching");
				$('#verify_mbl').val('');
				$('#verify_mbl').focus();
				$('#errOTP').fadeOut(2000);
				return false;
			}
		})
	}
}

function updateTimer() {
    const timerElement = document.getElementById('timer');
    if (countdown > 0) {
        timerElement.textContent = `Resend in ${countdown} seconds`;
        countdown--;
    } else {
        // Enable the button when the countdown reaches zero
        document.getElementById('resendBtn').innerHTML = '<a href="javascript:void(0)" onclick="startResendTimer()" style="color:#00b300; font-size:12px; font-weight:600; position:relative; float:right;">Get OTP <i class="fa fa-arrow-right" aria-hidden="true"></i></a>';
        timerElement.textContent = '';

        // Reset countdown for the next attempt
        countdown = 40;

        // Stop the timer
        clearInterval(timer);
    }
}

	</script>
 
{% endblock %}