{% extends 'base.html' %}
{% load static %}
{% load currency %}
{% currency_context %}


{%block body%}
{% if order_details%}
<main class="main">
    <div class="page-header breadcrumb-wrap">
        <div class="container">
            <div class="breadcrumb">
                <a href="{%url 'home:index'%}" rel="nofollow"><i class="fi-rs-home mr-5"></i>Home</a>
                <span></span> Shop
                <span></span> Cart
            </div>
        </div>
    </div>
    <div class="container mb-80 mt-50">
        <div class="row">
            <div class="col-lg-8 mb-40">
                <h1 class="heading-2 mb-10">Your Cart</h1>
                <div class="d-flex justify-content-between">
                    <h6 class="text-body">There are <span class="text-brand">{{order_details.count}}</span> Items in your cart</h6>
                    {% comment %} <h6 class="text-body"><a href="#" class="text-muted"><i class="fi-rs-trash mr-5"></i>Clear Cart</a></h6> {% endcomment %}
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-8">
                {% if messages %}
                {% for message in messages %}
  
                <div    class="mt-30 alert align-middle alert-{{message.tags}}">
                   
                    <span class="align-middle"> {{message}}</span>
                </div>
  
                {% endfor %}
                {% endif %}
                <div class="table-responsive shopping-summery">
                    <table class="table table-wishlist">
                        <thead>
                            <tr class="main-heading">
                                {% comment %} <th class="custome-checkbox start pl-30">
                                    <input class="form-check-input" type="checkbox" name="checkbox" id="exampleCheckbox11" value="">
                                    <label class="form-check-label" for="exampleCheckbox11"></label>
                                </th> {% endcomment %}
                                <th scope="col" class="pl-30" colspan="2">Product Details</th>
                                <th scope="col">WEIGHT</th>
                                <th scope="col">Unit Price</th>
                                <th scope="col">Quantity</th>
                                <th scope="col">Subtotal</th>
                                <th scope="col" class="end">Remove</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for item in order_details%}
                            <tr class="pt-30">
                                {% if item.product.product_image %}
                                <td class="pl-30 image product-thumbnail"><img src="{{item.product.product_image.url}}" alt="{{item.product.product_name}}"></td>
                                {%else%}
                                <td class="pl-30 image product-thumbnail"><img src="{% static 'assets/imgs/shop/product-1-1.jpg'%}" alt="{{item.product.product_name}}"></td>
                                {%endif%}
                                <td class="product-des product-name">
                                    <h6 class="mb-5"><a class="product-name mb-10 text-heading" href="{% url 'products:product-details' item.product.PRDSlug %}">{{item.product}}</a></h6>
                                   {%if item.product.feedbak_average > 0%}
                                    <div class="product-rate-cover">
                                        <div class="product-rate d-inline-block">
                                            <div class="product-rating" style="width:{{item.product.feedbak_average}}%">
                                            </div>
                                        </div>
                                        <span class="font-small ml-5 text-muted"> ({{item.product.feedbak_number}})</span>
                                    </div>
                                    {%endif%}
                                </td>
                                <td class="price" data-title="Weight">
                                    <h4 class="text-brand">{{item.weight }}KG</h4>
                                </td>
                                <td class="price" data-title="Price">
                                    <h4 class="text-body">{{request.session.currency }} {{item.price|currency:request.session.currency  }} </h4>
                                </td>
                                <td class="text-center detail-info" data-title="Stock">
                                    {% comment %} <div class="detail-extralink mr-15">
                                        <div class="detail-qty border radius">
                                            <input type="hidden" id="qty-input" name="qyt" type="text" >
                                            <a href="#" class="qty-down"><i class="fi-rs-angle-small-down"></i></a>
                                            <span class="qty-val">{{item.quantity }}</span>
                                            <a href="#" class="qty-up"><i class="fi-rs-angle-small-up"></i></a>
                                        </div>
                                    </div> {% endcomment %}
                                    <h4 class="text-body">{{item.quantity }}</h4>
                                </td>
                                <td class="price" data-title="Price">
                                    <h4 class="text-brand">{{request.session.currency}} {% widthratio item.price|currency:request.session.currency  1 item.quantity%} </h4>
                                </td>
                                <td class="action text-center" data-title="Remove"><a href="{% url "orders:remove-item" productdeatails_id=item.id %}" class="text-body"><i class="fi-rs-trash"></i></a></td>
                            </tr>
                         {%endfor%}   
                          
                        </tbody>
                    </table>
                </div>
                <div class="divider-2 mb-30"></div>
                <div class="cart-action d-flex justify-content-between">
                    {% comment %} <a class="btn "><i class="fi-rs-arrow-left mr-10"></i>Continue Shopping</a> {% endcomment %}
                    {% comment %} <a class="btn  mr-10 mb-sm-15"><i class="fi-rs-refresh mr-10"></i>Update Cart</a> {% endcomment %}
                    <div class="col-lg-8">
                        <form method="post" class="apply-coupon">
                            {% csrf_token %}
                            <input name="code" type="text" placeholder="Enter Coupon Code...">
                            <button  type="submit" class="btn  btn-md" name="login">Apply</button>
                        </form>
                    </div>
                </div>
                
                <div class="row mt-30">
                    <h4 class="mb-30">Shipping Details</h4>
                    <form method="post" action="{% url "orders:payment" %}" >
                        {% csrf_token %}
                        <div class="row">
                            <div class="form-group col-lg-6">
                                <input type="text" required="" name="first_name" placeholder="First name *">
                            </div>
                            <div class="form-group col-lg-6">
                                <input type="text" required="" name="last_name" placeholder="Last name *">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-lg-6">
                                <input type="text" name="street" required="" placeholder="Street Address *">
                            </div>
                            <div class="form-group col-lg-6">
                                <input required="" type="text" name="phone" placeholder="Phone *">
                            </div>
                    
                        </div>
                        
                        <div class="row shipping_calculator">
                            <div class="form-group col-lg-6">
                                <div class="custom_select">
                                    <select id="country" name="country" class="form-control select-active country">
                                        
                                        {% for country in countries%}
                                        <option data-code="{{country.code}}" value="{{country.code}}">{{country.name}} </option>
                                        {% endfor%}
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-lg-6">
                                <input required="" type="text" name="city" placeholder="City / Town *">
                            </div>
                        </div>

                        <div class="row shipping_calculator">

                            <div class="form-group col-lg-6">
                                <input required="" type="text" name="ZIP" placeholder="Postcode / ZIP *">
                            </div>


                            <div class="form-group col-lg-6" id="stateDiv">
                                <div class="custom_select" >
                                    <select id="state" name="state" class="form-control select-active">
                                        
                                        
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            {% comment %} <div class="form-group col-lg-6">
                                <input required="" type="text" name="market_name" placeholder="SuperMarket Name">
                            </div> {% endcomment %}
                            <div class="form-group col-lg-6">
                                <input required="" type="text" name="email_address" placeholder="Email address *">
                            </div>
                        </div>
                        {% comment %} <div class="form-group mb-30">
                            <textarea rows="5" placeholder="Additional information"></textarea>
                        </div> {% endcomment %}
                        <button type="submit"class="btn mb-20 w-100">Proceed To CheckOut<i class="fi-rs-sign-out ml-15"></i></button>
                    
                    </form>
                </div>
                
            </div>
            <div class="col-lg-4">
                <div class="border p-md-4 cart-totals ml-30">
                    <div class="table-responsive">
                        <table class="table no-border">
                            <tbody>
                                <tr>
                                    <td class="cart_total_label">
                                        <h6 class="text-muted">Subtotal</h6>
                                    </td>
                                    <td class="cart_total_amount">
                                        <h4 class="text-brand text-end">{{request.session.currency}} {{f_total|currency:request.session.currency}}</h4>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="cart_total_label">
                                        <h6 class="text-muted">Items</h6>
                                    </td>
                                    <td class="cart_total_amount">
                                        <h4 class="text-brand text-end">{{order_details.count}}</h4>
                                    </td>
                                </tr>
                                <tr>
                                    <td scope="col" colspan="2">
                                        <div class="divider-2 mt-10 mb-10"></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="cart_total_label">
                                        <h6 class="text-muted">Shipping</h6>
                                    </td>
                                    <td class="cart_total_amount">
                                        <h5 class="text-heading text-end">Calculated at next step</h4</td>
                                </tr>
                                {% if coupon_id%}
                                <tr>
                                    <td class="cart_total_label">
                                        <h6 class="text-muted">Coupon</h6>
                                    </td>
                                    <td class="cart_total_amount">
                                        <h5 class="text-heading text-end">{{code}} <span> -{{request.session.currency}}{{value|floatformat:"2"|currency:request.session.currency}}</h4</td> </tr> <tr>
                                    <td scope="col" colspan="2">
                                        <div class="divider-2 mt-10 mb-10"></div>
                                    </td>
                                </tr>
                                {%endif%}
                                <tr>
                                    <td class="cart_total_label">
                                        <h6 class="text-muted">Total</h6>
                                    </td>
                                    <td class="cart_total_amount">
                                        <h4 class="text-brand text-end">{{request.session.currency}}{{total|floatformat:"2"|currency:request.session.currency}}</h4>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    {% comment %} <a href="#" class="btn mb-20 w-100">Proceed To CheckOut<i class="fi-rs-sign-out ml-15"></i></a> {% endcomment %}
                </div>
            </div>
        </div>
    </div>
