{% extends 'transactions/extends/layout.html' %}
{% load static %}
{% load humanize %}
{% block content %}

    <!-- 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>Chart of Accounts</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" data-bs-toggle="modal"
                                        data-bs-target="#addaccount"><i
                                        class="fa fa-plus"></i> Add Account
                                </button>
                            </div>
                            <div id="addaccount" class="modal fade" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title" id="myModalLabel">Add Account</h4>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-hidden="true">
                                            </button>
                                        </div>
                                        <form id="saveaccount">
                                            {% 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 mb-2" placeholder="Account Name" required>
                                                </div>
                                                <div class="form-group mb-2">
                                                    <label class="form-label">Ledger  Code</label>
                                                    <input type="text" name="code" class="form-control mb-2" placeholder="Ledger Code">
                                                </div>
                                                <div class="form-group mb-2">
                                                    <label class="form-label">Account Category</label>
                                                    <select data-placeholder="Select Account Category" class="mb-2 chosen-select" name="category" onchange="get_opening_balance(this.value); checkfixedasset(this.value)">
                                                        <option value="" selected disabled>Select Account Category
                                                        </option>
                                                        {% for cat in categories %}
                                                            <option value="{{ cat.id }}">{{ cat.name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                                <div class="form-group mb-2" id="eul" style="display: none">
                                                    <label class="form-label">Estimated Useful Life (EUL) in Years</label>
                                                    <input type="number" name="eul" value="1" class="form-control mb-2" placeholder="Estimated Useful Life in Years">
                                                </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" data-type="currency" value="0" class="form-control" placeholder="Amount" aria-label="Number" aria-describedby="basic-addon1">
                                                    </div>
                                                </div>
                                                <div class="form-group mb-2" id="show_reserves">
                                                    <label class="form-label">Select Reserves GL</label>
                                                    <div class="input-group">
                                                        <select class="form-control" name="reserves" id="reserves_list">

                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <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" id="savebtn"
                                                        disabled>Submit
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <table id="basic-datatable" class="table dt-responsive nowrap w-100">
                        <thead>
                        <tr>
                            <th>S/N</th>
                            <th>Code</th>
                            <th>Account Name</th>
                            <th>Category</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for account in accounts %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>
                                    {% if account.code %}
                                        {{ account.code }}
                                    {% else %}
                                        ---
                                    {% endif %}
                                </td>
                                <td>{{ account.display_name }}</td>
                                <td>{{ account.category.name }}</td>
                                <td>
                                    <button class="btn btn-primary btn-sm" data-bs-toggle="modal"
                                            data-bs-target="#editaccount{{ account.id }}">Edit
                                    </button>
                                </td>
                                <div id="editaccount{{ account.id }}" class="modal fade" tabindex="-1"
                                     role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4 class="modal-title" id="myModalLabel">
                                                    Edit {{ costcenter.name }}</h4>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-hidden="true">
                                                </button>
                                            </div>
                                            <form method="post" action="/transactions/chart-of-accounts/">
                                                {% csrf_token %}
                                                <div class="modal-body">
                                                    <div class="form-group mb-2">
                                                        <label class="form-label">Account Name</label>
                                                        <input type="hidden" value="{{ account.id }}" name="id">
                                                        <input type="text" name="name" class="form-control" placeholder="Cost Center Name" value="{{ account.display_name }}" required>
                                                    </div>
                                                    <div class="form-group mb-2">
                                                        <label class="form-label">Ledger Code</label>
                                                        <input type="text" name="code" class="form-control" placeholder="Cost Center Code" value="{{ account.code }}">
                                                    </div>
                                                    <div class="form-group mb-2" style="display: none">
                                                        <label class="form-label">Account Category</label>
                                                        <select class="form-control" name="category">
                                                            <option value="{{ account.category.id }}">{{ account.category.name }}</option>
                                                            {% for cat in categories %}
                                                                {% if cat.id != account.category.id %}
                                                                    <option value="{{ cat.id }}">{{ cat.name }}</option>
                                                                {% endif %}
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                    <input type="hidden" name="eul" value="1">
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="submit" class="btn btn-info waves-effect">
                                                        Submit
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                        <!-- /.modal-content -->
                                    </div>
                                    <!-- /.modal-dialog -->
                                </div>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div> <!-- end card body-->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div>

    <!-- end row-->
{% endblock %}
{% block javascript %}
        <script>
            var global_state = {
                baseUrl: '{{ baseUrl }}',
                accTypesJson: '{{ accTypesJson|safe }}',
                transactionChargesJson: '{{ transactionChargesJson|safe }}'
            }
        </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("savebtn").disabled = false;
                        }
                    }
                };
                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>
        <script>
            var request;
            $("#saveaccount").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/chart-of-accounts/",
                    type: "POST",
                    data: serializedData
                });

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

                    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 {
                        // toastr.success("Login Successful", 'Success');
                        new PNotify({
                            title: 'Success', text: 'Saved', type: 'success'
                        });
                        setTimeout(function () {
                            window.location.href = response;
                        }, 2500);
                    }

                });

                //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 src="{% static 'sacco/assets/custom_js/custom_transaction_charges.js' %}"></script>
    {% endblock %}