{% extends "hosting/base_short.html" %}
{% load staticfiles bootstrap3 humanize i18n custom_tags %}


{% block content %}
<div id="order-detail{{invoice.invoice_number}}" class="order-detail-container">
    {% if messages %}
    <div class="alert alert-warning">
        {% for message in messages %}
        <span>{{ message }}</span>
        {% endfor %}
    </div>
    {% endif %}
    {% if not error %}
    <div class="dashboard-container-head">
        <h1 class="dashboard-title-thin">
            <img src="{% static 'hosting/img/billing.svg' %}" class="un-icon">
            {% blocktrans with page_header_text=page_header_text|default:"Invoice" %}{{page_header_text}}{% endblocktrans %}
        </h1>
        {% if invoice %}
        <div class="dashboard-container-options">
            <button type="button" class="btn-plain btn-pdf"
                    data-target="#order-detail{{invoice.invoice_number}}"><img
                    src="{% static 'hosting/img/icon-pdf.svg' %}"
                    class="svg-img"></button>
            <button type="button" class="btn-plain btn-print"><img
                    src="{% static 'hosting/img/icon-print.svg' %}"
                    class="svg-img"></button>
        </div>
        {% endif %}
    </div>
    <div class="order-details">
        {% if invoice %}
        <p>
            <strong>{% trans "Invoice #" %} {{invoice.invoice_number}}</strong>
        </p>
        {% endif %}
        <p>
            <strong>{% trans "Date" %}:</strong>
            <span class="locale_date">
                    {% if invoice %}
                        {{invoice.paid_at|date:'Y-m-d h:i a'}}
                    {% else %}
                        {% now "Y-m-d h:i a" %}
                    {% endif %}
                </span>
        </p>
        {% if invoice and vm %}
        <p>
            <strong>{% trans "Status" %}: </strong>
            <strong>
                {% if vm.terminated_at %}
                <span class="vm-color-failed">{% trans "Terminated" %}</span>
                {% elif invoice.order.status == 'Approved' %}
                <span class="vm-color-online">{% trans "Approved" %}</span>
                {% else %}
                <span class="vm-status-failed">{% trans "Declined" %}</span>
                {% endif %}
            </strong>
        </p>
        {% endif %}
        <hr>
        <div>
            <address>
                <h4>{% trans "Billed to" %}:</h4>
                <p>
                    {% if invoice.order %}
                    {{invoice.customer.user.name}}<br>
                    {{invoice.order.billing_address.street_address}},
                    {{invoice.order.billing_address.postal_code}}<br>
                    {{invoice.order.billing_address.city}},
                    {{invoice.order.billing_address.country}}
                    {% endif %}
                </p>
            </address>
        </div>
        <hr>
        <div>
            <h4>{% trans "Payment method" %}:</h4>
            <p>
                {% if invoice.order %}
                {{invoice.order.cc_brand}} {% trans "ending in" %} ****
                {{invoice.order.last4}}<br>
                {{invoice.customer.user.email}}
                {% endif %}
            </p>
        </div>
        <hr>
        <div>
            <h4>{% trans "Invoice summary" %}</h4>
            {% if vm %}
                {% if line_items %}
                    <table>
                        <tr><th style="width: 35%">Product</th><th style="width: 20%">Period</th><th style="text-align: center; width: 10%">Qty</th><th align="center"  style="width: 10%; text-align: center;">Unit Price</th><th  style="width: 10%; text-align: right;">Total</th></tr>
                        {% for line_item in line_items %}
                        <tr class="border_bottom"><td>{% if line_item.description|length > 0 %}{{line_item.description}}{% elif line_item.stripe_plan.stripe_plan_name|length > 0 %}{{line_item.stripe_plan.stripe_plan_name}}{% else %}{{line_item.get_item_detail_str|safe}}{% endif %}</td><td>{{ line_item.period_start | date:'Y-m-d' }} &mdash; {{ line_item.period_end | date:'Y-m-d' }}</td><td align="center">{{line_item.quantity}}</td><td align="center">{{line_item.unit_amount_in_chf}}</td><td align="right">{{line_item.amount_in_chf|floatformat:2}}</td></tr>

                        {% endfor %}
                        <tr class="grand-total-padding"><td colspan="4">Grand Total</td><td align="right">{{total_in_chf|floatformat:2}}</td></tr>
                    </table>
                {% else %}
                    <p>
                        <strong>{% trans "Product" %}:</strong>&nbsp;
                        {% if vm.name %}
                        {{ vm.name }}
                        {% endif %}
                    </p>
                    <div class="row">
                        <div class="col-sm-6">
                            {% if period_start %}
                            <p>
                                <span>{% trans "Period" %}: </span>
                                <span>
                                                <span class="locale_date"
                                                      data-format="YYYY/MM/DD">{{ period_start|date:'Y-m-d h:i a' }}</span> - <span
                                        class="locale_date" data-format="YYYY/MM/DD">{{ period_end|date:'Y-m-d h:i a' }}</span>
                                            </span>
                            </p>
                            {% endif %}
                            <p>
                                <span>{% trans "Cores" %}: </span>
                                {% if vm.cores %}
                                <strong class="pull-right">{{vm.cores|floatformat}}</strong>
                                {% else %}
                                <strong class="pull-right">{{vm.cpu|floatformat}}</strong>
                                {% endif %}
                            </p>
                            <p>
                                <span>{% trans "Memory" %}: </span>
                                <strong class="pull-right">{{vm.memory}} GB</strong>
                            </p>
                            <p>
                                <span>{% trans "Disk space" %}: </span>
                                <strong class="pull-right">{{vm.disk_size}} GB</strong>
                            </p>
                        </div>
                        <div class="col-sm-12">
                            <hr class="thin-hr">
                        </div>
                        {% if vm.vat > 0 or vm.discount.amount > 0 %}
                        <div class="col-sm-6">
                            <div class="subtotal-price">
                                {% if vm.vat > 0 %}
                                <p>
                                    <strong>{% trans "Subtotal" %} </strong>
                                    <strong class="pull-right">{{vm.price|floatformat:2|intcomma}}
                                        CHF</strong>
                                </p>
                                <p>
                                    <small>{% trans "VAT" %} ({{ vm.vat_percent|floatformat:2|intcomma }}%)
                                    </small>
                                    <strong class="pull-right">{{vm.vat|floatformat:2|intcomma}} CHF</strong>
                                </p>
                                {% endif %}
                                {% if vm.discount.amount > 0 %}
                                <p class="text-primary">
                                    {%trans "Discount" as discount_name %}
                                    <strong>{{ vm.discount.name|default:discount_name }} </strong>
                                    <strong class="pull-right">- {{ vm.discount.amount }} CHF</strong>
                                </p>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <hr class="thin-hr">
                        </div>
                        {% endif %}
                        <div class="col-sm-6">
                            <p class="total-price">
                                <strong>{% trans "Total" %} </strong>
                                <strong class="pull-right">{% if vm.total_price %}{{vm.total_price|floatformat:2|intcomma}}{% else %}{{vm.price|floatformat:2|intcomma}}{% endif %}
                                    CHF</strong>
                            </p>
                        </div>
                    </div>
                {% endif %}
            {% else %}
            <p>
                <strong>{% trans "Product" %}:</strong>&nbsp;
                {{ product_name }}
            </p>
            <div class="row">
                <div class="col-sm-6">
                    <p>
                        <span>{% trans "Amount" %}: </span>
                        <strong class="pull-right">{{total_in_chf|floatformat:2|intcomma}}
                            CHF</strong>
                    </p>
                    {% if invoice.order.generic_payment_description %}
                    <p>
                        <span>{% trans "Description" %}: </span>
                        <strong class="pull-right">{{invoice.order.generic_payment_description}}</strong>
                    </p>
                    {% endif %}
                    {% if invoice.order.subscription_id %}
                    <p>
                        <span>{% trans "Recurring" %}: </span>
                        {% if invoice.order.generic_product.product_subscription_interval == 'year' %}
                            <strong class="pull-right">{{invoice.order.created_at|date:'d'|ordinal}} {% trans "of" %} {{invoice.order.created_at|date:'M'}}
                            {% trans "each year" %}</strong>
                        {% else %}
                            <strong class="pull-right">{{invoice.order.created_at|date:'d'|ordinal}}
                            {% trans "of every month" %}</strong>
                        {% endif %}
                    </p>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>
        <hr class="thin-hr">
    </div>
    <div class="order_detail_footer">
        <strong>ungleich glarus ag</strong>&nbsp;&nbsp;Bahnhofstrasse 1, 8783
        Linthal, Switzerland<br>
        www.datacenterlight.ch&nbsp;&nbsp;|&nbsp;&nbsp;info@datacenterlight.ch&nbsp;&nbsp;|&nbsp;&nbsp;<small>
        CHE-156.970.649 MWST
    </small>
    </div>
    {% endif %}
</div>

<div class="text-center" style="margin-bottom: 50px;">
    <a class="btn btn-vm-back" href="{% url 'hosting:invoices' %}">{% trans "BACK TO LIST" %}</a>
</div>

<script type="text/javascript">
    {% trans "Some problem encountered. Please try again later." as err_msg %}
    var create_vm_error_message = '{{err_msg|safe}}';
</script>
{%endblock%}

{% block js_extra %}
{% if invoice.order %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="{% static 'hosting/js/html2canvas.min.js' %}"></script>
<script src="{% static 'hosting/js/html2pdf.min.js' %}"></script>
<script src="{% static 'hosting/js/order.js' %}"></script>
{% endif %}
{% endblock js_extra %}