{% extends "base.html.twig" %}

{% block BeforeAnyCSSFile %}
    {% for file in encore_entry_css_files('select2__init') %}
        <link rel="stylesheet" href="{{ assetsBasePath~file }}">
    {% endfor %}
{% endblock %}

{% block ExtraCSSFiles %}
{% endblock %}

{% set pagename = 'Invoice List' | trans %}

{% block MainContent %}
    <div class="kt-portlet">
        <div class="kt-portlet__head" data-toggle="collapse" data-target="#demo">
            <div class="kt-portlet__head-label"><h3 class="kt-portlet__head-title">{{ 'Filter Recrods'|trans }}
                    &nbsp;</h3><span class="hand-cursor">
                    <svg xmlns="http://www.w3.org/2000/svg"
                         xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                         height="24px" viewBox="0 0 24 24" version="1.1"
                         class="kt-svg-icon"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon
                                    id="Shape" points="0 0 24 0 24 24 0 24"></polygon><path
                                    d="M6.70710678,15.7071068 C6.31658249,16.0976311 5.68341751,16.0976311 5.29289322,15.7071068 C4.90236893,15.3165825 4.90236893,14.6834175 5.29289322,14.2928932 L11.2928932,8.29289322 C11.6714722,7.91431428 12.2810586,7.90106866 12.6757246,8.26284586 L18.6757246,13.7628459 C19.0828436,14.1360383 19.1103465,14.7686056 18.7371541,15.1757246 C18.3639617,15.5828436 17.7313944,15.6103465 17.3242754,15.2371541 L12.0300757,10.3841378 L6.70710678,15.7071068 Z"
                                    id="Path-94" fill="#000000" fill-rule="nonzero"
                                    transform="translate(12.000003, 11.999999) rotate(-180.000000) translate(-12.000003, -11.999999) "></path></g></svg></span>
            </div>
        </div>
        <span class="{{ app.request.query is empty ? 'collapse' : '' }}" id="demo">
            <form class="kt-form" method="get">
                <div class="kt-portlet__body add___filter_place">
                        {#active class of active sessions - when class is selected then enrolled users are load accordingly#}
                    {% set ColsClass = 'col-lg-2 col-md-2 col-sm-4 col-xs-6' %}
                    {# filters #}
                        <div class="row">
                            {# Invoice search by invoice stauts#}
                            <div class="col-xl-3 col-lg-3 col-md-3 col-xs-12">
                                <label class="col-form-label">{{ 'Status'|trans }} </label>
                                <select class="clearMeAsWell form-control kt-select2 kt-selectpicker simpleSelect2"
                                        name="invStatus">
                                    <option value=""></option>
                                    <option {{ app.request.query.get('invStatus') == 'p' ? 'selected="selected"' : '' }} value="p">{{ 'Paid' | trans }}</option>
                                    <option {{ app.request.query.get('invStatus') == 'unp' ? 'selected="selected"' : '' }} value="unp">{{ 'Un Paid' | trans }}</option>
                                    <option {{ app.request.query.get('invStatus') == 'pp'?  'selected="selected"' : '' }} value="pp">{{ 'Partial Paid' }}</option>
                                </select>
                            </div>
                            {# invoice search by Student #}
                            <div class="col-xl-3 col-lg-3 col-md-3 col-xs-12">
                                <label class="col-form-label">{{ 'My Childrens'|trans }} </label>
                                <select class="clearMeAsWell form-control kt-select2 kt-selectpicker simpleSelect2"
                                        name="user">
                                    <option value=""></option>
                                    {% for student in app.user.getStudentReference %}
                                        <option {{  app.request.query.get('user') == student.id ? 'selected="selected"' : ''}} value="{{ student.id }}">{{ student.fullName }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                <div class="kt-portlet__foot">
                    <div class="row">
                                {# Search & Reset Button  #}
                            <div class="centerButton">
                                <button type="submit" class="btn btn-primary btn-md">{{ 'Search'|trans }}</button>
                                &nbsp;
                                <button class="btn btn-danger btn-md clearSelect2"
                                        data-target="{{ path('invoices_list_guardian') }}">{{ 'Clear'|trans }}</button>
                            </div>
                        </div>
                </div>
            </form>
        </span>
    </div>

    {# list of invoices#}
    <div class="kt-portlet">
        <div class="kt-portlet__body">
            <table class="table table-striped table-bordered">
                <thead>
                <tr>
                    <th>{{ 'Ref#'|trans }}</th>
                    <th>{{ 'Invoice to'|trans }}</th>
                    <th>{{ 'Invoice date'|trans }}</th>
                    <th>{{ 'Due date'|trans }}</th>
                    <th>{{ 'Amount'|trans }}</th>
                    <th>{{ 'Status'|trans }}</th>
                </tr>
                </thead>
                <tbody>
                {% for inv in inv_ls %}

                    {# invoice #}
                    <tr class="{{ inv.getIsCancel ? 'strikeout bg-inactive' }}" data-from="category"
                        id="inv__{{ inv.getId }}">
                        <th scope="row">
                            {% if is_granted("ROLE_ADMIN") %}
                                <a href="{{ path('pay__invoice', {'id': inv.getId | urlencrypt}) }}"> {{ inv.getInvReference }} </a>
                            {% else %}
                                {{ inv.getInvReference }}
                            {% endif %}
                        </th>
                        {# invoice register to,  #}
                        <td> {{ inv.getInvoiceGeneratedForUnregisterUsername is empty ? inv.getInvGeneratedFor.getFName : inv.getInvoiceGeneratedForUnregisterUsername ~ ' (Un-register user)' }}</td>
                        {# invoice to date#}
                        <td> {{ date_format( inv.getInvGeneratedDatetime) }}</td>
                        {# invoice due date #}
                        <td> {{ date_format( inv.getInvDueDate) }}</td>
                        {# invoice amount #}
                        <td>

                            {{ getAppSetting('currencyPreFix') }}
                            {{ inv.getTotalAmountOfInvoice }}
                            {{ getAppSetting('currencySuffex') }}

                        </td>
                        {# invoice status #}
                        <td>
                            {% if inv.getTheInvoiceStatus == 'Paid' %}
                                <span class="kt-badge kt-badge--success  kt-badge--inline kt-badge--pill">{{ 'Paid' | trans }}</span>
                            {% elseif inv.getTheInvoiceStatus == 'Partial Paid' %}
                                <span class="kt-badge kt-badge--warning  kt-badge--inline kt-badge--pill">{{ 'Partial Paid' | trans }}</span>
                                <br/>
                                {{ inv.getTheInvoiceAmountWhichIsNotPaid }} {{ 'remainig ' }}
                            {% elseif inv.getTheInvoiceStatus == 'Over Paid' %}
                                <span class="kt-badge kt-badge--info  kt-badge--inline kt-badge--pill">{{ 'Over Paid' | trans }}</span>
                            {% elseif inv.getTheInvoiceStatus == 'Un Paid' %}
                                <span class="kt-badge kt-badge--danger  kt-badge--inline kt-badge--pill">{{ 'Un Paid' | trans }}</span>
                            {% else %}
                                {{ inv.getTheInvoiceStatus }}
                            {% endif %}
                        </td>
                    </tr>

                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

{% endblock %}

{% block ExtraJsFIles %}
{% endblock %}
{% block documentation %}
{% endblock %}