{% load cms_tags sekizai_tags i18n %}

{% trans "An unknown error has occurred. Please try again, or notify us if you continue to have an issue." as unknown_error %}

<div id="error_payment"></div>

{# These div elements are the placeholder elements that are replaced by the SqPaymentForm's iframes. #}
<div class="card my-4">
  <h6 class="card-header">
  {% trans "Pay Now with Square" %}
  </h6>
  <div class="card-body">
    <label>{% trans "Card Number" %}</label>
    <div id="sq-card-number"></div>
    <label>{% trans "CVV" %}</label>
    <div id="sq-cvv"></div>
    <label>{% trans "Expiration Date" %}</label>
    <div id="sq-expiration-date"></div>
    <label>{% trans "Postal Code" %}</label>
    <div id="sq-postal-code"></div>

    {# After the SqPaymentForm generates a card nonce, *this* form POSTs the generated card nonce to your application's server. #}
    <form id="nonce-form" novalidate action="{% url 'processSquarePayment' %}" method="post">
      {% csrf_token %}
      {# Whenever a nonce is generated, it's assigned as the value of this hidden input field. #}
      <input type="hidden" id="card-nonce" name="nonce">
      {% if user.is_authenticated %}
        <input type="hidden" name="user_id" value="{{ user.id }}">
      {% endif %}
      {% if registration %}
        <input type="hidden" name="reg_id" value="{{ registration.id }}">
        <input type="hidden" name="customerEmail" value="{{ registration.email }}">
      {% elif invoice %}
        <input type="hidden" name="invoice_id" value="{{ invoice.id }}">
      {% endif %}
      <input type="hidden" name="successUrl" value="{% page_url instance.successPage.id %}">
      <input class="btn btn-primary mt-2" type="submit" value="{% trans 'Pay Now' %}" onclick="requestCardNonce(event)">
    </form>
  </div>
</div>

{% addtoblock "js" %}
    <script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>
{% endaddtoblock %}
{% addtoblock "js" %}
    <script>

    var applicationId = '{{ squareApplicationId }}'; // <-- Add your application's ID here

    if (applicationId == '') {
      alert('You need to provide a value for the applicationId variable.');
    }

    {# Initializes the payment form.  See the Square documentation for descriptions of each parameter. #}
    var paymentForm = new SqPaymentForm({
      applicationId: applicationId,
      inputClass: 'sq-input',
      inputStyles: [
        {
          fontSize: '15px'
        }
      ],
      cardNumber: {
        elementId: 'sq-card-number',
        placeholder: '•••• •••• •••• ••••'
      },
      cvv: {
        elementId: 'sq-cvv',
        placeholder: 'CVV'
      },
      expirationDate: {
        elementId: 'sq-expiration-date',
        placeholder: 'MM/YY'
      },
      postalCode: {
        elementId: 'sq-postal-code'
      },
      callbacks: {

        cardNonceResponseReceived: function(errors, nonce, cardData) {
          if (errors) {
            var message = '';
            errors.forEach(function(error) {
              message += error.message + ' ';
            });
            $('#error_payment').html('<div class="alert alert-danger"><strong>ERROR:</strong> ' + 
              message + '</div>');

          // No errors occurred. Extract the card nonce.
          } else {
            $('#error_payment').html();
            document.getElementById('card-nonce').value = nonce;
            document.getElementById('nonce-form').submit();
          }
        },

        unsupportedBrowserDetected: function() {
            var message = '{% trans "Your browser does not support Square checkout.  Please use another browser." %}';
            $('#error_payment').html('<div class="alert alert-danger"><strong>ERROR:</strong> ' + 
              message + '</div>');
        },
      }
    });

    {# This function is called when a buyer clicks the Submit button on the webpage to charge their card. #}
    function requestCardNonce(event) {
      event.preventDefault();
      paymentForm.requestCardNonce();
    }
    </script>
{% endaddtoblock %}

{% addtoblock "css" %}
    <style type="text/css">
      .sq-input {
        border: 1px solid rgb(223, 223, 223);
        outline-offset: -2px;
        margin-bottom: 5px;
      }
      .sq-input--focus {
        /* Indicates how form inputs should appear when they have focus */
        outline: 5px auto rgb(59, 153, 252);
      }
      .sq-input--error {
        /* Indicates how form inputs should appear when they contain invalid values */
        outline: 5px auto rgb(255, 97, 97);
      }
    </style>
{% endaddtoblock %}
