{% if msg %}
   <span class="text-red font-weight-bold"><h3 class="text-center">{{msg|safe}}</h3></span>
{% else %}
<div class="mobile-responsive">
    <table class="table table-striped  table-sm  bg-white" id="myTable"  >
       <thead>
          <tr>
            <th scope="col" colspan="1"></th>
            <th scope="col">Name</th>
            <th scope="col">Membership No</th>
            <th scope="col">Email</th>
            <th scope="col">Mobile</th>
            <th scope="col">City</th>
          </tr>
       </thead>
       <tbody>
        {% for row in members or [] %}
         <tr id="{{row.user_id}}" >
            <td data-label="Select"><button type="button" class="btn btn-primary select_{{type}}" id="btnselect" name="btnselect" value="{{row.user_id}}" >Select</button></td>
            <td class="name_{{row.user_id}}" value="{{row.full_name}}" data-label="Full Name">{{row.prefix or ""}}{{row.full_name or ""}}</td>
            <td class="membership_no_{{row.user_id}}" value="{{row.membership_no}}" data-label="Membership Number">{{row.membership_no or ""}}</td>
            <td class="email_{{row.user_id}}" value="{{row.email}}" data-label="Email id">{{row.email or ""}}</td>
            <td class="mobile_{{row.user_id}}" value="{{row.mobile}}" data-label="Mobile Number"> {{row.mobile or ""}}</td>
            <td class="city_{{row.user_id}}" value="{{row.city}}" data-label="City">{{row.city or ""}}</td>
         </tr>
        {% endfor %}
       </tbody>
    </table>
    </div>
{% endif %}
<script type="text/javascript">
    var BaseUrl = document.location.origin
    var type    = "{{ type }}";
    var society_id = "{{society_id}}";
    var society_key = "{{society_key}}";  
$(document).ready( function ()
{
    var user_id = $("#user_id").val();
    

    $(".select_"+type).click(function()
    {
       $("#show_"+type+"_data").show();
       var reference_id     = $("#reference_id_"+type).val();
       var user_id_refer    = $(this).val(); 
       $("#user_id_refer_"+type).val(user_id_refer);
       
       $.ajax({
          type: 'POST', 
          url: BaseUrl+"/bo/insert_prosec/"+society_id+"/"+society_key,  
          data:{
             'user_id'			    : user_id,
             'type'				      : type,
             'user_id_refer'    : user_id_refer,
             'reference_id'     : reference_id || 0,
                }, 
          dataType: 'json',
          success: function(data){
             if(data.status == 1)
             {
                $("#reference_id_"+type).val(reference_id);
                $("#search_"+type).hide();
                $("#button_"+type).hide();
                $('#show_'+type).hide();
				        $("#cancel_"+type).hide();
                show();
             }
             else{
                $("#show_"+type+"_data").hide();
                $('#show_'+type).hide();
                alert(data.msg);
                $('input[type=search]').each(function() 
                {
                   $(this).val('');
                }); 
             }  
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {} 
       });
                     
    })
    
    function show() 
    {
       var user_id_refer    = $("#user_id_refer_"+type).val();
       var user_id          = $("#user_id").val();
       var reference_id     = $("#reference_id_"+type).val();
       $.ajax({
          type: 'POST', 
          url: BaseUrl+"/bo/get_prosec/"+society_id+"/"+society_key,  
          data:{
             'user_id'			  : user_id,  
             'type'				    : type,
             'user_id_refer'	: user_id_refer,
             'reference_id'   : reference_id,
          }, 
          dataType: 'html',
          success: function(data){
            $("#reference_id_"+type).val(reference_id);
            $("#show_"+type+"_data").html(data);
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) { 
          } 
       });        
    } 
})
</script>