<!DOCTYPE html>
{% load static %}
<html>
<head>
	<title>Happyvending</title>
	<link rel="icon" type="image/x-icon" href="{% static 'images/Logo.ico'%}" />

	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">  

  <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">  

	<script type="text/javascript">
		var user = '{{request.user}}'

		function getToken(name) {
		    var cookieValue = null;
		    if (document.cookie && document.cookie !== '') {
		        var cookies = document.cookie.split(';');
		        for (var i = 0; i < cookies.length; i++) {
		            var cookie = cookies[i].trim();
		            // Does this cookie string begin with the name we want?
		            if (cookie.substring(0, name.length + 1) === (name + '=')) {
		                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
		                break;
		            }
		        }
		    }
		    return cookieValue;
		}
		var csrftoken = getToken('csrftoken')


		function getCookie(name) {
		    // Split cookie string and get all individual name=value pairs in an array
		    var cookieArr = document.cookie.split(";");

		    // Loop through the array elements
		    for(var i = 0; i < cookieArr.length; i++) {
		        var cookiePair = cookieArr[i].split("=");

		        /* Removing whitespace at the beginning of the cookie name
		        and compare it with the given string */
		        if(name == cookiePair[0].trim()) {
		            // Decode the cookie value and return
		            return decodeURIComponent(cookiePair[1]);
		        }
		    }

		    // Return null if not found
		    return null;
		}
		var cart = JSON.parse(getCookie('cart'))

		if (cart == undefined){
			cart = {}
			console.log('Cart Created!', cart)
			document.cookie ='cart=' + JSON.stringify(cart) + ";domain=;path=/"
		}
		console.log('Cart:', cart)
	
	</script>

</head>
<body>
	<style>
		body{
	/*background-color: hsl(0, 0%, 98%);*/
	 background-image: url('{% static 'images/back.jpeg' %} ');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
}
  .hello-msg{
    font-size: 18px;
    color: #fff;
    margin-right: 20px;
  }
  .profile-pic{
  		width:35px;
  		max-height: 35px;
		display: inline-block;
		margin-left: 15px;
		border-radius: 50%;
	}
</style>
	
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
	  <a class="navbar-brand" href="{% url 'store' %}"><img style="height: 60px" src="{% static 'images/logo.png' %}" alt="Giri"></a>
	  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	    <span class="navbar-toggler-icon"></span>
	  </button>

	  <div class="collapse navbar-collapse" id="navbarSupportedContent">
	    <ul class="navbar-nav mr-auto">
	     	<li class="nav-item active">
	        	<a class="nav-link" href="{% url 'store' %}">Store <span class="sr-only">(current)</span></a>
	      	</li>
	      	<li class="nav-item active">
	        	<a class="nav-link" href="{% url 'process_QR' %}">PendingToVending<span class="sr-only">(current)</span></a>
	      	</li>
	      	{% if request.user.is_authenticated %}
	      		{% if  request.user.is_staff %}

	      			<li class="nav-item active">
          				<a class="nav-link" href="{% url 'home' %}">Dashboard</a>
      				</li>
      				<li class="nav-item active">
       					<a class="nav-link" href="{% url 'products' %}">Products</a>
      				</li>
	      		{% else %}
	       		<li class="nav-item active">
	        		<a class="nav-link" href="{% url 'user-page' %}">Profile <span class="sr-only">(current)</span></a>
	      		</li>

	      		{% endif %}
	      	{% endif %}

	 	  
	    </ul>
	    <div class="form-inline my-2 my-lg-0">
	    	
	    	 {% if request.user.is_authenticated %}

	       		<span class="hello-msg">Hello, {{request.user}}</span>
	       		<span class="hello-msg"><img  class="profile-pic"  src="{{request.user.customer.profile_pic.url}}">	</span>
  					<a href="{% url 'logout' %}" class="btn btn-warning">Logout</a>
	    	  
	    	 {% else %}
	     		<a href="{% url 'login' %}" class="btn btn-warning">Login</a>

	     	{% endif %}
	     	
	     		<a href="{% url 'cart' %}">
	    			<img  id="cart-icon" src="{% static 'images/cart.png' %}">
	    		</a>
	    		<p id="cart-total">{{cartItems}}</p>

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

     <div class="container">
            <br>
            {% block content %}


            {% endblock content %}
         </div>


	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

	<script type="text/javascript" src="{% static 'js/cart.js' %}"></script>
</body>
</html>
