@include('public_area.layouts.header_include')

@include('public_area.layouts.aside_include')


<section>
  <div class="food-delivery-head">
    <div class="food-delivery-back">
		<a href="javascript:history.back()">
			<i class="md-ripples uil uil-angle-left"></i>
		</a>
    </div>
    <div class="food-delivery mt-2">
      <h6>Add or delete payment method</h6>
    </div>
    <div class="wish-list-food">
     
    </div>
    <div class="wish-list-Cart">
    </div>
  </div>
</section>

<section class="pt-5 pb-5">
	<div class="container pt-5">
	   <div class="row">
		  <div class="col-md-12">
			<div>
				<h6 class="font-weight-bold">On our app:</h6>
				
			</div>
			<div class="p-3">
				<h6 class="font-weight-bold">To remove a card:</h6>
				<ol>
					<li><span class="font-weight-bold">Open a side bar menu from main app screen</span></li>
					<li><span class="font-weight-bold">Tap on "Payment methods"</span></li>
					<li><span class="font-weight-bold">Remove any card you wish to by swiping left</span></li>
				</ol>
			</div>
			<div class="p-3">
				<h6 class="font-weight-bold">To add/modify a card:</h6>
				<ol>
					<li><span class="font-weight-bold">Add items to cart and move to checkout.</span></li>
					<li><span class="font-weight-bold">Choose your card or cash method for payment.</span></li>
					<li><span class="font-weight-bold">Add your card by entering the required details.</span></li>
				</ol>
			</div>
			<div>
				<h6 class="font-weight-bold">On our website:</h6>
				<p>During checkout, you get asked to choose a payment method. This allows you to add, modif	and remove your payment details. After entering your payment details, you can select the checkbox to store the payment details for future orders.</p>
				
			</div>
			<div class="help-content mt-3">
				<h6 class="font-weight-bold w-100 text-center">Was this helpful?</h6>
				<div class="help-btn-div">
					<a href="#" class="helpful-btn">Yes, I got my answer</a>
				</div>
				<div class="help-btn-div">
					<a href="#" class="helpful-btn">No, add more information</a>
				</div>
			</div>
			
		  </div>
	   </div>
	</div>
 </section>

  
@include('public_area.layouts.footer_include')

<script>
	const popup = document.querySelector('.popup');
	const close = document.querySelector('.close');

	window.onload = function() 
	{
		setTimeout(function(){
			popup.style.display = "block";
		},2000)	
	}

	close.addEventListener('click',() => {
		popup.style.display = "none";
	})
</script>