{% extends 'website/backoffice/base.html' %}
{% load url from future %}

{% block bodyclass %}pledge-edit{% endblock %}

{% block content %}

{{ form.media }}
{% if not status %}
<form method = 'POST' action = '' class = 'form' id='post-form'  enctype="multipart/form-data">
<ul>
    <li class="field-encryption_key pledge-encryption">
        <label for="id_encryption_key">Encryption key</label>
        <div>
            <p>
                <input type="password" name="encryption_key" id="id_encryption_key">
            </p>
            <ul class="errorlist"><li></li></ul>
        </div>
    </li>
</ul>
<button class = 'button green' name='decrypt' id="decrypt"><span>Save</span></button>
</form>
<br />
{% endif %}

<form method = 'POST' action = '' class = 'form' id='pledge-form'  enctype="multipart/form-data">
    <span class="title">Pledge</span>
    {% csrf_token %}
    <ul>
    {% for field in pledge_form %}
        <li class = 'field-{{ field.name }}'>
            {{ field.label_tag }}
            <div>
                <p>{{ field }}
                {% if field.help_text %}<span class = 'help-text'>{{ field.help_text }}</span>{% endif %}
                </p>
                {{ field.errors }}
            </div>

        </li>
    {% endfor %}
    <hr />
    <span class="title clear">Credit Card</span>
    {% for field in cc_form %}
        <li class = 'field-{{ field.name }}'>
            {{ field.label_tag }}
            <div>
                <p>{{ field }}
                {% if field.help_text %}<span class = 'help-text'>{{ field.help_text }}</span>{% endif %}
                </p>
                {{ field.errors }}
            </div>

        </li>
    {% endfor %}
    </ul>
    <ul>
    {% for field in form %}
        <li class = 'field-{{ field.name }}'>
            {{ field.label_tag }}
            <div>
                <p>{{ field }}
                {% if field.help_text %}<span class = 'help-text'>{{ field.help_text }}</span>{% endif %}
                </p>
                {{ field.errors }}
            </div>

        </li>
    {% endfor %}
    </ul>
    <button class = 'button green save'><span>Save</span></button>
</form>
{% endblock %}

{% block script %}

{% if not status %}
<script>
    $("#pledge-form input").attr("disabled", true);
    $("#pledge-form select").attr("disabled", true);
    $(".save").hide();
</script>
{% endif %}

<script>
    $('#post-form').submit(function(event) {
        event.preventDefault();
        var $form = $(this);
        encrypt = $form.find( 'input[name="encryption_key"]' ).val()

        $.ajax({
            type: "POST",
            url: "{% url 'website:backoffice:donations:pledge_verification' pledge.id %}",
            data: {'encrypt': encrypt},
            cache: false,
            success: function(xhr) {
                xhr = JSON.parse(xhr);
                // console.log(xhr);
                if(xhr.status == true)
                {
                    $("#post-form input").attr("disabled", true);
                    $("#post-form").hide();
                    $(".save").show();
                    $("#pledge-form input").attr("disabled", false);
                    $("#pledge-form select").attr("disabled", false);
                    $('#id_number').val(xhr.number);
                }
                else {
                    $('.errorlist li').text(xhr.message);
                }
            },
        });
    });
</script>
{% endblock %}