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

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

{% block meta_title %}{{ 'Invoice'|trans }} {{ invoice.serie }}{{ "%05s"|format(invoice.nr) }}{% endblock %}

{% set active_menu = 'invoice' %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ '/'|alink }}">
                <svg class="icon">
                    <use xlink:href="#home" />
                </svg>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ 'invoice'|alink }}">{{ 'Invoices'|trans }}</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">{{ invoice.serie }}{{ '%05s'|format(invoice.nr) }}</li>
    </ol>
{% endblock %}

{% block content %}
<div class="card mb-3">
    <div class="card-header">
        <h5 class="mb-0">{{ 'Invoice'|trans }} #{{ invoice.id }}</h5>
    </div>

    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" href="#tab-info" data-bs-toggle="tab">{{ 'Details'|trans }}</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="#tab-manage" data-bs-toggle="tab">{{ 'Manage'|trans }}</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="#tab-texts" data-bs-toggle="tab">{{ 'Texts'|trans }}</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="#tab-buyer-credentials" data-bs-toggle="tab">{{ 'Client credentials'|trans }}</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="#tab-seller-credentials" data-bs-toggle="tab">{{ 'Company credentials'|trans }}</a>
        </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade show active" id="tab-info" role="tabpanel">
            <table class="table card-table table-vcenter table-striped text-nowrap">
                <tbody>
                    <tr>
                        <td class="w-50 text-end">{{ 'ID'|trans }}:</td>
                        <td>#{{ invoice.id }}</td>
                    </tr>
                    <tr>
                        <td class="text-end">{{ 'Number'|trans }}:</td>
                        <td>{{ invoice.serie }}{{ "%05s"|format(invoice.nr) }}</td>
                    </tr>
                    <tr>
                        <td class="text-end">{{ 'Client'|trans }}:</td>
                        <td>
                            <a href="{{ 'client/manage'|alink }}/{{ invoice.client.id }}">{{ invoice.client.first_name }} {{ invoice.client.last_name }}</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-end">{{ 'Status'|trans }}:</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>
                    </tr>
                    {% if invoice.tax %}
                    <tr>
                        <td class="text-end">{{ invoice.taxname }} {{ invoice.taxrate }}%</td>
                        <td>{{ mf.currency_format(invoice.tax, invoice.currency) }}</td>
                    </tr>
                    {% endif %}
                    <tr>
                        <td class="text-end">{{ 'Total'|trans }}:</td>
                        <td>{{ mf.currency_format(invoice.total, invoice.currency) }}</td>
                    </tr>
                    <tr>
                        <td class="text-end">{{ 'Currency'|trans }}:</td>
                        <td>{{ invoice.currency }}</td>
                    </tr>
                    <tr>
                        <td class="text-end">{{ 'Date Created'|trans }}:</td>
                        <td>{{ invoice.created_at|format_datetime }}</td>
                    </tr>
                    <tr>
                        <td class="text-end">{{ 'Date Due'|trans }}:</td>
                        <td>{{ invoice.due_at|format_datetime }}</td>
                    </tr>
                    <tr>
                        <td class="text-end">{{ 'Date Paid'|trans }}:</td>
                        <td>{% if invoice.paid_at %}{{ invoice.paid_at|format_datetime }}{% else %}-{% endif %}</td>
                    </tr>
                    <tr>
                        <td class="text-end">{{ 'Last Reminded'|trans }}:</td>
                        {% if invoice.reminded_at %}<td title={{ invoice.reminded_at|format_datetime }}>{{ invoice.reminded_at|timeago }} {{ 'ago'|trans }}</td>{% else %}<td>-</td>{% endif %}
                    </tr>
                    {% if invoice.notes %}
                    <tr>
                        <td class="text-end">{{ 'Notes'|trans }}:</td>
                        <td>{{ invoice.notes|markdown }}</td>
                    </tr>
                    {% endif %}
                </tbody>
            </table>

            <div class="card-footer text-center">
                <a href="{{ 'invoice'|link }}/{{ invoice.hash }}" class="btn btn-primary" target="_blank">
                    <svg class="icon" width="24" height="24">
                        <use xlink:href="#eye" />
                    </svg>
                    <span>{{ 'View as client'|trans }}</span>
                </a>
                <a href="{{ 'api/admin/invoice/delete'|link({ 'id': invoice.id, 'CSRFToken': CSRFToken }) }}" class="btn btn-primary api-link" data-api-confirm="{{ 'Are you sure?'|trans }}" data-api-redirect="{{ 'invoice'|alink }}">
                    <svg class="icon" width="24" height="24">
                        <use xlink:href="#delete" />
                    </svg>
                    <span>{{ 'Delete'|trans }}</span>
                </a>
                {% if invoice.status == 'unpaid' %}
                <a href="{{ 'api/admin/invoice/send_reminder'|link({ 'id': invoice.id, 'CSRFToken': CSRFToken}) }}" class="btn btn-primary api-link" data-api-msg="Payment reminder was sent">
                    <svg class="icon" width="24" height="24">
                        <use xlink:href="#mail" />
                    </svg>
                    <span>{{ 'Send reminder'|trans }}</span>
                </a>
                <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#transactionModal">
                    <svg class="icon" width="24" height="24">
                        <use xlink:href="#check" />
                    </svg>
                    <span>{{ 'Mark as paid'|trans }}</span>
                </a>
                <div class="modal fade" id="transactionModal" tabindex="-1" aria-labelledby="transactionModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <form class="modal-content api-form" method="post" action="{{ 'api/admin/invoice/mark_as_paid'|link({ 'id': invoice.id, 'execute': 1, 'CSRFToken': CSRFToken }) }}" name="transactionForm" data-api-reload="1">
                    <div class="modal-header">
                        <h5 class="modal-title" id="transactionModalLabel">{{ 'Enter Custom Transaction ID'|trans }}:</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}">
                        <input type="hidden" name="id" value="{{ invoice.id }}">
                        <div class="mb-3 row">
                            <label class="col-md-3 col-form-label" for="transaction-id">{{ 'Transaction ID'|trans }}:</label>
                            <div class="col">
                                <input class="form-control" type="text" name="transactionId" id="transaction-id">
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <div class="col">
                                {{ 'Add the transaction ID of the payment to mark the invoice as paid.' |trans }}<br />
                                {{ 'This should be the transaction ID you use to reconcile your bank statement.' |trans }}
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal">{{ 'Cancel'|trans }}</a>
                        <input type="submit" class="btn btn-primary" value="{{ 'Submit'|trans }}">
                    </div>
                    </form>
                </div>
                </div>


                {% endif %}

                {% if invoice.status == 'paid' %}
                <a href="{{ 'api/admin/invoice/refund'|link({ 'id': invoice.id, 'CSRFToken': CSRFToken }) }}" class="btn btn-primary api-link" data-api-confirm="{{ 'Are you sure?'|trans }}" data-api-redirect="{{ 'invoice'|alink }}">
                    <svg class="icon" width="24" height="24">
                        <use xlink:href="#receipt-refund" />
                    </svg>
                    <span>{{ 'Refund'|trans }}</span>
                </a>
                {% endif %}
                <a href="{{ 'invoice/pdf'|link }}/{{ invoice.hash }}" class="btn btn-primary" target="_blank">
                    <svg class="icon" width="24" height="24">
                        <use xlink:href="#download" />
                    </svg>
                    <span>{{ 'PDF'|trans }}</span>
                </a>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-manage" role="tabpanel">
            <div class="card-body">
                <form action="{{ 'api/admin/invoice/update'|link }}" method="post" class="api-form" data-api-reload="{{ 'Invoice updated'|trans }}">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    <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="radioStatusPaid" type="radio" name="status" value="paid"{% if invoice.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 invoice.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 invoice.status == 'refunded' %} checked{% endif %}>
                                <label class="form-check-label" for="radioStatusRefunded">{{ 'Refunded'|trans }}</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" id="radioStatusCanceled" type="radio" name="status" value="canceled"{% if invoice.status == 'canceled' %} checked{% endif %}>
                                <label class="form-check-label" for="radioStatusCanceled">{{ 'Canceled'|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">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" id="radioApprovedYes" type="radio" name="approved" value="1"{% if invoice.approved  %} checked{% endif %}>
                                <label class="form-check-label" for="radioApprovedYes">{{ 'Yes'|trans }}</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" id="radioApprovedNo" type="radio" name="approved" value="0"{% if not invoice.approved %} checked{% endif %}>
                                <label class="form-check-label" for="radioApprovedNo">{{ 'No'|trans }}</label>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Serie and number'|trans }}:</label>
                        <div class="col">
                            <div class="input-group">
                                <input class="form-control" type="text" name="serie" value="{{ invoice.serie }}">
                                <input class="form-control w-50" type="text" name="nr" value="{{ invoice.nr }}">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Tax'|trans }}:</label>
                        <div class="col d-flex gap-2">
                            <input class="form-control" type="text" name="taxname" value="{{ invoice.taxname }}">
                            <div class="input-group">
                                <input class="form-control" type="text" name="taxrate" value="{{ invoice.taxrate }}">
                                <span class="input-group-text">%</span>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Payment method'|trans }}:</label>
                        <div class="col">
                            {{ mf.selectbox('gateway_id', guest.invoice_gateways({ "format": "pairs" }), invoice.gateway_id, 0, 'Select payment method') }}
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label" for="created_at">{{ 'Created at'|trans }}:</label>
                        <div class="col">
                            <div class="input-group">
                                <div class="input-icon w-100">
                                    <input class="form-control datepicker"
                                           id="created_at"
                                           value="{{ invoice.created_at|date('Y-m-d') }}"
                                           name="created_at"
                                    >
                                    <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>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label" for="due_at">{{ 'Due at'|trans }}:</label>
                        <div class="col">
                            <div class="input-group">
                                <div class="input-icon w-100">
                                    <input class="form-control datepicker"
                                           id="due_at"
                                           value="{% if invoice.due_at %}{{ invoice.due_at|date('Y-m-d') }}{% endif %}"
                                           name="due_at"
                                    >
                                    <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>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label" for="paid_at">{{ 'Paid at'|trans }}:</label>
                        <div class="col">
                            <div class="input-group">
                                <div class="input-icon w-100">
                                    <input class="form-control datepicker"
                                           id="paid_at"
                                           value="{% if invoice.paid_at %}{{ invoice.paid_at|date('Y-m-d') }}{% endif %}"
                                           name="paid_at"
                                    >
                                    <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>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Notes'|trans }}:</label>
                        <div class="col">
                            <textarea class="form-control" name="notes" rows="6">{{ invoice.notes }}</textarea>
                        </div>
                    </div>

                    <input type="hidden" name="id" value="{{ invoice.id }}">
                    <input type="submit" value="{{ 'Update'|trans }}" class="btn btn-primary w-100">
                </form>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-texts" role="tabpanel">
            <div class="card-body">
                <form action="{{ 'api/admin/invoice/update'|link }}" method="post" class="api-form" data-api-msg="{{ 'Invoice updated'|trans }}">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Text before invoice items table'|trans }}</label>
                        <div class="col">
                            <textarea class="form-control bb-textarea" name="text_1" rows="6">{{ invoice.text_1 }}</textarea>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Text after invoice items table'|trans }}</label>
                        <div class="col">
                            <textarea class="form-control bb-textarea" name="text_2" rows="6">{{ invoice.text_2 }}</textarea>
                        </div>
                    </div>

                    <input type="hidden" name="id" value="{{ invoice.id }}">
                    <button class="btn btn-primary w-100" type="submit">{{ 'Update'|trans }}</button>
                </form>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-seller-credentials" role="tabpanel">
            <div class="card-body">
                <h3>{{ 'Company details at the moment of purchase'|trans }}</h3>

                {% set seller = invoice.seller %}
                <form action="{{ 'api/admin/invoice/update'|link }}" method="post" class="api-form" data-api-msg="{{ 'Invoice updated'|trans }}">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Company'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="seller_company" value="{{ seller.company }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Company VAT'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="seller_company_vat" value="{{ seller.company_vat }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Company Number'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="seller_company_number" value="{{ seller.company_number }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Address'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="seller_address" value="{{ seller.address }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Phone'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="seller_phone" value="{{ seller.phone }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Email'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="seller_email" value="{{ seller.email }}">
                        </div>
                    </div>

                    <input type="hidden" name="id" value="{{ invoice.id }}">
                    <input type="submit" value="{{ 'Update'|trans }}" class="btn btn-primary w-100">
                </form>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-buyer-credentials" role="tabpanel">
            <div class="card-body">
                <h3>{{ 'Client details at the moment of purchase'|trans }}</h3>

                {% set buyer = invoice.buyer %}
                <form action="{{ 'api/admin/invoice/update'|link }}" method="post" class="api-form" data-api-msg="{{ 'Invoice updated'|trans }}">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'First name'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="buyer_first_name" value="{{ buyer.first_name }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Last name'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="buyer_last_name" value="{{ buyer.last_name }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Company'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="buyer_company" value="{{ buyer.company }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Company VAT'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="buyer_company_vat" value="{{ buyer.company_vat }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Company Number'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="buyer_company_number" value="{{ buyer.company_number }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Address'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="buyer_address" value="{{ buyer.address }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'City'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="buyer_city" value="{{ buyer.city }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'State'|trans }}:</label>
                        <div class="col">
                            {# mf.selectbox('buyer_state', guest.system_states, buyer.state, 0, 'Select state') #}
                            <input class="form-control" type="text" name="buyer_state" value="{{ buyer.state }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Country'|trans }}:</label>
                        <div class="col">
                            {{ mf.selectbox('buyer_country', guest.system_countries, buyer.country, 0, 'Select country') }}
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Phone'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="buyer_phone" value="{{ buyer.phone }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Zip'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="buyer_zip" value="{{ buyer.zip }}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Email'|trans }}:</label>
                        <div class="col">
                            <input class="form-control" type="text" name="buyer_email" value="{{ buyer.email }}">
                        </div>
                    </div>

                    <input type="hidden" name="id" value="{{ invoice.id }}">
                    <input type="submit" value="{{ 'Update'|trans }}" class="btn btn-primary w-100">
                </form>
            </div>
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body">
        <h5>{{ 'Invoice items'|trans }}</h5>
    </div>

    {% if not invoice.approved %}
    <form action="{{ 'api/admin/invoice/update'|link }}" method="post" class="api-form" data-api-reload="1">
        <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
        <table class="table card-table table-vcenter table-striped text-nowrap">
            <thead>
                <tr>
                    <th>{{ 'Title'|trans }}</th>
                    <th class="text-center w-10">{{ 'Quantity'|trans }}</th>
                    <th class="text-center w-25">{{ 'Price'|trans }}</th>
                    <th class="w-1">{{ 'Tax'|trans }}</th>
                    <th class="w-1"></th>
                </tr>
            </thead>
            <tbody>
                {% for i, item in invoice.lines %}
                <tr>
                    <td>
                        <input class="form-control" type="text" name="items[{{ item.id }}][title]" value="{{ item.title }}">
                    </td>
                    <td>
                        <input class="form-control text-center" type="number" name="items[{{ item.id }}][quantity]" value="{{ item.quantity }}" min="1" max="1000" required>
                    </td>
                    <td>
                        <div class="input-group">
                            <input class="form-control" type="text" name="items[{{ item.id }}][price]" value="{{ item.price }}">
                            <span class="input-group-text">{{ invoice.currency }}</span>
                        </td>
                    <td class="text-center">
                        <input class="form-check-input m-0 align-middle" type="checkbox" name="items[{{ item.id }}][taxed]" value="1"{% if item.taxed %} checked{% endif %}>
                    </td>
                    <td>
                        <a class="btn btn-icon api-link"
                            href="{{ 'api/admin/invoice/item_delete'|link({ 'id': item.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>
                {% endfor %}
                <tr>
                    <td>
                        <input class="form-control" type="text" name="new_item[title]" oninput="this.form['new_item[quantity]'].required = this.value.trim() !== ''">
                    </td>
                    <td>
                        <input class="form-control text-center" type="number" name="new_item[quantity]" min="1" max="1000">
                    </td>
                    <td class="text-center">
                        <div class="input-group">
                            <input class="form-control" type="text" name="new_item[price]" oninput="this.form['new_item[quantity]'].required = this.value.trim() !== ''">
                            <span class="input-group-text">{{ invoice.currency }}</span>
                        </div>
                    </td>
                    <td class="text-center">
                        <input class="form-check-input m-0 align-middle" type="checkbox" name="new_item[taxed]" value="1">
                    </td>
                    <td></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5" class="currency">
                        {{ 'Subtotal'|trans }}: {{ mf.currency_format(invoice.subtotal, invoice.currency) }}
                    </td>
                </tr>
                <tr>
                    <td colspan="5" class="currency">
                        {{ invoice.taxname }} {{ invoice.taxrate }}%: {{ mf.currency_format(invoice.tax, invoice.currency) }}
                    </td>
                </tr>
                <tr>
                    <td colspan="5" class="currency">
                        {{ 'Total'|trans }}: {{ mf.currency_format(invoice.total, invoice.currency) }}
                    </td>
                </tr>
            </tfoot>
        </table>

        <div class="card-footer d-flex gap-2">
            {% if not invoice.approved %}
            <a class="btn btn-success w-100 api-link"
                href="{{ 'api/admin/invoice/approve'|link({ 'id': invoice.id, 'CSRFToken': CSRFToken }) }}"
                data-api-reload="{{ 'invoices'|alink }}">
                <svg class="icon">
                    <use xlink:href="#check" />
                </svg>
                {{ 'Approve'|trans }}
            </a>
            {% endif %}
            <input type="hidden" name="id" value="{{ invoice.id }}">
            <input type="submit" value="{{ 'Update'|trans }}" class="btn btn-primary w-25">
        </div>
    </form>
{% else %}
    <table class="table card-table table-vcenter table-striped text-nowrap">
        <thead>
            <tr>
                <th class="w-1"></th>
                <th class="w-1"></th>
                <th>{{ 'Title'|trans }}</th>
                <th class="text-center">{{ 'Tax'|trans }}</th>
                <th class="text-end w-1">{{ 'Total'|trans }}</th>
            </tr>
        </thead>
        <tbody>
            {% for i, item in invoice.lines %}
            <tr>
                <td>{{ i + 1 }}</td>
                <td class="d-flex">
                    <div class="bull task {{ item.status }}" title="Task status: {{ mf.status_name(item.status) }}"></div>
                    <div class="bull charge {{ item.charged ? 'yes' : 'no' }}" title="{{ item.charged ? 'Charged from client balance' : 'Not charged from client balance' }}"></div>
                </td>
                <td>
                {% if item.order_id %}
                <a href="{{ 'order/manage'|alink }}/{{ item.order_id }}">{{ item.title }} {% if item.quantity > 1 %} x {{ item.quantity }} {# item.unit #}{% endif %}</a>
                {% else %}
                {{ item.title }} {% if item.quantity > 1 %} x {{ item.quantity }} {# item.unit #}{% endif %}
                {% endif %}
                </td>
                <td class="text-center">{{ mf.currency_format(item.tax, invoice.currency) }}</td>
                <td class="fw-bold">{{ mf.currency_format( item.total, invoice.currency) }}</td>
            </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5" class="text-end fw-bold">
                    Subtotal: {{ mf.currency_format(invoice.subtotal, invoice.currency) }}
                </td>
            </tr>
            <tr>
                <td colspan="5" class="text-end fw-bold">
                    {{ invoice.taxname }} {{ invoice.taxrate }}%: {{ mf.currency_format(invoice.tax, invoice.currency) }}
                </td>
            </tr>
            <tr>
                <td colspan="5" class="text-end fw-bold">
                    Total: {{ mf.currency_format(invoice.total, invoice.currency) }}
                </td>
            </tr>
        </tfoot>
    </table>
{% endif %}
</div>

    {% set transactions = admin.invoice_transaction_get_list({ 'invoice_id': invoice.id, 'per_page': 100 }).list %}
    {% if transactions|length > 0 %}
    <div class="card overflow-auto">
        <div class="card-body">
            <h5>{{ 'Transactions'|trans }}</h5>
        </div>

        <table class="table card-table table-vcenter table-striped text-nowrap">
            <thead>
                <tr>
                    <th>{{ 'ID'|trans }}</th>
                    <th>{{ 'Type'|trans }}</th>
                    <th>{{ 'Gateway'|trans }}</th>
                    <th>{{ 'Amount'|trans }}</th>
                    <th>{{ 'Status'|trans }}</th>
                    <th>{{ 'Date'|trans }}</th>
                    <th class="w-1"></th>
                </tr>
            </thead>

            <tbody>
                {% for i, tx in transactions %}
                <tr>
                    <td>{{ tx.txn_id }}</td>
                    <td>{{ tx.type }}</td>
                    <td>{{ tx.gateway }}</td>
                    <td>{{ mf.currency_format( tx.amount, tx.currency) }}</td>
                    <td>{{ mf.status_name(tx.status) }}</td>
                    <td>{{ tx.created_at|format_datetime }}</td>
                    <td>
                        <a class="btn btn-icon" href="{{ '/invoice/transaction'|alink }}/{{ tx.id }}">
                            <svg class="icon">
                                <use xlink:href="#edit" />
                            </svg>
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
{% endblock %}

{% block sidebar2 %}
<div class="widget">
    <div class="head">
        <h2 class="dark-icon i-services">{{ 'Actions'|trans }}</h2>
    </div>
    <div class="block">
        <button class="btn btn-primary" type="button" onclick="window.print()">
            <span class="dark-icon i-print"></span> {{ 'Print'|trans }}</button>
        {% if invoice.status == 'unpaid' %}
        <a class="btn btn-primary api-link" href="{{ 'api/client/invoice/delete'|link({ 'hash': invoice.hash, 'CSRFToken': CSRFToken }) }}" data-api-confirm="{{ 'Are you sure?'|trans }}" data-api-redirect="{{ 'invoice'|alink }}">
            <span class="dark-icon i-bin"></span> {{ 'Delete'|trans }}</a>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block head %}{{ mf.bb_editor('.bb-textarea') }}{% endblock %}

{% block js %}
{% autoescape "js" %}
<script>
    $(function() {
        $('input[name=gateway]:first').attr('checked', true);
        $('#pay-now-button').on('click', function() {
            var link = $('input[name=gateway]:checked').val();
            bb.redirect(link);

            return false;
        });
    });

</script>
{% endautoescape %}
{% endblock %}
