{% extends "base.html" %}

{% load widget_tweaks %}


{% block title %} Sales List {% endblock title %}


{% block content %}
    
    <div class="row" style="color: #ea2088; font-style: bold; font-size: 3rem;">
        <div class="col-md-8">Sales List</div>
        <div class="col-md-4">               
            <div style="float:right;"> <a class="btn ghost-blue" href="{% url 'new-sale' %}">New Outgoing Stock</a> </div>
        </div>
    </div>
    
    <br>

    <table class="table table-css"> 
            
        <thead class="thead-inverse align-middle">
            <tr>
                <th width="10%">Bill No</th>
                <th width="15%">Customer</th>
                <th width="15%">Stocks Sold</th>
                <th width="10%">Quantity Sold</th>
                <th width="10%">Total Sold Price</th>
                <th width="15%">Sale Date</th>
                <th width="25%">Options</th>
            </tr>
        </thead>

{% if bills %}

        <tbody>
            {% for sale in bills %}
            <tr>
                <td class="align-middle"> <h3>{{ sale.billno }}</h3> </td>
                <td class=""> {{ sale.name }} <br> <small style="color: #909494">Ph No : {{ sale.phone }}</small> </td>
                <td class="align-middle">{% for item in sale.get_items_list %} {{ item.stock.name }} <br> {% endfor %}</td>
                <td class="align-middle">{% for item in sale.get_items_list %} {{ item.quantity }} <br> {% endfor %}</td>     
                <td class="align-middle">{{ sale.get_total_price }}</td>
                <td class="align-middle">{{ sale.time.date }}</td>
                <td class="align-middle"> <a href="{% url 'sale-bill' sale.billno %}" class="btn ghost-pink">View Bill</a> <a href="{% url 'delete-sale' sale.pk %}" class="btn ghost-red">Delete Bill</a> </td>
            </tr>
            {% endfor %}
        </tbody>

    </table>

    <div class="align-middle">
        {% if is_paginated %}

            {% if page_obj.has_previous %}
                <a class="btn btn-outline-info mb-4" href="?page=1">First</a>
                <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.previous_page_number }}">Previous</a>
            {% endif %}

            {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                    <a class="btn btn-info mb-4" href="?page={{ num }}">{{ num }}</a>
                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                    <a class="btn btn-outline-info mb-4" href="?page={{ num }}">{{ num }}</a>
                {% endif %}
            {% endfor %}

            {% if page_obj.has_next %}
                <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.next_page_number }}">Next</a>
                <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
            {% endif %}

        {% endif %}
    </div>

{% else %}

        <tbody></tbody>   
    </table>

    <br><br><br><br><br><br><br><br>
    <div style="color: #ea2088; font-style: bold; font-size: 1.5rem; text-align: center;">WOW, SUCH EMPTY</div>

{% endif %}

{% endblock content %}