{% 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 disabled">
                  <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 active">
                  <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 ">
                  <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-md-9 col-lg-8 col-xl-7 mx-auto">
            <div id="order-detail{{order.pk}}" class="bg-white shadow-sm rounded p-4 mb-4">
                {% if messages %}
                    <div class="alert alert-warning">
                        {% for message in messages %}
                            <span>{{ message }}</span>
                        {% endfor %}
                    </div>
                {% endif %}
                {% if not error %}
                    <div class="order-details">
                        <div>
                            <address>
                                <h5>{% trans "Billed To" %}</h5>
                                <p>
                                  {% with request.session.billing_address_data as billing_address %}
                                      {{billing_address.full_name}}<br>
                                      {{billing_address.street}}, {{billing_address.postal_code}}<br>
                                      {{billing_address.city}}, {{billing_address.country}}
                                      {% if billing_address.vat_number %}
                                          <br/>{% trans "VAT Number" %} {{billing_address.vat_number}}
                                          {% if pricing.vat_country != "ch" and pricing.vat_validation_status != "not_needed" %}
                                                {% if pricing.vat_validation_status == "verified" %}
                                                    <span class="fa fa-fw fa-check-circle" aria-hidden="true" title='{% trans "Your VAT number has been verified" %}'></span>
                                                {% else %}
                                                    <span class="fa fa-fw fa-info-circle" aria-hidden="true" title='{% trans "Your VAT number is under validation. VAT will be adjusted, once the validation is complete." %}'></span>
                                                {% endif %}
                                          {% endif %}
                                      {% endif %}
                                  {% endwith %}
                                </p>
                            </address>
                        </div>
                        <div class="row align-items-center flex-row">
                            <div class="col col-sm-6">
                                <address>
                                    <h5>{% trans "Billed To" %}</h5>
                                    <p>
                                      {% with request.session.billing_address_data as billing_address %}
                                          {{billing_address.full_name}}<br>
                                          {{billing_address.street}}, {{billing_address.postal_code}}<br>
                                          {{billing_address.city}}, {{billing_address.country}}
                                          {% if billing_address.vat_number %}
                                              <br/>{% trans "VAT Number" %} {{billing_address.vat_number}}
                                              {% if pricing.vat_country != "ch" and pricing.vat_validation_status != "not_needed" %}
                                                    {% if pricing.vat_validation_status == "verified" %}
                                                        <span class="fa fa-fw fa-check-circle" aria-hidden="true" title='{% trans "Your VAT number has been verified" %}'></span>
                                                    {% else %}
                                                        <span class="fa fa-fw fa-info-circle" aria-hidden="true" title='{% trans "Your VAT number is under validation. VAT will be adjusted, once the validation is complete." %}'></span>
                                                    {% endif %}
                                              {% endif %}
                                          {% endif %}
                                      {% endwith %}
                                    </p>
                                </address>
                            </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>
                        <div>
                            <h5>{% trans "Order summary" %}</h5>
                                    <p>
                                        <strong>{% trans "Product" %}:</strong>&nbsp;
                                        Matrix Chat Hosting
                                    </p>
                                    <div class="row">
                                        <div class="col-sm-9">
                                            <p>
                                                <span>{% trans "Cores" %}: </span>
                                                <strong class="pull-right">{{order.cores}}</strong>
                                            </p>
                                            <p>
                                                <span>{% trans "Memory" %}: </span>
                                                <strong class="pull-right">{{order.memory}} GB</strong>
                                            </p>
                                            <p>
                                                <span>{% trans "Disk space" %}: </span>
                                                <strong class="pull-right">{{order.storage}} GB</strong>
                                            </p>
                                        </div>
                                        <div class="col-sm-12">
                                            <hr class="thin-hr">
                                        </div>
                                        <div class="col-sm-9">
                                            <p>
                                                <strong class="text-uppercase">{% trans "Price Before VAT" %}</strong>
                                                <strong class="pull-right">{{pricing.subtotal|floatformat:2}} CHF</strong>
                                            </p>
                                        </div>
                                        <div class="col-sm-12">
                                            <hr class="thin-hr">
                                        </div>
                                        <div class="col-sm-9">
                                            <div class="row">
                                              <div class="col-md-4 col-sm-4 col-xs-4">
                                                <p><span></span></p>
                                              </div>
                                              <div class="col-md-3 col-sm-3 col-xs-4">
                                                <p class="text-right"><strong class="cmf-ord-heading">{% trans "Pre VAT" %}</strong></p>
                                              </div>
                                              <div class="col-md-5 col-sm-5 col-xs-4 header-no-left-padding">
                                                <p class="text-right"><strong class="cmf-ord-heading">{% trans "With VAT for" %} {{pricing.vat_country}} ({{pricing.vat_percent}}%)</strong></p>
                                              </div>
                                            </div>
                                            <div class="row">
                                              <div class="col-md-4 col-sm-4 col-xs-4">
                                                <p><span>Subtotal</span></p>
                                              </div>
                                              <div class="col-md-3 col-sm-3 col-xs-4">
                                                <p><span class="pull-right" >{{pricing.subtotal|floatformat:2}} CHF</span></p>
                                              </div>
                                              <div class="col-md-5 col-sm-5 col-xs-4">
                                                <p><span class="pull-right">{{pricing.price_with_vat|floatformat:2}} CHF</span></p>
                                              </div>
                                            </div>
                                            {% if pricing.discount.amount > 0 %}
                                            <div class="row">
                                              <div class="col-md-4 col-sm-4 col-xs-4">
                                                <p><span>{{pricing.discount.name}}</span></p>
                                              </div>
                                              <div class="col-md-3 col-sm-3 col-xs-4">
                                                <p><span class="pull-right">-{{pricing.discount.amount|floatformat:2}} CHF</span></p>
                                              </div>
                                              <div class="col-md-5 col-sm-5 col-xs-4">
                                                <p><span class="pull-right">-{{pricing.discount.amount_with_vat|floatformat:2}} CHF</span></p>
                                              </div>
                                            </div>
                                            {% endif %}
                                        </div>
                                        <div class="col-sm-12">
                                            <hr class="thin-hr">
                                        </div>
                                        <div class="col-sm-9">
                                            <div class="row">
                                              <div class="col-md-4 col-sm-4 col-xs-4">
                                                <p><strong>Total</strong></p>
                                              </div>
                                              <div class="col-md-3 col-sm-3 col-xs-4">
                                                <p><strong class="pull-right">{{pricing.subtotal_after_discount|floatformat:2}} CHF</strong></p>
                                              </div>
                                              <div class="col-md-5 col-sm-5 col-xs-4">
                                                <p><strong class="pull-right">{{pricing.price_after_discount_with_vat|floatformat:2}} CHF</strong></p>
                                              </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <hr class="thin-hr">
                                        </div>
                                        <div class="col-sm-9">
                                                <strong class="text-uppercase align-center">{% trans "Your Price in Total" %}</strong>
                                                <strong class="total-price pull-right">{{pricing.total_price|floatformat:2}} CHF</strong>
                                        </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-12">
                                <div class="dcl-place-order-text">{% blocktrans with vm_total_price=vm.total_price|floatformat:2 %}By clicking "Place order" you agree to our <a href="">Terms of Service</a> and this plan will charge your credit card account with {{ vm_total_price }} CHF/month{% endblocktrans %}.</div>
                            </div>
                            <div class="col-sm-12 order-confirm-btn text-right">
                                <button class="btn choice-btn btn-primary" id="btn-create-vm" data-toggle="modal" data-target="#createvm-modal">
                                  {% trans "Confirm Order" %}
                                </button>
                            </div>
                        </div>
                    </form>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<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"><h5 class="createvm-modal-title">{% trans "Order Processing..." %}</h5>
       </div>
       <div class="modal-body">
           <div class="row align-items-center flex-row">
                <div class="modal-icon col col-sm-12 text-center">
                    <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
                    <span class="sr-only">{% trans "Processing..." %}</span>
                </div>
                <div class="modal-text col col-sm-12 text-center" id="createvm-modal-body">
                    {% trans "Hold tight, we are processing your request" %}
                </div>
           </div>
           <div class="modal-footer mt-4">
               <a id="createvm-modal-done-btn" class="btn btn-success btn-ok btn-wide sr-only sr-only-focusable" href="">{% trans "OK" %}</a>
               <button id="createvm-modal-close-btn" type="button" class="btn btn-danger btn-ok btn-wide sr-only sr-only-focusable" data-dismiss="modal" aria-label="create-vm-close">{% trans "Close" %}</button>
           </div>
       </div>
   </div>
</div>
</div>
{% endblock %} 

{% block js_extra %}
{% if stripe_key %}
        {% get_current_language as LANGUAGE_CODE %}
        <script type="text/javascript">
            window.paymentIntentSecret = "{{payment_intent_secret}}";
            var create_vm_error_message = 'Some problem encountered. Please try again later';
            var pm_id = '{{id_payment_method}}';
            var error_url = '{{ error_msg.redirect }}';
            var success_url = '{{ success_msg.redirect }}';
            window.stripeKey = "{{stripe_key}}";
            window.isSubscription = ("{{is_subscription}}" === 'true');
        </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/order.js' %}"></script> 
{% endblock js_extra %}