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

{% block title %}Zapłać kartą kredytową{% endblock %}

{% block content %}
    <h1>Zapłać kartą kredytową</h1>
    <form action="." id="payment" method="post">

        <label for="card-number">Numer karty</label>
        <div id="card-number" class="field"></div>

        <label for="cvv">CVV</label>
        <div id="cvv" class="field"></div>

        <label for="expiration-date">Data ważności</label>
        <div id="expiration-date" class="field"></div>

        <input type="hidden" id="nonce" name="payment_method_nonce" value="">
        {% csrf_token %}
        <input type="submit" value="Pay">
    </form>
    <!-- Załadowanie wymaganych komponentów klienta. -->
    <script src="https://js.braintreegateway.com/web/3.29.0/js/client.min.js"></script>
    <!-- Załadowanie komponentu Hosted Fields. -->
    <script src="https://js.braintreegateway.com/web/3.29.0/js/hosted-fields.min.js"></script>
    <script>
        var form = document.querySelector('#payment');
        var submit = document.querySelector('input[type="submit"]');

        braintree.client.create({
            authorization: '{{ client_token }}'
        }, function (clientErr, clientInstance) {
            if (clientErr) {
                console.error(clientErr);
                return;
            }

        braintree.hostedFields.create({
            client: clientInstance,
            styles: {
                'input': {'font-size': '13px'},
                'input.invalid': {'color': 'red'},
                'input.valid': {'color': 'green'}
            },
            fields: {
                number: {selector: '#card-number'},
                cvv: {selector: '#cvv'},
                expirationDate: {selector: '#expiration-date'}
            }
        }, function (hostedFieldsErr, hostedFieldsInstance) {
            if (hostedFieldsErr) {
                console.error(hostedFieldsErr);
                return;
            }

            submit.removeAttribute('disabled');

            form.addEventListener('submit', function (event) {
                event.preventDefault();

            hostedFieldsInstance.tokenize(function (tokenizeErr, payload) {
                if (tokenizeErr) {
                    console.error(tokenizeErr);
                    return;
                }
                // ustawienie tokenu nonce w celu przesłania na serwer
                document.getElementById('nonce').value = payload.nonce;
                // przesłanie formularza
                document.getElementById('payment').submit();
            });
        }, false);
    });
});
</script>
{% endblock %}
