{% extends "lfs/base.html" %}
{% load i18n lfs_tags lfs_portlets_tags %}

{% block extra_css %}
    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}lfs_downloads/paywall.css" />
{% endblock %}
{% block extra_js %}
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
{% get_current_language as LANGUAGE_CODE %}
<script>
// Render the PayPal button
paypal.Button.render({
    // In the Pay Now checkout flow, payment occurs immediately after your buyer
    // clicks the Pay Now button
    commit: true,
    locale: '{{paypal_lang}}',
    // Set your environment
    env: '{{paypal_env}}', // sandbox | production

    // Specify the style of the button
    style: {
      label: 'paypal',
      fundingicons: true,
      layout: 'horizontal',  // horizontal | vertical
      size:   'responsive',    // medium | large | responsive
      shape:  'pill',      // pill | rect
      color:  'gold',       // gold | blue | silver | white | black
      tagline: false
    },

    // Specify allowed and disallowed funding sources
    //<insert production client id>
    // Options:
    // - paypal.FUNDING.CARD
    // - paypal.FUNDING.CREDIT
    // - paypal.FUNDING.ELV
    funding: {
      allowed: [
        paypal.FUNDING.CARD
      ],
      disallowed: [
        paypal.FUNDING.CREDIT
      ]
    },

    // PayPal Client IDs - replace with your own
    // Create a PayPal app: https://developer.paypal.com/developer/applications/create
    client: {
      sandbox: '{{paypal_client_id}}',
      production: '{{paypal_client_id}}'
    },

    experience: {
        input_fields: {
            no_shipping: 1,
        }
    },

    presentation: {
      brand_name: '{{shop_name}}'
    },

    // payment() is called when the button is clicked
    payment: function (data, actions) {
      let pay_amount = $('input[name="amount"').val();

      return actions.payment.create({
        payment: {
          transactions: [
            {
              amount: {
                total: pay_amount,
                currency: '{{paypal_currency}}'
              },
              description: '{{product.name}}',
              custom: '{{order_uuid}}'
            }
          ]
        }
      });
    },

    onAuthorize: function (data, actions) {
      return actions.payment.execute()
        .then(function (data) {
          if (data.state == 'approved') {
            let txn = data.transactions[0];
            $.post(
              '{% url lfsd_library %}',
              {
                auth_id: data.id,
                amount: txn.amount.total,
                currency: txn.amount.currency,
                lfsd_uuid: txn.custom
              },
              function(){
                window.location.assign('{% url lfsd_library %}');
            });
          } else {
            alert('Sorry, the payment was not approved ...');
          }
        });
    }
}, '#paypal-button-container');
</script>
{% endblock %}

{% block title %}
    Download - {{ block.super }}
{% endblock %}

{% block section %}lfsd_paywall{% endblock %}

{% block content %}

<div class="paywall span-18 push-3 last">
    <h1 class="document-first-heading">
        {{product.name}}
    </h1>
    <h2>Estimado visitante. Gracias por tu interés en la descarga de <em>{{product.name}}</em></h2>
    <div class="message">
        Explicar aqui el esquema de pago variable.
    </div>
</div>
<div class="paybox span-18 push-3 last">
    <div class="paybox-child">
        <div class="payform span-8">
            <form name="donation_form" action="{% url lfsd_product_paywall product.slug %}" method="post">
                {% csrf_token %}
                {{ form.non_field_errors }}
                <label for="amount">
                    Cuanto desea pagar? *
                    <div class="slider_wrapper">
                        <span class="less">-</span>
                        <div id="amount-slider"></div>
                        <span class="more">+</span>
                    </div>
                    {{ form.amount.errors }}
                    <span class="small">
                        <input type="checkbox" id="other" /> Donar una cantidad diferente
                    </span>
                    <span>
                        $ <input type="number" name="_amount" value="{{form.amount.value}}" id="id_amount" disabled="" min="{{ minimum_price }}" suggested-price="{{ suggested_price|floatformat:3 }}"/> USD
                        <input type="hidden" name="amount" value="{{form.amount.value}}" />
                    </span>
                </label>
                <!-- <input type="submit" class="button login-button emphasized left" value="Donar"/> -->
            </form>
              <div class="note">
                <p>* Cantidades en dólares de Estados Unidos</p>
            </div>
        </div>
        <div class="info span-8 last">
            <div class="paypal_logo">
                <h2 class="amount">Método de pago</h2>
                <div id="paypal-button-container"></div>
                <!-- <img src="{{ STATIC_URL }}/img/logotipo_paypal_pagos_tarjetas.jpg"/> -->
            </div>
        </div>

    </div>
</div>
<script type="text/javascript">
$(document).ready(function () {
    var suggested_price = $('input[name="_amount"]').attr('suggested-price');
    var minimum_price = Number($('input[name="_amount"]').attr('min'));
    var valueMap = [minimum_price];
    var c = 1;

    while (valueMap.length <= 8) {
        var n = Math.pow(10, c-1);

        if (n * 1 >= valueMap[c-1]) {
            valueMap.push(n);
        }

        if (n * 2 >= valueMap[c-1]) {
            valueMap.push(2*n);
        }

        if (n * 5 >= valueMap[c-1]) {
            valueMap.push(5*n);
        }
        c++;
    }


    $('#amount-slider').slider({
        range: 'max',
        min: 0,
        max: 8,
        animate: 'slow',
        value: 4,
        slide: function (event, ui) {
            $('input[name="_amount"]').val(valueMap[ui.value].toFixed(2));
            $('input[name="amount"]').val(valueMap[ui.value].toFixed(2));
            $('form[name="donation_form"] input[type="submit"]').removeAttr('disabled');
        }
    });

    $('input#other').click(function() {
        if ($(this).is(':checked')) {
            $('input[name="_amount"]').removeAttr('disabled');
        } else {
            $('input[name="_amount"]').attr('disabled', 'yes');
        }
    });

    $('input[name="_amount"]').keyup(function () {
        var v = Number(this.value);
        if (v == NaN || v < minimum_price) {
            $('form[name="donation_form"] input[type="submit"]').attr('disabled', 'yes');
        } else {
            $('input[name="amount"]').val(v);
            $('form[name="donation_form"] input[type="submit"]').removeAttr('disabled');
        }
    });

    $('form[name="donation_form"').submit(function () {
        $($('input[name="amount"]')).val($('input[name="_amount"]').val());
    });
});
</script>
{% endblock %}

{#
    http://allwebco-templates.com/support/S_paypal_custom_donation.htm

    http://www.noupe.com/design/compilation-of-well-designed-donation-pages.html

    Paypal payments standard API:

    https://www.x.com/developers/paypal/documentation-tools/paypal-payments-standard/integration-guide/Appx_websitestandard_htmlvariables
#}