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


{% block content %}
<div id="order-detail{{invoice.pk}}" 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.pk}}"><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 %}
                    {{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>
                {{user.email}}
                {% endif %}
            </p>
        </div>
        <hr>
        <div>
            <h4>{% trans "Invoice summary" %}</h4>
            {% if vm %}
            <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">{{total_in_chf}} CHF</strong>
                    </p>
                </div>
            </div>
            {% 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>
                        <strong class="pull-right">{{invoice.order.created_at|date:'d'|ordinal}}
                            {% trans "of every month" %}</strong>
                    </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 %}