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

{% load static compress i18n %}

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

{% block content %} 
    <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 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>
                                    {{details_form.pricing_name.as_hidden}}
                                </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 id="balance" class="text-6 font-weight-400 {% if balance >= 0 %}text-success{%else%}text-danger{%endif%}" data-balance='{{ balance }}'>{{ 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-12">
                            <p>{% trans "Setup Fees"%} <span class="float-right">{{vm_pricing.set_up_fees}} CHF</span></p>
                            <p>{% trans "Recurring Price"%} <span id="recurring_price" class="float-right">{{request.session.pricing.recurring_price}} CHF</span></p>
                            {% if vm_pricing.discount_amount %}
                                <p>{% trans "Discount"%} <span class="float-right text-danger"> - {{vm_pricing.discount_amount}} CHF</span></p>
                            {% endif %}
                            <hr>
                            <p>{% trans "VAT" %}<span class="float-right" id="vat"> {{request.session.pricing.vat_amount}} CHF</span></p>
                            <p class="text-4 font-weight-500">{% trans "Total To Pay"%}
                                <small>
                                {% if vm_pricing.vat_inclusive %}({%trans "including VAT" %}){% endif %}
                                </small> 
                                <span id="total" class="float-right">{{request.session.pricing.total}} CHF</span>
                            </p>
                        </div>
                    </div>
                    <hr class="mt-2 mx-n3">
                    <div id="cards-section" {% if not show_cards %}style="display:none;"{% endif %}>
                        {% with cards_len=cards|length %}
                        <p class="text-muted">
                            {% if cards_len > 0 %}
                            {% blocktrans %}There is not enough balance in your account to proceed with this order. You can select a card or add a new card to fill up your account balance to proceed with the order.{% endblocktrans %}
                            {% else %}
                            {% blocktrans %}There is not enough balance in your account to proceed with this order. 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">
                                <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 class="text-right">
                                <button id="checkout-btn" class="btn btn-primary btn-wide" style="display:none;" type="submit" name="payment-button">{%trans "Checkout" %}</button>
                            </div>
                            <div id="newcard" style="display:none;">
                                <div class="card-details-box p-4 bg-light">
                                    {% include "uncloud_pay/includes/_card.html" %}
                                </div>
                            </div>
                            {% else%}
                                {% include "uncloud_pay/includes/_card.html" %}
                            {% endif %}
                        </div>
                    {% endwith %}
                    </div>
                    <div id="has-enough-balance" {% if show_cards %}style="display:none;"{% endif %}>
                        <p class="text-muted">
                            {% blocktrans %}You can use your account balance to make the payment. Press Continue to select the domain settings. You can review and confirm your order and payment in the next page.{% endblocktrans %}
                        </p>
                        <div class="text-right">
                            <button id="continue-btn" class="btn btn-primary btn-wide">{%trans "Continue" %}</button>
                        </div>
                    </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}}";
                {% if show_cards %}
                    window.hasCreditcard = true;
                {% endif %}
            })();
        </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 -->
    {% compress js %}
        <script type="text/javascript" src="{% static 'nextcloud/js/payment.js' %}"></script> 
    {% endcompress %}
{% endblock js_extra %}