{% extends 'kfet/base_col_2.html' %}
{% load staticfiles %}

{% block title %}Transferts{% endblock %}
{% block header-title %}Transferts{% endblock %}

{% block fixed %}

<div class="buttons">
  <a class="btn btn-primary" href="{% url 'kfet.transfers.create' %}">
    Nouveaux
  </a>
</div>

{% endblock %}

{% block main %}

<div id="history">
  {% for transfergroup in transfergroups %}
    <div class="opegroup transfergroup" data-transfergroup="{{ transfergroup.pk }}">
      <span>{{ transfergroup.at }}</span>
      <span>{{ transfergroup.valid_by.trigramme }}</span>
      <span>{{ transfergroup.comment }}</span>
    </div>
    {% for transfer in transfergroup.transfers.all %}
    <div class="ope transfer{% if transfer.canceled_at %} canceled{% endif %}" data-transfer="{{ transfer.pk }}" data-transfergroup="{{ transfergroup.pk }}">
        <span class="amount">{{ transfer.amount }} €</span>
        <span class="from_acc">{{ transfer.from_acc.trigramme }}</span>
        <span class="glyphicon glyphicon-arrow-right"></span>
        <span class="to_acc">{{ transfer.to_acc.trigramme }}</span>
      </div>
    {% endfor %}
  {% endfor %}
</div>

<script type="text/javascript">

$(document).ready(function() {

    lock = 0;

    function displayErrors(html) {
        $.alert({
            title: 'Erreurs',
            content: html,
            backgroundDismiss: true,
            animation: 'top',
            closeAnimation: 'bottom',
            keyboardEnabled: true,
        });
    }


    function cancelTransfers(transfers_array, password = '') {
        if (lock == 1)
            return false
        lock = 1;
        var data = { 'transfers' : transfers_array }
        $.ajax({
            dataType: "json",
            url     : "{% url 'kfet.transfers.cancel' %}",
            method  : "POST",
            data    : data,
            beforeSend: function ($xhr) {
                $xhr.setRequestHeader("X-CSRFToken", csrftoken);
                if (password != '')
                    $xhr.setRequestHeader("KFetPassword", password);
            },

        })
        .done(function(data) {
            for (var i=0; i<data['canceled'].length; i++) {
                $('#history').find('.transfer[data-transfer='+data['canceled'][i]+']')
                    .addClass('canceled');
            }
            $('#history').find('.ui-selected').removeClass('ui-selected');
            lock = 0;
        })
        .fail(function($xhr) {
            var data = $xhr.responseJSON;
            switch ($xhr.status) {
                case 403:
                    requestAuth(data, function(password) {
                        cancelTransfers(transfers_array, password);
                    });
                    break;
                case 400:
                    displayErrors(getErrorsHtml(data));
                    break;
            }
            lock = 0;
        });
    }

    $('#history').selectable({
        filter: 'div.transfergroup, div.transfer',
        selected: function(e, ui) {
            $(ui.selected).each(function() {
                if ($(this).hasClass('transfergroup')) {
                    var transfergroup = $(this).attr('data-transfergroup');
                    $(this).siblings('.ope').filter(function() {
                        return $(this).attr('data-transfergroup') == transfergroup
                    }).addClass('ui-selected');
                }
            });
        },
    });

    $(document).on('keydown', function (e) {
        if (e.keyCode == 46) {
            // DEL (Suppr)
            var transfers_to_cancel = [];
            $('#history').find('.transfer.ui-selected').each(function () {
                transfers_to_cancel.push($(this).attr('data-transfer'));
            });
            if (transfers_to_cancel.length > 0)
                cancelTransfers(transfers_to_cancel);
        }
    });

});

</script>

{% endblock %}