{% extends 'memberapp_users/layout.html' %}
{% block head %}  
{% endblock %}
{% block title %}MEMBERS{% endblock %} 
{% block content %}

    {% for mesg in get_flashed_messages(category_filter=["successMsg"]) %}
    <div class="alert alert-success text-center alert-dismissible" id="successMessage" >
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        <h4><img src="/static/images/right.png" alt="right" height="21" width="21">{{ mesg }}</h4>
    </div>    
    {% endfor %}
    {% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %}
    <div class="alert alert-danger text-center alert-dismissible" id="successMessage" >
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        <h4><img src="/static/images/wrong_img.png" alt="wrong" height="21" width="21">{{ mesg }}</h4>
    </div>
    {% endfor %} 
<h1 class="text-center">{{society_intial or ''}} MEMBERS</h1>
<!-- <label>Total Count :{{datas|count}}</label> -->
<form method="POST" id="search_frm" action="{{url_for('member.MembersList',society_id=society_id,society_key=society_key)}}">
        <input type="hidden" name="filter_visible" id="filter_visible" value="{{ filter_visible}}">
        <div class="card">
            <!--<div class="card-header p-1 bg-dark" > -->
                <!--<button type="button" class="btn btn-link text-white" id="filter" >-->
                <!--    <i class="fa fa-filter"></i> Filter-->
                <!--</button>-->
                
            <!--</div>-->
            <div id="collapseFilter" >
                <div class="card-body">
                    <div class="row mx-3"  >
                        <div class="col-md-4">
                            <label>Name : </label>
                            <input type="search" id="search_name" name="search_name" placeholder="Search here..." class="form-control"  value="{{search_data.name or ''}}">
                        </div>
                        <div class="col-md-4">
                            <!--<label></label><br>-->
                            <!--<input type="submit" id="search_button" class="btn btn-primary mr-5" value="Search" name="form_submit"> -->
                            <!--<input type="submit" class="btn btn-danger mr-5" id="clear_button" value="Clear Filter" name="clear_btn">-->
                            <label>Email : </label>
                            <input type="search" id="search_email" name="search_email" placeholder="Search here..." class="form-control"  value="{{search_data.email or ''}}">
                        </div>
                        <div class="col-md-4">
                            <label>Mobile : </label>
                            <input type="search" id="search_mobile" name="search_mobile" placeholder="Search here..." class="form-control" value="{{search_data.mobile or ''}}">
                        </div>  
                    </div>
                    <!--<div class="row mx-3 my-3">-->
                       
                    <!--    <div class="col-md-4">-->
                    <!--        <label>Membership No : </label>-->
                    <!--        <div class="row">-->
                    <!--            <div class="col-md-6">-->
                    <!--                <input type="search" id="from_memno" name="from_memno" placeholder="From..." class="form-control" value="{{search_data.from_memno or ''}}">-->
                    <!--            </div>-->
                    <!--            <div class="col-md-6">-->
                    <!--                <input type="search" id="end_memno" name="end_memno" placeholder="End..." class="form-control" value="{{search_data.end_memno or ''}}">-->
                    <!--            </div>-->
                    <!--        </div>-->
                    <!--    </div>-->
                        
                    <!--</div>-->
                    
                    <div class="row mt-4 text-center">
                        <div class="col-md-12">   
                            <input type="submit" id="search_button" class="btn btn-primary mr-5" value="Search" name="form_submit"> 
                            <input type="submit" class="btn btn-danger mr-5" id="clear_button" value="Clear Filter" name="clear_btn">
                           
                        </div>
                    </div>
                </div>
            </div>
        </div><br>
       
    <input type="hidden" name="page" id="page" value={{page}}>
    <input type="hidden" name="limit" id="limit" value={{limit}}>
    <div class="col-md-12 mt-lg-0"  style="background-color:black">
        <div class="row ">
            <div class="col-md-3  pt-2 ">
                
            </div>
            <div class="col-md-9 text-right p-2" >
                
                <button onclick="post_page(1)" class="btn btn-light"  title="First Page"><i class="fa fa-angle-double-left text-danger"></i></button>
                <button onclick="post_page({{ page - 1 }})"  {% if page == 1 %} style="display:none" {% endif %} class="btn btn-light" title="Previous Page"><</button>

                    {% if page < 6: %}
                        {% if numpages < 6: %}
                            {% for n_pages in range(1,numpages+1) %}
                                <button onclick="post_page({{ n_pages }})"  {% if page==n_pages %}class="btn btn-primary"{% endif %} class="btn btn-light  text-dark">{{n_pages}}</button>
                            {% endfor %}
                        {% else %}
                            {% for n_pages in range(1,7) %}
                                <button onclick="post_page({{ n_pages }})" {% if page==n_pages %}class="btn btn-primary"{% endif %} class="btn btn-light  text-dark">{{n_pages}}</button>
                            {% endfor %}
                        {% endif %}
                    {% elif page >= 6: %}
                        {% if page == numpages: %}
                            {% for n_pages in range(page-6,numpages+1) %}
                                <button onclick="post_page({{ n_pages }})" {% if page==n_pages %}class="btn btn-primary"{% endif %} class="btn btn-light  text-dark">{{n_pages}}</button>
                            {% endfor %}
                        {% elif page == numpages-1: %}  
                            {% for n_pages in range(page-5,numpages+1) %}
                                <button onclick="post_page({{ n_pages }})" {% if page==n_pages %}class="btn btn-primary"{% endif %} class="btn btn-light  text-dark">{{n_pages}}</button>
                            {% endfor %} 
                        {% elif page == numpages-2: %}  
                            {% for n_pages in range(page-4,numpages+1) %}
                                <button onclick="post_page({{ n_pages }})" {% if page==n_pages %}class="btn btn-primary"{% endif %} class="btn btn-light  text-dark">{{n_pages}}</button>
                            {% endfor %} 
                        {% else %}
                            {% for n_pages in range(page-3,page+4) %}
                                <button onclick="post_page({{ n_pages }})" {% if page==n_pages %}class="btn btn-primary"{% endif %} class="btn btn-light  text-dark">{{n_pages}}</button>
                            {% endfor %}
                        {% endif %}
                    {% endif %}
                
                <button onclick="post_page({{ page + 1 }})" {% if numpages <= page %} style="display:none" {% endif %} class="btn btn-light" title="Next Page">></button>
                <button onclick="post_page({{ numpages }})" class="btn btn-light"  title="Last Page"><i class="fa fa-angle-double-right text-danger" ></i></button>
            </div>
        </div>
    </div>






        <div class="mobile-responsive">
            <table class="table table-striped table-bordered bg-white" id="myTable" style="font-size: 14px;">
                <thead class="thead-dark text-white font-weight-bold text-center">
                    <tr>
                        <th scope="col">Sno</th>
                        
                        <th scope="col">Membership no</th>
                        
                        <th scope="col">Full name</th>
                        <th scope="col">Email id /<br> Mobile</th>
                        <th scope="col">City /<br>State</th>
                            
                    </tr>
                </thead>
                <tbody>
                    {% for user in user_profile %}
                    
                <tr>
                    
                    <td data-label="SNO"  style="color:#94979a">{{loop.index}}</td>
                    
                    <td data-label="Membership no ">{{user.membership_no or ""}}</td>    
                        
                    <td data-label="Full Name">{{user.full_name or ""}}</td>
                    <td data-label="Email / Mobile">{{Helper.email_mask(user.email) or ""}}{% if user.email or user.mobile: %}/{% endif %}<br>{{Helper.mobile_mask(user.mobile) or ""}}</td>
                    <td data-label="City / State">{{user.city or ""}}{% if user.city or user.state_name: %}/{% endif %}<br>{{user.state_name or ""}}</td>
                    
                </tr>
                     
                    {% endfor %}
                </tbody>
            </table>
        </div>

    </form> 

{% endblock %}
{% block script %}
<script type="text/javascript">
    var BaseUrl = document.location.origin
    // $("#collapseFilter").hide(); 
    $(document).ready(function() {
        // var filter_visible = $("#filter_visible").val();
        // if (filter_visible ==1) {
        //     $("#collapseFilter").show();   
        // } else {
        //     $("#collapseFilter").hide(); 
        // }
        $("#filter").click(function() {
            $("#filter_visible").val(1);
            $("#collapseFilter").toggle();     
        })
        $("#search_button").click(function() {
            $("#filter_visible").val(1);
            $("#collapseFilter").show();          
        })
        $('#clear_button').click(function(){
            $('input[type=search]').each(function() 
            {
                $(this).val('');
            });
            $('#search_member_type').each(function(){
                $(this).val('')
            }); 
            $("#filter_visible").val(0);
            $("#page").val(1)
            $("#collapseFilter").hide();   
        })
        $("#refresh").click(function()
        {
            location.reload();
            $("#filter_visible").val(0);
            $("#collapseFilter").hide();
        });
    });   

    function post_page(page,limit = 0) 
        {
            if (limit >0)
                $("#limit").val(limit);

            $("#page").val(page);
            $("form").submit();
        }

</script>
{% endblock %}