{% extends 'transactions/extends/layout.html' %}
{% load static %}
{% load humanize %}
{% block content %}
    {% block scripts %}
        <script>
            var global_state = {
                baseUrl: '{{ baseUrl }}',
                accTypesJson: '{{ accTypesJson|safe }}',
                transactionChargesJson: '{{ transactionChargesJson|safe }}'
            }
        </script>
        <script src="{% static 'sacco/assets/custom_js/custom_transaction_charges.js' %}"></script>
    {% endblock %}
    <!-- start page title -->
    <div class="row p-0">
        <div class="col-md-12">
            <div class="card mt-2">
                <div class="card-header text-uppercase">
                    <div class="row align-content-between">
                        <div class="col-md-5">
                            <h4>Make Transactions</h4>
                        </div>
                        <div class="col-md-7">
                            <!-- Any action Here --->
                            <div class="page-title-right d-flex justify-content-end">
                                <button class="btn btn-primary btn-block"><i class="fa fa-file"></i> Transactions Report
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Make Transactions</h4>
                    <form id="savetransaction">
                        {% csrf_token %}
                        <div class="row mb-4">
                            <div class="form-group col-sm-6">
                                <label>Reference Number</label>
                                <input type="text" name="refno" class="form-control"
                                       placeholder="Enter Reference Number (Optional)">
                            </div>
                            <div class="form-group col-sm-6">
                                <label>Select Action</label>
                                <input type="hidden" name="action" id="act">
                                <select class="form-control chosen-select" id="action"
                                        onchange="getaccounts(this.value); document.getElementById('act').value=this.options[this.selectedIndex].text;"
                                        required>
                                    <option value="" disabled selected>Select Action</option>
                                    <option value="1">Withdraw to Cash</option>
                                    <option value="2">Deposit from Cash</option>
                                    <option value="3">Record Received Funds</option>
                                    <option value="4">Record Payment to Funder</option>
                                    <option value="8">Record Supplier Payment</option>
                                    <option value="9">Record Customer Payment</option>
                                    <option value="200">Other Transactions</option>
                                </select>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="form-group row col-sm-6">
                                <div class="col-11">
                                    <label id="dr_lebel">Account DR</label>
                                <div class="input-group">
                                    <select class="form-control select2" data-toggle="select2" name="account_dr" id="gl_dr" required>
                                    </select>
                                </div>
                                </div>
                                <div class="col-1">
                                    <div class="mt-3">
                                        <span class="btn btn-info btn-sm" id="btn_gl_dr"><i class="fa fa-plus"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row col-sm-6">
                                <div class="col-11">
                                <label id="cr_lebel">Account CR</label>
                                <div class="input-group">
                                    <select class="form-control select2" data-toggle="select2" name="account_cr" id="gl_cr" required>
                                    </select>
                                </div>
                                </div>
                                <div class="col-1">
                                    <div class="mt-3">
                                        <span class="btn btn-info btn-sm" id="btn_gl_cr"><i class="fa fa-plus"></i></span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="form-group col-sm-6">
                                <label>Transaction Amount</label>
                                <input type="text" class="form-control" data-type="currency" name="amount" placeholder="Transaction Amount" required>
                            </div>
                            <div class="form-group col-sm-6">
                                <label>Transaction Date</label>
                                <input type="date" name="date" class="form-control" placeholder="Enter Transaction Date" id="txdate" required>
                            </div>
                            <div class="form-group mt-3 col-sm-12">
                                <label>Transaction Narrative</label>
                                <textarea class="form-control" name="narration" placeholder="Narrative (Optional)"></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="reset" class="btn btn-danger">reset</button>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div> <!-- end col -->
    </div>


{% endblock %}

