{% extends 'badge/badge_layout.html' %}
{% block style %} 
  <link rel="stylesheet" type="text/css" href="/static/css/selectize.bootstrap3.css" >
{% endblock %}
{% block content %}


<div class="container-fluid pl-5 pr-5 " style="height: 100%;">
         <div class="row">
            <div class="col-lg-4 col-md-4 col col-sm-12 mx-auto mt-5" style="background-color: #cac6c6;" >
                   <br/>
                   
                   <h6 class="text-center" ><strong>{{conf_data.conf_name}}</strong> <br/> </h6>
               <form class="box" id="login_form" action="{{url_for('badge_user.BadgePostLogin')}}" method="POST">

                {% for mesg in get_flashed_messages(category_filter=["successMsg"]) %} 
                  <div class="row"> 
                      <div class="col-sm-12"></div>
                        <div class="col-sm-12">
                    <div class=" text-center" id="successMsg" >
                      <h6 class="alert alert-success  alert-dismissible">
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{{ mesg }}</h6>
                    </div>
                     <div class="col-sm-4"></div>
                      </div>
                    </div>
                  {% endfor %} 
                  {% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %} 
                     <div class="row"> 
                      <div class="col-sm-12"></div>
                        <div class="col-sm-12">
                          <div class="text-center" id="successMsg" >
                          <h6 class="alert alert-danger  alert-dismissible">
                           <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{{ mesg }}</h6>
                          </div>
                          <div class="col-sm-4"></div>
                      </div>
                    </div>
                  {% endfor %}  


                   <div class="card" >
                        <div class="card-header">
                            <h4 class="panel-title" >
                              <a  data-parent="#accordion" href="#collapseOne"  aria-expanded="true">
                              <span class="glyphicon glyphicon-filter" ></span>  <label >Select column list:</label>
                              </a>
                            </h4>
                       </div> 
                      <div class="card-body" >
                      
                               <div class="row">
                                  <div class="col-lg-12 col-md-12 col-sm-12">
                                       
                                       <div class="input-group ">
                                          <select class = "form-control" id = "column_name" name = "column_name" >
                                            <option value = "" id = "select"  selected>Select columns</option>
                                              {% if del_table_columns %}
                                                {% for row in del_table_columns %}

                                                  {% set column_name = row  %}
                                                  {% set column_name = column_name.replace("_" ," ") %}
                                                   <option value = "{{row}}"> {{column_name.upper() or '' }} </option>
                                                  
                                                  
                                                {% endfor %}
                                              {% endif %}
                                          </select>




                                        </div>
                                                                                  <p><span style="color: #71220f;"><b>Note : </b><br/> Please select your column in the same order as in your file.</span></p>
                                      </div>

                                      <div class="col-lg-12 col-md-12 col-sm-12 mt-3">
                                         <label>Upload your file here...</label>

                                         <input type="file" name="excel_file" id="excel_file" class="form-control">
                                         
                                         <p><span style="color: #71220f;">Accepted file formats: Comma-separated values (.csv),  Excel (.xlsx, .xls)</span></p>
                                      </div>   
                                      
                                      </div> <!-- row end -->
                                      <br/>
                                      <br/>
                                      <div class="row">
                                         <div class="col-lg-12 col-md-12 col-sm-12 text-center">
                                            <input type="button" name="preview_btn" id="preview_btn" value="PREVIEW" class="btn btn-primary" >
                                         </div>
                                    </div>
                                
                        </div> 
                       
                    </div>    

                     
                     <input type="hidden" name="conf_id" id="conf_id" value="{{conf_id}}">
                     <input type="hidden" name="conf_key" id="conf_key" value="{{conf_key}}">
                     <input type="hidden" name="del_table_name" id="del_table_name" value="{{del_table_name}}">
                     <input type="hidden" name="dub_del_nos" id="dub_del_nos" value="{{dub_del_nos or  ''}}">
                 
                  <!-- <div class="col-12 text-center">
                     <button type="submit" class="btn btn-primary btn-lg">Login</button>
                  </div> -->
               </form>
            </div>

            <div class="col-lg-8 col-md-8 col col-sm-12 mx-auto mt-5" style="background-color: #afaead;" >
              <div class="table " id="table_content">
            </div>
         </div>
      </div>
{% endblock %}

{% block bottomscript %}
<script  type= "text/javascript"  src="/static/js/selectize.js"></script>

