{% extends 'base.html' %}
        {% load static %}
{% block page_style %}
        <style>
            th{background-color: rgb(233, 236, 239);}
        </style>
{% endblock page_style %}
{% block page_js %}
    <script>
    $(document).ready(function () {

        $('#date_from').datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd-mm-yy'
        });
        $('#date_to' ).datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd-mm-yy'
        });
    });

    </script>
{% endblock page_js %}

{% block page_content %}
    {% include 'messages.html' %}
    <div class="card mb-2">
        <div class="card-body bg-light">{{ form_data }}
            <div class="row">
                <div class="col-8">
                    <form class="" method="post" action="{% url 'sales:reports-home' %}" id="sales_filters_form">
                        {% csrf_token %}
                        <div class="row">

                            <div class="col">
                                <div>{{ form.date_from }}</div>
                                <div>{{ form.date_from.errors }}</div>
                            </div>
                            <div class="col">
                                <div>{{ form.date_to }}</div>
                                <div>{{ form.date_to.errors }}</div>
                            </div>
                            <div class="col">
                                <div>{{ form.branch }}</div>
                                <div>{{ form.date_branch.errors }}</div>
                            </div>
                            <div class="col">
                                <div><button class="btn btn-info" type="submit">Update</button></div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-4 text-right">
                    <h4>Total <span class="badge badge-pill badge-danger">{{ sum.total__sum }}</span></h4>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            {% if sale_list|length > 0 %}
                <table class="table table-striped table-hover" id="myTable">
                    <thead>
                        <th>Date</th><th>Branch</th><th>Product</th><th>Qty</th><th>Price</th><th>Total</th>
                    </thead>
                    <tbody>
                        {% for sale in sale_list %}
                            <tr>
                                <td>{{ sale.datetime }}</td>
                                <td>{{ sale.branch.name }}</td>
                                <td>{{ sale.product.name }}</td>
                                <td>{{ sale.quantity }}</td>
                                <td>{{ sale.unit_price }}</td>
                                <td>{{ sale.total }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <div class="alert alert-info">No sales have been made yet</div>
            {% endif %}
        </div>
    </div>

{% endblock page_content %}