{% extends 'back_office/bo_layout.html' %}
{% block head %}
{% endblock %}
{% block title %}Membership Approval Page{% endblock %} 
{% block content %}
<div>
           <div class="col-md-12 form-group">
                {% if conv_life_data : %}
            
                    <a class="btn btn-primary float-right font-weight-bold px-3" target="_blank" href="{{url_for('backoffice.WatingLifeMembersPage',society_id=society_id,society_key=society_key)}}">Click here to view the life members conversion</a>
                {% endif %}
            </div>
</div> 
    <h1 class="text-center font-weight-bold mt-2">WAITING FOR APPROVAL</h1>
    {% 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 %}
    <form method="POST" id="search_frm" action="{{url_for('backoffice.ApprovalPage',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>
                <button type="button" id="refresh" class="btn btn-danger pull-right"><i class='fa fa-refresh mr-2'></i>Refresh</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>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 mt-3 text-center">
                        <div class="col-md-12">   
                            <input type="submit"  id="search_button" class="btn btn-primary mr-5" value="Search" id="submit" name="form_submit"> 
                            <input type="submit" id="search_everywhere" class="btn btn-primary mr-5" value="Search Everywhere" name="form_submit">
                            <input type="submit"  class="btn btn-danger" id="clear_button" value="Clear Filter" name="clear_btn">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{Helper.pagination_tool(total,page,limit)|safe}}
        <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">
                    <tr>
                        <th scope="col">Sno</th>
                        <th scope="col">View</th>
                        <th scope="col">Full name</th>
                        <th scope="col">Email id /<br> Mobile</th>
                        <th scope="col">City /<br>State</th>
                        <th scope="col">Amount paid</th>
                        <th scope="col">Approved status</th>
                        <th scope="col">Status</th>
                        <th scope="col">Created on</th>
                        <th scope="col">Last modified on</th>
                        {% if btn_page == 'Search Everywhere': %}
                        <th scope="col">Current Status</th>  
                        {% endif %} 
                    </tr>
                </thead>
                <tbody>
                    {% for user in user_profile %}
                <tr>
                    <td data-label="SNO"  style="color:#94979a">{{loop.index}}</td>
                    <td data-label="View">
                        <a href="{{url_for('backoffice.ViewForApproval',user_id=Cryptography.encrypt(user.user_id),society_id=society_id,society_key=society_key)}}" target="_blank">View</a>
                    </td>
                    <td data-label="Full Name">{{user.full_name or ""}}</td>
                    <td data-label="Email / Mobile">{{user.email or ""}}{% if user.email or user.mobile: %}/{% endif %}<br>{{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>
                    <td data-label="Amount Paid">{{user.amount or "Yet to Pay"}}</td>
                    <td data-label="Approved Status">{{user.proposer_status or ""}}<br>{% if user.proposer_status or user.seconder_status: %}and{% endif %}<br>{{user.seconder_status or ""}}</td>
                    <td data-label="Status">{{user.display_name or ""}}</td>
                    <td data-label="Created On">{{user.created_at.strftime('%d-%m-%Y %H:%M:%S')  if user.created_at else ''}}</td>
                    <td data-label="Last Modified On">{{user.updated_at.strftime('%d-%m-%Y %H:%M:%S')  if user.updated_at else ''}}</td>
                    {% if btn_page == 'Search Everywhere': %}
                    <td data-label="Current Status"><span class="text-danger">{{user.current_status or 'Incomplete Form'}}</span></td>  
                    {% endif %}   
                </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {{Helper.pagination_tool(total,page,limit)|safe}}
    </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('');
            }); 
            $("#filter_visible").val(0);
            $("#page").val(1)
            $("#collapseFilter").hide();   
        })
        $("#refresh").click(function()
        {
            location.reload();
            $("#filter_visible").val(0);
            $("#collapseFilter").hide();
        });
    });   
</script>
{% endblock %}