<script type="text/javascript">
  $(document).ready(function()
  {
    var BaseUrl = document.location.origin;


    $("#column_name").selectize({
      maxItems: 11,
       });
     $(document).on('click', 'div.selectize-input div.item', function(e) {
        var select = $('#column_name').selectize();
        var selectSizeControl = select[0].selectize;
        // 1. Get the value
        var selectedValue = $(this).attr("data-value");
        // 2. Remove the option 
        select[0].selectize.removeItem(selectedValue);

        select[0].selectize.refreshItems();
        select[0].selectize.refreshOptions();

      });

 $(document).on("click","#preview_btn",function(e)
       {
        e.preventDefault();
        fileUploadPreview();

      });

 // $(document).on("change" , "#all_delegate_nos" , function(e)
 // {
 //    ($(this).is(":checked") ? $(".delegate_nos").prop("checked", true) : $(".delegate_nos").prop("checked", false));
 // });


       $(document).on("click" , "#all_delegate_nos" , function(e)
        {
            if(this.checked){
                 $('.delegate_nos').each(function(){
                    this.checked = true;
                 });
              }
              else{
                    $('.delegate_nos').each(function(){
                      this.checked = false;
                  });
              }
          });

          $(document).on("click" , ".delegate_nos" , function(e){
           if($('.delegate_nos:checked').length == $('.delegate_nos').length){
              $('#all_delegate_nos').prop('checked',true);
             }
           else{
            $('#all_delegate_nos').prop('checked',false);
            }
           });


          // Remove check box click event start
           $(document).on("click" , "#remove_all_delegate_nos" , function(e)
        {

            if(this.checked){
                 $('.remove_delegate_nos').each(function(){
                    this.checked = true;
                 });
              }
              else{
                    $('.remove_delegate_nos').each(function(){
                      this.checked = false;
                  });
              }
          });

          $(document).on("click" , ".remove_delegate_nos" , function(e){
           if($('.remove_delegate_nos:checked').length == $('.remove_delegate_nos').length){
              $('#remove_all_delegate_nos').prop('checked',true);
             }
           else{
            $('#remove_all_delegate_nos').prop('checked',false);
            }
           });

          $(document).on("click","#remove_icon",function(e)
       {
           e.preventDefault();
           var remove_delegate_nos = $(".remove_delegate_nos").val();
           var dub_del_nos         = $("#dub_del_nos").val();
           var del_table_name      = $("#del_table_name").val();
           


           var conf_id   = $("#conf_id").val();
          var conf_key   = $("#conf_key").val();

            var remove_del_nos     = [];

        $(".remove_delegate_nos").each(function() 
          {    
              if($(this).is(':checked'))
              remove_del_nos.push($(this).val());
          });

           if(remove_del_nos.length  <= 0)
           {
             alert("Please select atleast one record to delete .");
             return false;
           }
           else
           {
             var column_name_1        = $("select[name=column_name]").val();
             if(column_name_1.length <= 0)
             {
              
              alert("Please select the column in the same order as in your file.");
              return false;
             }
             else
             {
              column_names = column_name_1.toString();
             }
             var remove_del_nos_1 = remove_del_nos.toString();


             // Remove records only on the conf-delegate table.
             if (confirm("Are you sure, do you want delete these records ?.")) {
                  $.ajax({
                      url: BaseUrl+"/"+conf_id+"/"+conf_key+"/remove_delegate_records",
                      type: 'POST',
                      data: {'remove_del_nos' : remove_del_nos_1,'dub_del_nos' : dub_del_nos,'col_names' : column_names,
                           'del_table_name' : del_table_name },                    
                      success: function(reposnse){
                             var data_1 = JSON.parse(reposnse);
                             // var data_1 = reposnse;
                             var msg         = data_1.msg;
                             var html_data   = data_1.html_data;
                             var dub_del_nos = data_1.dub_del_nos;

                             
                             if (msg == "success")
                             {  
                                alert("Successfuly removed.")
                                $("#table_content").empty();
                                $("#table_content").html(html_data);
                                // commented by Ganeaan J
                                // $("#dub_del_nos").empty();
                                // $("#dub_del_nos").val(dub_del_nos); 
                             }  
                             else
                             {
                                alert(msg);
                                $("#table_content").empty();
                                return false;
                             }
                          
                            },
                            error: function(XMLHttpRequest, textStatus, errorThrown) { 
                              //location.reload();  
                            }
                    });
             }
           } 
      });

          // Remove check box click event end


 $(document).on("click","#save_btn",function(e)
       {
        e.preventDefault();
        fileUpload();
      });
     
     function fileUploadPreview()
       {
        var jform           = new FormData();
        var file_type       = $("input[name=excel_file]").val().split('\\').pop();
        var fileExtension = file_type.substring(file_type.lastIndexOf('.') + 1); 

        var column_name     = $("select[name=column_name]").val();
        var del_table_name  = $("#del_table_name").val();

        var conf_id   = $("#conf_id").val();
        var conf_key  = $("#conf_key").val();

        var del_nos = $("#delegate_nos").val();
        
        jform.append('column_name',column_name);

        jform.append('filess',$("input[name=excel_file]").get(0).files[0]); // Here's the important bit
        jform.append('del_table_name',del_table_name);
        jform.append('conf_id',conf_id);
        jform.append('conf_key',conf_key);
        jform.append('fileExtension',fileExtension);
        

        $.ajax({
          url: BaseUrl+"/"+conf_id+"/"+conf_key+"/post_upload_excel_preview",
          type: 'POST',
          data: jform,
          dataType: 'json',
          mimeType: 'multipart/form-data', // this too
          contentType: false,
          cache: false,
          processData: false,
          success: function(reposnse){
                 // var data_1 = JSON.parse(reposnse);
                 var data_1 = reposnse;
                 var msg = data_1.msg;
                 var html_data = data_1.html_data;
                 var dub_del_nos = data_1.dub_del_nos;

                 
                 if (msg == "success")
                 {
                    $("#table_content").empty();
                    $("#table_content").html(html_data);
                    $("#dub_del_nos").empty();
                    $("#dub_del_nos").val(dub_del_nos);
                    // alert(jQuery.type(dub_del_nos)); 
                 }  
                 else
                 {
                    alert(msg);
                    $("#table_content").empty();
                    return false;
                 }
              
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) { 
                  //location.reload();  
                }
        });
       } // image upload Preview function end

       function fileUpload()
       {
        var jform         = new FormData();
        var file_type     = $("input[name=excel_file]").val().split('\\').pop();
        var fileExtension = file_type.substring(file_type.lastIndexOf('.') + 1); 

        var column_name     = $("select[name=column_name]").val();
        var del_table_name  = $("#del_table_name").val();

        var conf_id   = $("#conf_id").val();
        var conf_key  = $("#conf_key").val();

        var dub_del_nos = $("#dub_del_nos").val(); // Added on Jan 09 ,2023
        var del_nos     = [];

        $(".delegate_nos").each(function() 
          {    
              if($(this).is(':checked'))
              del_nos.push($(this).val());
          });


        if(del_nos.length <= 0)
        {
          alert("Please select atleast one record to upload .");
          return false;
        }
        if (dub_del_nos.length > 0 )
        {
           var dub_del_nos_array = dub_del_nos.split(',');
           var common_del_nos = $.grep(dub_del_nos_array, function(element) {
            return $.inArray(element, del_nos ) !== -1;
            });

           if(common_del_nos.length > 0)
           {
               if (confirm("Dublicate Record selected .Are you sure do you want overrite an existing records ?.")) {
                  jform.append('column_name',column_name);
                  jform.append('filess',$("input[name=excel_file]").get(0).files[0]); // Here's the important bit
                  jform.append('del_table_name',del_table_name);
                  jform.append('conf_id',conf_id);
                  jform.append('conf_key',conf_key);
                  jform.append('fileExtension',fileExtension);
                  jform.append('common_del_nos',common_del_nos);
                  
                  jform.append('checked_del_nos',del_nos);
                  $.ajax({
                    url: BaseUrl+"/"+conf_id+"/"+conf_key+"/save_excel_data",
                    type: 'POST',
                    data: jform,
                    dataType: 'json',
                    mimeType: 'multipart/form-data', // this too
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function(reposnse){
                           var data_1    = reposnse;
                           var msg       = data_1.msg;
                           var html_data = data_1.html_data;
                           var status    = data_1.status;
                           if (status == 1)
                           {  
                              alert(msg);
                              $("#dub_del_nos").val('');
                              window.location.href = BaseUrl+"/"+conf_id+"/"+conf_key+"/registered_users";
                           }  
                           else
                           {
                              alert(msg);
                              $("#table_content").empty();
                              return false;
                           }
                          },
                          error: function(XMLHttpRequest, textStatus, errorThrown) { 
                            //location.reload();  
                          }
                  });
                  
              }
           } 
           else
           {
            if (confirm("Dublicate Record not selected .Are you sure do you want upload without dublicate records ?.")) {
                  
                  jform.append('column_name',column_name);
                  jform.append('filess',$("input[name=excel_file]").get(0).files[0]); // Here's the important bit
                  jform.append('del_table_name',del_table_name);
                  jform.append('conf_id',conf_id);
                  jform.append('conf_key',conf_key);
                  jform.append('fileExtension',fileExtension);
                  jform.append('common_del_nos',common_del_nos);
                  
                  jform.append('checked_del_nos',del_nos);
                  $.ajax({
                    url: BaseUrl+"/"+conf_id+"/"+conf_key+"/save_excel_data",
                    type: 'POST',
                    data: jform,
                    dataType: 'json',
                    mimeType: 'multipart/form-data', // this too
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function(reposnse){
                           var data_1    = reposnse;
                           var msg       = data_1.msg;
                           var html_data = data_1.html_data;
                           var status    = data_1.status;
                           if (status == 1)
                           {  
                              alert(msg);
                              $("#dub_del_nos").val('');
                              window.location.href = BaseUrl+"/"+conf_id+"/"+conf_key+"/registered_users";
                           }  
                           else
                           {
                              alert(msg);
                              $("#table_content").empty();
                              return false;
                           }
                          },
                          error: function(XMLHttpRequest, textStatus, errorThrown) { 
                          }
                  });
              }  
           }

        }
        else
        {
          common_del_nos = []; 
            jform.append('column_name',column_name);
            jform.append('filess',$("input[name=excel_file]").get(0).files[0]); // Here's the important bit
            jform.append('del_table_name',del_table_name);
            jform.append('conf_id',conf_id);
            jform.append('conf_key',conf_key);
            jform.append('fileExtension',fileExtension);
            jform.append('common_del_nos',common_del_nos);
            
            jform.append('checked_del_nos',del_nos);
            $.ajax({
              url: BaseUrl+"/"+conf_id+"/"+conf_key+"/save_excel_data",
              type: 'POST',
              data: jform,
              dataType: 'json',
              mimeType: 'multipart/form-data', // this too
              contentType: false,
              cache: false,
              processData: false,
              success: function(reposnse){
                     var data_1    = reposnse;
                     var msg       = data_1.msg;
                     var html_data = data_1.html_data;
                     var status    = data_1.status;
                     if (status == 1)
                     {  
                        alert(msg);
                        $("#dub_del_nos").val('');
                        window.location.href = BaseUrl+"/"+conf_id+"/"+conf_key+"/registered_users";
                     }  
                     else
                     {
                        alert(msg);
                        $("#table_content").empty();
                        return false;
                     }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) { 
                      //location.reload();  
                    }
            });
        }



        // jform.append('column_name',column_name);
        // jform.append('filess',$("input[name=excel_file]").get(0).files[0]); // Here's the important bit
        // jform.append('del_table_name',del_table_name);
        // jform.append('conf_id',conf_id);
        // jform.append('conf_key',conf_key);
        // jform.append('fileExtension',fileExtension);
        // jform.append('common_del_nos',common_del_nos);
        
        // jform.append('checked_del_nos',del_nos);
        // $.ajax({
        //   url: BaseUrl+"/"+conf_id+"/"+conf_key+"/save_excel_data",
        //   type: 'POST',
        //   data: jform,
        //   dataType: 'json',
        //   mimeType: 'multipart/form-data', // this too
        //   contentType: false,
        //   cache: false,
        //   processData: false,
        //   success: function(reposnse){
        //          var data_1    = reposnse;
        //          var msg       = data_1.msg;
        //          var html_data = data_1.html_data;
        //          var status    = data_1.status;
        //          if (status == 1)
        //          {  
        //             alert(msg);
        //             $("#dub_del_nos").val('');
        //             window.location.href = BaseUrl+"/"+conf_id+"/"+conf_key+"/registered_users";
        //          }  
        //          else
        //          {
        //             alert(msg);
        //             $("#table_content").empty();
        //             return false;
        //          }
              
        //         },
        //         error: function(XMLHttpRequest, textStatus, errorThrown) { 
        //           //location.reload();  
        //         }
        // });
       } // image upload function end


  });
</script>

{% endblock %}