{% extends 'extends/layout.html' %}
{% load static %}
{% load humanize %}
{% block content %}
    {% block scripts %}
        <script src="{% static 'sacco/assets/custom_js/currency_formatter.js' %}"></script>
        <script type="text/javascript">

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

            async function myFunction() {
                return $('#withdraw').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 date_created = document.forms["withdrawForm"]["date_created"].value;
                let amount = document.forms["withdrawForm"]["amount"].value;
                let the_account = document.forms["withdrawForm"]["the_account"].value;
                let account_id = document.forms["withdrawForm"]["account_id"].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 (!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 {
                    withHandler()
                }
            }

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

            function withHandler() {
                let loader_ = document.querySelector('#submitting');
                let btn_ = document.querySelector('#subBtn');
                loader_.style.display = 'block';
                btn_.style.display = 'none';
                $.ajax({
                    type: 'post',
                    url: '{% url 'member_withdraw' member.id %}',
                    data: $('#withdrawForm').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';
                            $('#withdraw').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="withdraw" 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">Withdraw Form</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            </button>
                        </div>
                        <form method="post" id="withdrawForm">
                            {% csrf_token %}
                            <div class="modal-body">
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="date_created">Withdraw date</label>
                                    <input type="date"
                                           class="form-control"
                                           id="date_created" onchange="removeErrors('error_date_created')"
                                           name="date_created" placeholder="Withdraw 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">
                                        <option value="">Select Account Number</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 withdraw</label>
                                    <input type="text" data-type="currency"
                                           class="form-control"
                                           onchange="removeErrors('error_amount')"
                                           id="amount" min="0"
                                           name="amount"
                                           placeholder="Amount to withdraw" 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="with_ref">Transaction Reference</label>
                                    <input type="text" class="form-control" id="with_ref" name="with_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" required>
                                        <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="with_narration">Withdraw Narration</label>
                                    <textarea class="form-control" id="with_narration" name="narration"
                                              placeholder="Withdraw 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">
                                <button type="button" class="btn btn-dark pull-right btn-sm"><i
                                        class="fa fa-file-excel-o mr-2"></i>Export
                                </button>
                                <a data-bs-toggle="modal" data-bs-target="#withdraw" href="javaScript:void(0);"
                                   class="btn btn-primary btn-sm pull-right"><i
                                        class="feather icon-minus mr-2"></i>Withdraw</a>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="card-body">
                    {% if saving_not_withdrawable != 0 %}
                        <div>
                            <div class="alert alert-warning" role="alert">
                                Note: This individual has a loans that dictate that an amount of {{saving_not_withdrawable|intcomma}} cannot be withdrawn from any account of theirs.
                              </div>
                        </div>
                    {% endif %}
                    
                    <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>Transaction Date</th>
                                <th>Date Added</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody id="search-results">
                            {% for withdraw in withdraws %}
                                <tr>
                                    <td>{{ forloop.counter }}.</td>
                                    <td class="text-black">{{ withdraw.account_dr.member.acc_number }}
                                        ({{ withdraw.account_dr.member.account_type.name }})
                                    </td>
                                    <td class="text-black">{{ withdraw.reporting_amount|intcomma|default_if_none:'' }}</td>
                                    <td class="text-black">{{ withdraw.narration|default_if_none:'' }}</td>
                                    <td class="text-black">{{ withdraw.tx_date|default_if_none:'' }}</td>
                                    <td class="text-black">{{ withdraw.date_added|default_if_none:'' }}</td>
                                    <td class="text-black">
                                        {% if 'delete_transaction' in user_perms %}
                                            <button type="button" id="worker-{{ withdraw.id }}"
                                                    onclick="deleteTransaction(this)" data-worker-id="{{ withdraw.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 %}