{% extends 'store/Main.html' %}
{% load static %}
{% block content %}

<div class="row" >
	<div class="gestC" id="gest">
		<div class="col-lg">
			<div class="box-element" id="form-wrapper">
				<p>Enter your details and get your order </p>
				<form id="form">
					{% csrf_token %}
					<div id="user-info">
						<div class="form-field">
							<input required class="form-control" type="text" name="name" placeholder="Name..">
						</div>
						<div class="form-field">
							<input required class="form-control" type="email" name="email" placeholder="Email..">
						</div>
					</div>
					
					 

					<hr>
					<input id="form-button" class="btn btn-success btn-block" type="submit" value="Continue">
				</form>
			</div>

			<br>
			 <div class="box-element hidden" id="payment-info">
			 	<button id="make-payment">Get QR code </button>
				 
				 
			</div>
			
		</div>

		 
	</div>
	</div>

	<div  id ="qr">
		<dir class="Qr" id ="qr">
		<div class="row">
		{% for orderid in dic %}
		<div class="col-lg-4">
			<img class="thumbnail1" src="{{orderid.qr_code.url}}">
			<div class="box-element product">
				<h6><strong>OrderID {{orderid.order}}</strong></h6>
				<hr>

				 

			</div>
		</div>
		{% endfor %}
	</div>
	</div>
		 
	</div>


<div  id ="qr1">
		<dir class="Qr1" id ="qr1">
		<div class="row" id="myTable1">
		 
		 
				 

			</div>
		</div>
		 
	</div>
	</div>

	<script type="text/javascript">
		if (user != 'AnonymousUser'){
		 	document.getElementById('gest').innerHTML = ''
		 	document.getElementById('form-wrapper').classList.add("hidden");

		 	document.getElementById('payment-info').classList.remove("hidden");
		 }
		 else{
		 	document.getElementById('qr').classList.add("hidden");

		 }
		  
		 


		var form = document.getElementById('form')
		// csrftoken=form.getElementByTagName("input")[0].value
		form.addEventListener('submit', function(e){
	    	e.preventDefault()
	    	console.log('Form Submitted...')
	    	document.getElementById('form-button').classList.add("hidden");
	    	document.getElementById('payment-info').classList.remove("hidden");
	    })

	    document.getElementById('make-payment').addEventListener('click', function(e){
	    	console.log('ooooooooooooooooo')
	    	submitFormData()

	    })


	    function buildTable(data){
		var table = document.getElementById('myTable1')

		for (var i = 0; i < data.length; i++){
			var row = `
						<div class="col-lg-4">
			 					<img class="thumbnail1" src="{{ MEDIA_URL }}${data[i]}">
							</div>
							
							<hr>
							 
					  `
			table.innerHTML += row



		}
		
	}

	    function submitFormData(){
	    	console.log('Payment button clicked')

	    	var userFormData = {
				'name':null,
				'email':null,
				 
			}

			 
			 

	    	if (user == 'AnonymousUser'){
	    		userFormData.name = form.name.value
	    		userFormData.email = form.email.value
	    	}

	    	 
	    	console.log('User Info:', userFormData)

	    	var url = "/process_QR/"
	    	fetch(url, {
	    		method:'POST',
	    		headers:{
	    			'Content-Type':'applicaiton/json',
	    			'X-CSRFToken':csrftoken,
	    		}, 
	    		body:JSON.stringify({'form':userFormData }),
	    		
	    	})
	    	.then((response) => response.json())
	    	.then((data) => {
				 console.log('Success:', data);
				 if(data==''){
				 		document.getElementById('qr1').innerHTML = '<span><h2>yor are not yet buy any thing</h2></span>'
				 }else{
				 	buildTable(data)
				 }
				 
				 // document.getElementById('qr').classList.remove("hidden");

				 


				 document.getElementById('payment-info').classList.add("hidden");
				 document.getElementById('form-wrapper').classList.add("hidden");
				 
				 

				cart = {}
				document.cookie ='cart=' + JSON.stringify(cart) + ";domain=;path=/" 
				// window.location.href = "{% url 'store' %}"

				})

	    }

	    

	    	
	</script>

	


{% endblock content %}