{% extends request.ajax ? 'layout_blank.html.twig' : 'layout_default.html.twig' %}

{% import 'macro_functions.html.twig' as mf %}

{% block meta_title %}{{ 'Invoices'|trans }}{% endblock %}

{% set active_menu = 'invoice' %}

{% block top_content %}
    {% if request.show_filter %}
    <section class="card mb-3">
        <div class="card-body">
            <h5>{{ 'Filter invoices'|trans }}</h5>
            <form method="get">
                <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                <div class="mb-3 row">
                    <label class="form-label col-3 col-form-label">{{ 'ID'|trans }}</label>
                    <div class="col">
                        <input class="form-control" type="text" name="id" value="{{ request.id }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="form-label col-3 col-form-label">{{ 'Number'|trans }}</label>
                    <div class="col">
                        <input class="form-control" type="text" name="nr" value="{{ request.nr }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="form-label col-3 col-form-label" for="client_id">{{ 'Client'|trans }}</label>
                    <div class="col">
                        <select class="form-control autocomplete-selector"
                                placeholder="{{ 'Start typing the client name or ID'|trans }}"
                                id="client_id"
                                name="client_id"
                                data-resturl="admin/client/get_pairs"
                                data-csrf="{{ CSRFToken }}">
                        {% if not request.client_id %}
                        {% else %}
                            {% set client = admin.client_get({ 'id': request.client_id }) %}
                            <option value="{{ request.client_id }}" selected>{{ client.first_name }} {{ client.last_name }}</option>
                        {% endif %}
                        </select>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="form-label col-3 col-form-label">{{ 'Currency'|trans }}</label>
                    <div class="col">
                        {{ mf.selectbox('currency', guest.currency_get_pairs, request.currency, 0, 'All currencies'|trans) }}
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="form-label col-3 col-form-label">{{ 'Status'|trans }}</label>
                    <div class="col">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" id="radioStatusAll" type="radio" name="status" value="0"{% if not request.status %} checked{% endif %}>
                            <label class="form-check-label" for="radioStatusAll">{{ 'All statuses'|trans }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" id="radioStatusPaid" type="radio" name="status" value="paid"{% if request.status == 'paid' %} checked{% endif %}>
                            <label class="form-check-label" for="radioStatusPaid">{{ 'Paid'|trans }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" id="radioStatusUnpaid" type="radio" name="status" value="unpaid"{% if request.status == 'unpaid' %} checked{% endif %}>
                            <label class="form-check-label" for="radioStatusUnpaid">{{ 'Unpaid'|trans }}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" id="radioStatusRefunded" type="radio" name="status" value="refunded"{% if request.status == 'refunded' %} checked{% endif %}>
                            <label class="form-check-label" for="radioStatusRefunded">{{ 'Refunded'|trans }}</label>
                        </div>
                    </div>
                </div>
                {# <div class="mb-3 row">
                    <label class="form-label col-3 col-form-label">{{ 'Approved'|trans }}</label>
                        <div class="col">
                            <input type="radio" name="approved" value=""{% if not request.approved %} checked{% endif %}>
                            <label>All</label>
                            <input type="radio" name="approved" value="0"{% if request.approved == "1"%} checked{% endif %}>
                            <label>Pending approval</label>
                            <input type="radio" name="approved" value="1"{% if request.approved == "0" %} checked{% endif %}>
                            <label>Approved</label>
                        </div>
                </div> #}
                <div class="mb-3 row">
                    <label class="form-label col-3 col-form-label" for="issue_date">{{ 'Issue date'|trans }}</label>
                    <div class="col">
                        <div class="input-group">
                            <div class="input-icon w-100">
                                <input class="form-control datepicker"
                                       id="issue_date"
                                       value="{% if request.date_from %}{{ request.date_from|date('Y-m-d') }}{% endif %}{% if request.date_to %} to {{ request.date_to|date('Y-m-d') }}{% endif %}"
                                       data-name-from="date_from"
                                       data-name-to="date_to"
                                >
                                <span class="input-icon-addon">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                        <path d="M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>
                                        <path d="M16 3l0 4"></path>
                                        <path d="M8 3l0 4"></path>
                                        <path d="M4 11l16 0"></path>
                                        <path d="M11 15l1 0"></path>
                                        <path d="M12 15l0 3"></path>
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <input type="hidden" name="_url" value="{{ request._url }}">
                <input type="hidden" name="show_filter" value="1">
                <div class="d-flex gap-2">
                    <button class="btn btn-primary w-75" type="submit">{{ 'Filter'|trans }}</button>
                    <a class="btn btn-danger w-25" href="{{ request._url }}?show_filter=1">{{ 'Reset'|trans }}</a>
                </div>
            </form>
        </div>
    </section>
{% else %}
    {% set statuses = admin.invoice_get_statuses %}
    <section class="row row-cards mb-3">
        <div class="col-sm-6 col-lg-3">
            <a class="card card-sm card-link" href="{{ 'invoice'|alink({ 'status': 'unpaid' }) }}">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-danger text-white avatar">{{ statuses.unpaid }}</span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">{{ 'Unpaid'|trans }}</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-lg-3">
            <a class="card card-sm card-link" href="{{ 'invoice'|alink({ 'status': 'paid' }) }}">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-green text-white avatar">{{ statuses.paid }}</span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">{{ 'Paid'|trans }}</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-lg-3">
            <a class="card card-sm card-link" href="{{ 'invoice'|alink({ 'status': 'refunded' }) }}">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-secondary text-white avatar">{{ statuses.refunded }}</span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">{{ 'Refunded'|trans }}</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-lg-3">
            <a class="card card-sm card-link" href="{{ 'invoice'|alink }}">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-blue text-white avatar">{{ statuses.paid + statuses.unpaid + statuses.refunded }}</span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">{{ 'Total'|trans }}</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </section>
    {% endif %}
{% endblock %}

{% block content %}
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-index" role="tab">{{ 'Invoices'|trans }}</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-new" role="tab">
                <svg class="icon me-2">
                    <use xlink:href="#plus" />
                </svg>
                {{ 'New Invoice'|trans }}
            </button>
        </li>
    </ul>

    <div class="card">
        <div class="tab-content">
            <div class="tab-pane show active" id="tab-index" role="tabpanel">
                {{ include('partial_search.html.twig') }}
              <div class="table-responsive">
                <table class="table card-table table-vcenter table-striped text-nowrap sortable">
                    <thead>
                        <tr>
                            <th class="w-1 no-sort">
                                <input type="checkbox" class="form-check-input m-0 align-middle batch-delete-master-checkbox">
                            </th>
                            <th class="w-1">#</th>
                            <th class="w-1"></th>
                            <th>{{ 'Name'|trans }}</th>
                            <th class="text-center">{{ 'Amount'|trans }}</th>
                            <th class="text-center">{{ 'Issued at'|trans }}</th>
                            <th class="text-center">{{ 'Paid at'|trans }}</th>
                            <th>{{ 'Status'|trans }}</th>
                            <th class="w-1"></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% set invoices = admin.invoice_get_list({ 'per_page': 30, 'page': request.page }|merge(request)) %}
                        {% for invoice in invoices.list %}
                        <tr>
                            <td>
                                <input type="checkbox" class="form-check-input m-0 align-middle batch-delete-checkbox" data-item-id="{{ invoice.id }}">
                            </td>
                            <td>
                                <a href="{{ '/invoice/manage'|alink }}/{{ invoice.id }}">{{ invoice.serie_nr }}</a>
                            </td>
                            <td>
                                <a href="{{ 'client'|alink }}/manage/{{ invoice.client.id }}">
                                    <span class="avatar avatar-xs" style="background-image: url({{ invoice.buyer.email|gravatar }}&size=24"></span>
                                </a>
                            </td>
                            <td>
                                <a href="{{ 'client'|alink }}/manage/{{ invoice.client.id }}">{{ invoice.buyer.first_name }} {{ invoice.buyer.last_name }}</a>
                            </td>
                            <td class="text-center">{{ mf.currency_format(invoice.total, invoice.currency) }}</td>
                            <td class="text-center">{{ invoice.created_at|date('Y-m-d') }}</td>
                            <td class="text-center">{% if invoice.paid_at %}{{ invoice.paid_at|date('Y-m-d') }}{% else %}-{% endif %}</td>
                            <td>
                                {% if invoice.status == 'paid' %}
                                    <span class="badge bg-success me-1"></span>
                                {% endif %}
                                {% if invoice.status == 'unpaid' %}
                                    <span class="badge bg-danger me-1"></span>
                                {% endif %}
                                {% if invoice.status == 'refunded' %}
                                    <span class="badge bg-warning me-1"></span>
                                {% endif %}
                                {% if invoice.status == 'canceled' %}
                                    <span class="badge bg-secondary me-1"></span>
                                {% endif %}
                                {{ mf.status_name(invoice.status) }}
                            </td>
                            <td>
                                <a class="btn btn-icon" href="{{ '/invoice/manage'|alink }}/{{ invoice.id }}">
                                    <svg class="icon">
                                        <use xlink:href="#edit" />
                                    </svg>
                                </a>
                                <a class="btn btn-icon api-link"
                                    href="{{ 'api/admin/invoice/delete'|link({ 'id': invoice.id, 'CSRFToken': CSRFToken }) }}"
                                    data-api-confirm="{{ 'Are you sure?'|trans }}"
                                    data-api-reload="1">
                                    <svg class="icon">
                                        <use xlink:href="#delete" />
                                    </svg>
                                </a>
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td class="text-muted" colspan="8">{{ 'The list is empty'|trans }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
              </div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <div>
                        {{ include('partial_batch_delete.html.twig', { 'action': 'admin/invoice/batch_delete' }) }}
                        {{ include('partial_pagination.html.twig', { 'list': invoices, 'url': 'invoice' }) }}
                    </div>
                    <div>
                        <a class="btn btn-secondary" href="{{ '/api/admin/invoice/export_csv'|link({ 'CSRFToken': CSRFToken }) }}" title="{{ 'Export Invoices'|trans }}">
                            <svg class="icon">
                                <use xlink:href="#download" />
                            </svg>
                            {{ 'Export Invoices'|trans }}
                        </a>
                    </div>
                </div>
            </div>

            <div class="tab-pane show" id="tab-new" role="tabpanel">
                <div class="card-body">
                    <form method="post" action="{{ 'api/admin/invoice/prepare'|link }}" class="api-form" data-api-jsonp="onAfterInvoicePrepared">
                        <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                        <div class="form-group mb-3 row">
                            <label class="form-label col-3 col-form-label" for="client_id">{{ 'Client'|trans }}</label>
                            <div class="col">
                                {% if not request.client_id %}
                                    <select class="form-control autocomplete-selector"
                                            placeholder="{{ 'Start typing the client name or ID'|trans }}"
                                            id="client_id"
                                            name="client_id"
                                            data-resturl="admin/client/get_pairs"
                                            data-csrf="{{ CSRFToken }}">
                                    </select>
                                {% else %}
                                    {% set client = admin.client_get({ 'id': request.client_id }) %}
                                    <input type="text" id="client_id" class="form-control" disabled value="{{ client.first_name }} {{ client.last_name }}" />
                                    <input type="hidden" name="client_id" value="{{ request.client_id }}" />
                                {% endif %}
                            </div>
                        </div>
                        <input type="submit" value="{{ 'Prepare'|trans }}" class="btn btn-primary">
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js%}
<script>
    function onAfterInvoicePrepared(id) {
        bb.redirect("{{ 'invoice/manage/'|alink }}/" + id);
    }
</script>
{% endblock %}
