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

{% block extra_head %}
<link rel="stylesheet" style="text/css" href="{% static 'kfet/css/jquery-ui.min.css' %}">
<link rel="stylesheet" style="text/css" href="{% static 'kfet/css/kpsul_grid.css' %}">
<script type="text/javascript" src="{% static 'kfet/js/js.cookie.js' %}"></script>
<script type="text/javascript" src="{% static 'kfet/js/reconnecting-websocket.js' %}"></script>
<script type="text/javascript" src="{% static 'kfet/js/jquery-ui.min.js' %}"></script>
<script type="text/javascript" src="{% static 'kfet/js/jquery-confirm.js' %}"></script>
{% endblock %}

{% block title %}K-Psul{% endblock %}

{% block content-header %}{% endblock %}

{% block content %}

{% csrf_token %}

<form id="operationgroup_form">{{ operationgroup_form }}</form>

<div class="row kpsul_top">
  <div class="col-sm-8">
    <div class="row" id="account">
      <div class="col-lg-3 col-xs-4" id="account_form">
        {{ trigramme_form.trigramme }}
      </div>
      <div class="col-lg-9 col-xs-8" id="account_data">
        <div id="account-balance" class="data_line"></div>
        <div id="account-name" class="data_line"></div>
        <div id="account-nickname" class="data_line"></div>
        <div class="data_line">
          <span id="account-is_cof"></span>
          <span id="account-departement"></span>
          <span id="account-promo"></span>
        </div>
        <div id="account-email" class="data_line"></div>
        <div class="buttons">
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-4" id="checkout">
    <div id="checkout_form">
      {{ checkout_form.checkout }}
    </div>
    <div id="checkout_data">
      <div>
        <b>En caisse:</b> <span id="checkout-balance"></span> €
      </div>
      <div>
          <b>Dernier relevé: </b><br>
        <span id="checkout-last_statement_balance"></span> €
        à <span id="checkout-last_statement_at"></span>
        par <span id="checkout-last_statement_by_trigramme"></span>
      </div>
      <div class="buttons">
      </div>
    </div>
  </div>
</div>

<div class="row kpsul_middle">
  <div class="col-sm-8 kpsul_middle_left_col">
    <div class="kpsul_middle_left">
      <div class="kpsul_middle_left_top">
        <div id="special_operations">
          <button role="button" class="btn" id="operation_deposit">Charge</button>
          <button role="button" class="btn" id="operation_withdraw">Retrait</button>
        </div>
        <div id="article_selection">
          <input type="text" id="article_autocomplete">
          <input type="number" id="article_number" step="1" min="1">
          <input type="hidden" id="article_id" value="">
        </div>
        <div id="articles_data">
          <table>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
      <div class="row kpsul_middle_left_bottom">
        <div class="col-sm-6">
          <div id="basket">
            <table id="basket_table">
            </table>
          </div>
        </div>
        <div class="col-sm-6">
          <div id="basket_rel">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-4 kpsul_middle_right_col">
    <div id="history">
    </div>
  </div>
</div>

<form id="operation_formset" style="display:none">
    {{ operation_formset.as_p }}
</form>

<div style="display:none;" id="operation_empty_html" data-opeindex="__prefix__">
    {{ operation_formset.empty_form }}
</div>

