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

{% load i18n static django_tables2 %}

{% block content %}

    <div class="row">
        <div class="col-xl-12">
            <div class="btn-group btn-group-toggle" style="width: 100%; padding: 0 0 2em 0" data-toggle="buttons">
                <label class="btn btn-sm btn-outline-primary active">
                    <input type="radio" name="transaction_type" id="type_gift" checked>
                    {% trans "Gift" %}
                </label>
                <label class="btn btn-sm btn-outline-primary">
                    <input type="radio" name="transaction_type" id="type_transfer">
                    {% trans "Transfer" %}
                </label>
                <label class="btn btn-sm btn-outline-primary">
                    <input type="radio" name="transaction_type" id="type_credit">
                    {% trans "Credit" %}
                </label>
                <label class="btn btn-sm btn-outline-primary">
                    <input type="radio" name="transaction_type" id="type_debit">
                    {% trans "Debit" %}
                </label>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4" 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">
                        {% trans "Select emitters" %}
                    </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-xl-4" id="note_infos_div">
            <div class="card border-success shadow mb-4">
                <img src="/media/pic/default.png"
                    id="profile_pic" alt="" class="img-fluid rounded mx-auto d-block">
                <div class="card-body text-center">
                    <span id="user_note"></span>
                </div>
            </div>
        </div>

        <div class="col-md-4" id="external_div" style="display: none;">
            <div class="card border-success shadow mb-4">
                <div class="card-header">
                    <p class="card-text font-weight-bold">
                        {% trans "External payment" %}
                    </p>
                </div>
                <ul class="list-group list-group-flush" id="source_note_list">
                </ul>
                <div class="card-body">
                    <div class="form-row">
                        <div class="col-md-12">
                            <label for="credit_type">{% trans "Transfer type" %} :</label>
                            <select id="credit_type" class="custom-select">
                                {% for special_type in special_types %}
                                    <option value="{{ special_type.id }}">{{ special_type.special_type }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-12">
                            <label for="last_name">{% trans "Name" %} :</label>
                            <input type="text" id="last_name" class="form-control" />
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-12">
                            <label for="first_name">{% trans "First name" %} :</label>
                            <input type="text" id="first_name" class="form-control" />
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-12">
                            <label for="bank">{% trans "Bank" %} :</label>
                            <input type="text" id="bank" class="form-control" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-8" id="dests_div">
            <div class="card border-info shadow mb-4">
                <div class="card-header">
                    <p class="card-text font-weight-bold" id="dest_title">
                        {% trans "Select receivers" %}
                    </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>

    <div class="card shadow mb-4" id="history">
        <div class="card-header">
            <p class="card-text font-weight-bold">
                {% trans "Recent transactions history" %}
            </p>
        </div>
        {% render_table table %}
    </div>
{% endblock %}

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

        function refreshHistory() {
            $("#history").load("/note/transfer/ #history");
        }

        function reset() {
            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("");
            $("#last_name").val("");
            $("#first_name").val("");
            $("#bank").val("");
            refreshBalance();
            refreshHistory();
        }

        $(document).ready(function() {
            autoCompleteNote("source_note", "source_alias_matched", "source_note_list", sources, sources_notes_display,
                "source_alias", "source_note", "user_note", "profile_pic");
            autoCompleteNote("dest_note", "dest_alias_matched", "dest_note_list", dests, dests_notes_display,
                "dest_alias", "dest_note", "user_note", "profile_pic", function() {
                    let last = dests_notes_display[dests_notes_display.length - 1];
                    dests_notes_display.length = 0;
                    dests_notes_display.push(last);

                    last.quantity = 1;

                    $.getJSON("/api/user/" + last.note.user + "/", function(user) {
                        $("#last_name").val(user.last_name);
                        $("#first_name").val(user.first_name);
                    });

                    return true;
               });
        });

        $("#type_gift").click(function() {
            $("#emitters_div").hide();
            $("#external_div").hide();
            $("#dests_div").attr('class', 'col-md-8');
            $("#dest_title").text("{% trans "Select receivers" %}");
        });

        $("#type_transfer").click(function() {
            $("#emitters_div").show();
            $("#external_div").hide();
            $("#dests_div").attr('class', 'col-md-4');
            $("#dest_title").text("{% trans "Select receivers" %}");
        });

        $("#type_credit").click(function() {
            $("#emitters_div").hide();
            $("#external_div").show();
            $("#dests_div").attr('class', 'col-md-4');
            $("#dest_title").text("{% trans "Credit note" %}");
        });

        $("#type_debit").click(function() {
            $("#emitters_div").hide();
            $("#external_div").show();
            $("#dests_div").attr('class', 'col-md-4');
            $("#dest_title").text("{% trans "Debit note" %}");
        });

        $("#transfer").click(function() {
            if ($("#type_gift").is(':checked')) {
                dests_notes_display.forEach(function (dest) {
                    $.post("/api/note/transaction/transaction/",
                        {
                            "csrfmiddlewaretoken": CSRF_TOKEN,
                            "quantity": dest.quantity,
                            "amount": $("#amount").val(),
                            "reason": $("#reason").val(),
                            "valid": true,
                            "polymorphic_ctype": {{ polymorphic_ctype }},
                            "resourcetype": "Transaction",
                            "type": "gift",
                            "source": {{ user.note.id }},
                            "destination": dest.id
                        }, function () {
                            addMsg("Le transfert de "
                                + pretty_money(dest.quantity * $("#amount").val()) + " de votre note "
                                + " vers la note " + dest.name + " a été fait avec succès !", "success");

                            reset();
                        }).fail(function (err) {
                            addMsg("Le transfert de "
                                + pretty_money(dest.quantity * $("#amount").val()) + " de votre note "
                                + " vers la note " + dest.name + " a échoué : " + err.responseText, "danger");

                        reset();
                    });
                });
            }
            else if ($("#type_transfer").is(':checked')) {
                sources_notes_display.forEach(function (source) {
                    dests_notes_display.forEach(function (dest) {
                        $.post("/api/note/transaction/transaction/",
                            {
                                "csrfmiddlewaretoken": CSRF_TOKEN,
                                "quantity": source.quantity * dest.quantity,
                                "amount": $("#amount").val(),
                                "reason": $("#reason").val(),
                                "valid": true,
                                "polymorphic_ctype": {{ polymorphic_ctype }},
                                "resourcetype": "Transaction",
                                "type": "transfer",
                                "source": source.id,
                                "destination": dest.id
                            }, function () {
                                addMsg("Le transfert de "
                                    + pretty_money(source.quantity * dest.quantity * $("#amount").val()) + " de la note " + source.name
                                    + " vers la note " + dest.name + " a été fait avec succès !", "success");

                                reset();
                            }).fail(function (err) {
                                addMsg("Le transfert de "
                                    + pretty_money(source.quantity * dest.quantity * $("#amount").val()) + " de la note " + source.name
                                    + " vers la note " + dest.name + " a échoué : " + err.responseText, "danger");

                                reset();
                        });
                    });
                });
            } else if ($("#type_credit").is(':checked') || $("#type_debit").is(':checked')) {
                let special_note = $("#credit_type").val();
                let user_note = dests_notes_display[0].id;
                let given_reason = $("#reason").val();
                let source, dest, reason, type;
                if ($("#type_credit").is(':checked')) {
                    source = special_note;
                    dest = user_note;
                    type = "credit";
                    reason = "Crédit " + $("#credit_type option:selected").text().toLowerCase();
                    if (given_reason.length > 0)
                        reason += " (" + given_reason + ")";
                }
                else {
                    source = user_note;
                    dest = special_note;
                    type = "debit";
                    reason = "Retrait " + $("#credit_type option:selected").text().toLowerCase();
                    if (given_reason.length > 0)
                        reason += " (" + given_reason + ")";
                }
                $.post("/api/note/transaction/transaction/",
                    {
                        "csrfmiddlewaretoken": CSRF_TOKEN,
                        "quantity": 1,
                        "amount": $("#amount").val(),
                        "reason": reason,
                        "valid": true,
                        "polymorphic_ctype": {{ special_polymorphic_ctype }},
                        "resourcetype": "SpecialTransaction",
                        "type": type,
                        "source": source,
                        "destination": dest,
                        "last_name": $("#last_name").val(),
                        "first_name": $("#first_name").val(),
                        "bank": $("#bank").val()
                    }, function () {
                        addMsg("Le crédit/retrait a bien été effectué !", "success");
                        reset();
                    }).fail(function (err) {
                        addMsg("Le crédit/transfert a échoué : " + err.responseText, "danger");
                        reset();
                });
            }
        });
    </script>
{% endblock %}