{% extends 'memberapp_users/layout.html' %}
{% block head %}  
{% endblock %}
{% block title %}Application Form{% 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|safe }}</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" style="color: rgb(3, 105, 105);">Your Application Form</h1>
    {% if user.status_id >= 10 : %}
    <input type="hidden" name="user_id" id="user_id" value="{{user_id}}">
    <div class="member">
        <div class="row p-2">
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-6">
                        <label>Full Name:</label>
                    </div>
                    <div class="col-md-6">
                        {% if user.prefix: %}
                            <label><h5 class="font-weight-bold text-danger">{{user.prefix}}{{user.full_name}}</h5></label>
                        {% else %}
                            <label><h5 class="font-weight-bold text-danger">{{user.full_name or ''}}</h5></label>
                        {% endif %}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <label>Email id:</label>
                    </div>
                    <div class="col-md-6">
                        <label><h6>{{user.email or ''}}</h6></label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <label>Mobile Number:</label>  
                    </div>
                    <div class="col-md-6">
                        {% if user.mobile: %}
                            <label><h6>{{user.mobile or ''}}</h6></label>
                        {% else %}
                            <label><h6>-</h6></label>
                        {% endif %}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <label>Status:</label>
                    </div>
                    <div class="col-md-6">
                        <label><h5 class="font-weight-bold">{{user.display_name or ''}}</h5></label>
                    </div>
                </div>
                {% if user.status_id == societyData['ms_rejected_status_id']: %}
                    <div class="row">
                        <div class="col-md-6">
                            <label>Remarks:</label>
                        </div>
                        <div class="col-md-6">
                            <label><h5 class="font-weight-bold text-danger">{{remarks.remarks or ''}}</h5></label>
                        </div>
                    </div>
                {% endif %}
            </div>
            <div class="col-md-6">
                {% if user.status_id == societyData['ms_approved_status_id']: %}
                <div class="row">
                    <div class="col-md-6">
                        <h5 style="color:#015858"><b>Membership Number:</b></h5>
                    </div>
                    <div class="col-md-6">
                        <h5 style="color:#fa0c03"><b>{{user.membership_no or ''}}</b></h5>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <h5 style="color:#015858"><b>Member Type:</b></h5>
                    </div>
                    <div class="col-md-6">
                        <h5 style="color:#fa130b"><b>{{user.member_type or ''}}</b></h5>
                    </div>
                </div>  
                {% endif %} 
            </div>
        </div>    
        {% if user.status_id == societyData['ms_rejected_status_id']: %}
        <div class="row">
            <div class="col-md-11">
                <a href="{{ url_for('member.getStep',user_id=encrypt_user_id,step_no=1,society_id=society_id,society_key=society_key) }}" class="btn btn-success float-right text-white">Click here to resubmit your application with amended data / document(s)</a>   
            </div>
        </div>
        {% endif %}
        {% if user.status_id == societyData['ms_approved_awaitingpayment_status_id']: %}
        <div class="row">
            <div class="col-md-11">
                <a href="{{ url_for('member.Payment_v1',user_uuid=user.user_uuid,society_id=society_id,society_key=society_key,step_no=7) }}" class="btn btn-primary float-right text-white">Click here to make payment</a>   
            </div>
        </div>
        {% endif %}
        <br>
        <div class="row">
            {% if society_id|int == 3 and user.status_id == societyData['ms_approved_status_id']: %}
            <div class="col-md-4" >
                <a href="{{ url_for('member.ViewIdCard',user_id=user_id,society_id=society_id,society_key=society_key) }}" class="btn btn-success text-white" target="_blank">Click here to Download the ID card</a>
            </div>
            <div class="col-md-4" >
                <a href="{{ url_for('member.ViewCertificate',user_id=user_id,society_id=society_id,society_key=society_key) }}" class="btn btn-success text-white" target="_blank">Click here to Download certificate</a>
            </div>
            {% endif %}
            <div class="col-md-4">
                <a href="{{ url_for('member.View',user_id=encrypt_user_id,society_id=society_id,society_key=society_key) }}" class="btn btn-primary float-right text-white">View Your Application</a>
            </div>
        </div>
        <br>
        {% if user.proposer_id : %}
        <div class="col-md-12">
            <div class="mobile-responsive">
                <table class="table table-striped table-bordered  bg-white" id="myTable">
                    <tr>
                        <td  colspan='3' class="bg-dark"><label style="text-transform: capitalize;color: rgb(6, 6, 87);"><b class="text-light">Proposer</b></label></td>
                    </tr>
                    <tr>
                        <th>Full Name:</th>
                        <td data-label="Full Name" colspan="2">{{user.proposer_name or ""}}</td>
                    </tr>
                    <tr>
                        <th>Membership Number:</th>
                        <td data-label="Membership Number" colspan="2">{{user.proposer_membership_no or ""}}</td>
                    </tr>
                    <tr>
                        <th>Email id:</th>
                        <td data-label="Email id" colspan="2">{{Helper.email_mask(user.proposer_email or "")}}</td>
                    </tr>
                    <tr>
                        <th>Mobile Number:</th>
                        <td data-label="Mobile Number" colspan="2">{{Helper.mobile_mask(user.proposer_mobile or "")}}</td>
                    </tr>
                    <tr>
                        <th>City:</th>
                        <td data-label="City" colspan="2">{{user.proposer_city or ""}}</td>
                    </tr>
                    <tr>
                        <th>Status:</th>
                        <input type="hidden" id="proposer" name="proposer"  value="{{user.proposer_id}}" >
                        {% if user.proposer_status == "Rejected": %}
                                <td data-label="Status">{{user.proposer_status or ''}}<button type="button" class="btn btn-danger pull-right click_pro"
                                    data-toggle="modal" data-target="#myModal_proposer" data-id="{{user.proposer_id}}">Change</button></td>
                        {% elif user.proposer_status == "Accepted": %}
                            <td data-label="Status">{{user.proposer_status or ''}}</td>
                        {% else %}
                            <td data-label="Status">{{user.proposer_status or ''}}</td>
                            <td>
                                <a href="{{ url_for('member.ReminderMail',user_id=encrypt_user_id,ps_type='proposer',society_id=society_id,society_key=society_key) }}" class="btn btn-primary  ml-4 mt-1">Send Reminder Mail</a>
                                <button type="button" class="btn btn-danger  click_pro ml-5 mt-1"
                                    data-toggle="modal" data-target="#myModal_proposer" data-id="{{user.proposer_id}}">Change</button>
                            </td>
                        {% endif %}
                    </tr>
                </table>
            </div>
        </div>
        {% endif %}
        <div class="modal" id="myModal_proposer">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <!-- Modal Header -->
                    <div class="modal-header">
                    <h4 class="modal-title">Change Proposer</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <!-- Modal body -->
                    <div class="modal-body">
                        <form id="form_proposer">
                            <input type="hidden" name="reference_id" id="reference_id_proposer">
                            <div class="input-group">  
                                <input type="search" id="search_proposer" name="search_proposer" placeholder="Search here..."  class="form-control">  
                                <div class="input-group-append">  
                                <button type="button" onclick="btn_prosec('proposer')" id="button_proposer" class="btn btn-md btn-primary"> <i class="fa fa-search"> </i> </button>
                                </div>  
                            </div>
                            <label id="search_proposer-error" class="error" for="search_proposer"></label>
                            <br>
                            <div class="row">
                                <div class="col-md-12" id="show_proposer"></div>
                            </div>
                            <br>
                            <input type="hidden" id="user_id_refer_proposer" name="user_id_refer">
                            <input type="hidden" id="type" name="type" value="proposer">
                            <div class="row">
                                <div class="col-md-12" id="show_proposer_data"></div>
                            </div>
                        </form>
                    </div>
                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <a href="{{ url_for('member.ChangesProsecMail',user_id=encrypt_user_id,ps_type='proposer',society_id=society_id,society_key=society_key) }}" class="btn btn-primary" id="sendmailpro" style="display: none;" >Send mail to proposer</a>
                        <button type="button" class="btn btn-danger" onclick="btn_close('proposer')" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        {% if user.seconder_id : %}
        <div class="col-md-12">
            <div class="mobile-responsive">
                <table class="table table-striped table-bordered  bg-white" id="myTable">
                    <tr>
                        <td id="rdata" colspan='3' class="bg-dark"><label style="text-transform: capitalize;color: rgb(6, 6, 87);"><b class="text-light">Seconder</b></label></td>
                    </tr>
                    <tr>
                        <th>Full Name:</th>
                        <td data-label="Full Name" colspan="2">{{user.seconder_name or ""}}</td>
                    </tr>
                    <tr>
                        <th>Membership Number:</th>
                        <td data-label="Membership Number" colspan="2">{{user.seconder_membership_no or ""}}</td>
                    </tr>
                    <tr>
                        <th>Email id:</th>
                        <td data-label="Email id" colspan="2">{{Helper.email_mask(user.seconder_email or "")}}</td>
                    </tr>
                    <tr>
                        <th>Mobile Number:</th>
                        <td data-label="Mobile Number" colspan="2">{{Helper.mobile_mask(user.seconder_mobile or "")}}</td>
                    </tr>
                    <tr>
                        <th>City:</th>
                        <td data-label="City" colspan="2">{{user.seconder_city or ""}}</td>
                    </tr>
                    <tr>
                        <th>Status:</th>
                        <input type="hidden" id="seconder" name="seconder" value="{{user.seconder_id}}"  >
                        {% if user.seconder_status == "Rejected": %}
                            <td data-label="Status">{{user.seconder_status or ''}}<button type="button" class="btn btn-danger pull-right click_sec" data-toggle="modal" data-target="#myModal_seconder"data-id="{{user.seconder_id}}">Change</button></td>
                        {% elif user.seconder_status == "Accepted": %}
                            <td data-label="Status">{{user.seconder_status or ''}}</td>
                        {% else %}
                            <td data-label="Status">{{user.seconder_status or ''}}</td>
                            <td>
                                <a href="{{ url_for('member.ReminderMail',user_id=encrypt_user_id,ps_type='seconder',society_id=society_id,society_key=society_key) }}" class="btn btn-primary ml-4 mt-1">Send Reminder Mail</a>
                                <button type="button" class="btn btn-danger  click_sec ml-5 mt-1" data-toggle="modal" data-target="#myModal_seconder" data-id="{{user.seconder_id}}">Change</button>
                            </td>
                        {% endif %}
                    </tr>                        
                </table>
            </div> 
        </div>   
        {% endif %}      
        <div class="modal" id="myModal_seconder">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Change Seconder</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <form  id="form_seconder">
                            <input type="hidden" name="reference_id" id="reference_id_seconder">
                            <div class="input-group">  
                                <input type="search" id="search_seconder" name="search_seconder" placeholder="Search here..."  class="form-control">  
                                <div class="input-group-append">  
                                <button type="button" onclick="btn_prosec('seconder')" id="button_seconder" class="btn btn-md btn-primary"> <i class="fa fa-search"> </i> </button>
                                </div>  
                            </div>
                            <label id="search_seconder-error" class="error" for="search_seconder"></label>
                            <br>
                            <div class="row">
                                <div class="col-md-12" id="show_seconder"></div>
                            </div>
                            <br>
                            <input type="hidden" id="user_id_refer_seconder" name="user_id_refer" >
                            <input type="hidden" id="type" name="type" value="seconder" >
                            <div class="row">
                                <div class="col-md-12 " id="show_seconder_data"></div>  
                            </div> 
                        </form>
                    </div>
                    <div class="modal-footer">
                        <a href="{{ url_for('member.ChangesProsecMail',user_id=encrypt_user_id,ps_type='seconder',society_id=society_id,society_key=society_key) }}" class="btn btn-primary" id="sendmailsec" style="display: none;">Send mail to seconder</a>
                        <button type="button" class="btn btn-danger" onclick="btn_close('seconder')" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
{% endblock %}
{% block script %}
<script type="text/javascript">

