{% extends 'extends/layout.html' %}
{% load static %}
{% load custom_tags %}
{% load humanize %}
{% block content %}
    {% block scripts %}
        <script>
            function getDepo(acc_id, acc_no) {
                {#console.log('ID:-',acc_id, 'No.', acc_no)#}
                document.getElementById("account_id").defaultValue = acc_no;
                document.getElementById("unique").defaultValue = acc_id;
            }

            function getWith(acc_id, acc_no) {
                document.getElementById("with_account_id").value = acc_no;
                document.getElementById("with_unique").value = acc_id;
            }

            function getOther(acc_id, acc_no) {
                console.log(acc_id, acc_no)
                document.getElementById("other_account_id").value = acc_no;
                document.getElementById("other_unique").value = acc_id;
            }

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

            function validateForm() {
                //labels
                let depo_date = document.querySelector('#error_depo_date_created')
                let dep_amount = document.querySelector('#error_dep_amount')
                let depo_from = document.querySelector('#error_dep_from')


                let date_created = document.forms["depoForm"]["depo_date_created"].value;
                let amount = document.forms["depoForm"]["dep_amount"].value;
                let account = document.forms["depoForm"]["from_account"].value;

                let fieldErrors = ['date_created', 'amount', 'account']
                let fieldErrorObj = {
                    'date_created': false,
                    'amount': false,
                    'account': 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 === 'account') {
                        if (account.trim() === "") {
                            fieldErrorObj = {...fieldErrorObj, account: true}
                            noErrors = false
                        }

                    }
                })

                if (!noErrors) {
                    if (fieldErrorObj.date_created) {
                        depo_date.style.display = 'block'
                    }
                    if (fieldErrorObj.amount) {
                        dep_amount.style.display = 'block'
                    }
                    if (fieldErrorObj.account) {
                        depo_from.style.display = 'block'
                    }
                } else {
                    depoHandler()
                }
            }

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

            function depoHandler() {
                let loader_ = document.querySelector('#submitting');
                let btn_ = document.querySelector('#depoBtn');
                let depositModal = new bootstrap.Modal(document.getElementById('depositModal'), {
                    keyboard: false
                })
                loader_.style.display = 'block';
                btn_.style.display = 'none';
                $.ajax({
                    type: 'post',
                    url: '{% url 'member_ind_accounts' %}',
                    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';
                            depositModal.hide();

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

        </script>


        <script type="text/javascript">

            async function withFunction() {
                return $('#withdrawModal').modal('hide');
            }

            function withvalidateForm() {
                //labels
                let depo_date = document.querySelector('#error_with_date_created')
                let dep_amount = document.querySelector('#error_with_amount')
                let depo_from = document.querySelector('#error_with_from')
                console.log('okay')

                let date_created = document.forms["withForm"]["with_date_created"].value;
                let amount = document.forms["withForm"]["with_amount"].value;
                let account = document.forms["withForm"]["with_from_account"].value;
                {#let narration = document.forms["withForm"]["with_narration"].value;#}


                let fieldErrors = ['date_created', 'amount', 'account']
                let fieldErrorObj = {
                    'date_created': false,
                    'amount': false,
                    'account': 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 === 'account') {
                        if (account.trim() === "") {
                            fieldErrorObj = {...fieldErrorObj, account: true}
                            noErrors = false
                        }

                    }
                })

                if (!noErrors) {
                    if (fieldErrorObj.date_created) {
                        depo_date.style.display = 'block'
                    }
                    if (fieldErrorObj.amount) {
                        dep_amount.style.display = 'block'
                    }
                    if (fieldErrorObj.account) {
                        depo_from.style.display = 'block'
                    }
                } else {
                    withHandler()
                }
            }

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

            function withHandler() {
                let loader_ = document.querySelector('#withsubmitting');
                let btn_ = document.querySelector('#withBtn');
                console.log('YES')
                let withModal = new bootstrap.Modal(document.getElementById('withdrawModal'), {
                    keyboard: false
                })
                console.log('here')
                loader_.style.display = 'block';
                btn_.style.display = 'none';
                $.ajax({
                    type: 'post',
                    url: '{% url 'member_ind_w_accounts' %}',
                    data: $('#withForm').serialize(),
                    dataType: 'json',
                    success: function (data) {
                        console.log(data)
                        if (data.msg === 'success') {
                            console.log(data)
                            new PNotify({title: "Success", text: data.extra, type: data.msg});
                            window.location.href = '{% url 'withdraw_receipt' %}'
                            loader_.style.display = 'none';
                            btn_.style.display = 'block';
                            withModal.hide();
                        } else {
                            console.log(data)
                            new PNotify({title: "Error", text: data.extra, type: data.msg});
                            loader_.style.display = 'none'
                            btn_.style.display = 'block'
                        }
                    },
                    fail: function (xhr, textStatus, errorThrown) {
                        alert('request failed');
                    }
                })
                return false
            }

            function othervalidateForm() {
                //labels
                let trans_date = document.querySelector('#error_other_date_created')
                let trans_amount = document.querySelector('#error_other_amount')
                let trans_type = document.querySelector('#error_type_from')

                let date_created = document.forms["OtherForm"]["other_date_created"].value;
                let amount = document.forms["OtherForm"]["other_amount"].value;
                let type = document.forms["OtherForm"]["type"].value;


                let fieldErrors = ['date_created', 'amount', 'account']
                let fieldErrorObj = {
                    'date_created': false,
                    'amount': false,
                    'account': 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 === 'account') {
                        if (type.trim() === "") {
                            fieldErrorObj = {...fieldErrorObj, account: true}
                            noErrors = false
                        }

                    }
                })

                if (!noErrors) {
                    if (fieldErrorObj.date_created) {
                        trans_date.style.display = 'block'
                    }
                    if (fieldErrorObj.amount) {
                        trans_amount.style.display = 'block'
                    }
                    if (fieldErrorObj.account) {
                        trans_type.style.display = 'block'
                    }
                } else {
                    otherHandler()
                }
            }

            function otherHandler() {
                let loader_ = document.querySelector('#othersubmitting');
                let btn_ = document.querySelector('#otherBtn');
                {#console.log('YES')#}
                let withModal = new bootstrap.Modal(document.getElementById('OtherTransModal'), {
                    keyboard: false
                })
                {#console.log('here')#}
                loader_.style.display = 'block';
                btn_.style.display = 'none';
            }
        </script>

    {% endblock %}

    <div class="row">
        <!-- Start col -->
        <div class="col-lg-12">
            <div class="modal fade" id="depositModal" tabindex="-1" role="dialog"
                 aria-labelledby="depositModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="depositModalLabel">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="depo_date_created">Deposit date</label>
                                    <input type="date" class="form-control" id="depo_date_created"
                                           name="date_created" placeholder="Deposit date"
                                           onchange="removeErrors('error_depo_date_created')" required/>
                                    <label id="error_depo_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>
                                    <input type="text" class="form-control" id="account_id"
                                           name="account_no" placeholder="Account Number"
                                           value="" readonly required/>
                                    <input type="hidden" class="form-control" id="unique"
                                           name="unique" value="" required/>
                                </div>

                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="dep_amount">Amount to deposit</label>
                                    <input type="text" data-type="currency" onchange="removeErrors('error_dep_amount')"
                                           class="form-control"
                                           id="dep_amount" min="0"
                                           name="amount"
                                           placeholder="Amount" required/>
                                    <label id="error_dep_amount" 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="from_account">Payment mode</label>
                                    <select class="form-control" name="the_account"
                                            onchange="removeErrors('error_dep_from')"
                                            id="from_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_dep_from" 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="dep_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="depoBtn" 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="modal fade" id="withdrawModal" tabindex="-1" role="dialog"
                 aria-labelledby="depositModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="depositModalLabel">Withdraw Form</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            </button>
                        </div>
                        <form method="post" id="withForm">
                            {% csrf_token %}
                            <div class="modal-body">
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="with_date_created">Withdraw date</label>
                                    <input type="date" class="form-control" id="with_date_created"
                                           name="date_created" placeholder="Withdraw date"
                                           onchange="withremoveErrors('error_with_date_created')" required/>
                                    <label id="error_with_date_created" style="color: tomato; display: none">
                                        Field required
                                    </label>
                                </div>

                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="with_account_id">Account Number</label>
                                    <input type="text" class="form-control" id="with_account_id"
                                           name="account_no" placeholder="Account Number"
                                           value="" readonly required/>
                                    <input type="hidden" class="form-control" id="with_unique"
                                           name="with_unique" value="" required/>
                                </div>

                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="with_amount">Amount to withdraw</label>
                                    <input type="text" data-type="currency" onchange="removeErrors('error_with_amount')"
                                           class="form-control"
                                           id="with_amount" min="0"
                                           name="amount"
                                           placeholder="Amount" required/>
                                    <label id="error_with_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="with_from_account">Payment mode</label>
                                    <select class="form-control" name="the_account"
                                            onchange="removeErrors('error_with_from')"
                                            id="with_from_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_with_from" 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="with_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="withBtn" type="button" onclick="withvalidateForm()" class="btn btn-primary">
                                Submit
                            </button>
                            <div class="spinner-border text-danger" role="status" id="withsubmitting"
                                 style="display: none">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="OtherTransModal" tabindex="-1" role="dialog"
                 aria-labelledby="depositModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="depositModalLabel">Other Transactions Form</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            </button>
                        </div>
                        <form method="post" id="OtherForm">
                            {% csrf_token %}
                            <div class="modal-body">
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="other_date_created">Transaction date</label>
                                    <input type="date" class="form-control" id="other_date_created"
                                           name="date_created" placeholder="Transaction date"
                                           onchange="removeErrors('error_other_date_created')" required/>
                                    <label id="error_other_date_created" style="color: tomato; display: none">
                                        Field required
                                    </label>
                                </div>

                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="other_account_id">Account Number</label>
                                    <input type="text" class="form-control" id="other_account_id"
                                           name="account_no" placeholder="Account Number"
                                           value="" readonly required/>
                                    <input type="hidden" class="form-control" id="other_unique"
                                           name="other_unique" value="" required/>
                                </div>
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="type">Transaction Type</label>
                                    <select class="form-control" name="the_type"
                                            onchange="removeErrors('error_type_from')"
                                            id="type" required>
                                        <option value="" selected disabled>Select Transaction Type</option>
                                        {% for item in all_charges %}
                                            <option value="{{ item.id }}">{{ item.charge }}</option>
                                        {% endfor %}
                                    </select>
                                    <label id="error_type_from" style="color: tomato; display: none">
                                        Field required
                                    </label>
                                </div>

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

                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="other_narration">Narration</label>
                                    <textarea class="form-control" id="other_narration" name="narration"
                                              placeholder="Transaction 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="otherBtn" type="button" onclick="othervalidateForm()" class="btn btn-primary">
                                Submit
                            </button>
                            <div class="spinner-border text-danger" role="status" id="othersubmitting"
                                 style="display: none">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">

                <div class="card-body">
                    <form method="get">
                        <div class="row">
                            {% if show_business_filters %}
                            <div class="col-md-2 form-group" >
                                <select class="form-control form-control-sm" name="business_filter" id="business_filter">
                                    <option value="" >Select branch</option>
                                    <option value="all_branches" {% if business_filter == 'all_branches' %}selected{% endif %}>All branches</option>

                                    {% for branch in businesses_list_filter %}
                                        <option value="{{ branch.business.id }}" {% if business_filter == branch.business.id|stringformat:"s" %}selected{% endif %}>{{ branch.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            {% endif %}
                            <div class="col-md-2 form-group" id="member_name_filter">
                                <input type="text" class="form-control form-control-sm" name="member_name" value='{{ member_name }}' placeholder="Enter member's name">
                            </div>
                            <div class="col-md-2 form-group" id="account_number_filter">
                                <input type="text" class="form-control form-control-sm" name="account_number" value='{{ account_number }}' placeholder="Enter account number">
                            </div>

                            <div class="col-md-2">
                                <button class="btn btn-primary btn-sm" type="submit"><i class="fa fa-filter"></i>
                                    Filter
                                </button>
                                <a href="{% url 'member_accounts' %}"><button class="btn btn-secondary btn-sm" type="button"><i class="fa fa-filter"></i>
                                    Reset
                                </button></a>
                            </div>


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

            </div>

            <div class="card m-b-30">
                <div class="card-body">
                    <div>
                    <table class="table dt-responsive nowrap w-100">
                        <thead>
                        <tr>
                            <th>S/N</th>
                            <th>Account Name</th>
                            <th>Account Number</th>
                            <th>Account Type</th>
                            {% if request.user.staff.biodata.business.does_deposit == 1 %}
                                <th>Balance</th>
                            {% endif %}
                            {% if show_business_filters %}
                                <th>Branch</th>
                            {% endif %}
{#                            {% if request.user.staff.biodata.business.does_deposit == 1 or request.user.staff.biodata.business.does_withdraw == 1 %}#}
{#                                <th>Actions</th>#}
{#                            {% endif %}#}
                        </tr>
                        </thead>
                        <tbody>
                        {% for account in biz_accounts %}
                            <tr>
                                <td>{{ forloop.counter }}.</td>
                                <td>
                                    <button class="btn btn-header"
                                            onclick="location.href='{% url 'member_detail' account.members_id %}'"
                                            title="Click to go to {{ account.members.biodata.name }}'s profile">
                                        {{ account.name|default_if_none:'' }}
                                        <i class="fa fa-external-link"> </i>
                                    </button>
                                </td>
                                <td>{{ account.acc_number|default_if_none:'' }}</td>
                                <td>{{ account.account_type|default_if_none:'' }}</td>
                                {% if request.user.staff.biodata.business.does_deposit == 1 %}
                                    <td><strong>{{ account.balance|intcomma|default_if_none:'' }}</strong>
                                    </td> {% endif %}
                                {% if show_business_filters %}
                                    <th>{{ account.members__branch__name }}</th>
                                {% endif %}
                                {% if request.user.staff.biodata.business.does_deposit == 1 or request.user.staff.biodata.business.does_withdraw == 1 %}
{#                                    <td>#}
{#                                        {% if 'can_deposit' in user_perms and request.user.staff.biodata.business.does_deposit == 1 %}#}
{#                                            <button class="btn btn-blue btn-primary btn-sm"#}
{#                                                    onclick="getDepo({{ account.the_account_id }}, '{{ account.acc_number }}')"#}
{#                                                    data-bs-toggle="modal"#}
{#                                                    data-bs-target="#depositModal"><i#}
{#                                                    class="fa fa-plus-circle"></i> Deposit#}
{#                                            </button>#}
{#                                        {% endif %}#}
{#                                        {% if 'can_withdraw' in user_perms and request.user.staff.biodata.business.does_withdraw == 1 %}#}
{#                                            <button class="btn btn-blue btn-info btn-sm"#}
{#                                                    data-bs-toggle="modal"#}
{#                                                    onclick="getWith({{ account.the_account_id }}, '{{ account.acc_number }}')"#}
{#                                                    data-bs-target="#withdrawModal"><i#}
{#                                                    class="fa fa-minus-circle"></i> Withdraw#}
{#                                            </button>#}
{#                                        {% endif %}#}
{#                                        {% if 'can_withdraw' in user_perms and request.user.staff.biodata.business.does_withdraw == 1 %}#}
{#                                            <button class="btn btn-blue btn-success btn-sm d-none" data-bs-toggle="modal"#}
{#                                                    onclick="getOther({{ account.the_account_id }}, '{{ account.acc_number }}')"#}
{#                                                    data-bs-target="#OtherTransModal" type="button">#}
{#                                                <i class="fa-brands fa-gg-circle"></i> Others#}
{#                                            </button>#}
{#                                        {% endif %}#}
{##}
{#                                    </td>#}
                                {% endif %}
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    </div>
                    {% if biz_accounts.has_other_pages %}
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <nav aria-label="Page navigation">
                                    <ul class="pagination mb-0">
                                        {% if biz_accounts.has_previous %}
                                            <li class="page-item">
                                                <a class="page-link"
                                                   href="?page={{ biz_accounts.previous_page_number }}&member_name={{ member_name }}&account_number={{ account_number }}&business_filter={{ business_filter }}"
                                                   aria-label="Previous">
                                                    <span aria-hidden="true">&laquo;</span>
                                                </a>
                                            </li>
                                        {% else %}
                                            <li class="page-item disabled">
                                                <span class="page-link" aria-hidden="true">&laquo;</span>
                                            </li>
                                        {% endif %}

                                        {% for num in biz_accounts.paginator.page_range %}
                                            {% if biz_accounts.number == num %}
                                                <li class="page-item active">
                                    <span class="page-link">
                                        {{ num }}
                                        <span class="sr-only">(current)</span>
                                    </span>
                                                </li>
                                            {% elif num > biz_accounts.number|add:'-3' and num < biz_accounts.number|add:'3' %}
                                                <li class="page-item">
                                                    <a class="page-link"
                                                       href="?page={{ num }}&member_name={{ member_name }}&account_number={{ account_number }}&business_filter={{ business_filter }}">{{ num }}</a>
                                                </li>
                                            {% endif %}
                                        {% endfor %}

                                        {% if biz_accounts.has_next %}
                                            <li class="page-item">
                                                <a class="page-link"
                                                   href="?page={{ biz_accounts.next_page_number }}&member_name={{ member_name }}&account_number={{ account_number }}&business_filter={{ business_filter }}"
                                                   aria-label="Next">
                                                    <span aria-hidden="true">&raquo;</span>
                                                </a>
                                            </li>
                                        {% else %}
                                            <li class="page-item disabled">
                                                <span class="page-link" aria-hidden="true">&raquo;</span>
                                            </li>
                                        {% endif %}
                                    </ul>
                                </nav>
                            </div>
                            <div class="col-md-6 text-md-right mt-3 mt-md-0">
                                <p class="text-muted mb-0">
                                    Page {{ biz_accounts.number }} of {{ biz_accounts.paginator.num_pages }}
                                </p>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <!-- End col -->
    </div>

{% endblock %}