{% extends 'extends/layout.html' %}
{% load static %}
{% load humanize %}
{% block styles %}
    <link href="{% static 'sacco/assets/css/bootstrap-fileupload.min.css' %}" rel="stylesheet"/>
{% endblock %}

{% block scripts %}
    <script src="{% static 'sacco/assets/custom_js/currency_formatter.js' %}"></script>
    <script src="{% static 'sacco/assets/js/bootstrap-fileupload.js' %}"></script>
    <script>
        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 showDetails(worker) {
            var workerType = worker.getAttribute("data-worker-id");
            var member = '/member/delete/' + workerType + '/';
            if (confirm("Are you sure you want to delete this Member")) {
                location.href = member
            }
        }

        function handleRemoveShareTransaction(id, baseUrl, memId) {
            var member = baseUrl + '/shares/remove-share-transaction-mem/' + id + '/' + memId + '/';
            if (confirm("Are you sure you want to revert this share transaction")) {
                location.href = member
            }
        }

        //=== enroll member to the portal
        function enrollMember(val) {
            let member = val.getAttribute("data-worker-id");
            let url = '/member/enroll/' + member + '/';
            if (confirm("Are you sure you want to enroll this Member to access and use the portal?")) {
                location.href = url
            }
        }
    </script>
    <script>
        function getDepo(acc_id, 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").defaultValue = acc_no;
            document.getElementById("with_unique").defaultValue = acc_id;
        }
    </script>
    <script type="text/javascript">

        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');
            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').modal('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');
        }

        const handleShowUpdateAccNo = (acc_number, acc_id, base_url) =>{
            // show the modal
            $('#updateAccNumberModal').modal('show')
            //set default acc number
            document.querySelector('#new_account_number').value = acc_number
            //set the action of form
            document.querySelector('#updateAccNumberForm').action = `${base_url}/update-acc-number/${acc_id}/`
        }

        const handleChangeUpdateAccInput = () =>{
            document.querySelector('#updateAccNumberBtn').disabled = false
        }


        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')

            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 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');
            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) {
                    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';
                        $('#withModal').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 %}
{% block content %}
    <div class="row">
        <div class="modal fade" id="exampleStandardModal" 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">Add Account</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <form method="post">
                        {% csrf_token %}
                        <div class="modal-body">
                            {% if not biz.auto_acc_no %}
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="account_number">Account Number *</label>
                                    <input type="text" class="form-control"
                                           id="account_number" name="account_number"
                                           placeholder="Account Number" {% if not biz.auto_acc_no %}required{% endif %}>
                                </div>
                            {% endif %}
                            <div class="mb-2 col-md-12">
                                <label class="form-label" for="account">Credited Account *</label>
                                <select class="form-control" name="the_account"
                                        id="account">
                                    <option value="" selected disabled>Select Account</option>
                                    {% for item in accounts_ %}
                                        <option value="{{ item.id }}">{{ item.name }}</option>
                                    {% endfor %}
                                </select>

                            </div>
                            <div class="mb-2 col-md-12">
                                <label class="form-label" for="account_type">Saving product *</label>
                                <select class="form-control" name="account_type"
                                        id="account_type" onchange="activateInit()" required>
                                    <option value="" selected disabled>Select Account</option>
                                    {% for item in acc_types %}
                                        <option value="{{ item.id }}">{{ item.name }}</option>
                                    {% endfor %}
                                </select>

                            </div>
                            <div class="mb-2 col-md-12">
                                <label class="form-label" for="initial">Initial Deposit</label>
                                <input type="text" data-type="currency" class="form-control"
                                       id="initial" name="initial"
                                       placeholder="Initial Deposit" required>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close
                            </button>
                            <button type="submit" name="add_account" class="btn btn-primary">Save changes
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
{#        ------------------------------------------- update acc number ----------------------------------------#}
        <div class="modal fade" id="updateAccNumberModal" 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">Update account number</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <form method="post" id="updateAccNumberForm">
                        {% csrf_token %}
                        <div class="modal-body">

                            <div class="mb-2 col-md-12">
                                <label class="form-label" for="account_number">Account Number *</label>
                                <input type="text" class="form-control"
                                       id="new_account_number" name="new_account_number" oninput="handleChangeUpdateAccInput()"
                                       placeholder="Account Number" required>
                            </div>



                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close
                            </button>
                            <button type="submit" id="updateAccNumberBtn" name="add_account" class="btn btn-primary" disabled>Update number
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
{#        ------------------------------------------- update acc number ----------------------------------------#}
        <div class="modal fade" id="uploadSignature" 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">Upload Signature</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <form action="{% url 'member_sign' member.id %}" method="post"
                          enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="modal-body">
                            <div class="mb-2 col-md-12">
                                <label class="form-label" for="sign">File</label>
                                <input type="file" class="form-control"
                                       id="sign" name="signature"
                                       placeholder="Initial Deposit"
                                       accept="image/*" required>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close
                            </button>
                            <button type="submit" name="update_sign" class="btn btn-primary">Save changes
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <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="Deposit date"
                                       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="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>
                    </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" style="background: #17a2b8">
                        <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="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_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>
                    </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="migrateMember" tabindex="-1" role="dialog"
                     aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Migrate member</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" action="{% url 'migrate_member' member.id %}">
                            {% csrf_token %}
                            <div class="mb-2 col-md-12">
                                <label class="form-label" for="name">Branch *</label>
                                <select class="form-control" name="migrate_branch" required>
                                    <option value="">Select branch</option>
                                    {% for br in select_branches %}
                                    <option value="{{ br.id }}">{{ br.name }}</option>
{#                                            <option value="s">Standard</option>#}
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="alert alert-warning" role="alert">
                              Note: If member is in any group in the current branch, they will be removed. All transactions, shares and any other details for the member will be moved.
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close
                                </button>
                                <button type="submit" name="add_fin" class="btn btn-primary">Migrate
                                </button>
                            </div>

                        </form>
                    </div>

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

        <!-- Start col -->
        <div class="col-lg-3">
            <div class="card m-b-30">
                <div class="card-body">
                    {% if not show_business_filters %}
                    <h6 class="card-subtitle text-center"><a href="{% url 'member_edit' member.id %}"><i
                            class="fa fa-edit"></i> Edit Profile</a></h6>
                    {% endif %}
                    <form method="post" action="{% url 'member_photo' member.id %}" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="card">
                            <div class="card-body">
                                <center class="m-t-30">
                                    <div class="mb-2">
                                        <div class="fileupload fileupload-new" data-provides="fileupload">
                                            <input type="hidden" value="" name="">

                                            <div class="fileupload-new thumbnail border border-dark"
                                                 style="width: 100%; height: 200px; border-radius: 12px;">
                                                <img width="200" height="200"
                                                     src="{{ member.biodata.photo_url|default_if_none:'https://www.bcc-phil.com/wp-content/uploads/2020/08/facebookanon.jpg' }}"
                                                     style="width: 100%; min-height: 200px;" alt="">
                                            </div>

                                            <div class="fileupload-preview fileupload-exists thumbnail"
                                                 style="max-width: 200px; max-height: 200px; line-height: 10px;"></div>
                                            <br>

                                            <div class="inline position-relative">
                                                {% if not show_business_filters %}
                                               <span class="btn btn-file btn-primary">
                                                   <span class="fileupload-new">Change image</span>
                                                   <span class="fileupload-exists">Change</span>
                                                   <input type="file" name="photo" accept="image/*">
                                               </span>
                                                {% endif %}
                                                <button class="btn btn-success fileupload-exists" name="profile_pic">
                                                    Submit
                                                </button>
                                                <a href="#" class="btn btn-danger fileupload-exists"
                                                   data-bs-dismiss="fileupload">Remove</a>
                                            </div>

                                        </div>
                                    </div>
                                </center>
                            </div>
                        </div>
                    </form>
                    <br>
                    <h4 class="text-center font-16">{{ member.biodata.name|default_if_none:'' }}</h4>
                    <h4 class="text-center font-14">{{ member.biodata.contact|default_if_none:'' }}</h4>
                    <h4 class="text-center font-14">{{ member.biodata.email|default_if_none:'' }}</h4>
                    <table class="table">
                        <tbody>
                        <tr>
                            <th scope="row">Shares</th>
                            <td>{{ member.shares|default_if_none:'' }}</td>
                        </tr>
                        <tr>

                        </tr>
                        <tr>
                            <th scope="row">Gender</th>
                            <td>{{ member.biodata.get_gender_display|default_if_none:'' }}</td>
                        </tr>
                        <tr>
                            <th scope="row">Marital status</th>
                            <td>{{ member.biodata.get_marital_status_display|default_if_none:'' }}</td>
                        </tr>
                        <tr>
                            <th scope="row">Date of Birth</th>
                            <td>{{ member.biodata.dob|date:"d, M, Y"|default_if_none:'' }}</td>
                        </tr>
                        <tr>
                            <th scope="row">National ID</th>
                            <td>{{ member.biodata.nin|default_if_none:'' }}</td>
                        </tr>
                        <tr>
                            <th scope="row">Signature</th>
                            <td><img src="{{ member.biodata.sign_url|default_if_none:'#' }}" alt="">
                                {% if not show_business_filters %}
                                <a
                                    data-bs-toggle="modal"
                                    data-bs-target="#uploadSignature" href="#" title="Edit signature"><i
                                    class="fa fa-edit"></i></a>
                                {% endif %}
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- End col -->
        <!-- Start col -->
        <div class="col-lg-9">
            <div class="row">
                <div class="col-md-12">

                    <div class="button-list d-flex justify-content-end">
                        {% if not show_business_filters %}
                        {% if request.user.staff.can_migrate_staff %}
                            <button type="button" class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#migrateMember">
                                <i class="fa-solid fa-down-left-and-up-right-to-center"></i> Migrate member
                            </button>
                        {% endif %}
                        {% if 'can_withdraw' in user_perms and request.user.staff.biodata.business.does_withdraw == 1 %}
                            <button type="button" class="btn btn-secondary btn-sm"
                                    onclick="location.href='{% url 'member_withdraw' member.id %}'">
                                <i class="fa fa-minus-circle"></i> Withdraw
                            </button>
                        {% endif %}
                        {% if 'can_deposit' in user_perms and request.user.staff.biodata.business.does_deposit == 1 %}
                            <button type="button" class="btn btn-primary btn-sm"
                                    onclick="location.href='{% url 'member_deposit' member.id %}'">
                                <i class="fa fa-plus-circle"></i> Deposit
                            </button>
                        {% endif %}

                        {% if 'delete_member' in user_perms %}
                            <button type="button" class="pull-right btn btn-danger btn-sm" id="worker-{{ member.id }}"
                                    onclick="showDetails(this)" data-worker-id="{{ member.id }}"><i
                                    class="fa fa-trash"></i> Delete Member
                            </button>
                        {% endif %}
                        {% endif %}



                    </div>

                </div>
            </div>
            <hr>
            <div class="card m-b-30">
                {% if not show_business_filters %}
                {% if request.user.staff.biodata.business.type == 1 %}
                    <div class="card-header d-flex justify-content-end">
                        <h5 class="card-title">
                            <button class="pull-right btn btn-primary btn-sm card-title" data-bs-toggle="modal"
                                    data-bs-target="#exampleStandardModal"><i class="fa fa-plus"></i> New Account
                            </button>
                        </h5>
                    </div>
                {% endif %}
                {% endif %}
                {% if saving_not_withdrawable > 0 %}
                    <div class="col-12 mt-2">
                        <div class="alert alert-warning" role="alert">
                            <span style="font-weight: bold;">Note:</span>
                            <span>This individual has a loans that dictate that an amount of {{saving_not_withdrawable|intcomma}} cannot be withdrawn from any account of theirs.</span> 
                        </div>
                    </div>
                {% endif %}
                
                <div class="card-body">
                    <table class="table">
                        <thead>
                        <tr>
                            <th scope="col">Account Number</th>
                            <th scope="col">Account Type</th>
                            <th scope="col">Balance</th>
                            {% if not show_business_filters %}
                            <th scope="col">Actions</th>
                            {% endif %}

                            {#                            <th scope="col">Actions</th>#}
                        </tr>
                        </thead>
                        <tbody>
                        {% for account in member_accounts %}
                            <tr>
                                <td class="text-black">{{ account.the_account.acc_number }}</td>
                                <td class="text-black">{{ account.the_account.account_type.name }}</td>
                                <td class="text-black">{{ account.the_account.balance|intcomma }}
                                {% if not show_business_filters %}
                                <td>
                                    <button class="pull-right btn btn-secondary btn-sm card-title" onclick="handleShowUpdateAccNo('{{ account.the_account.acc_number }}', '{{ account.the_account.id }}', '{{ baseUrl }}')">Change acc number
                                    </button>

                                </td>
                                {% endif %}


                            </tr>
                        {% endfor %}

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card m-b-30">
                <div class="card-body">
                    <ul class="nav nav-pills bg-nav-pills nav-justified mb-3">
                        <li class="nav-item">
                            <a href="#profile-tab" data-bs-toggle="tab" aria-expanded="true"
                               class="nav-link rounded-0 active">
                                <i class="fa fa-user-circle-o d-md-none d-block"></i>
                                <span class="d-none d-md-block">Profile</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#transactions-tab" data-bs-toggle="tab" aria-expanded="false"
                               class="nav-link rounded-0 ">
                                <i class="faf fa-list-check d-md-none d-block"></i>
                                <span class="d-none d-md-block">Transactions</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#loans-tab" data-bs-toggle="tab" aria-expanded="false" class="nav-link rounded-0">
                                <i class="fa fa-bills d-md-none d-block"></i>
                                <span class="d-none d-md-block">Loans</span>
                            </a>
                        </li>
                        {% if request.user.staff.biodata.business.does_deposit == 1 %}
                            <li class="nav-item">
                                <a href="#savings-tab" data-bs-toggle="tab" aria-expanded="false"
                                   class="nav-link rounded-0">
                                    <i class="fa fa-upload d-md-none d-block"></i>
                                    <span class="d-none d-md-block">Savings</span>
                                </a>
                            </li>
                        {% endif %}
                        {% if request.user.staff.biodata.business.has_shares == 1 %}
                            <li class="nav-item">
                                <a href="#shares-tab" data-bs-toggle="tab" aria-expanded="false"
                                   class="nav-link rounded-0">
                                    <i class="fa fa-upload d-md-none d-block"></i>
                                    <span class="d-none d-md-block">Shares</span>
                                </a>
                            </li>
                        {% endif %}
                    </ul>

                    <div class="tab-content" id="pills-tab-content-button">
                        <div class="tab-pane fade show active" id="profile-tab" role="tabpanel"
                             aria-labelledby="pills-member-tab-button">
                            <div class="row mb-5">
                                <div class="card col-md-6 col-lg-6 col-xl-3 p-2">
                                    <h6>Date Joined</h6>
                                    <p class="mb-0">{{ member.date_joined|date:"d, M, Y"|default_if_none:'' }}</p>
                                </div>
                                <div class="card col-md-6 col-lg-6 col-xl-3 p-2">
                                    <h6>Member Type</h6>
                                    <p class="mb-0">{{ member.get_member_type_display|default_if_none:'' }}</p>
                                </div>
                                <div class="card col-md-6 col-lg-6 col-xl-3 p-2">
                                    <h6>Other Contact</h6>
                                    <p class="mb-0">{{ member.biodata.other_contact|default_if_none:'' }}</p>
                                </div>
                                <div class="card col-md-6 col-lg-6 col-xl-3 p-2">
                                    <h6>Mobile Money</h6>
                                    <p class="mb-0">{{ member.biodata.mobile_money|default_if_none:'' }}</p>
                                </div>
                                <div class="card col-md-6 col-lg-6 col-xl-3 p-2">
                                    <h6>Address</h6>
                                    <p class="mb-0">{{ member.biodata.location|default_if_none:'' }}</p>
                                </div>

                                <div class="card col-md-6 col-lg-6 col-xl-3 p-2">
                                    <h6>Next Of Kin</h6>
                                    <p class="mb-0">{{ member.biodata.nok|default_if_none:'' }}</p>
                                </div>

                                <div class="card col-md-6 col-lg-6 col-xl-3 p-2">
                                    <h6>Next of Kin Contacts</h6>
                                    <p class="mb-0">{{ member.biodata.nok_contacts|default_if_none:'' }}</p>
                                </div>

                                <div class="card col-md-6 col-lg-6 col-xl-3 p-2">
                                    <h6>Nationality</h6>
                                    <p class="mb-0"><img
                                            src="{{ member.biodata.country.flag|default_if_none:'' }}"
                                            alt="{{ member.biodata.country.name|default_if_none:'' }}">
                                        {{ member.biodata.country.name|default_if_none:'' }}
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="loans-tab" role="tabpanel"
                             aria-labelledby="pills-loan-tab-button">
                            <table class="table">
                                <thead class="thead-dark">
                                <tr>
                                    <th scope="col">S/N</th>
                                    <th scope="col">Amount Approved</th>
                                    <th scope="col">Amount Requested</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Approved On</th>
                                    <th scope="col">Ending On</th>
                                    <th scope="col">Details</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for loan in member_loans %}
                                    <tr>
                                        <th scope="row">{{ forloop.counter }}.</th>
                                        <td>{{ loan.amount_approved }}</td>
                                        <td>{{ loan.amount_requested }}</td>
                                        <td>{{ loan.get_loan_status_display }}</td>
                                        <td>{{ loan.approved_on }}</td>
                                        <td>{{ loan.ending_date }}</td>
                                        <td>
                                            <a href="{% url 'loan_details' loan.id %}"
                                               class="btn btn-outline-success btn-sm"><i
                                                    class="fa fa-eye"></i>Details</a>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>

                        <div class="tab-pane fade" id="transactions-tab" role="tabpanel"
                             aria-labelledby="pills-trans-tab-button">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th scope="col">S/N</th>
                                    <th scope="col">Trans Type</th>
                                    <th scope="col">Amount</th>
                                    <th scope="col">Details</th>
                                    <th scope="col">Date</th>
                                    <th scope="col">Receipt</th>
                                    <th scope="col">Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for trans in combined %}
                                    <tr>
                                        <th>{{ forloop.counter }}.</th>
                                        <th>{{ trans.transaction_type }}</th>
                                        <td>{{ trans.reporting_amount|intcomma }}</td>
                                        <td>{{ trans.narration }}</td>
                                        <td>{{ trans.tx_date|date:'d, M, Y' }}</td>
                                        <td>
                                            {% if trans.receipt != None %}
                                                <button class="btn btn-link"
                                                        title="Click to reprint Receipt No. {{ trans.receipt }}"
                                                        onclick="location.href='{% url 'receipt_detail' trans.id member.id %}'">
                                                    <i class="fa fa-print"></i> {{ trans.receipt|default_if_none:'' }}
                                                </button>
                                            {% endif %}
                                        </td>
                                        <td class="text-black">
                                            {% if 'delete_transaction' in user_perms %}
                                                <button type="button" id="worker-{{ trans.id }}"
                                                        onclick="deleteTransaction(this)"
                                                        data-worker-id="{{ trans.id }}"
                                                        class="btn btn-danger btn-sm" title="Delete this transaction"><i
                                                        class="fa-solid fa-xmark"></i></button>
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                            <nav aria-label="Page navigation">
                                <ul class="pagination d-flex justify-content-end">
                                    {% if combined.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 combined.paginator.page_range %}
                                        {% if combined.number == n %}
                                            <li class="page-item active">
                                                <span class="page-link">{{ n }}<span
                                                        class="sr-only">(current)</span></span>
                                            </li>
                                        {% elif n > combined.number|add:'-3' and n < combined.number|add:'3' %}
                                            <li class="page-item"><a class="page-link" href="?page={{ n }}">{{ n }}</a>
                                            </li>
                                        {% endif %}
                                    {% endfor %}

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

                        {% if request.user.staff.biodata.business.does_deposit == 1 %}
                            <div class="tab-pane fade" id="savings-tab" role="tabpanel"
                                 aria-labelledby="pills-saving-tab-button">
                                <table class="table">
                                    <thead class="thead-dark">
                                    <tr>
                                        <th scope="col">S/N</th>
                                        <th scope="col">Account Number</th>
                                        <th scope="col">Amount</th>
                                        <th scope="col">Transaction Date</th>
                                        <th scope="col">Date Added</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for deposit in deposits %}
                                        <tr>
                                            <td>{{ forloop.counter }}.</td>
                                            <th>{{ deposit.account_cr.member.acc_number }}
                                                ({{ deposit.account_cr.member.account_type.name }})
                                                </td>
                                            <td>{{ deposit.reporting_amount|intcomma|default_if_none:'' }}</td>
                                            <td>{{ deposit.tx_date|default_if_none:'' }}</td>
                                            <td>{{ deposit.date_added|default_if_none:'' }}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        {% endif %}
                        {% if request.user.staff.biodata.business.has_shares == 1 %}
                            <div class="tab-pane fade" id="shares-tab" role="tabpanel"
                                 aria-labelledby="pills-saving-tab-button">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th>S/N</th>
                                        <th>Date</th>
                                        <th>Shares</th>
                                        <th>Description</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for shares in shares_trans %}
                                        <tr>
                                            <td>{{ forloop.counter }}.</td>
                                            <td>{{ shares.date }}</td>
                                            <td>{{ shares.shares }}</td>
                                            <td>{{ shares.narration }}</td>
                                            <td class="text-black">
                                                <button type="button"
                                                        onclick="handleRemoveShareTransaction('{{shares.id}}', '{{ baseUrl }}', '{{ member.id }}')"
                                                        class="btn btn-danger btn-sm" title="Revert share transaction"><i
                                                        class="fa-solid fa-xmark"></i></button>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        <!-- End col -->
    </div>
{% endblock %}