{% extends 'extends/layout.html' %}
{% load static %}
{% block content %}
    {% block scripts %}
        <script>
            $(function () {

                $('#search').keyup(function () {

                    $.ajax({
                        type: "POST",
                        url: "{% url 'search_member' %}",
                        data: {
                            'search_text': $('#search').val(),
                            'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]").val()
                        },
                        success: searchSuccess,
                        dataType: 'html'
                    });
                });
            });

            function searchSuccess(data) {
                document.getElementById("search-results").innerHTML = data;
                {#$('#search-results').html(data)#}
            }
        </script>
        <script>
            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 item")) {
                    location.href = member
                }
            }
        </script>
    {% endblock %}
    <div class="row">
        <!-- Start col -->
        <div class="col-lg-12">
            <div class="modal fade" id="upload_members" 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 Existing Members from
                                Excel</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            </button>
                        </div>
                        <form method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="modal-body">
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="upload">Upload a File</label>
                                    <input type="file" class="form-control" id="upload" name="file"
                                           placeholder="Upload Files" accept=".xlsx, .xls, .csv" required/>
                                </div>
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="open_bal_date">Opening balance date</label>
                                    <input type="date" class="form-control" id="open_bal_date" name="open_bal_date"
                                           placeholder="Opening balance"/>
                                </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" required>
                                        <option value="" selected>Please select a Savings Product</option>
                                        {% for item in acc_types %}
                                            <option value="{{ item.id }}">{{ item.name }}</option>
                                        {% endfor %}

                                    </select>

                                </div>

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

            <div class="modal fade" id="new_members" tabindex="-1" role="dialog"
                 aria-labelledby="exampleStandardModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header" style="background: orange">
                            <h5 class="modal-title">Upload New Members from Excel</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            </button>
                        </div>
                        <form method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="modal-body">
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="upload">Upload a File</label>
                                    <input type="file" class="form-control" id="upload" name="new_member_file"
                                           placeholder="Upload Files" accept=".xlsx, .xls, .csv" required/>
                                </div>
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="open_bal_date">Opening balance date</label>
                                    <input type="date" class="form-control" id="open_bal_date" name="open_bal_date"
                                           placeholder="Opening balance"/>
                                </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" required>
                                        <option value="" selected>Please select a Savings Product</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="account_type">Payment Mode</label>
                                    <select class="form-control" name="acct"
                                            id="account_type" required>
                                        <option value="" selected disabled>Select Account</option>
                                        {% for item in accts %}
                                            <option value="{{ item.id }}">{{ item.name }}</option>
                                        {% endfor %}

                                    </select>
                                </div>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close
                                </button>
                                <button type="submit" name="new_member" 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-2">
{#                            <form method="post">#}
{#                                {% csrf_token %}#}
{#                                <input id="search" type="search" class="form-control form-control-sm" name="search_text"#}
{#                                       placeholder="Search Member">#}
{#                            </form>#}
                            <span style="font-weight: bold;font-size: 19px">Total members: {{ members_l.count }}</span>
                        </div>

                        <!-- EXPORT MEMBER TO EXCEL --->
                        <div class="col-md-9">
                            <div class="button-list ">
                                <button type="button" class="btn btn-sm btn-outline-success"
                                        onclick="location.href='{% url 'export_members' %}?member_name={{ member_name }}&start_date={{ start_date_str }}&end_date={{ end_date_str }}&business_filter={{ business_filter }}'">
                                    <i class="fa-regular fa-file-excel"></i>
                                    <span class="text-xs">Export
                                    {% if request.user.staff.biodata.business.type == 1 %}
                                        Members{% else %}
                                        Clients{% endif %}
                                    </span>
                                </button>

                                {% if not show_business_filters %}
                                    {% if 'add_member' in user_perms %}
                                        <button type="button" class="btn btn-sm btn-outline-dark mr-3"
                                                data-bs-toggle="modal"
                                                data-bs-target="#upload_members"><i class="fa-solid fa-upload"></i> Existing
                                            {% if request.user.staff.biodata.business.type == 1 %}Members{% else %}
                                                Clients{% endif %}
                                        </button>

                                        <button type="button" class="btn btn-sm btn-outline-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 onclick="location.href='{% url 'add_member' %}'" type="button"
                                                class="btn btn-sm btn-outline-success"><i class="fa-solid fa-user-plus"></i>
                                            Add
                                            {% if request.user.staff.biodata.business.type == 1 %}Members{% else %}
                                                Client{% endif %}
                                        </button>
                                    {% endif %}
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="row">
                                <div class="col-12 mb-1 mt-2">
                                    <span style="color: gray;font-weight: bold;font-size: 18px">Filter by {% if show_business_filters  %}<span>branch and</span> {% endif %} member's name, registration date</span>
                                </div>
                                <form>
                                    <div class="col-md-12">
                                        <div class="row">
                                            {% if show_business_filters %}
                                            <div class="col-md-2 form-group" >
                                                <select class="form-control form-control-sm" name="business_filter" id="business_filter">
                                                    <option value="" >Select branch</option>
                                                    <option value="all_branches" {% if business_filter == 'all_branches' %}selected{% endif %}>All branches</option>

                                                    {% for branch in businesses_list_filter %}
                                                        <option value="{{ branch.business.id }}" {% if business_filter == branch.business.id|stringformat:"s" %}selected{% endif %}>{{ branch.name }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                            {% endif %}
                                            <div class="col-md-2 form-group" id="member_name_filter">
                                                <input type="text" class="form-control form-control-sm" name="member_name" value='{{ member_name }}' placeholder="Enter member's name">
                                            </div>
                                            <div class="col-md-2">
                                                <input type="date" class="form-control form-control-sm" id="start_date"
                                                       name="start_date"
                                                       placeholder="Enter start date">
                                            </div>
                                            <div class="col-md-2">
                                                <input type="date" class="form-control form-control-sm" id="end_date" name="end_date"
                                                       placeholder="Enter end date">
                                            </div>
                                            <div class="col-md-4" style="display: flex">
                                                <div class="me-1">
                                                    <button type='submit' class="btn btn-success btn-sm"><i
                                                            class="fa fa-search"></i> Filter
                                                    </button>
                                                </div>
                                                <div>
                                                    <a href="{% url 'members' %}">
                                                        <button type='button' class="btn btn-secondary btn-sm"><i
                                                                class="fa fa-search"></i> Reset
                                                        </button>
                                                    </a>
                                                </div>
                                            </div>


                                        </div>

                                    </div>
                                </form>

                                {% if start_date_str or end_date_str %}
                                    <div class="col-12 mb-1 mt-2">
                                        <span style="color: gray;font-weight: bold;font-size: 18px">{{ registration_title }}</span>
                                    </div>
                                {% endif %}

                            </div>

                        </div>
                    </div>

                </div>
                <div class="card-body">
                    <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>

                                {% if start_date_str or end_date_str %}
                                    <th>Registration date</th>
                                {% endif %}
                                {% if show_business_filters %}
                                    <th>Branch</th>
                                {% endif %}
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody id="search-results">
                            {% for member in members_list %}
                                <tr>
                                    <td>{{ forloop.counter }}.</td>
                                    <td>{{ member.biodata.name|default_if_none:'' }}</td>
                                    <td>{{ member.biodata.contact|default_if_none:'' }}</td>
                                    <td>{{ member.biodata.email|default_if_none:'' }}</td>

                                    {% if start_date_str or end_date_str %}
                                        <td>{{ member.date_joined }}</td>
                                    {% endif %}
                                    {% if show_business_filters %}
                                        <td>{{ member.branch.name|default_if_none:'' }}</td>
                                    {% endif %}
                                    <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='{{ member.get_absolute_url }}'"><i
                                                        class=" fa fa-eye"></i> View
                                                </button>
                                            {% endif %}
                                            {% if 'can_withdraw' in user_perms and request.user.staff.biodata.business.does_withdraw == 1 %}
                                                <button class="btn btn-outline-primary 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 class="btn btn-outline-dark btn-sm"
                                                        onclick="location.href='{% url 'member_deposit' member.id %}'">
                                                    <i
                                                            class="fa fa-plus-circle"></i> Deposit
                                                </button>
                                            {% endif %}
                                            {#                                            {% if 'add_loan' in user_perms %}#}
                                            {#                                                <button class="btn btn-outline-info btn-sm"><i#}
                                            {#                                                        class="fa fa-money-bill"></i>#}
                                            {#                                                    Loans#}
                                            {#                                                </button>#}
                                            {#                                            {% endif %}#}
                                        </div>
                                    </td>
                                </tr>
                            {% empty %}
                                <p>Members yet</p>

                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% if members_list.has_other_pages %}
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <nav aria-label="Page navigation">
                                    <ul class="pagination mb-0">
                                        {% if members_list.has_previous %}
                                            <li class="page-item">
                                                <a class="page-link"
                                                   href="?page={{ members_list.previous_page_number }}&member_name={{ member_name }}&start_date={{ start_date_str }}&end_date={{ end_date_str }}&business_filter={{ business_filter }}"
                                                   aria-label="Previous">
                                                    <span aria-hidden="true">&laquo;</span>
                                                </a>
                                            </li>
                                        {% else %}
                                            <li class="page-item disabled">
                                                <span class="page-link" aria-hidden="true">&laquo;</span>
                                            </li>
                                        {% endif %}

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

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

{% endblock %}