{% extends 'invoice/base.html' %}
{% block content %}
<div class="columns is-centered has-text-centered">
    <div class="column is-half">
        <div class="card has-background-white-ter">
            <h1 class="title is-3"></h1>
        </div>
    </div>
</div>

<form action="{% url 'invoice:invoice-list' %}" method="post">{% csrf_token %}
    <div class="card">
        <header class="card-header">
            <p class="card-header-title">
                All Orders / Change Order Status &nbsp;<button class="button is-rounded is-info">
                    <a href="{% url 'invoice:invoice-create' %}" class="has-text-white">Create Invoice</a></button>
            </p>
        </header>
        <div class="card-content">
            <div class="content">

                <table class="table is-fullwidth is-bordered is-hoverable is-striped">
                    <tbody>
                        <thead>
                            <tr>
                                <th></th>
                                <th>INVOICE</th>
                                <th>CUSTOMER</th>
                                <th>DATE</th>
                                <th>DUE DATE</th>
                                <th>BALANCE</th>
                                <th>TOTAL</th>
                                <th>STATUS</th>
                                <th>View</th>
                                <th>DOWNLOAD</th>

                            </tr>
                        </thead>
                        {% for invoice in invoices %}
                        <tr>
                            <td><input class="checkbox" type="checkbox" value="{{invoice.id}}" name="invoice_id" size="1" /></td>
                            <td width="1%">#{{invoice.id}}</td>
                            <td width="9%">{{invoice.customer}}</td>
                            <td> {{invoice.date}}</td>
                            <td> {{invoice.due_date}} </td>
                            <td width="1%"></td>
                            <td>{{invoice.total_amount}}</td>
                            <td class="level-right">
                                {% if invoice.get_status %}
                                <a class="button is-small is-success" href="#">Paid</a>
                                {% else %}
                                <a class="button is-small is-warning" href="#">Not Paid</a>
                                {% endif %}
                            </td>
                            <td width="1%"><a href="{% url 'invoice:invoice-detail' id=invoice.id %}">
                                <div class="button is-small is-info">View</div>
                            </a></td>
                            <td width="1%"><a href="{% url 'invoice:invoice-download' id=invoice.id %}">Download</a></td>
                        </tr>
                        {% endfor %}

                    </tbody>
                </table>

            </div>
        </div>
    </div><br /><br /><br />
    <div class="card has-background-white-ter">
        <header class="card-header">
            <p class="card-header-title">
                Change Order Status
            </p>
        </header>
        <div class="card-content">
            <div class="select is-rounded">
                <select id="status" name="status">
                    <option value="1">Paid</option>
                    <option value="0">Not Paid</option>
                </select>
            </div>
            <input class="button  is-info is-rounded" type="submit" class="btn" value="Change Status" name="mybtn">
        </div>
    </div>
</form>

{% endblock content %}