{% extends 'transactions/extends/popup_base.html' %}
{% load static %}
{% block content %}
    <div class="row">
        <div class="col-md-12">
            <h4>Create New {{ name }} Accountz</h4>
            <form id="new_acc">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="form-group mb-2">
                        <label class="form-label">Account Name</label>
                        <input type="text" name="name" class="form-control" placeholder="Account Name" required>
                    </div>
                    <div class="form-group mb-2">
                        <label class="form-label">Account Category</label>
                        <select data-placeholder="Select Account Category" class="form-control" name="category"
                                onchange="get_opening_balance(this.value); checkfixedasset(this.value)">
                            <option value="" selected disabled>Select Account Category</option>
                            {% for selected_category in selected_category %}
                                <option value="{{ selected_category.id }}">{{ selected_category.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group mb-2" id="eul" style="display: none">
                        <label class="form-label">Estimated Useful Life (EUL)</label>
                        <input type="number" name="eul" value="1" class="form-control"
                               placeholder="Estimated Useful Life">
                    </div>
                    <div class="form-group mb-2" style="display: none;" id="show_opening">
                        <label class="form-label">Opening Balance</label>
                        <div class="input-group">
                            <input type="text" name="opening_balance" value="0" class="form-control"
                                   placeholder="Amount" aria-label="Number" aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <div class="form-group mb-2" style="display: none;" id="show_reserves">
                        <label class="form-label">Select Reserves GL</label>
                        <div class="input-group mb-3">
                            <select class="form-control" name="reserves" id="reserves_list"></select>
                        </div>
                    </div>
                    <div class="form-group mb-2">
                        <label class="form-label">Opening Balance date</label>
                        <input type="date" name="date" class="form-control" value="{% now 'Y-m-d' %}">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-info waves-effect">Submit</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}
{% block javascript %}
    <!--    create business category  -->
    <script>
        var request;
        $("#new_acc").submit(function (event) {
            //prevent default posting of form
            event.preventDefault();

            //abort any pending request
            if (request) {
                request.abort();
            }

            // setup some local variables
            var $form = $(this);

            //select and cache fields
            var $inputs = $form.find("input, select, button, textarea");

            // serialize the data in the form
            var serializedData = $form.serialize();

            //disable the inputs for the duration of ajax request
            //note: we disable elements after the form data has been serialized
            //disabled form elements will not be serialized
            $inputs.prop("disabled", true);

            //fire off the request to url
            request = $.ajax({
                url: "{{ request.path }}",
                type: "post",
                data: serializedData
            });

            //callback for success
            request.done(function (response, textStatus, jqXHR) {

                if (response == "1") {
                    new PNotify({
                        title: 'Error', text: 'Category does not exist', type: 'error'
                    });

                } else if (response == "2") {
                    // toastr.error("Account is innactive. Contact Support", 'Error');
                    new PNotify({
                        title: 'Error', text: 'Account with this Name already exists', type: 'error'
                    });

                } else if (response == "3") {
                    // toastr.error("Username or password is incorrect", 'Error');
                    new PNotify({
                        title: 'Error', text: 'Something went wrong', type: 'error'
                    });

                } else {
                    window.opener.Handleresults(response, '{{id}}');
                    window.close();
                    return false;
                }


            });

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

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

            });
        });
    </script>

    <script>
        function get_opening_balance(val) {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {

                    if (this.responseText == 0) {
                        document.getElementById("show_opening").style.display = "none";
                        // document.getElementById("show_reserves").style.display="none";
                    } else if (this.responseText == 1) {
                        document.getElementById("show_opening").style.display = "none";
                        // document.getElementById("show_reserves").style.display="none";
                    } else {
                        document.getElementById("reserves_list").innerHTML =
                            this.responseText;
                        document.getElementById("show_opening").style.display = "inline";
                        // document.getElementById("show_reserves").style.display="inline";
                    }
                }
            };
            xhttp.open("GET", "/transactions/get_reserve_list/" + val + "/", true);
            xhttp.send();
        }
    </script>
    <script>
        function checkfixedasset(val) {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {

                    if (this.responseText == 10) {
                        document.getElementById("eul").style.display = "inline";
                        {#document.getElementById("show_reserves").style.display="none";#}
                    } else {
                        document.getElementById("eul").style.display = "none";
                    }
                }
            };
            xhttp.open("GET", "/transactions/get_eul/" + val + "/", true);
            xhttp.send();
        }
    </script>
{% endblock %}