<script type="text/javascript">
$(document).ready(function() {
    // -----
    // General
    // -----

    // Retrieving csrf token
    var csrftoken = Cookies.get('csrftoken');
    // Appending csrf token to ajax post requests
    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });

    var subvention_cof = 25;

    function amountToUKF(amount, is_cof=false) {
        if (is_cof)
            return Math.round(amount * (1+subvention_cof/100) * 10);
        return Math.round(amount * 10);
    }

    // -----
    // Account data management
    // -----

    // Initializing
    var account_container = $('#account');
    var triInput = $('#id_trigramme')
    var triPattern = /^[^a-z]{3}$/
    var account_data = {}
    var account_data_default = {
        'id'   : 0,
        'name' : '',
        'email': '',
        'is_cof' : '',
        'promo'  : '',
        'balance': '',
        'trigramme'  : '',
        'is_frozen'  : false,
        'departement': '',
        'nickname'   : '',
    }

    // Display data
    function displayAccountData() {
        var balance = account_data['trigramme'] != 'LIQ' ? account_data['balance'] : '';
        if (balance != '')
            balance = amountToUKF(account_data['balance'], account_data['is_cof']);
        for (var elem in account_data) {
            if (elem == 'balance') {
                $('#account-balance').text(balance);
            } else {
                $('#account-'+elem).text(account_data[elem]);
            }
        }
        if (account_data['is_frozen']) {
            $('#account').attr('data-balance', 'frozen');
        } else if (account_data['balance'] >= 5 || account_data['trigramme'] == 'LIQ') {
            $('#account').attr('data-balance', 'ok');
        } else if (account_data['balance'] == '') {
            $('#account').attr('data-balance', '');
        } else if (account_data['balance'] >= 0) {
            $('#account').attr('data-balance', 'low');
        } else {
            $('#account').attr('data-balance', 'neg');
        }

        var buttons = '';
        if (account_data['id'] != 0) {
            buttons += '<a href="/k-fet/accounts/'+account_data['trigramme']+'" class="btn btn-primary" target="_blank" title="Modifier"><span class="glyphicon glyphicon-cog"></span></a>';
        }
        account_container.find('.buttons').html(buttons);
    }

    // Clear data
    function resetAccountData() {
        account_data = account_data_default;
        $('#id_on_acc').val(0);
        displayAccountData();
    }

    function resetAccount() {
        resetAccountData();
        triInput.val('');
    }

    // Store data
    function storeAccountData(data) {
        account_data = $.extend({}, account_data_default, data);
        account_data['balance'] = parseFloat(account_data['balance']);
        $('#id_on_acc').val(account_data['id']);
        displayAccountData();
    }

    // Retrieve via ajax
    function retrieveAccountData(tri) {
        $.ajax({
            dataType: "json",
            url     : "{% url 'kfet.kpsul.account_data' %}",
            method  : "POST",
            data    : { trigramme: tri },
        })
        .done(function(data) {
            storeAccountData(data);
            articleSelect.focus();
            updateBasketAmount();
            updateBasketRel();
        })
        .fail(function() { resetAccountData() });
    }

    // Event listener
    triInput.on('input', function() {
        var tri = triInput.val().toUpperCase();
        // Checking if tri is valid to avoid sending requests
        if (tri.match(triPattern)) {
            retrieveAccountData(tri);
        } else {
            resetAccountData();
        }
    });

    // -----
    // Checkout data management
    // -----

    // Initializing
    var checkout_container = $('#checkout');
    var checkoutInput = $('#id_checkout_select');
    var checkout_data = {}
    var checkout_data_default = {
        'id'  : 0,
        'name': '',
        'balance'   : '',
        'valid_from': '',
        'valid_to'  : '',
        'last_statement_balance': '',
        'last_statement_at'     : '',
        'last_statement_by_trigramme' : '',
        'last_statement_by_first_name': '',
        'last_statement_by_last_name' : '' ,
    }

    // Display data
    function displayCheckoutData() {
        for (var elem in checkout_data) {
            $('#checkout-'+elem).text(checkout_data[elem]);
        }
        var buttons = '';
        if (checkout_data['id'] !== 0) {
            buttons += '<a class="btn btn-primary" href="/k-fet/checkouts/'+checkout_data['id']+'/statements/add" title="Effectuer un relevé" target="_blank"><span class="glyphicon glyphicon-euro"></span></a>';
            buttons += '<a class="btn btn-primary" href="/k-fet/checkouts/'+checkout_data['id']+'" title="Modifier" target="_blank"><span class="glyphicon glyphicon-cog"></span></a>';
        }
        checkout_container.find('.buttons').html(buttons);
    }

    // Clear data
    function resetCheckout() {
        checkout_data = checkout_data_default;
        $('#id_checkout').val(0);
        checkoutInput.find('option:first').prop('selected', true);
        displayCheckoutData();
    }

    // Store data
    function storeCheckoutData(data) {
        checkout_data = $.extend({}, checkout_data_default, data);
        $('#id_checkout').val(checkout_data['id']);
        displayCheckoutData();
    }

    // Retrieve data
    function retrieveCheckoutData(id) {
        $.ajax({
            dataType: "json",
            url     : "{% url 'kfet.kpsul.checkout_data' %}",
            method  : "POST",
            data    : { 'pk': id },
        })
         .done(function(data) { storeCheckoutData(data) })
         .fail(function() { resetCheckout() });
    }

    // Event listener
    checkoutInput.on('change', function() {
        retrieveCheckoutData(checkoutInput.val());
    });

    // -----
    // Auth
    // -----

    function requestAuth(data, callback) {
        $.confirm({
            title: 'Authentification requise',
            content: '<input type="password" name="password" autofocus>',
            backgroundDismiss: true,
            animation:'top',
            closeAnimation:'bottom',
            keyboardEnabled: true,
            confirm: function() {
                var password = this.$content.find('input').val();
                callback(password);
            },
            onOpen: function() {
                var that = this
                this.$content.find('input').on('keypress', function(e) {
                    if (e.keyCode == 13)
                        that.$confirmButton.click();
                });
            },
            onClose: function() { this._lastFocused = articleSelect; }
        });
    }

    // -----
    // Perform operations
    // -----

    var performButton  = $('#perform_operations');
    var operationGroup = $('#operationgroup_form');
    var operations     = $('#operation_formset');

    function performOperations(password = '') {
        var data = operationGroup.serialize() + '&' + operations.serialize();
        $.ajax({
            dataType: "json",
            url     : "{% url 'kfet.kpsul.perform_operations' %}",
            method  : "POST",
            data    : data,
            beforeSend: function ($xhr) {
                $xhr.setRequestHeader("X-CSRFToken", csrftoken);
                if (password != '')
                    $xhr.setRequestHeader("KFetPassword", password);
            },
        })
        .done(function(data) {
            coolReset();
        })
        .fail(function($xhr) {
            var data = $xhr.responseJSON;
            switch ($xhr.status) {
                case 403:
                    requestAuth(data, performOperations);
                    break;
            }
        });
    }

    // Event listeners
    performButton.on('click', function() {
        performOperations();
    });

    // -----
    // Cancel operations
    // -----

    var cancelButton = $('#cancel_operations');
    var cancelForm   = $('#cancel_form');

    function cancelOperations(opes_array, password = '') {
        var data = { 'operations' : opes_array }
        $.ajax({
            dataType: "json",
            url     : "{% url 'kfet.kpsul.cancel_operations' %}",
            method  : "POST",
            data    : data,
            beforeSend: function ($xhr) {
                $xhr.setRequestHeader("X-CSRFToken", csrftoken);
                if (password != '')
                    $xhr.setRequestHeader("KFetPassword", password);
            },

        })
        .done(function(data) {
            coolReset();
        })
        .fail(function($xhr) {
            var data = $xhr.responseJSON;
            switch ($xhr.status) {
                case 403:
                    requestAuth(data, function(password) {
                        cancelOperations(opes_array, password);
                    });
                    break;
            }

        });
    }

    // Event listeners
    cancelButton.on('click', function() {
        cancelOperations();
    });

    // -----
    // Articles data
    // -----

    var articles_container = $('#articles_data tbody');
    var article_category_default_html = '<tr class="category"><td colspan="3"></td></tr>';
    var article_default_html = '<tr class="article"><td class="name"></td><td class="price"></td><td class="stock"></td></tr>';

    function addArticle(article) {
        var article_html = $(article_default_html);
        article_html.attr('data-article', article['id']);
        article_html.attr('data-category', article['category_id']);
        for (var elem in article) {
            article_html.find('.'+elem).text(article[elem])
        }
        article_html.find('.price').text(amountToUKF(article['price'], false));
        var category_html = articles_container
            .find('.category[data-category='+article['category_id']+']');
        if (category_html.length == 0) {
            category_html = $(article_category_default_html);
            category_html.attr('data-category', article['category_id']);
            category_html.find('td').text(article['category__name']);
            var added = false;
            articles_container.find('.category').each(function() {
                if (article['category__name'].toLowerCase() < $(this).text().toLowerCase()) {
                    $(this).before(category_html);
                    added = true;
                    return false;
                }
            });
            if (!added) articles_container.append(category_html);
        }
        var added = false;
        articles_container
            .find('.article[data-category='+article['category_id']+']').each(function() {
                if (article['name'].toLowerCase < $('.name', this).text().toLowerCase()) {
                    $(this).before(article_html);
                    added = true;
                    return false;
                }
            });
        if (!added) articles_container.find('[data-category='+article['category_id']+']').after(article_html);
        // Pour l'autocomplétion
        articlesList.push([article['name'],article['id'],article['category_id'],article['price']]);
    }

    function getArticles() {
        $.ajax({
            dataType: "json",
            url     : "{% url 'kfet.kpsul.articles_data' %}",
            method  : "GET",
        })
        .done(function(data) {
            for (var i=0; i<data['articles'].length; i++) {
                addArticle(data['articles'][i]);
            }
        });
    }

    function resetArticles() {
        articles_container.find('tr').remove();
        articlesList = [];
    }

    // -----
    // Article selection
    // -----

    var articleSelect = $('#article_autocomplete');
    var articleId = $('#article_id');
    var articleNb = $('#article_number');
    // 8:Backspace|9:Tab|13:Enter|46:DEL|112-117:F1-6|121:F10|122:F11|123:F12
    var normalKeys = /^(8|9|13|46|112|113|114|115|116|117|121|122|123)$/;
    var articlesList = [];

    function deleteNonMatching(array, str) {
        var dup = [];
        var lower_str = str.toLowerCase();
        for (var i=0; i<array.length; i++) {
            if (((array[i][0]).toLowerCase()).indexOf(lower_str) === 0)
                dup.push(array[i])
        }
        return dup;
    }

    function callbackForPrefix(elt) {
        return elt[0].toLowerCase();
    }

    function sharedPrefix(array) {
        var dup = array.map(callbackForPrefix);
        dup.sort(); // On trie l'array
        // On récupère le préfixe du premier et du dernier élément
        var first = dup[0], last = dup[array.length-1],
            length = first.length, i = 0;
        while (i < length && first.charAt(i) === last.charAt(i)) i++;
        return first.substring(0, i);
    }

    function displayMatchedArticles(array) {
        var categories_to_display = [];
        for (var i=0; i<articlesList.length; i++) {
            if (array.indexOf(articlesList[i]) > -1) {
                articles_container.find('[data-article='+articlesList[i][1]+']').show();
                if (categories_to_display.indexOf(articlesList[i][2]) == -1)
                    categories_to_display.push(articlesList[i][2]);
            } else {
                articles_container.find('[data-article='+articlesList[i][1]+']').hide();
            }
        }
        articles_container.find('.category').hide();
        for (var i=0; i<categories_to_display.length; i++) {
            articles_container
                .find('.category[data-category='+categories_to_display[i]+']')
                .show();
        }
    }

    function updateMatchedArticles(str, commit = true) {
        var lower_str = str.toLowerCase();
        var articlesMatch = deleteNonMatching(articlesList, lower_str);

        if (articlesMatch.length == 1) {
            articleId.val(0);
            // 1 seul résultat, victoire
            if (commit) {
                articleId.val(articlesMatch[0][1]);
                articleSelect.val(articlesMatch[0][0]);
                displayMatchedArticles(articlesList);
                return true;
            }
            displayMatchedArticles(articlesMatch);
        } else if (articlesMatch.length > 1) {
            articleId.val(0);
            if (commit)
                articleSelect.val(sharedPrefix(articlesMatch));
            displayMatchedArticles(articlesMatch);
        }
        return false;
    }

    articleSelect.on('keypress', function(e) {
        var text = articleSelect.val();
        // Comportement normal pour ces touches
        if (normalKeys.test(e.keyCode) || e.ctrlKey) {
            if (text == '' && e.keyCode == 13)
                performOperations();
            if (e.keyCode == 8)
                updateMatchedArticles(text.substring(0,text.length-1), commit=false);
            if (e.charCode == 97 && e.ctrlKey) {
                articleId.val(0);
                articleSelect.val('');
            }
            return true;
        } else if (e.charCode !== 0) {
            if (updateMatchedArticles(text+e.key)) {
                articleNb.val('1');
                articleNb.focus().select();
            }
            return false;
        }
        return false;
    });

    function is_nb_ok(nb) {
        return /^[0-9]+$/.test(nb) && nb > 0 && nb <= 24;
    }

    articleNb.on('keypress', function(e) {
        if (e.keyCode == 13 && is_nb_ok(articleNb.val()) && articleId.val() > 0) {
            addPurchase(articleId.val(), articleNb.val());
            articleSelect.val('');
            articleNb.val('');
            articleSelect.focus();
            displayMatchedArticles(articlesList);
            return false;
        }
        if (normalKeys.test(e.keyCode) || arrowKeys.test(e.keyCode) || e.keyCode == 8 || e.ctrlKey) {
            if (e.ctrlKey && e.charCode == 97)
                articleNb.val('');
            return true;
        }
        var nb = articleNb.val()+e.key;
        if (is_nb_ok(nb))
            return true;
        return false;
    });

    // -----
    // Basket
    // -----

    var item_basket_default_html = '<tr><td class="amount"></td><td class="number"></td><td class="name"></td></tr>';
    var basket_container = $('#basket table');
    var arrowKeys = /^(37|38|39|40)$/;

    function amountEuroPurchase(id,nb) {
        var i = 0;
        while (i<articlesList.length && id != articlesList[i][1]) i++;
        article_data = articlesList[i];
        var reduc_divisor = 1;
        if (account_data['is_cof'])
            reduc_divisor = 1 + subvention_cof / 100;
        return - article_data[3] * nb / reduc_divisor;
    }

    function addPurchase(id, nb) {
        var amount_euro = amountEuroPurchase(id, nb).toFixed(2);
        var index = addPurchaseToFormset(article_data[1], nb, amount_euro);
        article_basket_html = $(item_basket_default_html);
        article_basket_html
            .attr('data-opeindex', index)
            .find('.number').text(nb).end()
            .find('.name').text(article_data[0]).end()
            .find('.amount').text(amountToUKF(amount_euro, account_data['is_cof']));
        basket_container.prepend(article_basket_html);
        updateBasketRel();
    }

    function addDeposit(amount) {
        var deposit_basket_html = $(item_basket_default_html);
        var amount = parseFloat(amount).toFixed(2);
        var index = addDepositToFormset(amount);
        deposit_basket_html
            .attr('data-opeindex', index)
            .find('.number').text(amount+"€").end()
            .find('.name').text('Charge').end()
            .find('.amount').text(amountToUKF(amount, account_data['is_cof']));
        basket_container.prepend(deposit_basket_html);
        updateBasketRel();
    }

    function addWithdraw(amount) {
        var withdraw_basket_html = $(item_basket_default_html);
        var amount = (- parseFloat(amount)).toFixed(2);
        var index = addWithdrawToFormset(amount);
        withdraw_basket_html
            .attr('data-opeindex', index)
            .find('.number').text(amount+"€").end()
            .find('.name').text('Retrait').end()
            .find('.amount').text(amountToUKF(amount, account_data['is_cof']));
        basket_container.prepend(withdraw_basket_html);
        updateBasketRel();
    }

    basket_container.selectable({
        filter: 'tr',
    });

    $(document).on('keypress', function (e) {
        if (e.keyCode == 46) {
            // DEL (Suppr)
            basket_container.find('.ui-selected').each(function () {
                deleteFromBasket($(this).data('opeindex'));
            });
        }
    });

    function isBasketEmpty() {
        return !basket_container.find('[data-opeindex]').length;
    }

    function getAmountBasket() {
        var total = 0;
        formset_container.find('[data-opeindex]').each(function () {
            var opeindex = $(this).attr('data-opeindex');
            if (!$(this).find('#id_form-'+opeindex+'-DELETE').prop('checked'))
                total += parseFloat($(this).find('#id_form-'+opeindex+'-amount').val());
        });
        return total;
    }

    function updateBasketAmount() {
        formset_container.find('[data-opeindex]').each(function () {
            var opeindex = $(this).attr('data-opeindex');
            var deleted = $(this).find('#id_form-'+opeindex+'-DELETE').prop('checked');
            var type = $(this).find('#id_form-'+opeindex+'-type').val();
            var article_id = $(this).find('#id_form-'+opeindex+'-article').val();
            var article_nb = $(this).find('#id_form-'+opeindex+'-article_nb').val();
            var amount = $(this).find('#id_form-'+opeindex+'-amount');
            if (!deleted && type == "purchase")
                amount.val(amountEuroPurchase(article_id, article_nb));
            basket_container.find('[data-opeindex='+opeindex+'] .amount').text(amountToUKF(amount.val(), account_data['is_cof']));
        });
    }

    var basketrel_container = $('#basket_rel');

    function updateBasketRel() {
        var basketrel_html = '';
        if (account_data['trigramme'] == 'LIQ' && !isBasketEmpty()) {
            var amount = - getAmountBasket();
            basketrel_html += '<div>Total: '+amount.toFixed(2)+' €</div>';
            if (amount < 5)
                basketrel_html += '<div>Sur 5€: '+ (5-amount).toFixed(2) +' €</div>';
            if (amount < 10)
                basketrel_html += '<div>Sur 10€: '+ (10-amount).toFixed(2) +' €</div>';
            if (amount < 20)
                basketrel_html += '<div>Sur 20€: '+ (20-amount).toFixed(2) +' €</div>';
        } else if (account_data['trigramme'] != '' && !isBasketEmpty()) {
            var amount = getAmountBasket();
            var amountUKF = amountToUKF(amount, account_data['is_cof']);
            var newBalance = account_data['balance'] + amount;
            var newBalanceUKF = amountToUKF(newBalance, account_data['is_cof']);
            basketrel_html += '<div>Total: '+amountUKF+'</div>';
            basketrel_html += '<div>Nouveau solde: '+newBalanceUKF+'</div>';
            if (newBalance < 0)
                basketrel_html += '<div>Manque: '+ (-newBalance).toFixed(2) +' €</div>';
        }
        basketrel_container.html(basketrel_html);
    }

    function deleteFromBasket(opeindex) {
        basket_container.find('[data-opeindex='+opeindex+']').remove();
        deleteFromFormset(opeindex);
        updateBasketRel();
    }

    function resetBasket() {
        basket_container.find('tr').remove();
        mngmt_total_forms = 1;
        mngmt_total_forms_input.val(1);
        formset_container.find('div').remove();
        updateBasketRel();
        articleId.val(0);
        articleSelect.val('');
        articleNb.val('');
        displayMatchedArticles(articlesList);
    }

    // -----
    // Ask deposit or withdraw
    // -----

    function askDeposit() {
        $.confirm({
            title: 'Montant de la charge',
            content: '<input type="number" step="0.01" min="0.01" on autofocus placeholder="€">',
            backgroundDismiss: true,
            animation:'top',
            closeAnimation:'bottom',
            keyboardEnabled: true,
            confirm: function() {
                var amount = this.$content.find('input').val();
                if (!$.isNumeric(amount) || amount <= 0)
                    return false;
                addDeposit(amount);
            },
            onOpen: function() {
                var that = this
                this.$content.find('input').on('keypress', function(e) {
                    if (e.keyCode == 13)
                        that.$confirmButton.click();
                });
            },
            onClose: function() { this._lastFocused = articleSelect; }
        });
    }

    function askWithdraw() {
        $.confirm({
            title: 'Montant du retrait',
            content: '<input type="number" step="0.01" min="0.01" on autofocus placeholder="€">',
            backgroundDismiss: true,
            animation:'top',
            closeAnimation:'bottom',
            keyboardEnabled: true,
            confirm: function() {
                var amount = this.$content.find('input').val();
                if (!$.isNumeric(amount) || amount <= 0)
                    return false;
                addWithdraw(amount);
            },
            onOpen: function() {
                var that = this
                this.$content.find('input').on('keypress', function(e) {
                    if (e.keyCode == 13)
                        that.$confirmButton.click();
                });
            },
            onClose: function() { this._lastFocused = articleSelect; }
        });
    }

    // Event

    var depositButton = $('#operation_deposit');
    var withdrawButton = $('#operation_withdraw');

    depositButton.on('click', function() { askDeposit(); });
    withdrawButton.on('click', function() { askWithdraw(); });

    // -----
    // Operation formset management
    // -----

    var operation_empty_html = $('#operation_empty_html')
        .removeAttr('id')
        .find('label').remove().end()
        .find('#id_form-__prefix__-DELETE').css('display','none').end();
    $('#id_form-0-DELETE').prop('checked',true);

    var formset_container = $('#operation_formset');
    var mngmt_total_forms_input = $('#id_form-TOTAL_FORMS');
    var mngmt_total_forms = 1;
    var prefix_regex = /__prefix__/;

    function addOperationToFormset(type, amount, article='', article_nb='', is_checkout=1) {
        var operation_html = operation_empty_html.clone();
        var index = mngmt_total_forms;

        operation_html.attr('data-opeindex', index);

        operation_html
            .find('#id_form-__prefix__-type').val(type).end()
            .find('#id_form-__prefix__-amount').val(amount).end()
            .find('#id_form-__prefix__-article').val(article).end()
            .find('#id_form-__prefix__-article_nb').val(article_nb).end()
            .find('#id_form-__prefix__-is_checkout').val(is_checkout);

        mngmt_total_forms_input.val(index+1);
        mngmt_total_forms++;

        operation_html.find(':input').each(function() {
            var name = $(this).attr('name').replace(prefix_regex, index);
            var id = 'id_' + name;
            $(this).attr({'name': name, 'id': id});
        });
        formset_container.append(operation_html);

        return index;
    }

    function addDepositToFormset(amount, is_checkout=1) {
        return addOperationToFormset('deposit', amount, '', '', is_checkout);
    }

    function addWithdrawToFormset(amount, is_checkout=1) {
        return addOperationToFormset('withdraw', amount, '', '', is_checkout);
    }

    function addPurchaseToFormset(article_id, article_nb, amount=0) {
        return addOperationToFormset('purchase', amount, article_id, article_nb);
    }

    function deleteFromFormset(opeindex) {
        formset_container.find('#id_form-'+opeindex+'-DELETE').prop('checked', true);
    }

    // -----
    // History
    // -----

    var history_container = $('#history');
    var history_operationgroup_html = '<div class="opegroup"><span class="time"></span><span class="trigramme"></span><span class="amount"></span></div>';
    var history_operation_html = '<div class="ope"><span class="amount"></span><span class="infos1"></span><span class="infos2"></span></div>';

    function getOpeHtml(ope, is_cof=false, trigramme='') {
        var ope_html = $(history_operation_html);
        var amount = parseFloat(ope['amount']);
        var amountUKF = amountToUKF(amount, is_cof);
        var infos1 = '', infos2 = '';

        if (ope['type'] == 'deposit') {
            infos1 = amount.toFixed(2)+'€';
            infos2 = 'Charge';
        } else if (ope['type'] == 'withdraw') {
            infos1 = amount.toFixed(2)+'€';
            infos2 = 'Retrait';
        } else {
            infos1 = ope['article_nb'];
            infos2 = ope['article__name'];
        }

        if (trigramme == 'LIQ')
            amountUKF = (- amount).toFixed(2) +"€";

        ope_html
            .attr('data-ope', ope['id'])
            .find('.amount').text(amountUKF).end()
            .find('.infos1').text(infos1).end()
            .find('.infos2').text(infos2).end();

        if (ope['canceled_at'])
            ope_html.addClass('canceled');

        return ope_html;
    }

    function getOpegroupHtml(opegroup) {
        var opegroup_html = $(history_operationgroup_html);
        var at = new Date(opegroup['at']);
        var at_hours = (at.getHours() < 10 ? '0' : '') + at.getHours();
        var at_minutes = (at.getMinutes() < 10 ? '0' : '') + at.getMinutes();
        var at_seconds = (at.getSeconds() < 10 ? '0' : '') + at.getSeconds();
        var at_formated = at_hours+':'+at_minutes+':'+at_seconds;
        var amount = parseFloat(opegroup['amount']);
        var trigramme = opegroup['on_acc__trigramme'];
        if (opegroup['on_acc__trigramme'] == 'LIQ') {
            var amount = (- amount).toFixed(2) +'€';
        } else {
            var amount = amountToUKF(amount, opegroup['is_cof']);
        }

        opegroup_html
            .attr('data-opegroup', opegroup['id'])
            .find('.time').text(at_formated).end()
            .find('.amount').text(amount).end()
            .find('.trigramme').text(trigramme).end();

        return opegroup_html;
    }

    function addOpeGroup(opegroup) {
        checkOrCreateDay(opegroup['at']);
        var $opegroup_html = getOpegroupHtml(opegroup);
        history_container.find('.day').first().after($opegroup_html);

        // Ajout des opérations de ce groupe
        var $opegroup = history_container.find('[data-opegroup='+opegroup['id']+']');
        for (var i=0; i < opegroup['opes'].length; i++) {
            var $ope = getOpeHtml(opegroup['opes'][i], opegroup['is_cof'], opegroup['on_acc__trigramme']);
            $ope.attr('data-opegroup', opegroup['id']);
            $opegroup.after($ope);
        }
    }

    var history_day_default_html = '<div class="day"></div>';
    var months = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];

    function checkOrCreateDay(at) {
        var at = new Date(at);
        var mostRecentDay = history_container.find('.day').first();
        if (mostRecentDay.length == 0 || at.getMonth() != mostRecentDay.attr('data-month') || at.getDate() != mostRecentDay.attr('data-day')) {
            var day_html = $(history_day_default_html);
            day_html
                .attr('data-month', at.getMonth())
                .attr('data-day', at.getDate())
                .text(at.getDate()+' '+months[at.getMonth()]);
            history_container.prepend(day_html);
        }
    }

    function getHistory() {
        $.ajax({
            dataType: "json",
            url     : "{% url 'kfet.kpsul.history' %}",
            method  : "GET",
        })
        .done(function(data) {
            for (var opegroup_id in data) {
                addOpeGroup(data[opegroup_id]);
            }
        });
    }

    function resetHistory() {
        history_container.children().remove();
    }

    // -----
    // Cancel from history
    // -----

    history_container.selectable({
        filter: 'div.opegroup, div.ope',
        selected: function(e, ui) {
            $(ui.selected).each(function() {
                if ($(this).hasClass('opegroup'))
                    $(this).siblings('.ope').addClass('ui-selected');
            });
        },
        unselected: function(e, ui) {
            $(ui.unselected).each(function() {
                if ($(this).hasClass('opegroup'))
                    $(this).siblings('.ope').removeClass('ui-selected');
            });
        }
    });

    $(document).on('keypress', function (e) {
        if (e.keyCode == 46) {
            // DEL (Suppr)
            var opes_to_cancel = [];
            history_container.find('.ope.ui-selected').each(function () {
                opes_to_cancel.push($(this).attr('data-ope'));
            });
            cancelOperations(opes_to_cancel);
        }
    });

    function cancelOpeGroup(opegroup) {
        var opegroup_html = history_container.find('[data-opegroup='+opegroup['id']+']');
        if (opegroup_html.find('.trigramme').text() == 'LIQ') {
            var amount = (- parseFloat(opegroup['amount']).tofixed(2))+'€';
        } else {
            var amount = amountToUKF(opegroup['amount'], opegroup['on_acc__is_cof']);
        }
        opegroup_html.find('.amount').text(amount);
    }

    function cancelOpe(ope) {
        var ope_html = history_container.find('[data-ope='+ope['id']+']');
        ope_html.addClass('canceled');
    }

    // -----
    // Synchronization
    // -----

    websocket_msg_default = {'opegroups':[],'opes':[],'checkouts':[],'articles':[]}

    socket = new ReconnectingWebSocket("ws://" + window.location.host + "/k-fet/k-psul/");
    socket.onmessage = function(e) {
        data = $.extend({}, websocket_msg_default, JSON.parse(e.data));

        for (var i=0; i<data['opegroups'].length; i++) {
            if (data['opegroups'][i]['add']) {
                addOpeGroup(data['opegroups'][i]);
            } else if (data['opegroups'][i]['cancellation']) {
                cancelOpeGroup(data['opegroups'][i]);
            }
        }
        for (var i=0; i<data['opes'].length; i++) {
            if (data['opes'][i]['cancellation']) {
                cancelOpe(data['opes'][i]);
            }
        }
        for (var i=0; i<data['checkouts'].length; i++) {
            if (checkout_data['id'] == data['checkouts'][i]['id']) {
                checkout_data['balance'] = data['checkouts'][i]['balance'];
                displayCheckoutData();
            }
        }
        for (var i=0; i<data['articles'].length; i++) {
            article = data['articles'][i];
            articles_container.find('[data-article='+article['id']+'] .stock')
                .text(article['stock']);
        }
    }

    // -----
    // General
    // -----

    // Reset functions

    function coolReset(give_tri_focus=true) {
        resetAccount();
        resetBasket();
        resetSelectable();
        if (give_tri_focus)
            triInput.focus();
    }

    function hardReset(give_tri_focus=true) {
        coolReset(give_tri_focus);
        resetCheckout();
        resetArticles();
        resetHistory();
        getArticles();
        getHistory();
    }

    function resetSelectable() {
        $('.ui-selected').removeClass('ui-selected');
    }

    // Shorcuts

    $(document).on('keydown', function(e) {
        switch (e.keyCode) {
            case 112:
                // F1 - Cool reset
                coolReset();
                return false;
            case 113:
                if (e.shiftKey) {
                    // Shift+F2 - Basket reset
                    resetBasket();
                    articleSelect.focus();
                } else {
                    // F2 - Account reset
                    resetAccount();
                    triInput.focus();
                }
                return false;
            case 114:
                if (e.shiftKey) {
                    // Shift+F3 - Withdraw
                    askWithdraw();
                    articleSelect.focus();
                } else {
                    // F3 - Withdraw
                    askDeposit();
                    articleSelect.focus();
                }
                return false;
            case 121:
                // F10 - Hard reset
                hardReset();
                return false;
        }
    });

    // -----
    // Initiliazing all
    // -----

    hardReset();

});
</script>

{% endblock %}