{% extends "base.html" %}
{% comment %}
SPDX-License-Identifier: GPL-2.0-or-later
{% endcomment %}

{% load i18n static %}

{% block content %}

    <div class="row">
        <div class="col-xl-12">
            <button id="switch_mode" class="form-control btn btn-secondary">Passer en mode transfert</button>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6" id="emitters_div" style="display: none;">
            <div class="card border-success shadow mb-4">
                <div class="card-header">
                    <p class="card-text font-weight-bold">
                        Sélection des émetteurs
                    </p>
                </div>
                <ul class="list-group list-group-flush" id="source_note_list">
                </ul>
                <div class="card-body">
                    <input class="form-control mx-auto d-block" type="text" id="source_note" />
                    <ul class="list-group list-group-flush" id="source_alias_matched">
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-md-12" id="dests_div">
            <div class="card border-info shadow mb-4">
                <div class="card-header">
                    <p class="card-text font-weight-bold">
                        Sélection des destinataires
                    </p>
                </div>
                <ul class="list-group list-group-flush" id="dest_note_list">
                </ul>
                <div class="card-body">
                    <input class="form-control mx-auto d-block" type="text" id="dest_note" />
                    <ul class="list-group list-group-flush" id="dest_alias_matched">
                    </ul>
                </div>
            </div>
        </div>
    </div>


    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="amount">{% trans "Amount" %} :</label>
            <input class="form-control mx-auto d-block" type="number" min="-20" id="amount" />
        </div>

        <div class="form-group col-md-6">
            <label for="reason">{% trans "Reason" %} :</label>
            <input class="form-control mx-auto d-block" type="text" id="reason" />
        </div>
    </div>

    <div class="form-row">
        <div class="col-md-12">
            <button id="transfer" class="form-control btn btn-primary">{% trans 'Transfer' %}</button>
        </div>
    </div>
{% endblock %}

{% block extrajavascript %}
    <script>
        sources = [];
        sources_notes_display = [];
        dests = [];
        dests_notes_display = [];
        transfer_mode = false;

        $(document).ready(function() {
           autoCompleteNote("source_note", "source_alias_matched", "source_note_list", sources, sources_notes_display,
                "source_alias", "source_note");
           autoCompleteNote("dest_note", "dest_alias_matched", "dest_note_list", dests, dests_notes_display,
                "dest_alias", "dest_note");
        });

        $("#switch_mode").click(function () {
            transfer_mode ^= true;
            if (transfer_mode) {
                $("#switch_mode").text("Passer en mode virement");
                $("#emitters_div").show();
                $("#dests_div").attr('class', 'col-md-6');
            }
            else {
                $("#switch_mode").text("Passer en mode transfert");
                $("#emitters_div").hide();
                $("#dests_div").attr('class', 'col-md-12');
            }
        });

        $("#transfer").click(function() {
            if (sources_notes_display.length === 0) {
                dests_notes_display.forEach(function (dest) {
                    $.post("/api/note/transaction/transaction/",
                        {
                            "csrfmiddlewaretoken": CSRF_TOKEN,
                            "quantity": dest[3],
                            "amount": $("#amount").val(),
                            "reason": $("#reason").val() + " (Don)",
                            "valid": true,
                            "polymorphic_ctype": {{ polymorphic_ctype }},
                            "resourcetype": "Transaction",
                            "source": {{ user.note.id }},
                            "destination": dest[1]
                        }, function () {
                            let msgDiv = $("#messages");
                            let html = msgDiv.html();
                            html += "<div class=\"alert alert-success\">Le transfert de "
                                + pretty_money(dest[3] * $("#amount").val()) + " de votre note "
                                + " vers la note " + dest[0] + " a été fait avec succès !</div>\n";
                            msgDiv.html(html);

                            sources_notes_display.length = 0;
                            sources.length = 0;
                            dests_notes_display.length = 0;
                            dests.length = 0;
                            $("#source_note_list").html("");
                            $("#dest_note_list").html("");
                            $("#source_alias_matched").html("");
                            $("#dest_alias_matched").html("");
                            $("#amount").val("");
                            $("#reason").val("");
                            refreshBalance();
                        }).fail(function (err) {
                        let msgDiv = $("#messages");
                        let html = msgDiv.html();
                        html += "<div class=\"alert alert-danger\">Le transfert de "
                            + pretty_money(dest[3] * $("#amount").val()) + " de votre note "
                            + " vers la note " + dest[0] + " a échoué : " + err.responseText + "</div>\n";
                        msgDiv.html(html);

                        sources_notes_display.length = 0;
                        sources.length = 0;
                        dests_notes_display.length = 0;
                        dests.length = 0;
                        $("#source_note_list").html("");
                        $("#dest_note_list").html("");
                        $("#source_alias_matched").html("");
                        $("#dest_alias_matched").html("");
                        $("#amount").val("");
                        $("#reason").val("");
                        refreshBalance();
                    });
                });
            }
            else {
                sources_notes_display.forEach(function (source) {
                    dests_notes_display.forEach(function (dest) {
                        $.post("/api/note/transaction/transaction/",
                            {
                                "csrfmiddlewaretoken": CSRF_TOKEN,
                                "quantity": source[3] * dest[3],
                                "amount": $("#amount").val(),
                                "reason": $("#reason").val() + " (Transfert)",
                                "valid": true,
                                "polymorphic_ctype": {{ polymorphic_ctype }},
                                "resourcetype": "Transaction",
                                "source": source[1],
                                "destination": dest[1]
                            }, function () {
                                let msgDiv = $("#messages");
                                let html = msgDiv.html();
                                html += "<div class=\"alert alert-success\">Le transfert de "
                                    + pretty_money(source[3] * dest[3] * $("#amount").val()) + " de la note " + source[0]
                                    + " vers la note " + dest[0] + " a été fait avec succès !</div>\n";
                                msgDiv.html(html);

                                sources_notes_display.length = 0;
                                sources.length = 0;
                                dests_notes_display.length = 0;
                                dests.length = 0;
                                $("#source_note_list").html("");
                                $("#dest_note_list").html("");
                                $("#source_alias_matched").html("");
                                $("#dest_alias_matched").html("");
                                $("#amount").val("");
                                $("#reason").val("");
                                refreshBalance();
                            }).fail(function (err) {
                                let msgDiv = $("#messages");
                                let html = msgDiv.html();
                                html += "<div class=\"alert alert-danger\">Le transfert de "
                                    + pretty_money(source[3] * dest[3] * $("#amount").val()) + " de la note " + source[0]
                                    + " vers la note " + dest[0] + " a échoué : " + err.responseText + "</div>\n";
                                msgDiv.html(html);

                                sources_notes_display.length = 0;
                                sources.length = 0;
                                dests_notes_display.length = 0;
                                dests.length = 0;
                                $("#source_note_list").html("");
                                $("#dest_note_list").html("");
                                $("#source_alias_matched").html("");
                                $("#dest_alias_matched").html("");
                                $("#amount").val("");
                                $("#reason").val("");
                                refreshBalance();
                        });
                    });
                });
            }
        });
    </script>
{% endblock %}