var BaseUrl    = document.location.origin
var user_id    = $("#user_id").val();
var society_id = "{{society_id}}";
var society_key = "{{society_key}}";
$(document).ready( function ()
{
  $(document).on("click", ".click_pro", function () {
    var msg=confirm("Are you sure to change proposer?")
      if (msg==true) {
        var reference_id_proposer = $("#proposer").val();
        $("#reference_id_proposer").val(reference_id_proposer);
      }
      else{
        $("#myModal_proposer").modal("hide");
      }
});
$(document).on("click", ".click_sec",function () {
    var msg=confirm("Are you sure to change seconder?")
    if (msg==true) {
        var reference_id_seconder = $("#seconder").val();
        $("#reference_id_seconder").val(reference_id_seconder);
    }
    else{
        $("#myModal_seconder").modal("hide");
    }
});
  });
$( document ).ready(function() {      
  $("#search_proposer").keypress(function(e) 
        {
          if(e.which == 13) 
          {
            $("#button_proposer").click()
            return false
          }
          return true
        });
    $("#search_seconder").keypress(function(e) 
    {
      if(e.which == 13) 
      {
        $("#button_seconder").click()
        return false
      }
    });
  });  
function btn_prosec(type) 
{
  $('#show_'+type).show()
  validate_prosec_form(type)   
  if(!$("#form_"+type).valid())
  {
    return false  
  }
  var search_value    = $("#search_"+type).val();
  $.ajax({
    type:"POST",
    url:BaseUrl+"/search_member/"+society_id+"/"+society_key,
    data:{'search_value':search_value,'type':type},
    success:function(data)
      {
        $('#show_'+type).html(data);
      }
  });
}
function btn_close(type) 
{
  location.reload(true);
}
function  validate_prosec_form(type)
{
  errorclass : 'error',
  $("#form_"+type).validate({
    rules : {
     
      ["search_"+type] : {
                            required : true,
                            normalizer: function (value) {
                                return $.trim(value);
                            },
                            minlength : 3,
                          },
      },
    messages : {
      ["search_"+type] : {
                            required :  "Please enter your data",
                            minlength : "Please enter atleast 3 character",
                          },
      },
      highlight: function(element) {
          $(element).parent().addClass('error')
      },
  
      unhighlight: function(element) {
          $(element).parent().removeClass('error')
      },

      submitHandler: function(form) {
          form.submit();
      },
      invalidHandler: function(form, validator) {

        if (!validator.numberOfInvalids())
            return;

        $('html, body').animate({
        scrollTop: $(validator.errorList[0].element).offset().top
        }, 300);
        StopProgress();
    }
    })
}
</script>
{% endblock %}