{% extends "hosting/base_short.html" %}
{% load staticfiles bootstrap3 i18n %}

{% block css_extra %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paymentfont/1.1.2/css/paymentfont.min.css"/>
{% endblock css_extra %}

{% block content %}
    <div class="dashboard-container wide">
        <div class="dashboard-container-head">
            <h1 class="dashboard-title-thin"><img src="{% static 'hosting/img/dashboard_settings.svg' %}" class="un-icon wide"> {% trans "My Settings" %}</h1>
        </div>
        <!-- Credit card form -->
        <div class="settings-container">
            <div class="row">
                <div class="col-sm-5 col-md-6  billing dcl-billing">
                    <h3>{%trans "Billing Address"%}</h3>
                    <hr>
                    <form role="form" id="billing-form" method="post" action="" novalidate>
                        {% for field in form %}
                            {% csrf_token %}
                            {% bootstrap_field field show_label=False type='fields' bound_css_class='' %}
                        {% endfor %}
                        <div class="form-group text-right">
                            <button type="submit" class="btn btn-vm-contact btn-wide">{% trans "UPDATE" %}</button>
                        </div>
                    </form>
                </div>
                <div class="col-sm-7 col-md-6 creditcard-box dcl-creditcard">
                    <h3>{%trans "Credit Card"%}</h3>
                    <hr>
                    <div>
                        {% if credit_card_data.last4 %}
                            <div class="credit-card-details">
                                <h5 class="billing-head">{% trans "Credit Card" %}</h5>
                                <h5 class="membership-lead">{% trans "Last" %} 4: *****{{credit_card_data.last4}}</h5>
                                <h5 class="membership-lead">{% trans "Type" %}: {{credit_card_data.cc_brand}}</h5>
                                {% comment %}
                                <div class="credit-card-details-opt">
                                    <div class="row">
                                        <div class="col-xs-6">
                                            <a class="caps-link" href=""><img src="{% static 'hosting/img/delete.svg' %}" class="svg-img">{% trans "REMOVE CARD" %}</a>
                                        </div>
                                        <div class="col-xs-6 text-right">
                                            <a class="btn btn-vm-contact" href="">{% trans "EDIT CARD" %}</a>
                                        </div>
                                    </div>
                                </div>
                                {% endcomment %}
                            </div>
                        {% else %}
                            <div class="no-cards">
                                <h4>{% trans "No Credit Cards Added" %}</h4>
                                <p>{% blocktrans %}We are using <a href="https://stripe.com">Stripe</a> for payment and do not store your information in our database.{% endblocktrans %}</p>
                            </div>

                            {% comment %}
                                <h4>{% trans "Add a new Card." %}</h4>
                                <p style="margin-bottom: 15px;">
                                    {% blocktrans %}Please fill in your credit card information below. We are using <a href="https://stripe.com" target="_blank">Stripe</a> for payment and do not store your information in our database.{% endblocktrans %}
                                </p>
                                <form action="" id="payment-form-new" class="credit-card-form" method="POST">
                                    <input type="hidden" name="token"/>
                                    <div class="credit-card-goup">
                                       <div class="card-element card-number-element">
                                           <label>{%trans "Card Number" %}</label>
                                           <div id="card-number-element" class="field my-input"></div>
                                       </div>
                                       <div class="row">
                                           <div class="col-xs-6 col-sm-4 card-element card-expiry-element">
                                               <label>{%trans "Expiry Date" %}</label>
                                               <div id="card-expiry-element" class="field my-input"></div>
                                           </div>
                                           <div class="col-xs-6 col-sm-4 col-sm-offset-4 card-element card-cvc-element">
                                               <label>{%trans "CVC" %}</label>
                                               <div id="card-cvc-element" class="field my-input"></div>
                                           </div>
                                       </div>
                                       <div class="card-element brand">
                                           <label>{%trans "Card Type" %}</label>
                                           <i class="pf pf-credit-card" id="brand-icon"></i>
                                       </div>
                                    </div>
                                    <div id="card-errors" role="alert"></div>
                                    <div>
                                        {% if not messages and not form.non_field_errors %}
                                            <p class="card-warning-content">
                                                {% blocktrans %}You are not making any payment here.{% endblocktrans %}
                                            </p>
                                        {% endif %}
                                        <div id='payment_error'>
                                            {% for message in messages %}
                                                {% if 'failed_payment' or 'make_charge_error' in message.tags %}
                                                 <ul class="list-unstyled"><li>
                                                     <p class="card-warning-content card-warning-error">{{ message|safe }}</p>
                                                </li></ul>
                                                {% endif %}
                                            {% endfor %}

                                            {% for error in form.non_field_errors %}
                                                <p class="card-warning-content card-warning-error">
                                                    {{ error|escape }}
                                                </p>
                                            {% endfor %}
                                        </div>
                                        <div class="row">
                                            <div class="col-xs-6 col-xs-offset-6 text-right">
                                                <button class="btn btn-success stripe-payment-btn" type="submit">{%trans "Submit" %}
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <div style="display:none;">
                                        <p class="payment-errors"></p>
                                    </div>
                                </form>
                            {% endcomment %}
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% comment %}
    <!-- stripe key data -->
    {% 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%}

    {% if credit_card_data.last4 and credit_card_data.cc_brand %}
        <script type="text/javascript">
            (function () {
                window.hasCreditcard = true;
            })();
        </script>
    {%endif%}
    {% endcomment %}
{%endblock%}