{% extends 'memberapp_users/layout.html' %}
{% block head %}
{% endblock %}
{% block title %}Proposer and Seconder{% endblock %} 
{% block content %} 
  <label id="error" class=" text-center" style="display:none">Proposer and Seconder must be differ</label>
  {% 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 %}
  <label class="alert alert-info border border-info">It is mandatory that a proposer and seconder who are an existing ratified member of the organisation should approve your member application. In order to do so, please choose a proposer and seconder by searching from the below list. 
    Ensure that the proposer and seconder knows you so that they provide their consent.<br>
    The name stored in the records may not match the pattern you type.  So type only a part of the name and search. <br> For eg:  To search for "Dr. Babu Rajendran", you may type only  "Babu" or "Rajendran" and search.
  </label>
  <br>
  <input type="hidden" name="user_id" id="user_id" value="{{user_id}}">
  
  <div class="row">
    <div class="col-md-12">
      <form id="form_proposer">
        <label><h3>Proposer</h3></label>
        <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>
    <br>
  </div>
  <div class="row">
    <div class="col-md-12">
      <form  id="form_seconder">
        <label><h3>Seconder</h3></label>
        <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>
  <br>
<form method="POST" action="{{url_for('member.postProSec',user_id=encrypt_user_id,cur_step=cur_step,pre_step=pre_step,nxt_step=nxt_step,society_id=society_id,society_key=society_key)}}">
  <input type="hidden" id="cur_step" name="cur_step" value="{{cur_step}}">
  <input type="hidden" id="pre_step" name="pre_step" value="{{pre_step}}">
  <input type="hidden" id="nxt_step" name="nxt_step" value="{{nxt_step}}">
  <div class="row">
    <div class="col-md-12 text-md-left text-center">
      <a href="{{ url_for('member.getStep',user_id=encrypt_user_id,step_no=pre_step,society_id=society_id,society_key=society_key) }}" class="btn btn-lg btn-secondary mb-2">Previous</a>
      <input type="submit" value="Complete to Preview" name="submit_update" id="submit" class="btn btn-lg btn-primary float-md-right mb-2">
    </div>
  </div>
</form>
{% 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 (){
  get_exists_proandsec("proposer")
  get_exists_proandsec("seconder")
})
function get_exists_proandsec(type) {
  $.ajax({
    type: 'POST', 
    url: BaseUrl+"/get_exists_proandsec/"+society_id+"/"+society_key,
    data:{
      'user_id':user_id,
      'type'   :type
    }, 
    dataType : 'json',
    success  : function(data){
      if(data.status == 1)
      {
        $("#show_"+type+"_data").html(data.html);
        $("#search_"+type).hide();
        $("#button_"+type).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({
    url    : "/search_member/"+society_id+"/"+society_key,
    method : "POST",
    data   : {'search_value':search_value,'type':type},
    success:function(data)
      {
        $('#show_'+type).show();
        $('#show_'+type).html(data);
      }
  });
}
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 %}