{% extends "matrixhosting/base.html" %}

{% load static i18n %}

{% block title %} Request Details {% endblock %}

{% block content %} 
<div class="container"> 
    <!-- Steps Progress bar -->
    <div class="row mt-3 mb-4">
        <div class="col-lg-12 mx-auto mb-4">
            <div class="row widget-steps">
                <div class="col-4 step active">
                  <div class="step-name">{%trans "Details" %}</div>
                  <div class="progress">
                    <div class="progress-bar"></div>
                  </div>
                  <a href="#" class="step-dot"></a> </div>
                <div class="col-4 step disabled">
                  <div class="step-name">{%trans "Confirm" %}</div>
                  <div class="progress">
                    <div class="progress-bar"></div>
                  </div>
                  <a href="#" class="step-dot"></a> </div>
                <div class="col-4 step disabled">
                  <div class="step-name">{%trans "Success" %}</div>
                  <div class="progress">
                    <div class="progress-bar"></div>
                  </div>
                  <a href="#" class="step-dot"></a> </div>
              </div>
        </div>
        <div class="col-lg-6">
            <form id="order_form" method="POST" action="" data-toggle="validator" role="form" method="post">
                {% csrf_token %}
            <div class="row bg-white shadow-sm rounded p-3 p-4 pb-sm-4 mb-2">
                <div class="container">
                    <h3 class="text-5 font-weight-400 mb-3 mb-sm-4">{% trans "Order Details"%}</h3>
                    <hr class="mx-n3 mb-4">
                            {% if details_form.non_field_errors %}
                            <div class="p-2 my-4">
                            {{ details_form.non_field_errors }}
                            </div>
                        {% endif %}
                            <div class="row">
                                <div class="col-12 col-sm-6">
                                    <div class="form-group">
                                        {{details_form.matrix_domain}}
                                        {{ details_form.matrix_domain.errors }}                                
                                    </div>
                                    <div class="form-group">
                                        {{details_form.homeserver_domain}}
                                        {{ details_form.homeserver_domain.errors }}                                
                                    </div>
                                    <div class="form-group">
                                        {{details_form.webclient_domain}}
                                        {{ details_form.webclient_domain.errors }}                                
                                    </div>
                                    <div class="form-check custom-control custom-checkbox">
                                        {{details_form.is_open_registration}}
                                        <label class="custom-control-label" for="{{ details_form.is_open_registration.id_for_label}}">{% trans "Is Open registration possible?" %}</label>
                                        {{ details_form.is_open_registration.errors }} 
                                    </div>
                                    {{details_form.pricing_name.as_hidden}}
                                </div>                                    
                                <div class="col-12 col-sm-6">
                                    <div class="form-group px-n4">
                                        <div class="input-group">
                                            <div class="input-group-prepend"><i class="fa fa-minus-circle left text-5 p-3" data-minus="cores" aria-hidden="true"></i></div>
                                            <input class="input-price select-number form-control" type="number" min="1" max="48" id="cores" step="1" name="cores"
                                            {% if details_form.cores.value != None %}value="{{ details_form.cores.value }}"{% endif %} data-error="{% trans 'Please enter a value in range 1 - 48.' %}" required>
                                            <div class="input-group-append"> 
                                                <span class="input-group-text">Core</span>
                                                <i class="fa fa-plus-circle right text-5 p-3" data-plus="cores" aria-hidden="true"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group px-n4">
                                        <div class="input-group">
                                            <div class="input-group-prepend"><i class="fa fa-minus-circle left text-5 p-3" data-minus="memory" aria-hidden="true"></i></div>
                                            <input id="memory" class="input-price select-number form-control" type="number" min="2" max="200" name="memory" 
                                            {% if details_form.memory.value != None %}value="{{ details_form.memory.value }}"{% endif %} data-error="{% blocktrans with min_ram=min_ram %}Please enter a value in range {{min_ram}} - 200.{% endblocktrans %}" required step="1">
                                            <div class="input-group-append"> 
                                                <span class="input-group-text">{% trans "RAM" %}</span>
                                                <i class="fa fa-plus-circle right text-5 p-3" data-plus="memory" aria-hidden="true"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group px-n4">
                                        <div class="input-group">
                                            <div class="input-group-prepend"><i class="fa fa-minus-circle left text-5 p-3" data-minus="storage" aria-hidden="true"></i></div>
                                            <input id="storage" class="input-price select-number form-control" type="number" min="100" max="10000" step="100"
                                                name="storage" {% if details_form.storage.value != None %}value="{{ details_form.storage.value }}"{% endif %} data-error="{% trans 'Please enter a value in range 100 - 10000.' %}" required>
                                            <div class="input-group-append"> 
                                                <span class="input-group-text">{% trans "GB" %}</span>
                                                <i class="fa fa-plus-circle right text-5 p-3" data-plus="storage" aria-hidden="true"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                </div>
            </div>
            <div class="row bg-white shadow-sm rounded p-3 p-4 pb-sm-2 mb-2">
                <div class="">
                    <h3 class="text-5 font-weight-400 mb-3 mb-sm-4">{%trans "Billing Address"%}</h3>
                    <hr class="mx-n3 mb-4">
                    {% for message in messages %}
                        {% if 'vat_error' in message.tags %}
                        <ul class="list-unstyled"><li>
                            {{ message|safe }}
                        </li></ul>
                        {% endif %}
                    {% endfor %}
                        {% if billing_address_form.non_field_errors %}
                            <div class="p-2 my-4">
                            {{ billing_address_form.non_field_errors }}
                            </div>
                        {% endif %}
                        <div class="row">
                            <div class="col-12">
                              <div class="form-group">
                                <label for="{{ billing_address_form.full_name.id_for_label}}">{% trans "Full Name" %}</label>
                                {{billing_address_form.full_name}}
                                {{ billing_address_form.full_name.errors }}
                              </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                  <label for="{{ billing_address_form.street.id_for_label}}">{% trans "Street" %}</label>
                                  {{billing_address_form.street}}
                                  {{ billing_address_form.full_name.errors }}
                                </div>
                            </div>
                            <div class="col-12 col-sm-6">
                                <div class="form-group">
                                  <label for="{{ billing_address_form.city.id_for_label}}">{% trans "City" %}</label>
                                  {{billing_address_form.city}}
                                  {{ billing_address_form.city.errors }}                                
                                </div>
                            </div>
                            <div class="col-12 col-sm-6">
                                <div class="form-group">
                                  <label for="{{ billing_address_form.country.id_for_label}}">{% trans "Country" %}</label>
                                  {{billing_address_form.country}}
                                  {{ billing_address_form.country.errors }}                                
                                </div>
                            </div>
                            <div class="col-12 col-sm-6">
                                <div class="form-group">
                                  <label for="{{ billing_address_form.postal_code.id_for_label}}">{% trans "Zip Code" %}</label>
                                  {{billing_address_form.postal_code}}
                                  {{ billing_address_form.postal_code.errors }}                                
                                </div>
                            </div>
                            <div class="col-12 col-sm-6">
                                <div class="form-group">
                                  <label for="{{ billing_address_form.vat_number.id_for_label}}">{% trans "VAT Number" %}</label>
                                  {{billing_address_form.vat_number}}
                                  {{ billing_address_form.vat_number.errors }}                                
                                </div>
                            </div>
                            {% for field in billing_address_form %}
                                {% if field.html_name in 'active,owner' %}
                                    {{ field.as_hidden }}
                                {% endif %}
                            {% endfor %}
                        </div>
                </div>
            </div>
        </form>
        </div>
        <div class="col-lg-6">
            <div class="row bg-white shadow-sm rounded p-4 ml-2 mb-2">
                <div class="container">
                    <h3 class="text-5 font-weight-400 mb-3 mb-sm-4">{% trans "Payment Details"%}</h3>
                    <hr class="mx-n3 mb-3">
                    <div id="acount_balance">
                        <div class="row align-items-center flex-row">
                            <div class="col col-sm-6"><div class="text-14 text-light"><i class="fas fa-wallet"></i></div></div>
                            <div class="col col-sm-6 text-right text-2">
                                <h3 class="text-6 font-weight-400 {% if balance >= 0 %}text-success{%else%}text-danger{%endif%}">{{ balance }} CHF</h3>
                                <span class="text-muted text-3 opacity-8">{% trans "Available Balance"%}</span>
                            </div>
                        </div> 
                        <hr class="mt-1 mx-n3">
                    </div>
                    <div class="row align-items-center flex-row">
                        <div class="col col-lg-6">
                            <h4 class="text-3 font-weight-400">{% trans "Total To Pay"%}</h4>
                            <small>
                                ({% if matrix_vm_pricing.vat_inclusive %}{%trans "including VAT" %}{% else %}{%trans "excluding VAT" %}{% endif %})
                            </small>
                            {% if matrix_vm_pricing.discount_amount %}
                                <div class="text-muted"><span class="text-2">Discount {{matrix_vm_pricing.discount_amount}}</span><span class="text-2 p-1">CHF</span></div>
                        {% endif %}
                        </div>
                        <div class="col col-lg-6">
                            <div class="float-right"><span class="text-4">{{request.session.pricing.total|floatformat}}</span><span class="text-2 p-1">CHF</span></div>
                        </div>
                    </div>
                    <hr class="mt-2 mx-n3">
                    {% with cards_len=cards|length %}
                        <p class="text-muted">
                            {% if cards_len > 0 %}
                            {% blocktrans %}Please select one of the cards that you used before or fill in your credit card information below.{% endblocktrans %}
                            {% else %}
                            {% blocktrans %}Please fill in your credit card information below.{% endblocktrans %}
                            {% endif %}
                        </p>
                        <div>
                            {% for card in cards %}
                                <div class="credit-card-info">
                                    <div class="form-check py-2 custom-control custom-radio">
                                        <input id="card-{{card.id}}" name="payment_card" class="custom-control-input" type="radio" value="{{card.id}}">
                                        <label class="custom-control-label" for="card-{{card.id}}">
                                            <div class="featured-box style-1">
                                                <div class="featured-box-icon text-primary text-9"> <i class="fab fa-cc-visa"></i> </div>
                                                <div>
                                                    <h6 class="mb-0"> ***** {{card.last4}}</h6>
                                                    <p class="text-1 mb-0">{% trans "Expiry:" %} {{card.month}}/{{card.year}}</p>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            {% endfor %}
                            {% if cards_len > 0 %}
                            <div class="form-check py-2 custom-control custom-radio" data-toggle="collapse" data-target="#newcard">
                                <input id="new-card" name="payment_card" class="custom-control-input" type="radio" value="new">
                                <label class="custom-control-label" for="new-card"><h6 class="mb-0">{% trans "Add New Card" %}</h6></label>
                            </div>
                            <div id="newcard" class="collapse">
                                <div class="card-details-box p-4 bg-light">
                                    {% include "matrixhosting/includes/_card.html" %}
                                </div>
                            </div>
                            {% else%}
                                {% include "matrixhosting/includes/_card.html" %}
                            {% endif %}
                        </div>
                    {% endwith %}
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %} 

{% block js_extra %}
{% if stripe_key %}
        {% get_current_language as LANGUAGE_CODE %}
        <script type="text/javascript">
            window.processing_text = '{%trans "Processing" %}';
            window.enter_your_card_text = '{%trans "Enter your credit card number" %}';

            (function () {
                window.stripeKey = "{{stripe_key}}";
                window.current_lan = "{{LANGUAGE_CODE}}";
            })();
        </script>
    {%endif%}

    <!-- jQuery -->
    <script src="https://js.stripe.com/v3/"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
    <!-- Custom JS -->
    <script type="text/javascript" src="{% static 'matrixhosting/js/payment.js' %}"></script> 
{% endblock js_extra %}