{% extends 'transactions/extends/layout.html' %}
{% load static %}
{% load humanize %}
{% load difference_calc %}
{% block content %}
    {% block scripts %}
        <script>
            var global_state = {
                baseUrl: '{{ baseUrl }}',
                accTypesJson: '{{ accTypesJson|safe }}',
                transactionChargesJson: '{{ transactionChargesJson|safe }}'
            }
        </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">
                            <div class="page-title-right ">
                                <form action="/transactions/individual-ledger/" method="POST">
                                    {% csrf_token %}
                                    <input type="hidden" name="id" value="{{ account.id }}">
                                    <div class="row">
                                        <div class="col-md-2 form-group">
                                            <select class="form-control form-control-sm" name="report_for">
                                                {% for b in vbranches %}
                                                    <option value="{{ b.id }}">{{ b.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="col-md-2 form-group">
                                            <select class="form-control form-control-sm"
                                                    onchange="check_range(this.value)"
                                                    name="financial_year">
                                                {% for f in fy %}
                                                    <option value="{{ f.id }}">{{ f.name }}</option>
                                                {% endfor %}
                                                <option value="custom">Custom Date Range</option>
                                            </select>
                                        </div>
                                        <script>
                                            function check_range(val) {
                                                if (val == "custom") {
                                                    document.getElementById("date_from").style.display = "inline-block";
                                                    document.getElementById("date_to").style.display = "inline-block";
                                                } else {
                                                    document.getElementById("date_from").style.display = "none";
                                                    document.getElementById("date_to").style.display = "none";
                                                }
                                            }
                                        </script>
                                        <div class="col-md-2 form-group" id="date_from" style="display: none;">
                                            <input type="date" class="form-control form-control-sm" name="start_date">
                                        </div>
                                        <div class="col-md-2 form-group" id="date_to" style="display: none;">
                                            <input type="date" class="form-control form-control-sm" name="end_date">
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-primary btn-sm"><i
                                                    class="fa fa-filter"></i>
                                                Filter
                                            </button>
                                        </div>

                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="btn-group button-list d-flex justify-content-end">
{#                        <form action="/transactions/pdf-individual-gl/" method="post">#}
{#                            {% csrf_token %}#}
{#                            <input type="hidden" name="id" value="{{ account.id }}">#}
{#                            <input type="hidden" name="from" value="{{ start_date }}">#}
{#                            <input type="hidden" name="to" value="{{ end_date }}">#}
{#                            <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-file-pdf-o"></i> Export#}
{#                                PDF#}
{#                            </button>#}
{#                        </form>#}
{#                        <form action="/transactions/export-individual-gl/" method="post">#}
{#                            {% csrf_token %}#}
{#                            <input type="hidden" name="id" value="{{ account.id }}">#}
{#                            <input type="hidden" name="from" value="{{ start_date }}">#}
{#                            <input type="hidden" name="to" value="{{ end_date }}">#}
{#                            <button type="submit" class="btn btn-success btn-sm"><i class="fa fa-file-excel-o"></i>#}
{#                                Export#}
{#                                Excel#}
{#                            </button>#}
{##}
{#                        </form>#}
                    </div>
                </div>
                <div class="card-body">

                    <div class="row">
                        {% if individual_gl %}
                            {% if start_date != None and end_date != None %}
                                <div class="col-md-8"><h5 class="card-title">{% if account == "Members" %} Member
                                    Savings {% else %} {{ account.name }} ({{ account.category.name }}) {% endif %}
                                    Account Reconciliation for the Period between {{ start_date }}
                                    and {{ end_date }}</h5></div>
                            {% elif start_date != None and end_date == None %}
                                <div class="col-md-8"><h4 class="card-title">{% if account == "Members" %} Member
                                    Savings {% else %} {{ account.name }} ({{ account.category.name }}) {% endif %}
                                    Account Reconciliation for the Period From {{ start_date|date:'d/m/Y' }} To
                                    Date</h4></div>
                            {% elif start_date == None and end_date != None %}
                                <div class="col-md-8"><h4 class="card-title">{% if account == "Members" %} Member
                                    Savings {% else %} {{ account.name }} ({{ account.category.name }}) {% endif %}
                                    Account Reconciliation for the Period Up to {{ end_date|date:'d/m/Y' }}</h4>
                                </div>
                            {% else %}
                                <div class="col-md-8"><h4 class="card-title">{% if account == "Members" %} Member
                                    Savings {% else %} {{ account.name }} ({{ account.category.name }}) {% endif %}
                                    Account Reconciliation </h4></div>
                            {% endif %}
                        {% else %}
                            <div class="col-md-8"></div>
                        {% endif %}
                        <div class="col-md-4 form-group mb-2">
                            <form action="{{ request.path }}" method="POST">
                                {% csrf_token %}
                                <select class="form-control select2" data-toggle="select2" name="id"
                                        onchange="form.submit();">
                                    <option selected disabled>Select Account</option>
                                    <option value="0">Member Savings</option>
                                    {% for acc in accounts %}
                                        {% if acc.id == account.id %}
                                            <option value="{{ acc.id }}" selected>{{ acc.name }}</option>
                                        {% else %}
                                            <option value="{{ acc.id }}">{{ acc.name }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </form>
                        </div>

                    </div>

                    {% if individual_gl %}
                        <table class="table dt-responsive nowrap w-100">
                            <thead>
                            <tr>
                                <th>TXNNo</th>
                                <th>Date</th>
                                <th>Account Dr/Cr</th>
                                <th>Txn Narration</th>
                                <th>Amount Dr</th>
                                <th>Amount Cr</th>
                                <th>Balance</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for gl in individual_gl %}
                                <tr>
                                    <td>{{ gl.gl.txno }}</td>
                                    <td>{{ gl.gl.tx_date }}</td>
                                    {% if gl.is_opening_balance %}
                                        <td>Opening Balance</td>
                                    {% else %}
                                        <td>
                                            {% if gl.account_dr.id == account.id %}
                                            {% else %}
                                                {% if gl.account_dr.category.name == "Members" %}
                                                    {{ gl.account_dr.member.member_names }}
                                                {% else %}
                                                    {{ gl.account_dr.name }}
                                                {% endif %}
                                            {% endif %}

                                            {% if gl.account_cr.id == account.id %}

                                            {% else %}
                                                {% if gl.account_cr.category.name == "Members" %}
                                                    {{ gl.account_cr.member.member_names }}
                                                {% else %}
                                                    {{ gl.account_cr.name }}
                                                {% endif %}
                                            {% endif %}
                                        </td>
                                    {% endif %}

                                    <td>{{ gl.gl.narration }}</td>
                                    <td class="amounts">{{ gl.amount_dr|default_if_none:'-'|floatformat:2|intcomma }}</td>
                                    <td class="amounts">{{ gl.amount_cr|default_if_none:'-'|floatformat:2|intcomma }}</td>
                                    <td class="amounts">{{ gl.balance|floatformat:2|intcomma }}</td>
                                    <td>{% if not gl.is_opening_balance %}
                                        <div class="btn-group" id="buttons{{ gl.gl.id }}">
                                            {% if gl.gl.reconciled_by is None %}
                                                <button class="btn btn-primary btn-sm" data-bs-toggle="modal"
                                                        data-bs-target="#adjust_txn{{ gl.gl.id }}">Adjust
                                                </button>

                                                <button class="btn btn-warning btn-sm"
                                                        onclick="submit_confirmation{{ gl.gl.id }}()">Mark
                                                </button>
                                            {% else %}
                                                <button class="btn btn-success btn-sm">Reconciled</button>
                                            {% endif %}
                                        </div>
                                        <button class="btn btn-success" id="reconciled{{ gl.gl.id }}"
                                                style="display: none">Reconciled
                                        </button>
                                    {% endif %}
                                    </td>

                                </tr>

                                <!--  Adjust Transaction-->

                                <div id="adjust_txn{{ gl.gl.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">Adjust
                                                    Transaction {{ gl.gl.txno }}</h4>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-hidden="true">
                                                </button>
                                            </div>
                                            <form id="save_adjust{{ gl.gl.id }}">
                                                {% csrf_token %}
                                                <div class="modal-body">
                                                    <div class="form-group mb-2">
                                                        <label class="form-label">Reconciled Txn Amount</label>
                                                        <input type="hidden" value="{{ gl.gl.id }}"
                                                               name="tx_id">
                                                        {% if gl.amount_dr == 0 and not gl.amount_cr == 0 %}
                                                            <input type="number" name="amount"
                                                                   class="form-control"
                                                                   placeholder="Reconciled Amount"
                                                                   value="{{ gl.amount_cr }}" required>
                                                        {% elif not gl.amount_dr == 0 and gl.amount_cr == 0 %}
                                                            <input type="number" name="amount"
                                                                   class="form-control"
                                                                   placeholder="Reconciled Amount"
                                                                   value="{{ gl.amount_dr }}" required>
                                                        {% elif gl.amount_dr == 0 and gl.amount_cr == 0 %}
                                                            <input type="number" name="amount"
                                                                   class="form-control"
                                                                   placeholder="Reconciled Amount"
                                                                   value="{{ gl.amount_dr }}" required>
                                                        {% endif %}

                                                    </div>
                                                    <div class="form-group mb-2">
                                                        <label class="form-label">Account Debited</label>
                                                        {% if gl.gl.account_dr.id == account.id %}
                                                            <input type="text" value="{{ gl.account_dr.name }}"
                                                                   class="form-control" disabled>
                                                            <input type="hidden"
                                                                   value="{{ gl.gl.account_dr.id }}"
                                                                   name="dr_account" class="form-control">
                                                        {% else %}
                                                            <select class="form-control" name="dr_account">
                                                                <option value="{{ gl.gl.account_dr.id }}">
                                                                    {% if gl.gl.account_dr.category.name == "Members" %}
                                                                        {{ gl.gl.account_dr.member.member_names }}
                                                                    {% else %}
                                                                        {{ gl.gl.account_dr.name }}
                                                                    {% endif %}
                                                                </option>
                                                                {% for acc in accounts %}


                                                                    <option value="{{ acc.id }}">{{ acc.name }}</option>
                                                                {% endfor %}
                                                            </select>
                                                        {% endif %}
                                                    </div>

                                                    <div class="form-group mb-2">
                                                        <label class="form-label">Account Credited</label>
                                                        {% if gl.gl.account_cr.id == account.id %}
                                                            <input type="text" value="{{ gl.account_cr.name }}"
                                                                   class="form-control" disabled>
                                                            <input type="hidden"
                                                                   value="{{ gl.gl.account_cr.id }}"
                                                                   name="cr_account" class="form-control">
                                                        {% else %}
                                                            <select class="form-control" name="cr_account">
                                                                <option value="{{ gl.gl.account_cr.id }}">
                                                                    {% if gl.gl.account_cr.category.name == "Members" %}
                                                                        {{ gl.gl.account_cr.member.member_names }}
                                                                    {% else %}
                                                                        {{ gl.gl.account_cr.name }}
                                                                    {% endif %}
                                                                </option>
                                                                {% for acc in accounts %}


                                                                    <option value="{{ acc.id }}">{{ acc.name }}</option>
                                                                {% endfor %}
                                                            </select>
                                                        {% endif %}
                                                    </div>
                                                    <div class="form-group mb-2">
                                                        <label class="form-label">Narration</label>
                                                        <textarea class="form-control"
                                                                  name="narration">{{ gl.gl.narration }}</textarea>
                                                    </div>
                                                    <div class="form-group mb-2">
                                                        <label class="form-label">Transaction Date</label>
                                                        <input type="date" name="date"
                                                               value="{{ gl.gl.tx_date|date:'Y-m-d' }}"
                                                               class="form-control">
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button class="btn btn-info waves-effect" type="button"
                                                            onclick="submit_confirmation{{ gl.gl.id }}()">Submit
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                        <!-- /.modal-content -->
                                    </div>
                                    <!-- /.modal-dialog -->
                                </div>
                                <script>
                                    function submit_confirmation{{gl.gl.id}}() {
                                        if (confirm("Are you sure you want to save this Change?") == true) {
                                            adjust_proccessor('save_adjust{{gl.gl.id}}', '{{gl.gl.id}}');
                                        }
                                    }
                                </script>

                            {% endfor %}
                            </tbody>

                            <tfoot>
                            <tr>
                                <th colspan="4">TOTALS</th>

                                <th class="amounts">{{ total_dr|default_if_none:0|floatformat:2|intcomma }}</th>
                                <th class="amounts">{{ total_cr|default_if_none:0|floatformat:2|intcomma }}</th>
                                <th class="amounts">
                                    {% if individual_gl|length > 0 %}
                                        {% if account.category.dr_cr == 'cr' %}
                                            {% dif_calc total_cr|default_if_none:0 total_dr|default_if_none:0 %}
                                        {% elif account == "Members" %}
                                            {% dif_calc total_cr|default_if_none:0 total_dr|default_if_none:0 %}
                                        {% else %}
                                            {% dif_calc total_dr|default_if_none:0 total_cr|default_if_none:0 %}
                                        {% endif %}

                                    {% else %}
                                        000
                                    {% endif %}
                                </th>


                            </tr>
                            </tfoot>
                        </table>
                    {% else %}
                        <h4>Please Select an account to be reconciled</h4>
                    {% endif %}

                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block javascript %}
    <script>
        function adjust_proccessor(form_id, transaction_id) {


            var request;
            if (request) {
                request.abort();
            }
            var $form = $("#save_adjust" + transaction_id);
            var $inputs = $form.find("input, select, button, textarea");
            var serializedData = $form.serialize();
            // window.alert(serializedData);
            $inputs.prop("disabled", true);
            request = $.ajax({
                url: "/transactions/update-reconciliation/{{account.id}}/",
                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 if (response == "4") {
                    // toastr.error("Username or password is incorrect", 'Error');
                    new PNotify({
                        title: 'Error', text: 'Something went wrong', type: 'error'
                    });

                } else if (response == "200") {
                    new PNotify({
                        title: 'Success', text: 'Transaction Saved successfully', type: 'success'
                    });

                    document.getElementById("buttons" + transaction_id).style.display = "None";
                    document.getElementById("reconciled" + transaction_id).style.display = "Block";
                    $('#adjust_txn' + transaction_id).modal('hide');


                } else {
                    // toastr.success("Login Successful", 'Success');
                    new PNotify({
                        title: 'Error', text: 'Something wen wrong. Contact Support', type: 'error'
                    });

                }

            });

            //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>

{% endblock %}