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

{% load static i18n compress %}

{% block title %} Payment Methods {% endblock %}

{% block content %} 
    <div class="bg-white shadow-md rounded p-4 my-4">
        <div class="row">
            <div class="col-md-3">
              <ul class="nav nav-tabs flex-column" id="myTabVertical" role="tablist">
                <li class="nav-item"> <a class="nav-link" id="first-tab" href="{% url 'matrixhosting:billing' %}">{% trans "Transaction History"%}</a> </li>
                <li class="nav-item"> <a class="nav-link" id="second-tab" href="{% url 'matrixhosting:bills' %}">{% trans "Bills"%}</a> </li>
                <li class="nav-item"> <a class="nav-link active" id="fourth-tab" href="{% url 'matrixhosting:cards' %}">{% trans "Payment Methods"%}</a> </li>
              </ul>
            </div>
            <div class="col-md-9">
              <div class="tab-content my-3" id="myTabContentVertical">
                <div class="tab-pane fade show active" id="cards" role="tabpanel" aria-labelledby="cards">
                  <div class="row">
                    <div class="col-12">
                      <div class="row">
                        <div class="col-sm-12 col-lg-12">
                          <div class="featured-box style-3 float-right mb-4">
                            <div class="featured-box-icon text-17 text-light"> <i class="fas fa-wallet"></i> </div>
                            <h3 class="text-7 font-weight-400">{{balance}} CHF</h3>
                            <a href="" data-target="#make-deposit" data-toggle="modal">{% trans "Make a deposit"%}</a>
                          </div>                          
                        </div>
                      </div>
                    </div>
                  </div>
                  <hr class="mt-0 mb-4 mx-n8">
                  <div class="row">
                    <div class="col-12">
                      <h3 class="text-4 font-weight-400 mb-4">{% trans "Credit or Debit Cards"%} <span class="text-muted text-3">({% trans "for payments"%})</span></h3>
                      <div class="row">
                        {% for card in object_list %}
                        <div class="col-12 col-sm-6 col-lg-4 mt-2">
                          <div class="account-card {% if card.active %}account-card-primary{%endif%} text-white rounded p-3 mb-4 mb-lg-0">
                            <p class="text-4">XXXX-XXXX-XXXX-{{card.last4}}</p>
                            <p class="d-flex align-items-center"> <span class="account-card-expire text-uppercase d-inline-block opacity-7 mr-2">Valid<br>
                              thru<br>
                              </span> <span class="text-4 opacity-9">{{card.expiry_date|date:"m"}}/{{card.expiry_date|date:"y"}}</span> {% if card.active %}<span class="badge badge-warning text-0 font-weight-500 rounded-pill px-2 ml-auto">{% trans "Primary"%}</span>{%endif%} </p>
                            <p class="d-flex align-items-center m-0"> <span class="text-uppercase font-weight-500">{{card.card_name}}</span> <img class="ml-auto" src="{% static 'matrixhosting/images/' %}{{card.brand}}.png" alt="visa" title=""> </p>
                            <div class="account-card-overlay rounded" data-card="{{card.id}}"> <a href="#" data-href="{% url 'payments:card_activate'%}" class="activate-btn text-light btn-link mx-2"><span class="mr-1"><i class="fas fa-edit"></i></span>{% trans "Set As Primary"%}</a> <a href="#" data-href="{% url 'stripecreditcard-detail' card.id %}" class="delete-card text-light btn-link mx-2"><span class="mr-1"><i class="fas fa-minus-circle"></i></span>{% trans "Delete"%}</a> </div>
                          </div>
                        </div>
                        {% endfor %}
                        <div class="col-12 col-sm-6 col-lg-4 mt-2"> <a href="" data-target="#add-new-card-details" data-toggle="modal" class="account-card-new d-flex align-items-center rounded h-100 p-3 mb-4 mb-lg-0">
                          <p class="w-100 text-center line-height-4 m-0"> <span class="text-3"><i class="fas fa-plus-circle"></i></span> <span class="d-block text-body text-3">Add New Card</span> </p>
                          </a> </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div id="make-deposit" class="modal fade" aria-hidden="true" style="display: none;">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title font-weight-400">{% trans "Make a deposit"%}</h5>
                        <button type="button" class="close font-weight-400" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
                      </div>
                      <div class="modal-body p-4">
                        <form id="make_deposit" method="post" action="{% url 'payment-list' %}">
                          {% csrf_token %}
                          <input id="type" name="type" type="hidden" value="deposit">
                          <input id="currency" name="currency" type="hidden" value="CHF">
                          <div class="form-group">
                            <label for="amount">{% trans "Amount *"%}</label>
                            <input id="amount" name="amount" class="form-control" required type="number" min={{min_amount}} value="">
                          </div>
                          <div class="form-group">
                            <label for="notes">{% trans "Notes"%}</label>
                            <textarea id="notes" name="notes" class="form-control"></textarea>                          
                          </div>
                          <button class="btn btn-primary float-right mt-2" id="deposit-button" type="submit">
                            {% trans "Confirm"%}
                          </button>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
                <div id="add-new-card-details" class="modal fade" aria-hidden="true" style="display: none;">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title font-weight-400">{% trans "Add a Card"%}</h5>
                        <button type="button" class="close font-weight-400" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
                      </div>
                      <div class="modal-body p-4">
                        <form id="addCard" method="post" data-secret="{{ client_secret }}">
                          <div id="card-element"></div>
                          <div id="card-errors"></div>
                          <div class="form-group">
                            <label for="cardNumber">{% trans "Card Number"%}</label>
                            <div id="card-number-element" class="field my-input form-control"></div>
                          </div>
                          <div class="form-row">
                            <div class="col-lg-6">
                              <div class="form-group">
                                <label for="expiryDate">{% trans "Expiry Date"%}</label>
                                <div id="card-expiry-element" class="field my-input form-control"></div>
                              </div>
                            </div>
                            <div class="col-lg-6">
                              <div class="form-group">
                                <label for="cvvNumber">{% trans "CVV"%} <span class="text-info ml-1" data-toggle="tooltip" data-original-title="For Visa/Mastercard, the three-digit CVV number is printed on the signature panel on the back of the card immediately after the card's account number. For American Express, the four-digit CVV number is printed on the front of the card above the card account number."><i class="fas fa-question-circle"></i></span></label>
                                <div id="card-cvc-element" class="field my-input form-control"></div>                              </div>
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="cardHolderName">{% trans "Card Holder Name"%}</label>
                            <input type="text" class="form-control" data-bv-field="cardholdername" id="cardholder-name" required="" value="" placeholder="Card Holder Name">
                          </div>
                          <div class="card-element brand text-6">
                            <i class="fab fa-credit-card" id="brand-icon"></i>
                          </div>
                          <button class="btn btn-primary float-right mt-2" id="card-button" type="submit">{% trans "Add Card"%}</button>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>
{% endblock %} 
{% block js_extra %}
<script src="https://js.stripe.com/v3/"></script>
<script>
  var stripe = Stripe('{{ stripe_pk }}');
  var setupForm = document.getElementById('addCard');
  var clientSecret = setupForm.dataset.secret;
  window.cardNumberElement = loadStripe(stripe);
  var cardholderName = document.getElementById('cardholder-name');
  var messageContainer = document.getElementById('card-errors');
  setupForm.addEventListener('submit', function(ev) {
    ev.preventDefault();
    stripe.confirmCardSetup(
      clientSecret,
      {
        payment_method: {
          card: window.cardNumberElement,
          billing_details: {
            name: cardholderName.value,
          },
        },
      }
    ).then(function(result) {
      if (result.error) {
        var message = document.createTextNode('Error:' + result.error.message);
        messageContainer.appendChild(message);
      } else {
        location.reload();
      }
    });
  });
  $('.activate-btn').click(function (e) {
    e.preventDefault();
    var url = $(e.target).data('href');
    var card_id = $(e.target).parent().data('card');
    $.ajax({ 
        type: 'POST', 
        url: url, 
        data: {card_id: card_id, csrfmiddlewaretoken: '{{ csrf_token }}'}, 
        dataType: 'json',
        success: function (result) { 
          location.reload();
        }
    });
  });
  $('.delete-card').click(function (e) {
    e.preventDefault();
    var url = $(e.target).data('href');
    var card_id = $(e.target).parent().data('card');
    $.ajax({ 
        type: 'DELETE', 
        url: url, 
        beforeSend: function(xhr) {
            xhr.setRequestHeader("X-CSRFToken", '{{ csrf_token }}');
        },
        dataType: 'json',
        success: function (result) { 
          location.reload();
        }
    });
  });
  $("#make_deposit").submit(function(e){
    var form = $(this);
    $('#deposit-button').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
    $.ajax({ 
         url   : form.attr('action'),
         type  : form.attr('method'),
         data  : form.serialize(),
         success: function(response) {
          location.reload();
         },
         error: function (xhr, ajaxOptions, thrownError) {
          alert(xhr.responseJSON);
          $('#deposit-button').html("{% trans 'Confirm'%}").attr('disabled', false);
        }
    });
    return false;
 });
</script>

{% endblock js_extra %}