</main>
{% else%}
{% include "orders/cart-empty.html" %}
{% endif %}
{%endblock body%}

{%block script%}
    <!-- Vendor JS-->
    <script src="{% static 'assets/js/vendor/modernizr-3.6.0.min.js'%}"></script>
    <script src="{% static 'assets/js/vendor/jquery-3.6.0.min.js'%}"></script>
    <script src="{% static 'assets/js/vendor/jquery-migrate-3.3.0.min.js'%}"></script>
    <script src="{% static 'assets/js/vendor/bootstrap.bundle.min.js'%}"></script>
    <script src="{% static 'assets/js/plugins/slick.js'%}"></script>
    <script src="{% static 'assets/js/plugins/jquery.syotimer.min.js'%}"></script>
    <script src="{% static 'assets/js/plugins/wow.js'%}"></script>
    <script src="{% static 'assets/js/plugins/jquery-ui.js'%}"></script>
    <script src="{% static 'assets/js/plugins/perfect-scrollbar.js'%}"></script>
    <script src="{% static 'assets/js/plugins/magnific-popup.js'%}"></script>
    <script src="{% static 'assets/js/plugins/select2.min.js'%}"></script>
    <script src="{% static 'assets/js/plugins/waypoints.js'%}"></script>
    <script src="{% static 'assets/js/plugins/counterup.js'%}"></script>
    <script src="{% static 'assets/js/plugins/jquery.countdown.min.js'%}"></script>
    <script src="{% static 'assets/js/plugins/images-loaded.js'%}"></script>
    <script src="{% static 'assets/js/plugins/isotope.js'%}"></script>
    <script src="{% static 'assets/js/plugins/scrollup.js'%}"></script>
    <script src="{% static 'assets/js/plugins/jquery.vticker-min.js'%}"></script>
    <script src="{% static 'assets/js/plugins/jquery.theia.sticky.js'%}"></script>
    <script src="{% static 'assets/js/plugins/jquery.elevatezoom.js'%}"></script>
    <!-- Template  JS -->
    <script src="{% static 'assets/js/main.js'%}"></script>
    <script src="{% static 'assets/js/shop.js'%}"></script>
    <script>
        
          const country = document.getElementById("country");
          const state = document.getElementById("state");   
          const stateDiv = document.getElementById("stateDiv");   
          const handleGetStates = ()=>{
  
            $.ajax({
           type:"GET",
           
           url : `${country.value}/`,
           success : function(response){
              const data = response.data 
              
              if(data){
                console.log("true")
                state.innerHTML =""
     
                data.map(country_states =>{
              
             
                state.innerHTML += `<option  value="${country_states}">${country_states}</option>`
              
              
            }); 
              }
              else{
                console.log("data false")
                stateDiv.innerHTML=`<input required="" type="text" name="state" placeholder="state *">`
              }
              
             
           },
           error : function(error){
              
           }
         })
  
       }
         handleGetStates(country.value);
  
          $('.country').on('change', function () {
            
            const countryId = $(this).val();
         
            handleGetStates();
         })
        
      </script>

{%endblock script%}