{% 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">APPROVED - AWAITING FOR PAYMENT</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.ApprovedAwaitingPayment',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 delete_btn 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 class="col-md-3">-->
                        <!--    <label>Member Type : </label>-->
                        <!--    <div class="dropdown" >-->
                        <!--        <select class="form-control" id="search_member_type" name="search_member_type">-->
                        <!--            <option id = "select" value="">All</option>-->
                        <!--            {% for item in member_types  %}-->
                        <!--            <option value={{item.member_type_id}} {{ 'selected' if search_data.member_type|int==item.member_type_id }}>{{item.member_type}}</option>-->
                                    
                        <!--            {% endfor %}-->
                        <!--        </select>-->
                        <!--    </div>-->
                        <!--</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" id="search_everywhere" class="btn btn-primary mr-5" value="Search Everywhere" name="form_submit">  
                            <input type="submit" class="btn delete_btn" 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">Membership type</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">Secretary Approved On</th>
                        <th scope="col">Status</th>
                        {% if btn_page == 'Search Everywhere': %}
                        <th scope="col">Current Status</th>  
                        {% endif %}
                    </tr>
                </thead>
                <tbody>
                    {% for user in user_profile %}
                <tr>
                    <td><a href="{{url_for('backoffice.MembershipApprovedPaymentMailView',user_id=Cryptography.encrypt(user.user_id),society_id=society_id,society_key=society_key)}}" target="_blank"><i class="fa fa-envelope"></i></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="Membership type">{{user.approved_member_type or ""}}</td>    
                    <td data-label="Full Name">{{user.full_name or ""}}</td>

                    <td data-label="Email / Mobile">
                        <a href="mailto:{{user.email}}" target="_blank">{{user.email or ''}}</a>
                        {% if user.email or user.mobile: %}/{% endif %}<br>
                        {% if user.mobile :%}
                        {% set wp_content = "Dear "+ (user.full_name if user.full_name else '') +",\n\nWe notice that your application for "+ societyData.society_intial+" membership has been approved on "+(user.status_logs_date if user.status_logs_date else '') +".Once you make the payment for the membership fee, your membership number will be generated and your membership will be submitted for ratification in the upcoming GBM.\n\nTo make the payment, visit "+ societyData.society_url+", key in your email id ("+(user.email if user.email else '')+") and the OTP to access the payment link.\n\nPlease revert for clarification / assistance if required."  %}

                        <a href="{{Helper.sendWhatsApp(user.mobile,wp_content)}}" target="_blank">{{user.mobile or ""}}</a>
                        {% endif %}

                        
                    </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="Secretary Approved On">{{user.secretary_approved_on.strftime('%d-%m-%Y %H:%M:%S')  if user.secretary_approved_on else ''}}</td>
                    <td data-label="Status">{{user.display_name or ""}}</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('');
            });
            $('#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();
        });
    });   
</script>
{% endblock %}