{% extends "datacenterlight/base_hosting.html" %}
{% load staticfiles bootstrap3 i18n custom_tags humanize %}

{% block content %}
<div id="order-detail{{order.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>
        </div>
        <div class="order-details">
            <p>
                <strong>{% trans "Date" %}:</strong>
                <span class="locale_date">
                    {% now "Y-m-d h:i a" %}
                </span>
            </p>
            <hr>
            <div>
                <address>
                    <h4>{% trans "Billed to" %}:</h4>
                    <p>
                      {% with request.session.billing_address_data as billing_address %}
                          {{billing_address.cardholder_name}}<br>
                          {{billing_address.street_address}}, {{billing_address.postal_code}}<br>
                          {{billing_address.city}}, {{billing_address.country}}
                      {% endwith %}
                    </p>
                </address>
            </div>
            <hr>
            <div>
                <h4>{% trans "Payment method" %}:</h4>
                <p>
                    {{cc_brand|default:_('Credit Card')}} {% trans "ending in" %} ****{{cc_last4}}<br>
                    {{request.user.email}}
                </p>
            </div>
            <hr>
            <div>
                <h4>{% trans "Order summary" %}</h4>
                <p>
                    <strong>{% trans "Product" %}:</strong>&nbsp;
                    {{ request.session.template.name }}
                </p>
                <div class="row">
                    <div class="col-sm-6">
                        <p>
                            <span>{% trans "Cores" %}: </span>
                            <strong class="pull-right">{{vm.cpu|floatformat}}</strong>
                        </p>
                        <p>
                            <span>{% trans "Memory" %}: </span>
                            <strong class="pull-right">{{vm.memory|intcomma}} GB</strong>
                        </p>
                        <p>
                            <span>{% trans "Disk space" %}: </span>
                            <strong class="pull-right">{{vm.disk_size|intcomma}} 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 class="text-lg">{% 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">{{vm.total_price|floatformat:2|intcomma}} CHF</strong>
                        </p>
                    </div>
                </div>
            </div>
            <hr class="thin-hr">
        </div>
        <form id="virtual_machine_create_form" action="" method="POST">
            {% csrf_token %}
            <div class="row">
                <div class="col-sm-8">
                    <div class="dcl-place-order-text">{% blocktrans with vm_total_price=vm.total_price|floatformat:2|intcomma %}By clicking "Place order" this plan will charge your credit card account with {{vm_total_price}} CHF/month{% endblocktrans %}.</div>
                </div>
                <div class="col-sm-4 order-confirm-btn text-right">
                    <button class="btn choice-btn" id="btn-create-vm" data-toggle="modal" data-target="#createvm-modal">
                      {% trans "Place order" %}
                    </button>
                </div>
            </div>
        </form>
    {% endif %}
</div>


<!-- Create VM Modal -->
<div class="modal fade" id="createvm-modal" tabindex="-1" role="dialog"
     aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            </div>
            <div class="modal-body">
                <div class="modal-icon">
                    <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
                    <span class="sr-only">{% trans "Processing..." %}</span>
                </div>
                <h4 class="modal-title" id="createvm-modal-title"></h4>
                <div class="modal-text" id="createvm-modal-body">
                    {% trans "Hold tight, we are processing your request" %}
                </div>
                <div class="modal-footer">
                    <a id="createvm-modal-done-btn" class="btn btn-success btn-ok btn-wide hide" href="{% url 'hosting:virtual_machines' %}">{% trans "OK" %}</a>
                    <button id="createvm-modal-close-btn" type="button" class="btn btn-danger btn-ok btn-wide hide" data-dismiss="modal" aria-label="create-vm-close">{% trans "Close" %}</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- / Create VM Modal -->

<script type="text/javascript">
    {% trans "Some problem encountered. Please try again later." as err_msg %}
    var create_vm_error_message = '{{err_msg|safe}}';
    window.onload = function () {
        var locale_dates = document.getElementsByClassName("locale_date");
        var formats = ['YYYY-MM-DD hh:mm a']
        var i;
        for (i = 0; i < locale_dates.length; i++) {
            var oldDate = moment.utc(locale_dates[i].textContent, formats);
            var outputFormat = locale_dates[i].getAttribute('data-format') || oldDate._f;
            locale_dates[i].innerHTML = oldDate.local().format(outputFormat);
            locale_dates[i].className += ' done';
        }
    };
</script>
{%endblock%}