{% extends "back_office/bo_layout.html" %}
{% block head %}
{% endblock %}
{% block title %}Export{% endblock %} 
{% block content %}
<form method="POST" id="search_frm" action="{{url_for('backoffice.ReportExportFilter',society_id=society_id,society_key=society_key)}}">
   <input type="hidden" name="filter_visible" id="filter_visible" value="{{filter_visible}}">
   {% 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 %}
   <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>
      </div>
      <div id="collapseFilter" >
         <div class="card-body">
            <div class="row mx-3 my-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>
            <div class="row mx-3 my-3">
               <div class="col-md-4">
                    <label>Member Type : </label>
                    <div class="dropdown">
                     <select class="form-control" id="search_member_type" name="search_member_type">
                        <option id = "select" value="">Members</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}} 
                           {% if item.member_type_id ==2 %} [Incompleted Data] {% endif %}</option>
                           
                        {% endfor %}
                     </select>
                  </div>
               </div>
               <div class="col-md-4">
                  <label>Membership No : </label>
                  <div class="row">
                     <div class="col-md-6">
                        <input type="search" id="from_memno" name="from_memno" placeholder="From..." class="form-control" value="{{search_data.from_memno or ''}}">
                     </div>
                     <div class="col-md-6">
                        <input type="search" id="end_memno" name="end_memno" placeholder="End..." class="form-control" value="{{search_data.end_memno or ''}}">
                     </div>
                  </div>
               </div>
               <div class="col-md-2">
                  <label>Joined From : </label>
                  <div class="row">
                     <div class="col-md-12">
                        <input type="date" id="approved_from" name="approved_from" placeholder="From..." class="form-control" value="{{search_data.approved_from or ''}}">
                     </div>
                  </div>
               </div>
               <div class="col-md-2">
                  <label>Joined To : </label>
                  <div class="row">
                     
                     <div class="col-md-12">
                        <input type="date" id="approved_to" name="approved_to" placeholder="End..." class="form-control" value="{{search_data.approved_to or ''}}">
                     </div>
                  </div>
               </div>
            </div>
            <div class="row mx-3 my-3">
               <div class="col-md-4">
                 <label> Sort By :</label>
                 <select name="sort_by" id="sort_by" class="form-control" >
                    <option value = "membership_no_only"  >Membership Number</option>
                    <option value = "full_name">Name</option>
                    <option value="updated_at">Updated at</option>
                 </select>
               </div>
               <div class="col-md-4">
                  <label> Order By :</label>
                  <select name="order_type" id="order_type" class="form-control" >
                    <option value = "desc" {% if search_data.order_type == 'desc' %} selected="selected" {% endif %} >DESC</option>
                    <option value = "asc" {% if search_data.order_type == 'asc' %} selected="selected" {% endif %} >ASC</option>
                  </select>
               </div>
            </div>
         </div>
         
         <div class="row mx-3 my-3">
            <div class="col-sm-12">
               <section class="demo plugin">
                  <div class="sandbox my-3">
                     <label>Select Column Name</label>
                     <select id="export_columns" class=" export_columns selectized" name="export_columns" multiple>
                        <option value="">--Select--</option>
                           {% if export_cols %}
                              {% for row in export_cols %}
                                 <option value="{{row.cols_value_name}}" selected> {{row.cols_display_name}} </option>
                              {% endfor %}
                           {% endif %}
                     </select>
                  </div>
               </section>
            </div>       
         </div>
         <div class="row mt-3 text-center mb-3">
            <div class="col-md-12">
               <input type="submit" id="export_btn" class="btn btn-success mr-5" value="Export CSV" name="form_submit">
               <input type="submit" class="btn btn-danger" id="clear_button" value="Clear" name="form_submit">
            </div>
         </div>
      </div>
   </div>
</form>
<input type="hidden" name="export_columns" id="export_columns" value="{{export_columns}}">
{% endblock %}   
{% block script %} 
<!--<script src="https://abstractsdemo.urbanedge.co.in/js/jquery.min.js"></script>   -->
<!--<script src="https://abstractsdemo.urbanedge.co.in/js/selectize.js"></script>-->
<script type="text/javascript">

$(document).ready(function(){

   $("#export_columns").selectize({
      maxItems: 100,
    });


   $("#collapseOne").show();
   
   var non_member_list = ["member_type","full_name","email","mobile"]
   var export_col     = $('#export_columns').val();
   
   
   $("#search_member_type").change(function(){
       if ($("#search_member_type").val() == 2)
       {
            $(".export_columns")[0].selectize.setValue(non_member_list);
       }
       else
       {
           $(".export_columns")[0].selectize.setValue(export_col);
       }
       
   })
   
   
//   var export_col = $('#export_columns').val();
//   var dataarray=export_col.split(",");
//   $(".export_columns")[0].selectize.setValue(dataarray);

});

</script>
{% endblock %}