{% extends 'back_office/bo_layout.html' %}
{% block head %}
{% endblock %}
{% block title %}Membership Approved Page{% endblock %} 
{% block content %}
    <h1 class="text-center font-weight-bold mt-2">REJECTED MEMBERSHIP APPLICATIONS </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.RejectedPage',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" 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 text-center">
                    <tr>
                        <th scope="col"></th>
                        <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">Remarks</th>    
                    </tr>
                </thead>
                <tbody>
                    {% for user in user_profile or [] %}
                <tr>
                    <td data-label="Approved Mail"><a  href="{{url_for('backoffice.MembershipApprovedRejectedMailView',user_id=Cryptography.encrypt(user.user_id),society_id=society_id,society_key=society_key)}}" target="_blank" style="text-decoration: none;"><span class="fa fa-envelope"></span></a></td>
                    <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),status_id=user.status_id,society_id=society_id,society_key=society_key)}}" target="_blank">View</a><br>
                        <a href="{{ url_for('backoffice.getMemberEdit',user_id=Cryptography.encrypt(user.user_id),society_id=society_id,society_key=society_key) }}" target="_blank"><i class="fa fa-edit"></i></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="Remarks">{{user.remarks or ""}}</td>
                </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 %}