{% extends 'extends/layout.html' %}
{% load static %}
{% load humanize %}
{% load countries %}
{% block styles %}
    <link href="{% static 'sacco/assets/css/bootstrap-fileupload.min.css' %}" rel="stylesheet"/>
    <style>
        @media (min-width: 900px) {
            .modal-xlg {
                width: 850px !important;
            }
        }
    </style>
{% endblock %}

{% block scripts %}
    <script src="{% static 'sacco/assets/js/bootstrap-fileupload.js' %}"></script>

    <script>
        let global_state = {
            onRegistration: '{{ onRegistration|safe }}'
        }
    </script>
    <script>
        function onSelectGroupType() {
            onChangeOfField('member_type')
            let selectMemberType = document.querySelector('#member_type')
            let initial_deposit_label = document.querySelector('#initial_deposit_label')
            let initial_deposit_input = document.querySelector('#initial_deposit_input')
            let credited_amt_div = document.querySelector('#credited_amt_div')


            if (selectMemberType.value === '') {
                initial_deposit_label.innerHTML = 'Initial deposit *'
                initial_deposit_input.placeholder = 'Initial deposit'
                credited_amt_div.style.display = 'none'
                // document.querySelector("#is_a_shareholder_select").hidden = false


            } else if (selectMemberType.value === 'NO') {
                //existing member
                // change initial shares and initial deposit to opening shares and deposit
                initial_deposit_label.innerHTML = 'Opening balance *'
                initial_deposit_input.placeholder = 'Opening balance'
                credited_amt_div.style.display = 'none'
                // document.querySelector("#is_a_shareholder_select").hidden = false


            } else if (selectMemberType.value === 'YES') {
                //new member
                initial_deposit_label.innerHTML = 'Initial deposit *'


                //show credited input
                credited_amt_div.style.display = 'block'
            }
        }
    </script>
    <script>
        function showDetails(worker) {
            var workerType = worker.getAttribute("data-worker-id");
            var group = '/namayingo/delete-the-group/' + workerType + '/';
            if (confirm("Are you sure you want to delete this item")) {
                location.href = group
            }
        }
    </script>
    <script>
        function deleteMem(member) {
            console.log(member)
            var _member = '/group/{{ group.id }}/delete-member/' + member + '/';
            if (confirm("Are you sure you want to delete this item")) {
                {#console.log(memType)#}
                location.href = _member
            }
        }
    </script>
    <script>
        $("textarea").each(function () {
            this.setAttribute("style", "height:" + (80) + "px;min_height:100px;overflow-y:hidden;");
        }).on("input", function () {
            this.style.height = "auto";
            {#this.style.min_height = 40px;#}
            this.style.height = (this.scrollHeight) + "px";
        });
    </script>
{% endblock %}
{% block content %}
    {% get_countries as countries %}
    <div class="row">
        <div class="modal fade" id="grpMember" tabindex="-1" role="dialog"
             aria-labelledby="exampleStandardModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content modal-xlg">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleStandardModalLabel">Add Group Member</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form method="post" action="{% url 'add_group_member' group.id %}">
                        {% csrf_token %}
                        <div class="modal-body">
                            <div class="row">

                                <div class="form-group col-md-6">
                                    <label for="name">FullName *</label>
                                    <input type="text" class="form-control"
                                           id="name" name="name"
                                           placeholder="Full Name" required>
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="contact">Primary Contact</label>
                                    <div class="form-spacing form-inline">
                                        <select name="code" class="form-control" required
                                                style="width:18%; display:inline-block;">
                                            {% for country in countries %}
                                                <option value="{{ country.code }}">{{ country.code }}</option>
                                            {% endfor %}
                                        </select>
                                        <input id="contact" type="text" class="form-control"
                                               name="contact" placeholder="Contact"
                                               required style="width:80%; display:inline-block;">
                                    </div>
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="nin">NIN</label>
                                    <input type="text" class="form-control"
                                           id="initial" name="nin"
                                           placeholder="National ID Number">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="email">Email</label>
                                    <input type="email" class="form-control"
                                           id="email" name="email"
                                           placeholder="Member Email">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="dob">Date of Birth</label>
                                    <br>
                                    {{ member_form.dob }}
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="gender">Gender *</label>
                                    <select class="form-control" id="gender" name="gender"
                                            required>
                                        <option value="" selected disabled>Select Gender</option>
                                        <option value="M">Male</option>
                                        <option value="F">Female</option>

                                    </select>
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="marital">Marital Status *</label>
                                    <select class="form-control" name="marital_status"
                                            id="marital" required>
                                        <option value="" selected disabled>Select Marital</option>
                                        <option value="1">Single</option>
                                        <option value="2">Married</option>
                                        <option value="3">Widowed</option>
                                        <option value="4">Divorced</option>

                                    </select>

                                </div>

                                <div class="form-group col-md-6">
                                    <label for="address">Location *</label>
                                    <textarea id="address" name="address" class="form-control"
                                              cols="4" rows="4" placeholder="Location"></textarea>
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="nok">Next of kin</label>
                                    <input type="text" class="form-control" id="nok" name="nok"
                                           placeholder="Enter Next of kin">
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="nok_contact">Next of kin contact</label>
                                    <div class="form-spacing form-inline">
                                        <select name="code1" class="form-control" required
                                                style="width:18%; display:inline-block;">
                                            {% for country in countries %}
                                                <option value="{{ country.code }}">{{ country.code }}</option>
                                            {% endfor %}
                                        </select>
                                        <input id="nok_contacts" type="text" class="form-control"
                                               name="nok_contacts" placeholder="Next of Kin Contacts"
                                               required style="width:80%; display:inline-block;">
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close
                            </button>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <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="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form method="post" action="{% url 'add_grp_acct' group.id %}">
                        {% csrf_token %}
                        <div class="modal-body">
                            {% if not biz.auto_acc_no %}
                                <div class="form-group col-md-12">
                                    <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="form-group col-md-12">
                                <label for="account_type">Account Type</label>
                                <select id="account_type" class="form-control"
                                        name="account_type" required>
                                    <option value="">Please select account type</option>
                                    {% for acct in account_types %}
                                        <option value="{{ acct.id }}">{{ acct.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>

{#                            <div class="form-group col-md-12">#}
{#                                <label for="member_type">Is New Account</label>#}
{#                                <select id="member_type" class="form-control"#}
{#                                        name="is_new" required>#}
{#                                    <option value="">Please select account type</option>#}
{#                                    <option value="2">Yes</option>#}
{#                                    <option value="1">No</option>#}
{##}
{#                                </select>#}
{#                            </div>#}
{##}
{#                            <div class="form-group col-md-12" id="credited_amt_div">#}
{#                                <label class="form-label" for="the_account">Credited Account*</label>#}
{#                                <select id="the_account" class="form-control" name="the_account"#}
{#                                        onchange="onChangeOfField('credited_account')"#}
{#                                        id="credited_account">#}
{#                                    <option value="" selected disabled>Select Account</option>#}
{#                                    {% for item in accounts_ %}#}
{#                                        <option value="{{ item.id }}">{{ item.name }}</option>#}
{#                                    {% endfor %}#}
{#                                </select>#}
{##}
{#                                <label id="error_credited_account" style="color: tomato; display: none">#}
{#                                    Field required#}
{#                                </label>#}
{##}
{#                            </div>#}
{##}
{#                            <div class="form-group col-md-12">#}
{#                                <label for="initial">Initial Deposit</label>#}
{#                                <input type="number" 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>
        <!-- Start col -->
        <div class="col-lg-3">
            <div class="card m-b-30">
                <div class="card-body">
                    <form method="post" action="{% url 'member_photo' group.id %}" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="card">
                            <div class="card-body">
                                <center class="m-t-30">
                                    <div class="form-group">
                                        <div class="fileupload fileupload-new" data-provides="fileupload">
                                            <input type="hidden" value="" name="">

                                            <div class="fileupload-new thumbnail" style="width: 200px; height: 200px;">
                                                <img src="{{ group.photo_url|default_if_none:'/static/sacco/assets/images/users/profile.svg' }}"
                                                     style="width: 200px; 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">
                                               <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>
                                                <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>

                </div>
            </div>
        </div>
        <!-- End col -->
        <!-- Start col -->
        <div class="col-lg-9">
            <div class="row">
                <div class="col-md-12">

                    <div class="button-list">
                    {% if group.accs > 0 %}
                        <button type="button" class="btn btn-primary-rgba"
                                onclick="location.href='{% url 'member_withdraw' group.id %}'">
                            <i class="fa fa-credit-card-alt mr-2"></i> Withdraw
                        </button>

                        <button type="button" class="btn btn-primary"
                                onclick="location.href='{% url 'member_deposit' group.id %}'">
                            <i class="fa fa-credit-card mr-2"></i> Deposit
                        </button>

                        <button type="button" class="btn btn-warning"
                                onclick="location.href='{% url 'member_loans' group.id %}'">
                            <i class="fa fa-money mr-2"></i> Loans
                        </button>
                    {% endif %}

                        {% if not show_business_filters %}

                            {% if can_delete_group %}
                                <button type="button" class="pull-right btn btn-danger" id="worker-{{ group.id }}"
                                        onclick="showDetails(this)" data-worker-id="{{ group.id }}"><i
                                        class="feather icon-trash mr-2"></i>Delete Group
                                </button>
                            {% endif %}

                            {% if am_namayingo is False %}
                                <button type="button" class="pull-right btn btn-outline-dark"
                                        onclick="location.href='{% url 'make_bulk_deposit' group.id %}'"><i
                                        class="feather icon-trash mr-2"></i>Bulk Deposit
                                </button>
                            {% else %}
                                {% if can_handle_group_transactional_data %}
                                    <button type="button" class="pull-right btn btn-outline-dark"
                                            onclick="location.href='{% url 'namayingo_upload_data' group.id %}'"><i
                                            class="feather icon-trash mr-2"></i>Member Transaction data
                                    </button>
                                {% endif %}
                            {% endif %}
                        {% endif %}
                        {% if am_namayingo is False %}
                        <button type="button" class="btn btn-dark float-end"
                                onclick="location.href='{% url 'group_members' group.id %}'">
                            <i class="fa fa-money mr-2"></i> Members ({{ grp_members.count }})
                        </button>
                            {% else %}
                            <button type="button" class="btn btn-dark float-end"
                                onclick="location.href='{% url 'namayingo_group_members' group.id %}'">
                            <i class="fa fa-money mr-2"></i> Members ({{ grp_members.count }})
                        </button>
                        {% endif %}

                    </div>

                </div>
            </div>
            <hr>
            <div class="card m-b-30">
                <div class="card-header">
                    {% if not show_business_filters %}
                    <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 mr-2"></i>New Account
                        </button>
                    </h5>
                    {% endif %}

                </div>
                <div class="card-body">
                    <h4 class="card-subtitle font-20">Accounts</h4>
                    <div class="table-responsive">
                        <table class="display table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th scope="col">Account Number</th>
                                <th scope="col">Account Type</th>
                                <th scope="col">Balance</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for account in grp_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 }}</td>
                                </tr>
                            {% endfor %}

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="card m-b-30">
                <div class="card-body">
                    <ul class="nav nav-pills justify-content-center custom-tab-button mb-3" id="pills-tab-button"
                        role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="pills-grp-tab-button" data-bs-toggle="pill"
                               href="#grp-tab-button" role="tab" aria-controls="pills-grp-button"
                               aria-selected="true"><span class="tab-btn-icon"><i class="feather icon-users"></i></span>Group
                                Info</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="pills-loan-tab-button" data-bs-toggle="pill" href="#loan-tab-button"
                               role="tab" aria-controls="pills-loan-button" aria-selected="true"><span
                                    class="tab-btn-icon"><i class="feather icon-book-open"></i></span>Loans</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="pills-trans-tab-button" data-bs-toggle="pill"
                               href="#pills-trans-button" role="tab" aria-controls="pills-trans-button"
                               aria-selected="false"><span class="tab-btn-icon"><i class="fa fa-history"></i></span>Transactions</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="pills-set-tab-button" data-bs-toggle="pill"
                               href="#pills-set-button" role="tab" aria-controls="pills-set-button"
                               aria-selected="false"><span class="tab-btn-icon"><i class="fa fa-gears"></i></span>Settings</a>
                        </li>

                    </ul>
                    <div class="tab-content" id="pills-tabContent-button">
                        <div class="tab-pane fade show active" id="grp-tab-button" role="tabpanel"
                             aria-labelledby="pills-grp-tab-button">
                            <div class="card m-b-30">
                                <div class="card-body">
                                    <table class="table table-striped">

                                        <tbody>
                                        <tr>
                                            <th scope="row">Name</th>
                                            <td class="text-black">{{ group.name|default_if_none:'' }}</td>

                                        </tr>
                                        <tr>
                                            <th scope="row">Email</th>
                                            <td class="text-black">{{ group.email|default_if_none:'' }}</td>

                                        </tr>
                                        <tr>
                                            <th scope="row">Primary Contact</th>
                                            <td class="text-black">{{ group.contact|default_if_none:'' }}</td>

                                        </tr>
                                        <tr>
                                            <th scope="row">Other Contact</th>
                                            <td class="text-black">{{ group.other_contact|default_if_none:'' }}</td>

                                        </tr>
                                        <tr>
                                            <th scope="row">Group status</th>
                                            <td class="text-black">{{ group.active_status|default_if_none:'' }}</td>

                                        </tr>
                                        <tr>
                                            <th scope="row">Total Members</th>
                                            <td class="text-black">{{ grp_members.count }}</td>

                                        </tr>
                                        <tr>
                                            <th scope="row">Signatories</th>
                                            <td class="text-black">{{ signo.count }}</td>

                                        </tr>
                                        <tr>
                                            <th scope="row">Group Description</th>
                                            <td class="text-black">{{ group.desc|default_if_none:'' }}</td>

                                        </tr>
                                        <tr>
                                            <th scope="row">Joined</th>
                                            <td class="text-black">{{ group.created_date|default_if_none:'' }}</td>

                                        </tr>
                                        <tr>
                                            <th scope="row">Location</th>
                                            <td class="text-black">{{ group.location|default_if_none:'' }}</td>

                                        </tr>

                                        </tbody>
                                    </table>

                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="loan-tab-button" role="tabpanel"
                             aria-labelledby="pills-loan-tab-button">
                            <table class="table table-hover">
                                <thead class="thead-light">
                                <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 grp_loans %}
                                    <tr>
                                        <th scope="row">{{ forloop.counter }}</th>
                                        <td>{{ loan.amount_approved|default_if_none:'' }}</td>
                                        <td>{{ loan.amount_requested|default_if_none:'' }}</td>
                                        <td>{{ loan.get_loan_status_display|default_if_none:'' }}</td>
                                        <td>{{ loan.approved_on|default_if_none:'' }}</td>
                                        <td>{{ loan.ending_date|default_if_none:'' }}</td>
                                        <td><a href="" class="btn btn-success pull-right mr-3"><i
                                                class="feather icon-eye mr-2"></i> View Details</a></td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="pills-trans-button" role="tabpanel"
                             aria-labelledby="pills-trans-tab-button">
                            <table class="table">
                                <thead class="thead-dark">
                                <tr>
                                    <th scope="col">Trans Type</th>
                                    <th scope="col">Account</th>
                                    <th scope="col">Amount</th>
                                    <th scope="col">Details</th>
                                    <th scope="col">Date</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for trans in combined %}
                                    <tr>
                                        <th>{{ trans.transaction_type }}</th>
                                        {% if trans.debit_account is None %}
                                        <th>{{ trans.credit_account }}</th>
                                            {% else %}
                                            <th>{{ trans.debit_account }}</th>
                                        {% endif %}
                                        <td>{{ trans.reporting_amount|intcomma }}</td>
                                        <td>{{ trans.narration }}</td>
                                        <td>{{ trans.date_added|date:'d, M, Y' }}</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="pills-set-button" role="tabpanel"
                             aria-labelledby="pills-set-tab-button">
                            <form method="post">
                                {% csrf_token %}
                                <table class="table">
                                    <tbody>

                                    <tr>
                                        <td class="text-black">Group Name</td>
                                        <td class="text-black">
                                            <input type="text" class="form-control"
                                                   id="name" name="name"
                                                   placeholder="Group Name" value="{{ group.name }}" required>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-black">Date Incorporated</td>
                                        <td class="text-black">
                                            <input type="date" class="form-control" id="dob"
                                                   name="dob"
                                                   placeholder="Date Incorporated" onfocus="(this.type='date')"
                                                   value="{{ group.dob|date:'Y-m-d' }}">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-black">Primary Contact</td>
                                        <td class="text-black">
                                            <div class="form-spacing form-inline">
                                                <select name="code" class="form-control" required
                                                        style="width:18%; display:inline-block;">
                                                    {% for country in countries %}
                                                        <option value="{{ country.code }}"
                                                                {% if country.code == contact_dial %}selected{% endif %}>{{ country.code }}</option>
                                                    {% endfor %}
                                                </select>
                                                <input id="contact" type="text"
                                                       class="form-control"
                                                       value="{{ group.contact|default_if_none:'' }}"
                                                       name="contact" placeholder="Contact"
                                                       required style="width:80%; display:inline-block;">
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-black">Other Contact</td>
                                        <td class="text-black">
                                            <div class="form-spacing form-inline">
                                                <select name="code1" class="form-control" required
                                                        style="width:18%; display:inline-block;">
                                                    {% for country in countries %}
                                                        <option value="{{ country.code }}"
                                                                {% if country.code == contact_dial %}selected{% endif %}>{{ country.code }}</option>
                                                    {% endfor %}
                                                </select>
                                                <input id="contact" type="text"
                                                       class="form-control"
                                                       value="{{ group.other_contact|default_if_none:'' }}"
                                                       name="other_contact" placeholder="other_contact"
                                                       required style="width:80%; display:inline-block;">
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-black">Email</td>
                                        <td class="text-black">
                                            <input type="email" class="form-control" id="email"
                                                   name="email"
                                                   placeholder="Email address"
                                                   value="{{ group.email|default_if_none:'' }}">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-black">Location</td>
                                        <td class="text-black">
                                            <textarea class="form-control" rows="2"
                                                      cols="2"
                                                      name="location">{{ group.location|default_if_none:'' }}
                                            </textarea>
                                        </td>
                                    </tr>

                                    </tbody>
                                </table>
                                <div class="text-center">
                                    <button type="submit" name="save_updates" class="btn btn-primary btn-sm">Save
                                        Changes
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End col -->

    </div>
{% endblock %}