{% extends 'payments/payment_base.html' %}

{% block payment_content %}

  {% if config.PAYMENT_PRODUCTION != True %}
    <div class="alert alert-warning" role="alert">
      {{ _('<b>Be careful!</b> This is a development version of the website. Do NOT
      use your real credit card credentials! If you want to send an actual
      payment, go to <a href="%(mb_url)s">metabrainz.org</a>.', mb_url='https://metabrainz.org/') }}
    </div>
  {% endif %}

  <div id="payment-panel" class="panel panel-default">
    <form id="payment-form" method="POST" class="panel-body form-horizontal" role="form">
      {{ form.hidden_tag() }}

      <div class="form-group">
        <label for="input-amount" class="col-sm-offset-2 col-sm-3 control-label">{{ _('Amount') }}</label>
        <div class="col-sm-4">
          <div id="input-amount-fg" class="input-group">
            <span class="input-group-addon">
              {% if currency == 'usd' %}
                $
              {% elif currency == 'eur' %}
                €
              {% endif %}
            </span>
            {{ form.amount(id="input-amount", class="form-control") | safe }}</div>
        </div>
        <div id="big-amount-info" class="col-sm-offset-3 col-sm-6" style="display:none">
          {{ _('If you would like to make a large payment, please contact us at
          <a href="%(mail_link)s">payments@metabrainz.org</a>
          before you do.', mail_link='mailto:payments@metabrainz.org') }}
        </div>
      </div>

      <div id="input-invoice-number-fg" class="form-group">
        <div class="col-sm-offset-3 col-sm-6">
          {{ form.invoice_number(id="input-invoice-number", class="form-control", placeholder=_('Invoice number')) | safe }}
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-3 col-sm-6">
          <div class="checkbox">
            <label>
              {{ form.recurring(id="recurring-flag") | safe }}
              {{ _('Make this a recurring monthly payment') }}
            </label>
          </div>
        </div>
      </div>

      <div id="buttons" class="form-group">
        <div class="col-sm-offset-3 col-sm-6">
          <button id="btn-stripe" type="button" class="btn">
            {{ _('Pay with Credit Card') }}
          </button>
          <button id="btn-paypal" type="button" class="btn">
            <img src="{{ url_for('static', filename='img/payments/paypal.svg') }}" />
          </button>
        </div>
      </div>

    </form>

  </div>

  <p>
    <small>
      {{ _('The personal information provided to the MetaBrainz Foundation during the
      payment process will not be shared with anyone. For more information,
      please take a look at our <a href="%(privacy_policy_url)s">
      privacy policy</a>.', privacy_policy_url=url_for('index.privacy_policy')) }}
    </small>
  </p>

  <p>
    <small>
      {{ _('To find out how to cancel recurring payments take a look at
      <a href="%(cancel_recurring_url)s">this page</a>.', cancel_recurring_url=url_for('payments.cancel_recurring')) }}
    </small>
  </p>

{% endblock %}

{% block scripts %}
  {{ super() }}
  <script src="https://js.stripe.com/v3/"></script>
  <script>
    $(document).ready(function () {

      var form = $("#payment-form");


      //////////////////
      // PAYMENT BUTTONS
      //////////////////

      var buttons = {
        stripe: $('#btn-stripe'),
        paypal: $('#btn-paypal')
      };

      function setButtonsState(enabled) {
        if (enabled === true) {
          $.each(buttons, function( index, button ) {
            button.removeAttr('disabled');
          });
          updateRecurringState();

        } else { // Disabled
          $.each(buttons, function( index, button ) {
            button.attr('disabled', 'disabled');
          });
        }
      }


      ///////////////
      // AMOUNT INPUT
      ///////////////
      var MAX_AMOUNT = 900000;
      var amount = $("#input-amount");
      var bigAmountInfo = $("#big-amount-info");
      amount.on('input', function () {
        var value = amount.val();
        if (value > MAX_AMOUNT) {
          bigAmountInfo.show();
          setButtonsState(false);
        } else {
          bigAmountInfo.hide();
          setButtonsState(true);
        }
      });


      ///////////
      // PAYMENTS
      ///////////

      // Stripe
      buttons.stripe.on('click', function(e) {
        setButtonsState(false);
        form.attr("action", "{{ url_for('payments_stripe.pay', donation=False) }}");
        form.submit();
        e.preventDefault();
      });

      // PayPal
      buttons.paypal.on('click', function(e) {
        setButtonsState(false);
        {% if config.PAYMENT_PRODUCTION %}
          form.attr("action", "https://www.paypal.com/cgi-bin/webscr");
        {% else %}
          form.attr("action", "https://www.sandbox.paypal.com/cgi-bin/webscr");
        {% endif %}

        {# Info about variables can be found at https://developer.paypal.com/docs/classic/paypal-payments-standard/integration-guide/Appx_websitestandard_htmlvariables/ #}

        $('<input>').attr({type: 'hidden', name: 'business', value: '{{ config['PAYPAL_ACCOUNT_IDS'][currency|upper] }}'}).appendTo(form);
        $('<input>').attr({type: 'hidden', name: 'no_shipping', value: '2'}).appendTo(form);
        $('<input>').attr({type: 'hidden', name: 'return', value: '{{ url_for('payments.complete', donation=True, _external=True, _scheme=config.PREFERRED_URL_SCHEME) }}'}).appendTo(form);
        $('<input>').attr({type: 'hidden', name: 'cancel_return', value: '{{ url_for('payments.cancelled', donation=True, _external=True, _scheme=config.PREFERRED_URL_SCHEME) }}'}).appendTo(form);
        $('<input>').attr({type: 'hidden', name: 'notify_url', value: '{{ url_for('payments_paypal.ipn', _external=True, _scheme=config.PREFERRED_URL_SCHEME) }}'}).appendTo(form);
        $('<input>').attr({type: 'hidden', name: 'currency_code', value: '{{ currency|upper }}'}).appendTo(form);

        if ($('#recurring-flag').is(":checked")) { // Recurring payments
          $('<input>').attr({type: 'hidden', name: 'cmd', value: '_xclick-subscriptions'}).appendTo(form);
          $('<input>').attr({type: 'hidden', name: 'item_name', value: 'Recurring payment to the MetaBrainz Foundation'}).appendTo(form);
          $('<input>').attr({type: 'hidden', name: 't3', value: 'M'}).appendTo(form); {# units of duration ('M' is month) #}
          $('<input>').attr({type: 'hidden', name: 'p3', value: '1'}).appendTo(form); {# subscription duration #}
          $('<input>').attr({type: 'hidden', name: 'src', value: '1'}).appendTo(form); {# recurring payments #}
          $('<input>').attr({type: 'hidden', name: 'sra', value: '1'}).appendTo(form); {# reattempt on failure #}

        } else {  // One-time payment
          $('<input>').attr({type: 'hidden', name: 'cmd', value: '_xclick'}).appendTo(form);
          $('<input>').attr({type: 'hidden', name: 'item_name', value: 'Payment to the MetaBrainz Foundation'}).appendTo(form);
        }

        {# Reconfiguring inputs for PayPal #}
        if ($('#recurring-flag').is(":checked")) { // Recurring payments
          amount.attr('name', 'a3');
        } else {  // One-time payment
          amount.attr('name', 'amount');
        }

        {# `on0` and `on1` are used for donation metadata #}

        $('<input>').attr({type: 'hidden', name: 'on2', value: 'is_donation'}).appendTo(form);
        $('<input>').attr({type: 'hidden', name: 'os2', value: 'no'}).appendTo(form);

        $('<input>').attr({type: 'hidden', name: 'on3', value: 'invoice_number'}).appendTo(form);
        $("#input-invoice-number").attr('name', 'os3');

        form.submit();
        return false;
      });

    });
  </script>
{% endblock %}