{% 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>
    function deleteMember(val) {
                let member = val.getAttribute("data-worker-id");
                let url = '/group/{{ group.id }}/delete-member/' + member + '/';
                if (confirm("Are you sure you want to delete this member?")) {
                    location.href = url
                }
            }
    </script>
{% endblock %}
{% block content %}
    {% get_countries as countries %}

    <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>
                                {{ 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="card m-b-30">
        <div class="card-header">
            <div class="row">
                <!-- SEARCHING MEMBER --->
                <div class="col-md-3">
                    <a class="btn btn-success btn-sm" href="{% url 'group_detail' group.id %}"><i
                            class="fa fa-backward"></i> Back</a>
                    <label class="text-black">Total members: {{ member_count }}</label>
                </div>

                <!-- EXPORT MEMBER TO EXCEL --->
                <div class="col-md-9">
                    <div class="button-list d-flex justify-content-end">
                        <button type="button" class="btn btn-blue btn-outline-success btn-sm"
                                onclick="location.href='{% url 'export_members' %}'">
                            <i class="fa-regular fa-file-excel"></i> Export
                            {% if request.user.staff.biodata.business.type == 1 %}Members{% else %}
                                Clients{% endif %}
                        </button>
                        {% if 'add_member' in user_perms %}
                            <button style="display: none" type="button" class="btn btn-warning mr-3"
                                    data-bs-toggle="modal"
                                    data-bs-target="#new_members"><i class="fa-solid fa-upload"></i> New
                                {% if request.user.staff.biodata.business.type == 1 %}Members{% else %}
                                    Clients{% endif %}
                            </button>

                            <button class="btn btn-primary btn-sm mr-3" data-bs-toggle="modal"
                                    data-bs-target="#grpMember"><i class="fa fa-plus mr-2"></i> New Member
                            </button>
                        {% endif %}
                    </div>
                </div>
            </div>

        </div>
        <div class="card-body">

            <div class="row">
                <div class="col-md-3">
                    <form method="post" action="{% url 'add_existing_grp_member' group.id %}">
                    {% csrf_token %}
                    <div class="modal-body">
                        <div class="mb-2 col-md-12">
                            <label class="form-label" for="account_type">Add from SACCO Members</label>
                            <select class="form-control select2" data-toggle="select2" name="member"
                                    id="account_type" required>
                                <option value="" selected>Please select a Member</option>
                                {% for member in sacco_members %}
                                    <option value="{{ member.id }}">{{ member.ur_name }}</option>
                                {% endfor %}

                            </select>

                        </div>

                    </div>
                    <div class="modal-footer">

                        <button type="submit" name="upload" class="btn btn-primary">Submit</button>
                    </div>
                </form>

                </div>
                <div class="col-md-9">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>S/N</th>
                                <th>Name</th>
                                <th>Contact</th>
                                <th>Email</th>
                                <th>Role</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody id="search-results">
                            {% for member in members %}
                                <tr>
                                    <td>{{ forloop.counter }}.</td>
                                    <td>{{ member.member.biodata.name }}</td>
                                    <td>{{ member.member.biodata.contact|default_if_none:'' }}</td>
                                    <td>{{ member.member.biodata.email|default_if_none:'' }}</td>
                                    <td>{{ member.get_role_display }}</td>
                                    <td>
                                        <div class="button-list d-flex justify-content-end">
                                            {% if 'view_member' in user_perms %}
                                                <button class="btn btn-success btn-sm"
                                                        onclick="location.href='{% url 'grp_mem_det' member.id %}'">
                                                    <i class=" fa fa-eye"></i> View
                                                </button>
                                            {% endif %}
                                        <button type="button" id="worker-{{ member.id }}"
                                                    onclick="deleteMember(this)" data-worker-id="{{ member.id }}"
                                                    class="btn btn-danger btn-sm" title="Delete this member"><i
                                                    class="fa fa-minus-circle"></i> Remove Member</button>

                                        </div>
                                    </td>
                                </tr>
                            {% empty %}
                                <p>Members yet</p>

                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <nav aria-label="Page navigation">
                        <ul class="pagination justify-content-end">
                            {% if members_list.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" href="?page=1" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                        <span class="sr-only">begin</span>
                                    </a>
                                </li>
                            {% endif %}
                            {% for n in members_list.paginator.page_range %}
                                {% if members_list.number == n %}
                                    <li class="page-item active">
                                        <span class="page-link">{{ n }}<span class="sr-only">(current)</span></span>
                                    </li>
                                {% elif n > members_list.number|add:'-3' and n < members_list.number|add:'3' %}
                                    <li class="page-item"><a class="page-link" href="?page={{ n }}">{{ n }}</a></li>
                                {% endif %}
                            {% endfor %}

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

        </div>
    </div>
{% endblock %}