{% block javascript %}
    <script>
        function Handleresults(result, id) {
            // toastr.success('Account Created Successfully', 'Success');
            new PNotify({
                title: 'Success', text: 'Saved', type: 'success'
            });
            $('#' + id).append($(result));

        }
    </script>
    <script>
        document.getElementById("txdate").value = new Date().toISOString().substr(0, 10);
    </script>
    <script>
        function getaccounts(value) {
            {#var tx_type = document.getElementById("txtype").value;#}
            var acctypedr = null;
            var acctypecr = null;
            if (value == "1") {
                document.getElementById("dr_lebel").innerHTML = "Select Cash Account";
                document.getElementById("cr_lebel").innerHTML = "Withdraw from Which Account ";
                acctypedr = "Cash";
                acctypecr = "Bank|Wallet|Mobile Money";
            } else if (value == "2") {
                document.getElementById("dr_lebel").innerHTML = "Deposit to which Account";
                document.getElementById("cr_lebel").innerHTML = "Select Cash Account";
                acctypedr = "Bank|Wallet|Mobile Money";
                acctypecr = "Cash";
            } else if (value == "3") {
                document.getElementById("dr_lebel").innerHTML = "Select Receiving Account";
                document.getElementById("cr_lebel").innerHTML = "Select Funder Account";
                acctypedr = "Bank|Wallet|Mobile Money|Cash";
                acctypecr = "Funders";
            } else if (value == "4") {
                document.getElementById("dr_lebel").innerHTML = "Select Funder Account";
                document.getElementById("cr_lebel").innerHTML = "Select Paying Account";
                acctypedr = "Funders";
                acctypecr = "Bank|Wallet|Mobile Money|Cash";
            } else if (value == "5") {
                document.getElementById("dr_lebel").innerHTML = "Which Expense Account";
                document.getElementById("cr_lebel").innerHTML = "Which Expense Supplier";
                acctypedr = "Expenses";
                acctypecr = "Suppliers";
            } else if (value == "6") {
                document.getElementById("dr_lebel").innerHTML = "To Which Expense";
                document.getElementById("cr_lebel").innerHTML = "From which Account";
                acctypedr = "Expenses";
                acctypecr = "Bank|Wallet|Mobile Money|Cash";
            } else if (value == "7") {
                document.getElementById("dr_lebel").innerHTML = "Select Prepayment Account";
                document.getElementById("cr_lebel").innerHTML = "Select Supplier";
                acctypedr = "Prepayments";
                acctypecr = "Suppliers";
            } else if (value == "8") {
                document.getElementById("dr_lebel").innerHTML = "Select Supplier Account";
                document.getElementById("cr_lebel").innerHTML = "Select Paying Account";
                acctypedr = "Suppliers";
                acctypecr = "Bank|Wallet|Mobile Money|Cash";

            } else if (value == "9") {
                document.getElementById("dr_lebel").innerHTML = "Select Supplier Account";
                document.getElementById("cr_lebel").innerHTML = "Select Paying Account";
                acctypedr = "Suppliers";
                acctypecr = "Bank|Wallet|Mobile Money|Cash";

            } else if (value == "10") {
                document.getElementById("dr_lebel").innerHTML = "Select Paying Account";
                document.getElementById("cr_lebel").innerHTML = "Select Customer";
                acctypecr = "Customers";
                acctypedr = "Bank|Wallet|Mobile Money|Cash";

            } else if (value == "200") {
                document.getElementById("dr_lebel").innerHTML = "To which Account (Dr Acct)";
                document.getElementById("cr_lebel").innerHTML = "From Which Account (CR Acct)";
                acctypedr = "All";
                acctypecr = "All";
            }

            //submit and get lists of accounts
            var request;

            if (request) {
                request.abort();
            }

            var data = {
                acctype: acctypedr
            }
            request = $.ajax({
                url: "/transactions/get_acc/",
                type: "POST",
                data: data
            });
            request.done(function (response, textStatus, jqXHR) {
                //toastr.error(response, "error");

                if (response == "0") {
                    toastr.error("You are not authenicated", 'Error');

                } else if (response == "1") {
                    toastr.error("Bad request", 'Error');

                } else {
                    document.getElementById("gl_dr").innerHTML = response;

                    var btn_dr = document.getElementById("btn_gl_dr");
                    var btn_cr = document.getElementById("btn_gl_cr");
                    $("#btn_gl_dr").click(function () {
                        window.open('/transactions/new-account/' + acctypedr + '/' + acctypedr + '/gl_dr/', '', 'width=800, height=600');
                    });

                    $("#btn_gl_cr").click(function () {
                        window.open('/transactions/new-account/' + acctypecr + '/' + acctypecr + '/gl_cr/', '', 'width=800, height=600');
                    });


                }

            });
            //callback for failed
            request.fail(function (jqXHR, textStatus, errorThrown) {
                //log error to console
                toastr.danger("There was an error " +
                    textStatus, errorThrown, 'Error');
                alert(
                    "There was an error " +
                    textStatus, errorThrown
                );
            });


            //submit and get lists of accounts
            var requestcr;

            if (requestcr) {
                requestcr.abort();
            }

            var datacr = {
                acctype: acctypecr
            }
            requestcr = $.ajax({
                url: "/transactions/get_acc/",
                type: "POST",
                data: datacr
            });
            requestcr.done(function (responsecr, textStatus, jqXHR) {
                //toastr.error(response, "error");

                if (responsecr == "0") {
                    toastr.error("You are not authenicated", 'Error');

                } else if (responsecr == "1") {
                    toastr.error("Bad request", 'Error');

                } else {
                    document.getElementById("gl_cr").innerHTML = responsecr;
                }

            });
            //callback for failed
            requestcr.fail(function (jqXHR, textStatus, errorThrown) {
                //log error to console
                toastr.danger("There was an error " +
                    textStatus, errorThrown, 'Error');
                alert(
                    "There was an error " +
                    textStatus, errorThrown
                );
            });


        }
    </script>
    <script>
        var request;
        $("#savetransaction").submit(function (event) {
            event.preventDefault();

            if (request) {
                request.abort();
            }
            var $form = $(this);
            var $inputs = $form.find("input, select, button, textarea");
            var serializedData = $form.serialize();
            $inputs.prop("disabled", true);
            request = $.ajax({
                url: "/transactions/new/",
                type: "POST",
                data: serializedData
            });

            request.done(function (response, textStatus, jqXHR) {
                //toastr.error(response, "error");

                if (response == "1") {
                    // window.alert("Dr Account not Found", 'Error');
                    new PNotify({
                        title: 'Error', text: 'Dr Account not Found', type: 'error'
                    });

                } else if (response == "2") {
                    // window.alert("Cr Account not found", 'Error');
                    new PNotify({
                        title: 'Error', text: 'Cr Account not Found', type: 'error'
                    });

                } else if (response == "3") {
                    // window.alert("Something went Wrong", 'Error');
                    new PNotify({
                        title: 'Error', text: 'Something Went Wrong', type: 'error'
                    });
                } else {
                    // window.alert("Transaction Created Successfully successfully", 'Success');
                    new PNotify({
                        title: 'Success', text: 'Transaction Created Successfully successfully', type: 'success'
                    });
                    setTimeout(function () {
                        window.location.href = response;
                    }, 0);
                }

            });

            //callback for failed
            request.fail(function (jqXHR, textStatus, errorThrown) {
                //log error to console
                new PNotify({
                    title: "There was an error " +
                        textStatus, text: errorThrown, type: 'success'
                });
                toastr.danger("There was an error " +
                    textStatus, errorThrown, 'Error');
                // alert(
                //     "There was an error "+
                //     textStatus, errorThrown
                // );
            });

            //call back called regardless
            request.always(function () {
                $inputs.prop("disabled", false);

            });
        });
    </script>
{% endblock %}