{% 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>
        function showDetails(worker) {
            var workerType = worker.getAttribute("data-worker-id");
            var member = '/delete-group/' + workerType + '/';
            if (confirm("Are you sure you want to delete this item")) {
                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">Manage Member role</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 'make_signatory' member.id  %}">
                        {% csrf_token %}
                        <div class="modal-body">
                            <div class="row">
                                <div class="form-group col-md-12">
                                    <label for="sign_status">Member Role</label>
                                    <div class="form-spacing form-inline">
                                        <select id="sign_status" name="role" class="form-control" required>
                                            <option value="">Select an option</option>
                                            <option value="Chair" {% if group_member.role == 'Chair' %}selected{% endif %}>
                                                Chairperson
                                            </option>
                                            <option value="Secretary"
                                                    {% if group_member.role == 'Secretary' %}selected{% endif %}>Secretary
                                            </option>
                                            <option value="Treasurer"
                                                    {% if group_member.role == 'Treasurer' %}selected{% endif %}>Treasurer
                                            </option>
                                            <option value="Ordinary"
                                                    {% if group_member.role == 'Ordinary' %}selected{% endif %}>Ordinary
                                            </option>
                                        </select>
                                    </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>
        <!-- Start col -->
        <div class="col-lg-3">
            <div class="card m-b-30">
                <div class="card-header">
                    <div class="col-md-12">
{#                        {% if am_namayingo is False %}#}
{#                        <a class="btn btn-success btn-sm pull-left" href="{% url 'group_members' group_member.group.id %}"><i#}
{#                                class="fa fa-backward"></i> Back</a>#}
{#                            {% else %}#}
{#                            <a class="btn btn-success btn-sm pull-left" href="{% url 'namayingo_group_members' group_member.group.id %}"><i#}
{#                                class="fa fa-backward"></i> Back</a>#}
{#                        {% endif %}#}
                        <a href="#" class="float-end" data-bs-toggle="modal"
                           data-bs-target="#grpMember">Manage Role</a>
                    </div>
                </div>
                <div class="card-body">
                    <form method="post" 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_member.member.biodata.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="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>Detail</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>Update</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" id="pills-accounts-tab-button" data-bs-toggle="pill"
                               href="#accounts" role="tab" aria-controls="pills-accounts"
                               aria-selected="false"><span class="tab-btn-icon"></span>Accounts</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_member.member.biodata.name|default_if_none:'' }}</td>

                                        </tr>
                                        <tr>
                                            <th scope="row">Role</th>
                                            <td class="text-black">{{ group_member.get_role_display }}</td>

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

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

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

                                        </tr>

                                        <tr>
                                            <th scope="row">Date of Birth</th>
                                            <td class="text-black">{{ group_member.member.biodata.dob|default_if_none:'' }}</td>

                                        </tr>

                                        <tr>
                                            <th scope="row">Marital status</th>
                                            <td class="text-black">{{ group_member.member.biodata.get_marital_status_display|default_if_none:'' }}</td>

                                        </tr>

                                        <tr>
                                            <th scope="row">Gender</th>
                                            <td class="text-black">{{ group_member.member.biodata.get_gender_display|default_if_none:'' }}</td>

                                        </tr>

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

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

                                        </tr>

                                        </tbody>
                                    </table>

                                </div>
                            </div>
                        </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">Name</td>
                                        <td class="text-black">
                                            <input type="text" class="form-control"
                                                   id="name" name="name"
                                                   placeholder="Group Name"
                                                   value="{{ group_member.member.biodata.name|default_if_none:'' }}" required>

                                        </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_member.member.biodata.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"
                                                        style="width:18%; display:inline-block;">
                                                    {% for country in countries %}
                                                        <option value="{{ country.code }}"
                                                                {% if country.code == other_contact_dial %}selected{% endif %}>{{ country.code }}</option>
                                                    {% endfor %}
                                                </select>
                                                <input id="other_contact" type="text"
                                                       class="form-control"
                                                       value="{{ group_member.member.biodata.other_contact_dial|default_if_none:'' }}"
                                                       name="other_contact" placeholder="Other Contact"
                                                       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_member.member.biodata.email|default_if_none:'' }}">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-black">Date of Birth</td>
                                        <td class="text-black">
                                            <input type="date" class="form-control" id="dob"
                                                   name="dob"
                                                   placeholder="Date Incorporated" onfocus="(this.type='date')"
                                                   value="{{ group_member.member.biodata.dob|date:'Y-m-d' }}" required>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-black">Location</td>
                                        <td class="text-black">
                                            <textarea class="form-control" rows="2"
                                                      cols="2"
                                                      name="location">{{ group_member.member.biodata.location|default_if_none:'' }}
                                            </textarea>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-black">Gender</td>
                                        <td class="text-black">
                                            <select class="form-control" id="gender" name="gender"
                                                    required>
                                                <option value="" selected disabled>Select Gender</option>
                                                <option value="M"
                                                        {% if group_member.member.biodata.gender == 'M' %}selected{% endif %}>
                                                    Male
                                                </option>
                                                <option value="F"
                                                        {% if group_member.member.biodata.gender == 'F' %}selected{% endif %}>
                                                    Female
                                                </option>
                                            </select>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-black">Marital Status</td>
                                        <td class="text-black">
                                            <select class="form-control" name="marital_status"
                                                    id="marital" required>
                                                <option value="" selected disabled>Select Marital</option>
                                                <option value="1"
                                                        {% if group_member.member.biodata.marital_status == 1 %}selected{% endif %}>
                                                    Single
                                                </option>
                                                <option value="2"
                                                        {% if group_member.member.biodata.marital_status == 2 %}selected{% endif %}>
                                                    Married
                                                </option>
                                                <option value="3"
                                                        {% if group_member.member.biodata.marital_status == 3 %}selected{% endif %}>
                                                    Divorced
                                                </option>
                                                <option value="4"
                                                        {% if group_member.member.biodata.marital_status == 4 %}selected{% endif %}>
                                                    Cohabitation
                                                </option>
                                                <option value="5"
                                                        {% if group_member.member.biodata.marital_status == 5 %}selected{% endif %}>
                                                    Widowed
                                                </option>

                                            </select>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-black">Next of Kin</td>
                                        <td class="text-black">
                                            <input type="text" class="form-control"
                                                   id="nok" name="nok"
                                                   placeholder="Next of Kin"
                                                   value="{{ group_member.member.biodata.nok|default_if_none:'' }}" required>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-black">Next of Kin Contacts</td>
                                        <td class="text-black">
                                            <div class="form-spacing form-inline">
                                                <select name="code2" class="form-control"
                                                        style="width:18%; display:inline-block;">
                                                    {% for country in countries %}
                                                        <option value="{{ country.code }}"
                                                                {% if country.code == nok_contact_dial %}selected{% endif %}>{{ country.code }}</option>
                                                    {% endfor %}
                                                </select>
                                                <input id="nok_contacts" type="text"
                                                       class="form-control"
                                                       value="{{ group_member.member.biodata.nok_contacts|default_if_none:'' }}"
                                                       name="nok_contacts" placeholder="Next of Kin Contact"
                                                       style="width:80%; display:inline-block;">
                                            </div>
                                        </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 class="tab-pane fade" id="accounts" role="tabpanel" aria-labelledby="accounts">

                            <div class="table-responsive">
                                <table class="table">
                                    <caption>List of users</caption>
                                    <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">Account Number</th>
                                        <th scope="col">Account Type</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for account in account %}
                                        <tr>
                                            <th scope="row">{{ forloop.counter }}</th>
                                            <td><a href="{% url 'member_detail' account.members_id %}">{{ account.the_account.acc_number }}</a> </td>
                                            <td>{{ account.the_account.account_type }}</td>
                                        </tr>
                                        {% empty %}
                                        <tr>No accounts attached</tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End col -->

    </div>
{% endblock %}