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

{% load static compress i18n %}

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

{% block content %} 
    <!-- 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 complete">
                <div class="step-name">{%trans "Details" %}</div>
                <div class="progress">
                  <div class="progress-bar"></div>
                </div>
                <a href="{% url 'nextcloud:payment' %}" 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 container">
                        <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> 
                        <div class="col-sm-12"><hr class="mt-0"></div>
                        <div class="row text-4 mb-4 text-center">NextCloud</div>
                        <div class="row">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered">
                                <tbody>
                                    <tr>
                                    <td>{% trans "Cores" %}</td>
                                    <td>{% trans "Memory" %}</td>
                                    <td>{% trans "Disk space" %}</td>
                                    </tr>
                                    <tr>
                                    <td>{{order.cores}}</td>
                                    <td>{{order.memory}} GB</td>
                                    <td>{{order.storage}} GB</td>
                                    </tr>
                                </tbody>
                                </table>
                            </div>  
                        </div>                                 
                        <div class="row">
                            <div class="col-sm-6">
                            </div>
                            <div class="col-sm-6">
                                <div class="row text-right">
                                  <div class="col-md-6 col-sm-6 col-xs-6">
                                    <p><strong>Subtotal</span></strong>
                                  </div>
                                  <div class="col-md-6 col-sm-6 col-xs-6">
                                    <p><strong class="pull-right" >{{pricing.subtotal|floatformat:2}} CHF</strong></p>
                                  </div>
                                </div>
                                {% if pricing.discount.amount > 0 %}
                                <div class="row text-right">
                                  <div class="col-md-6 col-sm-6 col-xs-6">
                                    <p><span>{{pricing.discount.name }}</span></p>
                                  </div>
                                  <div class="col-md-6 col-sm-6 col-xs-6">
                                    <p><span>-{{pricing.discount.amount|floatformat:2}} CHF</span></p>
                                  </div>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-sm-12"><hr class="mt-0"></div>
                        <div class="row">
                            <div class="col-sm-6"></div>
                            <div class="col-sm-6">
                                <div class="row text-right">
                                  <div class="col-md-6 col-sm-6 col-xs-6">
                                    <p><strong>{% trans "" %}</strong></p>
                                  </div>
                                  <div class="col-md-6 col-sm-6 col-xs-6">
                                    <p><strong class="pull-right">{{pricing.subtotal_after_discount|floatformat:2}} CHF</strong></p>
                                  </div>
                                </div>
                                <div class="row text-right">
                                    <div class="col-md-6 col-sm-6 col-xs-6">
                                      <p><span>{% trans "VAT for" %} {{pricing.vat_country}} ({{pricing.vat_percent}}%)</span></p>
                                    </div>
                                    <div class="col-md-6 col-sm-6 col-xs-6">
                                      <p><span class="pull-right" > {{pricing.vat_amount}} CHF</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6"></div>
                            <div class="col-sm-6">
                                <div class="row text-right">
                                    <div class="col-md-6 col-sm-6 col-xs-6">
                                      <p><strong>{% trans "Total" %}</strong></p>
                                    </div>
                                    <div class="col-md-6 col-sm-6 col-xs-6">
                                      <p><strong class="pull-right">{{pricing.total|floatformat:2}} CHF</strong></p>
                                    </div>
                                </div>                                                
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
      </div>
      <div class="col-md-4 col-lg-4 col-xl-5 mx-auto">
        <div class="row bg-white shadow-sm rounded p-3 p-4 pb-sm-4 mb-2">
          <hr>
          <form id="virtual_machine_create_form" action="" method="POST">
            {% csrf_token %}
            <div class="row">
                <div class="col-12 col-sm-12">
                  <div class="form-group">
                    <div class="input-group">
                      {{domains_form.subdomain}}
                      <div class="input-group-append">
                        <select data-style="custom-select bg-transparent border-0" name="main_domain" class="form-control" id="id_main_domain">
                        <option value="0co2.cloud">.0co2.cloud</option>
                      
                        <option value="glarner.cloud">.glarner.cloud</option>
                      
                      </select></div>
                    </div>
                      {{ domains_form.subdomain.errors }}    
                      {% if domains_form.non_field_errors %}
                        <div class="my-2">
                        {{ domains_form.non_field_errors }}
                        </div>
                      {% endif %}                            
                  </div>
                  <hr>
                </div> 
                {% if stripe_deposit_amount > 0  %}
                <div class="col-sm-12">
                  By clicking "Confirm order" you agree to charge your active credit card with <strong>{{stripe_deposit_amount}} CHF</strong> to handle the wallet deficit.
                <hr>
                </div>
                {% endif %}
                <div class="col-sm-12">
                    By clicking "Confirm order" you agree to our <a href="">Terms of Service</a> and this plan will charge your account balance with {{pricing.total|floatformat:2}} CHF
                </div>
                <div class="col-sm-12 order-confirm-btn mt-2 text-right">
                    <button class="btn choice-btn btn-primary" id="btn-create-vm" type="submit">
                      {% trans "Confirm Order" %}
                    </button>
                </div>
            </div>
        </form>
        </div>
      </div>
    </div>
{% endblock %} 

{% block js_extra %}
<script type="text/javascript">
  var error_url = '{{ error_msg.redirect }}';
  var success_url = '{{ success_msg.redirect }}';
</script>
    <!-- jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
    <!-- Custom JS -->
{% endblock js_extra %}