<!DOCTYPE html>
{% load static %}
<html lang="en">
  
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="{% static 'app/css/bootstrap.css' %}" />
    
    {% comment %} <link
      rel="stylesheet"
      href="{% static 'app/css/owl.casrousel.min.css' %}"
    /> {% endcomment %}

    <link rel="stylesheet" href="{% static 'app/css/all.min.css' %}" />
    <link rel="stylesheet" href="{% static 'app/css/style.css' %}" />
    <title>E-Commerce | {% block title %}{% endblock title %}</title>

    <style>
      .paragraph {
        font-family: serif;
        text-indent: 50px;
        text-align: justify;
        letter-spacing: 2px;
        line-height: 5vh;
      }
    </style>

  </head>

  <body>
    {% include "app/navBar.html" %}

    {% block slider %} {% endblock slider %}
    {% block content %} {% endblock content %}

    <br><br>

    <footer class="container-fluid fixed-bottom bg-dark text-center p-2 mt-5 text-light">&copy; 2023 Developed By Asif Khan</footer>
  
    <script src="{% static 'app/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'app/js/popper.min.js' %}"></script>
    <script src="{% static 'app/js/jquery.min.js' %}"></script>
    <script src="{% static 'app/js/all.min.js' %}"></script>
    {% comment %} <script src="{% static 'app/js/myscript.js' %}"></script> {% endcomment %}
    {% comment %} <script src="{% static 'app/js/owl.carousel.min.js' %}"></script> {% endcomment %}

    {% if request.user.is_authenticated %}
    <script>
  $(".plus-cart").click(function(){

    let id=$(this).attr("pid").toString();
    let element = this.parentNode.children[2]

    if (element.innerText < 10){
        $.ajax({
          type:"GET",
          url:"{% url 'plusCart' %}",
          data:{
            prod_id:id
          },
          success:function(data){
              element.innerText = data.quantity
              $("#amount").text("Rs. "+ data.amount) 
              $("#totalAmount").text("Rs. "+ data.total)        
          }
        })
    }
    
})

  $(".minus-cart").click(function(){

    let id=$(this).attr("pid").toString();
    let element = this.parentNode.children[2]
    if (element.innerText > 1){
        $.ajax({
            type:"GET",
            url:"{% url 'minusCart' %}",
            data:{
                prod_id:id
            },
            success:function(data){
                element.innerText = data.quantity
                $("#amount").text("Rs. "+data.amount) 
                $("#totalAmount").text("Rs. "+data.total)  
                
            }
        }) 
    }
})

$(".remove-cart").click(function(){

  let id=$(this).attr("pid").toString()
  let element = this
  $.ajax({
      type:"GET",
      url:"{% url 'removeCart' %}",
      data:{
          prod_id:id
      },
      success:function(data){
          $("#amount").text("Rs. "+data.amount) 
          $("#totalAmount").text("Rs. "+data.total)  
          console.log("Removing cart")
          element.parentNode.parentNode.parentNode.parentNode.remove()
          
          // $(".card-body").after("<h1 class="text-center mb-5">Cart is Empty</h1>")
          
      }
  })
})
</script>
    {% endif %}


{% block JS %}

{% endblock JS %}
  </body>
</html>
