{% extends 'memberapp_users/layout.html' %}
{% block head %} 
{% endblock %}
{% block title %}Make Payment{% endblock %} 
{% block content %}
<form method="POST" id="frm_step"  action="{{url_for('member.PostMakePayment',user_id=encrypt_user_id,society_id=society_id,society_key=society_key,step_no=step_no)}}">
    <input type="hidden" name="user_id" id="user_id" value="{{user_id}}">
    <div class="row">
        <div class=" col-md-12 text-center">
            <label><h3 class="font-weight-bold"><b>Membership fees</b></h3></label>
        </div>
    </div>
    <div class=" alert alert-info border border-primary p-3">
        <label>Payment of membership fee of {%if society_key =="apots": %}{{member.currency_symbol}}{{member.amount}}{% else %}{{member.currency_symbol}}{{member.amount|round}}/-{% endif %} can be made by the following methods.</label><br>
        <ul class="text-dark ml-4">
            {% for payment in payment_type  %}
            <li><b>{{ payment.payment_type }}</b></li>
            {% endfor %}
        </ul>
        
    <label>Please remember, a screenshot of the payment made has to be uploaded below to process your membership. 
        If the screenshot is not uploaded, we may not be able to trace your payment and the process may be delayed indefinetely. </label>
    </div>
    <label><h4><b>Click here to choose your payment option</b></h4></label>
    <div class="row">
        <label id="payment_type-error" class="error ml-5" for="payment_type"></label>
        <input type="hidden" id="payment_id" name="payment_id" value={{pay.payment_id or 0}}>
        {% for payment in payment_type  %}
        <div class="col-md-12 form-group ml-4">
            <input type="radio" class="form-input" name="payment_type" value="{{payment.payment_type}}" id="{{payment.payment_type}}" {{"checked" if pay.payment_method == payment.payment_type }} >
            <label for="{{payment.payment_type}}">{{ payment.payment_type }}</label>
            {% if payment.description: %}
                <p class="ml-3 text-danger">[ {{payment.description}} ]</p>
            {% else %}
                <p></p>
            {% endif %}
        </div>
       {% endfor %}
    </div>
    <div class="row">
        <div class="col-md-12">
            <a class="btn btn-lg btn-secondary" href="{{ url_for('member.Confirmation',user_id=encrypt_user_id,society_id=society_id,society_key=society_key,step_no=step_no)}}">Previous</a>
            <input type="submit" value="Proceed" name="submit" id="submit" class="btn btn-primary btn-lg pull-right ">    
        </div>
    </div>
</form>
{% endblock %}

{% block script %}
<script type="text/javascript">
    $(document).ready(function()
    {
        $("#submit").click(function() 
        {
            validate_payment_form() 
            if(!$("#frm_step").valid())
            {
                return false  
            }
            $("form").submit()
        })
    })
function validate_payment_form() 
{
    errorclass : 'error',
    $("#frm_step").validate({
        ignore:'',
        rules : {
                payment_type   : "required"
            },
        messages : {
                payment_type   : "Please select your payment",
            },
    })
}
</script>
{% endblock %}