{% extends 'extends/layout.html' %}
{% load static %}
{% load humanize %}
{% block content %}
    {% block scripts %}
        <script src="{% static 'sacco/assets/custom_js/currency_formatter.js' %}"></script>
        <script>
            var global_state = {
                baseUrl: '{{ baseUrl }}',
                accTypesJson: '{{ accTypesJson|safe }}',
                transactionChargesJson: '{{ transactionChargesJson|safe }}'
            }

            function deleteTransaction(val) {
                let transaction = val.getAttribute("data-worker-id");
                let url = '/transactions/delete-transaction/' + transaction;
                if (confirm("Are you sure you want to delete this transaction?")) {
                    location.href = url
                }
            }

            function reverseTransaction(val) {
                let transaction = val.getAttribute("data-worker-id");
                let url = '/transactions/reverse-transaction/' + transaction;
                if (confirm("Are you sure you want to reverse this transaction?")) {
                    location.href = url
                }
            }
        </script>
        <script type="text/javascript">

            async function myFunction() {
                return $('#deposit').modal('hide');
            }

            function validateForm() {
                //labels
                let with_date = document.querySelector('#error_date_created')
                let with_amount = document.querySelector('#error_amount')
                let with_from = document.querySelector('#error_the_account')
                let with_account = document.querySelector('#error_account_id')
                let with_deposited_by = document.querySelector('#error_deposited_by')


                let date_created = document.forms["depoForm"]["date_created"].value;
                let amount = document.forms["depoForm"]["amount"].value;
                let the_account = document.forms["depoForm"]["the_account"].value;
                let account_id = document.forms["depoForm"]["account_id"].value;
                let paid_by = document.forms["depoForm"]["paid_by"].value;

                let fieldErrors = ['date_created', 'amount', 'the_account', 'account_id']
                let fieldErrorObj = {
                    'date_created': false,
                    'amount': false,
                    'the_account': false,
                    'account_id': false
                }

                let noErrors = true

                fieldErrors.forEach((field) => {
                    if (field === 'date_created') {
                        if (date_created.trim() === "") {
                            fieldErrorObj = {...fieldErrorObj, date_created: true}
                            noErrors = false
                        }
                    }
                    if (field === 'amount') {
                        if (amount.trim() === "") {
                            fieldErrorObj = {...fieldErrorObj, amount: true}
                            noErrors = false
                        }
                    }
                    if (field === 'the_account') {
                        if (the_account.trim() === "") {
                            fieldErrorObj = {...fieldErrorObj, account: true}
                            noErrors = false
                        }

                    }
                    if (field === 'account_id') {
                        if (account_id.trim() === "") {
                            fieldErrorObj = {...fieldErrorObj, account: true}
                            noErrors = false
                        }

                    }
                    if (field === 'deposited_by') {
                        if (account_id.trim() === "") {
                            fieldErrorObj = {...fieldErrorObj, account: true}
                            noErrors = false
                        }

                    }
                })

                if (!noErrors) {
                    if (fieldErrorObj.date_created) {
                        with_date.style.display = 'block'
                    }
                    if (fieldErrorObj.amount) {
                        with_amount.style.display = 'block'
                    }
                    if (fieldErrorObj.account) {
                        with_account.style.display = 'block'
                    }
                    if (fieldErrorObj.account) {
                        with_from.style.display = 'block'
                    }
                } else {
                    depHandler()
                }
            }

            function removeErrors(field) {
                let theId = '#' + field
                document.querySelector(theId).style.display = 'none'
            }

            function depHandler() {
                let loader_ = document.querySelector('#submitting');
                let btn_ = document.querySelector('#subBtn');
                loader_.style.display = 'block';
                btn_.style.display = 'none';
                $.ajax({
                    type: 'post',
                    url: '{% url 'member_deposit' member.id %}',
                    data: $('#depoForm').serialize(),
                    dataType: 'json',
                    success: function (data) {
                        if (data.msg === 'success') {
                            new PNotify({title: "Success", text: data.extra, type: data.msg});
                            window.location.href = '{% url 'withdraw_receipt' %}'
                            loader_.style.display = 'none';
                            btn_.style.display = 'block';
                            $('#deposit').modal('hide');

                        } else {
                            new PNotify({
                                title: "Error", text: data.extra, type: data.msg
                            });
                            loader_.style.display = 'none'
                            btn_.style.display = 'block'
                        }
                    }
                })
                return false
            }

        </script>
    {% endblock %}
    <div class="row">
        <!-- Start col -->
        <div class="col-lg-12">
            <div class="modal fade" id="deposit" tabindex="-1" role="dialog"
                 aria-labelledby="exampleStandardModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleStandardModalLabel">Deposit Form</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            </button>
                        </div>
                        <form method="post" id="depoForm">
                            {% csrf_token %}
                            <div class="modal-body">
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="date_created">Deposit date</label>
                                    <input type="date" class="form-control" id="date_created"
                                           name="date_created"
                                           onchange="removeErrors('error_date_created')"
                                           placeholder="Deposit date" required/>
                                    <label id="error_date_created" style="color: tomato; display: none">
                                        Field required
                                    </label>
                                </div>

                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="account_id">Account Number</label>
                                    <select id="account_id"
                                            onchange="removeErrors('error_account_id')"
                                            class="form-control"
                                            name="account_id"
                                            required>
                                        <option value="">Select Account</option>
                                        {% for account in member_accounts %}
                                            <option value="{{ account.the_account.id }}">
                                                {{ account.the_account.acc_number }}
                                                ({{ account.the_account.account_type.name }})
                                            </option>
                                        {% endfor %}
                                    </select>
                                    <label id="error_account_id" style="color: tomato; display: none">
                                        Field required
                                    </label>
                                </div>

                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="amount">Amount to deposit</label>
                                    <input type="text" data-type="currency"
                                           onchange="removeErrors('error_amount')"
                                           class="form-control"
                                           id="amount" min="0"
                                           name="amount"
                                           placeholder="Amount" required/>
                                    <label id="error_amount" style="color: tomato; display: none">
                                        Field required
                                    </label>
                                </div>

                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="paid_by">Deposited by</label>
                                    <input type="text"
                                           onchange="removeErrors('error_deposited_by')"
                                           class="form-control"
                                           id="paid_by"
                                           name="paid_by"
                                           placeholder="deposited_by" required/>
                                    <label id="error_deposited_by" style="color: tomato; display: none">
                                        Field required
                                    </label>
                                </div>

                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="dep_ref">Transaction Reference</label>
                                    <input type="text" class="form-control" id="dep_ref" name="dep_ref"
                                           placeholder="Transaction Reference Number"/>
                                </div>

                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="the_account">Payment mode</label>
                                    <select class="form-control"
                                            onchange="removeErrors('error_the_account')"
                                            name="the_account"
                                            id="the_account">
                                        <option value="" selected disabled>Select Account</option>
                                        {% for item in accounts_ %}
                                            <option value="{{ item.id }}">{{ item.name }}</option>
                                        {% endfor %}
                                    </select>
                                    <label id="error_the_account" style="color: tomato; display: none">
                                        Field required
                                    </label>
                                </div>
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="dep_narration">Deposit Narration</label>
                                    <textarea class="form-control" id="dep_narration" name="narration"
                                              placeholder="Deposit Narration"></textarea>
                                </div>

                            </div>
                        </form>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="cancel-btn">
                                Close
                            </button>
                            <button id="subBtn" type="button" onclick="validateForm()" class="btn btn-primary">
                                Submit
                            </button>
                            <div class="spinner-border text-danger" role="status" id="submitting"
                                 style="display: none">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="card m-b-30">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-2">
                            {% if member.is_group is False %}
                                <a class="btn btn-success btn-sm" href="{% url 'member_detail' member.id %}"><i
                                        class="fa fa-backward"></i> Back</a>
                            {% else %}
                                <a class="btn btn-success btn-sm" href="{% url 'group_detail' member.id %}"><i
                                        class="fa fa-backward"></i> Back</a>
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <form method="get">
                                <div class="row gy-2 gx-2 align-items-center">
                                    <div class="col-auto">
                                        <label class="visually-hidden" for="from_date">Name</label>
                                        <input type="text" class="form-control form-control-sm" id="from_date"
                                               name="from_date"
                                               onfocus="(this.type='date')" value="{{ formatted_from|date:'Y-m-d' }}"
                                               required>
                                    </div>
                                    <div class="col-auto">
                                        <label class="visually-hidden" for="to_date">Name</label>
                                        <input type="text" class="form-control form-control-sm" id="to_date"
                                               name="to_date"
                                               onfocus="(this.type='date')" value="{{ formatted_from|date:'Y-m-d' }}"
                                               required>
                                    </div>
                                    <div class="col-auto">
                                        <button type="submit" name="filter_trans"
                                                class="btn btn-outline-secondary btn-sm"> Filter
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="col-md-4">
                            <div class="button-list d-flex justify-content-end">
                                <a href="{% url 'member_deposit' member.id %}"
                                   class="pull-right btn btn-secondary btn-sm d-none"><i class="fa fa-eye mr-2"
                                                                                         title="Upload Members"></i>View
                                    all</a>
                                <button type="button" class="btn btn-dark btn-sm pull-right"><i
                                        class="fa fa-file-excel-o mr-2" title="Export"></i>Export
                                </button>
                                <a data-bs-toggle="modal" data-bs-target="#deposit" href="javaScript:void(0);"
                                   class="btn btn-primary pull-right btn-sm"><i
                                        class="feather icon-plus-circle mr-2"></i>Deposit</a>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="basic-datatable" class="table dt-responsive nowrap w-100">
                            <thead>
                            <tr>
                                <th>S/N</th>
                                <th>Account</th>
                                <th>Amount</th>
                                <th>Description</th>
                                <th>Paid by</th>
                                <th>Transaction Date</th>
                                <th>Date Added</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody id="search-results">
                            {% for deposit in deposits %}
                                <tr>
                                    <td>{{ forloop.counter }}.</td>
                                    <td class="text-black">{{ deposit.account_cr.member.acc_number }}
                                        ({{ deposit.account_cr.member.account_type.name }})
                                    </td>
                                    <td class="text-black">{{ deposit.reporting_amount|intcomma|default_if_none:'' }}</td>
                                    <td class="text-black">{{ deposit.narration|default_if_none:'' }}</td>
                                    <td class="text-black">{{ deposit.paid_by|default_if_none:'' }}</td>
                                    <td class="text-black">{{ deposit.tx_date|default_if_none:'' }}</td>
                                    <td class="text-black">{{ deposit.date_added|default_if_none:'' }}</td>
                                    <td class="text-black">

                                        {% if 'delete_transaction' in user_perms %}
                                            <button type="button" id="worker-{{ deposit.id }}"
                                                    onclick="deleteTransaction(this)" data-worker-id="{{ deposit.id }}"
                                                    class="btn btn-danger btn-sm" title="Delete this transaction"><i
                                                    class="fa-solid fa-xmark"></i></button>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% empty %}
                                <p>No transactions yet</p>

                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            {% if members_list.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" href="?page=1" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                        <span class="sr-only">begin</span>
                                    </a>
                                </li>
                            {% endif %}
                            {% for n in members_list.paginator.page_range %}
                                {% if members_list.number == n %}
                                    <li class="page-item active">
                                        <span class="page-link">{{ n }}<span class="sr-only">(current)</span></span>
                                    </li>
                                {% elif n > members_list.number|add:'-3' and n < members_list.number|add:'3' %}
                                    <li class="page-item"><a class="page-link" href="?page={{ n }}">{{ n }}</a></li>
                                {% endif %}
                            {% endfor %}

                            {% if members_list.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ members_list.paginator.num_pages }}"
                                       aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                        <span class="sr-only">end</span>
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <!-- End col -->
    </div>

{% endblock %}