{% extends request.ajax ? "layout_blank.phtml" : "layout_default.phtml" %}
{% import "macro_functions.phtml" as mf %}
{% block meta_title %}{% trans 'Proforma invoice' %}{% endblock %}

{% block content_before %}
{% if invoice.status == 'unpaid' %}
    {% include "partial_steps.phtml" with {'selected': 4} %}
{% endif%}
{% endblock %}

{% block content %}
{% set nr = invoice.serie ~ "%05s"|format(invoice.nr) %}
{% set seller = invoice.seller %}
{% set buyer = invoice.buyer %}
{% set company  = guest.system_company %}

<div class="h-block" id="invoice-block">
    <div class="h-block-header">
        <div class="icon"><span class="big-light-icon i-invoice"></span></div>
        {% if invoice.status == 'unpaid' %}
        <h2>{% trans 'Proforma Invoice' %}</h2>
        <p>{% trans 'Please choose payment type and pay for your chosen products.' %}</p>
        {% else %}
        <h2>{% trans 'Invoice' %} {{ nr }}</h2>
        <p>{% trans 'Invoice is paid' %}</p>
        {% endif %}
    </div>
    <div class="block">
        <div id="invoice-header">

        <div class="grid_6 alpha">
            <div class="box">
                <div class="block">
                    <img src="{{ company.logo_url }}" alt="Logo" style="max-height: 70px">
                </div>
            </div>
        </div>

        <div class="grid_6 omega">
            <div class="box">
                <div class="block" style="text-align: right;">
                    <h2>{% trans 'Invoice' %} {{ nr }}</h2>
                    <p>{{ invoice.created_at|bb_date }}</p>

                    <h2 class="invoice_{{invoice.status }}">{% if invoice.status == 'unpaid' %}{% trans 'Unpaid' %}{% else %}{% trans 'Paid' %}{% endif %}</h2>
                </div>
            </div>
        </div>

        <div class="clear"></div>

        <div class="grid_6 alpha">
            <table class="seller">
                {% if seller.company %}
                <tr>
                    <td><b>{{ seller.company }}</b></td>
                </tr>
                {% endif %}

                {% if seller.address %}
                <tr>
                    <td>{{ seller.address }}</td>
                </tr>
                {% endif %}

                {% if seller.phone %}
                <tr>
                    <td>{{ seller.phone }}</td>
                </tr>
                {% endif %}

                {% if seller.email %}
                <tr>
                    <td>{{ seller.email }}</td>
                </tr>
                {% endif %}
                
                {% if company.account_number %}
                <tr>
                    <td>{% trans 'Account' %}: {{ company.account_number }}</td>
                </tr>
                {% endif %}

                {% if company.number %}
                <tr>
                    <td>{% trans 'Company number' %}: {{ company.number }}</td>
                </tr>
                {% endif %}

                {% if company.vat_number %}
                <tr>
                    <td>{% trans 'VAT' %}: {{ company.vat_number }}</td>
                </tr>
                {% endif %}

                {# Company note #}
                {# if company.note %}
                <tr>
                    <td>{{ company.note }}</td>
                </tr>
                {% endif #}
            </table>
        </div>

        <div class="grid_6 omega">
            <table class="buyer">
                {% if buyer.company %}
                <tr>
                    <td><b>{{ buyer.company }}</b></td>
                </tr>
                {% endif %}

                {% if buyer.first_name or buyer.last_name %}
                <tr>
                    <td><b>{{ buyer.first_name }} {{ buyer.last_name }}</b></td>
                </tr>
                {% endif %}

                {% if buyer.email %}
                <tr>
                    <td>{{ buyer.email }}</td>
                </tr>
                {% endif %}

                {% if buyer.address %}
                <tr>
                    <td>{{ buyer.address }} {{ buyer.city }} {{ buyer.state }} {{ buyer.postcode }} {{ buyer.country }}</td>
                </tr>
                {% endif %}
                
                {% if buyer.phone %}
                <tr>
                    <td>{{ buyer.phone }}</td>
                </tr>
                {% endif %}

            </table>
        </div>

        <div class="clear"></div>
        </div>

        {#
        <div class="grid_12 alpha omega" id="invoice_status">
            <img src="{{theme.url}}images/invoice_status_{{invoice.status }}.png" alt="{{invoice.status }}"/>
            <h2 class="{{invoice.status }}">{% if invoice.status == 'unpaid' %}{% trans 'Unpaid' %}{% else %}{% trans 'Paid' %}{% endif %}</h2>
        </div>
        #}
        <table class="with-border">
            <thead>
                <tr>
                    <th>#</th>
                    <th>{% trans 'Title' %}</th>
                    <th class="currency">{% trans 'Price' %}</th>
                    <th class="currency">{% trans 'Total' %}</th>
                </tr>
            </thead>

            <tbody>
                {% for i, item in invoice.lines %}

                <tr class="{{ cycle(['odd', 'even'], i) }}">
                    <td>{{ i+1 }}.</td>
                    <td>
                        {% if item.order_id%}
                        <a href="{{ '/service'|link }}/manage/{{item.order_id}}">{{ item.title }}</a>
                        {% else %}
                        {{ item.title }}
                        {% endif %}
                    </td>
                    <td class="currency">
                        {{ mf.currency_format( item.price, invoice.currency) }}
                        {% if item.quantity > 1 %}
                        x {{ item.quantity }} {# item.unit #}
                        {% endif %}
                    </td>
                    <td class="currency">{{ mf.currency_format( item.total, invoice.currency) }}</td>
                </tr>

                {% endfor %}
            </tbody>

            <tfoot>
            {% if invoice.tax > 0 %}
                <tr>
                    <th colspan="3">{{ invoice.taxname }} {{ invoice.taxrate }}%</th>
                    <th class="currency">{{ mf.currency_format( invoice.tax, invoice.currency) }}</th>
                </tr>
            {% endif %}
            
            {% if invoice.discount > 0 %}
                <tr>
                    <th colspan="3">{% trans 'Discount' %}</th>
                    <th class="currency">{{ mf.currency_format( invoice.discount, invoice.currency) }}</th>
                </tr>
            {% endif %}
            {% if invoice.status == 'paid' %}
                <tr class="total">
                    <th colspan="3">{% trans 'Total' %}</th>
                    <th class="currency">{{ mf.currency_format( invoice.total, invoice.currency) }}</th>
                </tr>
            </tfoot>
            {% endif %}
        </table>

        {% if invoice.status == 'unpaid' %}
        <div class="grid_8 alpha">
            <div class="box">
                <div class="block pricing">
                    {# One time payments #}
                    {% for gtw in guest.invoice_gateways %}
                        {% if gtw.allow_single and invoice.currency in gtw.accepted_currencies %}
                        <label class="gateway">
                            <input type="radio" name="gateway" value="{{ '/banklink'|link }}/{{ invoice.hash }}/{{gtw.id}}" data-api-id="{{gtw.id}}" data-api-r="0"/>
                            {% trans 'Pay by' %} {{gtw.title}}
                        </label>
                        {% endif %}

                        {# Subscriptions #}
                        {% if invoice.subscribable and gtw.allow_recurrent and invoice.currency in gtw.accepted_currencies %}
                        <label class="gateway">
                            <input type="radio" name="gateway" value="{{ '/banklink'|link }}/{{ invoice.hash }}/{{gtw.id}}?subscription=1" data-api-id="{{gtw.id}}" data-api-r="1"/>
                            {% trans 'Subscribe with' %} {{gtw.title}}
                        </label>
                        {% endif %}
                    {% endfor %}
                    <div class="clear"></div>
                </div>
            </div>
        </div>

        <div class="grid_4 omega">
            <div class="box">
                <div class="block pricing">
                    <p>{% trans 'Total:' %}</p>
                    <div class="currency">{{ mf.currency_format( invoice.total, invoice.currency) }}</div>
                    <button class="bb-button bb-button-submit bb-button-big" type="submit" id="pay-now-button">{% trans 'Pay now' %}</button>
                </div>
            </div>
        </div>
        {% endif %}
        <div class="clear"></div>
    </div>
</div>

<div id="gateway-html-container"></div>
<div class="clear"></div>

{% set transactions = client.invoice_transaction_get_list({"invoice_id":invoice.id, "type":"payment","per_page":100 }).list %}

{% if transactions|length > 0 %}

<div class="widget">
    <div class="head">
        <h2 class="dark-icon i-payment">{% trans 'Transactions' %}</h2>
    </div>
    <table>
        <thead>
            <tr>
                <th>{% trans 'Transaction Date' %}</th>
                <th>{% trans 'Transaction ID' %}</th>
                <th>{% trans 'Gateway' %}</th>
                <th>{% trans 'Amount' %}</th>
            </tr>
        </thead>

        <tbody>
            {% for i, tx in transactions %}
            <tr class="{{ cycle(['odd', 'even'], i) }}">
                <td>{{tx.created_at|bb_date }}</td>
                <td>{{tx.txn_id}}</td>
                <td>{{tx.gateway|default('-')}}</td>
                <td>{{ mf.currency_format( tx.amount, tx.currency) }}</td>
            </tr>
            {% endfor %}

        </tbody>

    </table>
</div>

{% endif %}


{% endblock %}

{% block sidebar2 %}

<div class="widget">
    <div class="head">
        <h2 class="dark-icon i-services">{% trans 'Actions' %}</h2>
    </div>
    <div class="block">
        <button class="bb-button" type="button" onclick="window.print()"><span class="dark-icon i-print"></span> {% trans 'Print' %}</button>
        {% if invoice.status == 'unpaid' %}
        <a class="bb-button api" href="client/invoice/delete?hash={{invoice.hash}}" data-api-redirect="{{ 'invoice'|link }}"><span class="dark-icon i-bin"></span> {% trans 'Delete' %}</a>
        {% endif %}
    </div>
</div>

{% endblock %}


{% block js %}
{% autoescape true js %}
<script type="text/javascript">
$(function() {
    $('input[name=gateway]:first').attr('checked', true);
    $('#pay-now-button').click(function(){
        var obj = $('input[name=gateway]:checked')
        var link = obj.val();
        $('#gateway-html-container').load(link);
        return false;
    });
});
</script>
{% endautoescape %}
{% endblock %}