{% extends 'base.html' %}

{% load static %}

{% block title %}Customer-Order{% endblock %}

{% block javascript %}

<script src="{% static 'vendor/js/scripts.js' %}"></script>

{% endblock %}

{% block content %}

{% include 'navbar.html' %}

<br><br><br>

{% include 'message.html' %}

<div class="container">
   <div class="row">
       <div class="col-md ml-4">
        <div style="margin-left:80px;">
            <div class="card bg-primary text-center text-white ml-2 mb-3" id="total-orders">
                <div class="card-header">
                    <h5 class="card-title">Total Orders</h5>
                </div>
                <div class="card-body">
                    <h5 class="card-title">{{order_count}}</h5>
                </div>
            </div>
        </div>
       </div>
       <div class="col-md">
        <div style="margin-left:80px;">
            <div class="card bg-info text-center text-white ml-2 mb-3" id="total-orders">
                <div class="card-header">
                    <h5 class="card-title">Total Price</h5>
                </div>
                <div class="card-body">
                    <h5 class="card-title">{{customer_total_price}}</h5>
                </div>
            </div>
        </div>
       </div>
   </div>
<hr>

   <div class="row">
    <div class="col">


        <div class="card border-dark" style="margin-left:26%; ">
            <h3 class="card-header" style="text-align: center;"> Order Details of <strong>{{customers.name}}</strong>
            </h3>
        </div>
    </div>

    <div class="col-md-2" style="margin-right:20%;">
        <a href=" {% url 'customer_app:bill' customers.id  %}" class="btn  btn-primary mt-2 float-right">Print
            Invoice</a>
    </div>
</div>
   

<hr>
            <div class="col-md-10" style="margin-left:15%;">
                <table class="table table-responsive-sm table-sm table-hover text-nowrap table-striped table-bordered">
                    <thead class="thead-dark">
                        <tr style="text-align: center;">


                            <th>Product</th>

                            <!-- <th>Category</th> -->
                            <th>Created</th>
                            <th>Status</th>
                            <th>Quantity</th>
                            <th>Per Price</th>
                            <th> Subtotal</th>
                            <th>Action</th>

                        </tr>


                    </thead>
                    <tbody>

                        {% for order in orders %}

                        <tr>

                            <td>{{order.product.name}}</th>
                            <!-- <td>{{order.product.category}}</td> -->

                            <!--
        <td>{{order.product}}</th> also give same result for name
   maila order table ma Product table ko access garda use product object
   like above
   product=models.ForeignKey(Product,null=True,on_delete=models.SET_NULL)
   -->

                            <td>{{order.created_at}}</td>
                            <td>{{order.status}}</td>
                            <td>
                               
                                {{order.quantity}} {{order.product.unit}}
                             
                            </td>
                            <td>{{order.product.price}}</td>
                            <td>{{order.get_total_item_price}}</td>
                            <!--to get price for each row product call get_total_item_price in models.py of orders-->

                            <!-- <td>{{customer.per_total}}</td> -->

                            <td><a href="{% url 'order_app:edit' order.customer.id order.id %}"
                                    class="btn btn-success btn-sm"><i class="fa fa-edit"></i></a>

                                    
                                <a href="{% url 'order_app:delete' order.id%}" class="btn btn-danger btn-sm"><i
                                        class="fa fa-trash-alt"></i></a>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="8" style="text-align: center;" class="alert alert-danger">
                             <strong> Order is empty.Please Place the Order!
                            </td></strong>
                        </tr>

                        {% endfor %}


                    </tbody>
                </table>
                
               

            
       

    </div>
</div>


{% endblock%}