{% 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-12">
                            <h4>Chart of Accounts</h4>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7">
            <div class="card">
                <div class="card-body">
                    <form id="make_list" autocomplete="off">
                        {% csrf_token %}
                        <div class="row">
                            <div class="col-md-5 row">
                                <div class="form-group col-10 mb-2">
                                    <label>Select Expense Ledger</label>
                                    <div class="input-group">
                                        <select class="form-control select2" data-toggle="select2" name="id" id="ledger"
                                                onchange="document.getElementById('selectedname').value = this.options[this.selectedIndex].text"
                                                required>
                                            <option disabled selected value="">Select Expense Ledger</option>
                                            {% for a in accounts %}
                                                <option value="{{ a.id }}">{{ a.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <input type="hidden" name="name" id="selectedname">
                                </div>
                                <div class="col-2">
                                    <div class="mt-3">
                                                <span class="btn btn-info btn-sm"
                                                      onclick="window.open('/transactions/new-account/Expense Accounts/Expense/ledger/', '', 'width=800, height=600')"><i
                                                        class="fa fa-plus"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-5">
                                <div class="form-group mb-2">
                                    <label>Expense Amount</label>
                                    <input type="text" data-type="currency" class="form-control" id="amount"
                                           name="amount" placeholder="Amount" required>
                                </div>
                            </div>
                            <div class="col-md-2 mt-1 align-self-center">
                                <button class="btn btn-primary btn-sm" type="submit">Add</button>
                            </div>
                        </div>
                    </form>
                    <div class="table-responsive">
                        <table id="zero_config" class="table table-striped table-bordered display table-sm"
                               style="width:100%">
                            <thead>
                            <tr>
                                <th>Expense Ledger</th>

                                <th>Total Amount</th>

                                <th>#</th>
                            </tr>
                            </thead>
                            <tbody id="selected_list">

                            </tbody>

                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-5">
            <div class="card">
                <div class="card-body">
                    <form id="saveexpense" autocomplete="off">
                        {% csrf_token %}
                        <h4>Total Amount: <span id="totals">0</span></h4>
                        <div class="form-group mb-2">
                            <label class="form-label">Reference Number</label>
                            <input type="text" class="form-control" name="receipt">
                        </div>
                        <div class="row">
                            <div class="form-group col-10 mb-2">
                                <label class="form-label" id="cr_lebel">Select Supplier</label>
                                <div class="input-group">
                                    <select class="form-control select2" data-toggle="select2" required name="supplier"
                                            id="supcus">
                                        <option value="" selected disabled>Select Supplier</option>
                                        {% for n in suppliers %}
                                            <option value="{{ n.id }}">{{ n.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="col-2 pt-1">
                                        <span class="btn btn-info btn-sm mt-3"
                                              onclick="window.open('/transactions/new-account/Suppliers/Supplier/supcus/', '', 'width=800, height=600')"><i
                                                class="fa fa-plus"></i></span>
                            </div>
                        </div>


                        <div class="form-group mb-2">
                            <label class="form-label">Expense Date</label>
                            <input type="date" class="form-control" name="date" value="{% now 'Y-m-d' %}">
                        </div>

                        <div class="form-group mb-2">
                            <input type="checkbox" style="width: 30px; font-size: 20px;"
                                   onchange="show_hide_payment(this);"><strong>Do you want to record a
                            payment?</strong>
                            <input type="hidden" name="pay_status" value="0" id="pstatus">
                        </div>
                        <script>
                            function show_hide_payment(val) {

                                if (val.checked) {
                                    document.getElementById("showpaymenttab").style.display = 'flex';
                                    document.getElementById("pstatus").value = "1";
                                } else if (!val.checked) {
                                    document.getElementById("showpaymenttab").style.display = 'none';
                                    document.getElementById("pstatus").value = "0";
                                }
                            }
                        </script>
                        <div class="row" id="showpaymenttab" style="display: none;">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label id="dr_lebel">Which Mode of Payment?</label>
                                    <select class="form-control" name="payment_mode"
                                            onchange="getaccounts(this.value)">
                                        <option value="" selected disabled>Select Payment Mode</option>
                                        <option value="Cash">Cash Payment</option>
                                        <option value="Bank">Bank Payment</option>
                                        <option value="Mobile Money">Mobile Money Payment</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label id="payment_label">Which Account?</label>
                                    <select class="form-control" name="payment_account" id="payment_acc">
                                        <option value="" selected disabled>Select Account</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <input type="hidden" name="particulars" id="expense_particulars">
                            <button class="btn btn-primary" type="submit">Submit</button>
                            <button class="btn btn-danger" type="reset">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </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));
            var x = document.getElementById(id);
            document.getElementById('selectedname').value = x.options[x.selectedIndex].text;
        }
    </script>
    <script>
        var selectedValues = [];

        function delete_row(val) {
            // window.alert("Deleting index "+val+" in table | Deleting index "+selectedValues[val]+" in list");

            var xrow = document.getElementById("row" + val);
            xrow.parentNode.removeChild(xrow);

            // get index of this id
            var indx;
            for (var ii = 0; ii < selectedValues.length; ii++) {

                if (selectedValues[ii].id == val) {
                    indx = ii;
                }
            }

            selectedValues.splice(indx, 1); // 2nd parameter means remove one item only
            var total = 0;
            for (var i = 0; i < selectedValues.length; i++) {
                total += parseFloat(selectedValues[i].amount);

            }

            // window.alert(total);
            document.getElementById("totals").innerHTML = total;
            document.getElementById("expense_particulars").value = JSON.stringify(selectedValues);

        }

        var request;
        $("#make_list").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/make_list/",
                type: "POST",
                data: serializedData
            });

            request.done(function (response, textStatus, jqXHR) {
                //toastr.error(response, "error");
                var amountx = document.getElementById("amount").value.replace(/,/g, "");

                setTimeout(function () {
                    // check if item already exists in a list
                    var count = 0;
                    for (var a = 0; a < selectedValues.length; a++) {
                        if (selectedValues[a].id == document.getElementById("ledger").value) {
                            count++;
                        }
                    }

                    if (count == 0) {
                        document.getElementById("selected_list").innerHTML += response;
                        selectedValues.push(
                            {
                                "id": document.getElementById("ledger").value,
                                "amount": amountx
                            }
                        );
                        var total = 0;
                        for (var i = 0; i < selectedValues.length; i++) {
                            total += parseFloat(selectedValues[i].amount);
                        }
                        // window.alert(total);
                        document.getElementById("totals").innerHTML = total;
                        document.getElementById("expense_particulars").value = JSON.stringify(selectedValues);

                        document.getElementById("ledger").value = "";
                        document.getElementById("amount").value = "";

                    }
                }, 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>
    <script>
        var request;
        $("#saveexpense").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/expenses/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: 'error'
                });
                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>
    <script>
        function getaccounts(value) {
            if (value == "Mobile Money") {
                document.getElementById("payment_label").innerHTML = "From which Mobile Money Account?";
            } else if (value == "Bank") {
                document.getElementById("payment_label").innerHTML = "From which Bank Account?";
            } else if (value == "Cash") {
                document.getElementById("payment_label").innerHTML = "From which Cash Account?";
            }
            //var acctypedr = null;

            //submit and get lists of accounts
            var request;

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

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

                if (response == "0") {
                    // toastr.error("You are not authenicated", 'Error');
                    new PNotify({
                        title: 'Error', text: 'Something went wrong', type: 'error'
                    });

                } else if (response == "1") {
                    // toastr.error("Bad request", 'Error');
                    new PNotify({
                        title: 'Error', text: 'Something went wrong', type: 'error'
                    });

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

            });
            //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
                );
            });


        }
    </script>
{% endblock %}