Sindbad~EG File Manager

{% extends "backoffice/layout.html" %}
{% block title %}Add New{% endblock %}
{% block header %}ADD NEW (Non Member){% endblock %}
{% block content %}
<div id="msg_div" style="min-height: 14px;max-height:60px;text-align: center;color:white;vertical-align: middle; font-weight:bold;font-size: 18px;display: none">
		<label id="msg_label" class="text-success h3 font-weight-bold"></label>
    </div>
<div class="container mt-3">
	<form enctype="multipart/form-data">
		
		<div class="row">
			<div class="col-md-12 text-right form-group">
				<input type="file" name="file" id="file" accept=".csv" class="text-center">
		        <input type = "button" class="btn btn-success" id="upload_btn" value="Upload">
		        <br><br>
		        <input type="button"  class="btn btn-link" id="download_csv" value="Download Sample CSV File">
			</div>
		</div>
		<div class="row">
			<div class="col-md-12 text-center">
				<h4 id="show_msg" class="h4 text-danger font-weight-bold"></label>
			</div>
		</div>
			
		<div class="row">
			<div class="col-md-12">
				<div class=" table-responsive  mobile-responsive ">
					<table class="table table-bordered table-striped">
						<thead class="thead-dark">
							<th scope="col" colspan="2"><input type="number" name="limits" id="limits" value="2"><button type="button" class="btn btn-sm btn-danger ml-2" onclick="post_row_count()" >+ Add</button></th>
							<th scope="col" colspan="2" class="text-right"> <button type="button" class="btn btn-sm btn-success bulk_save" id="bulk_save_btn" onclick="bulk_save()" >Bulk Save</button></th>
						</thead>
						<tbody id="show_rows">
						</tbody>
						<tfoot class="thead-dark ">
							<th scope="col" colspan="2"><input type="number" name="limits" id="limits" value="2"><button type="button" class="btn btn-sm btn-danger ml-2" onclick="post_row_count()" >+ Add</button></th>
							<th scope="col" colspan="2" class="text-right"> <button type="button" class="btn btn-sm btn-success bulk_save" id="bulk_save_btn" onclick="bulk_save()" >Bulk Save</button></th>
						</tfoot>
					</table>
				</div>
			</div>
		</div>

	</form>
</div>

{% endblock %}
{% block script %} 

<script type="text/javascript">
	$(document).ready( function ()
{
	
	post_row_count(5);
})
	var conf_id = "{{conf_id}}";
	var conf_key = "{{conf_key}}";
	var society_id = "{{society_id}}"


	$('#download_csv').click(function(){
		$.ajax({
	        type: 'POST', 
	        url: "/bo/download_csv_file/"+conf_id+"/"+conf_key,
	        contentType: 'application/json;charset=UTF-8',
	        data:{},
	        dataType: 'html',
	        success: function(data)
	        {
	            var blob=new Blob([data]);
			    var link=document.createElement('a');
			    link.href=window.URL.createObjectURL(blob);
			    link.download="sample.csv";
			    link.click();
	        },
	        error: function(XMLHttpRequest, textStatus, errorThrown){} 
	      });
	      return false; 
	})

	$('#upload_btn').click(function()
	{


		$( ".table_row" ).each(function( index ) {
		  var index = $(this).attr('data-index');
		  
		 if ($("#full_name_"+index).val() == '' || $("#email"+index).val() == '' || $("#mobile"+index).val() == '')
		  {
		  	$('#row_'+index).remove();
		  } 

		});
		var fd = new FormData();
		var user_profile    = $('#file')[0].files[0];
		var file_name       = $('#file').val().split('\\').pop();
		var start = $('.table_row').length;
		var start = (parseInt(start?start:0)+1)
		var limit = $('#limits').val();

		
		var limit = start
		fd.append('file', user_profile);
		fd.append('start',start)
		fd.append('limit',limit)
		if (file_name.length == "") {
			alert('Please upload file')
		} 
		else {
			$.ajax({
	                type: 'POST', 
	                url:"/bo/upload_csv_file/"+society_id+"/"+conf_id+"/"+conf_key,
	                data: fd,
	                contentType: false,
	                processData: false,
	                cache: false,
	                dataType: 'json',
	                }).done(function(data, textStatus, jqXHR){
	                	if (data.status == 1) {
	                		$('#show_rows').append(data.html_data)
	                	} 
	                	else {
	                		$('#show_msg').html(data.msg)
	                		setTimeout(function(){ 
					          $("#show_msg").hide()
					          $("#show_msg").html('');
					        }, 20000);
	                	}
	                	
	                }).fail(function(data){
	                alert('error!');
	            });
	    }
	       
	})

	function bulk_save() 
	{
		$( ".table_row" ).each(function( index ) 
		{
		  	var i = $(this).attr('data-index');
			add_new(i)
		  
		})

	}

	function post_row_count() 
    {
    	 
        var limit = $('#limits').val();  
        var start = $('.table_row').length;
        if (start == 0) { 
        	var start = 1
        } 
        else{ 
        	var start = parseInt(start)+parseInt(1) 
        }

            $.ajax({
		        type: 'POST', 
		        url: "/bo/get_add_table/"+conf_id+"/"+conf_key,
		        data:
		   		 {
		   		 'start':start,
		   		'limit' : limit,
		   		 },
		        dataType: 'json',
		        success: function(data)
		        {
		            $('#show_rows').append(data.html_data)
		        },
		        error: function(XMLHttpRequest, textStatus, errorThrown){} 
		      });
		      return false; 
        }

     function add_new(index) 
    {
        var full_name = $("#full_name_"+index).val();
        var email = $("#email_"+index).val();
        var mobile = $("#mobile_"+index).val(); 

        
        if (full_name == '' && email == '' && mobile == '') {

			alert("Anyone field is required")   
		} 
		else
		{
            $.ajax({
		        type: 'POST', 
		        url: "/bo/insert_new_users/"+society_id+"/"+conf_id+"/"+conf_key+"",
		        data:
		   		 {
		   		'full_name' : full_name,
		   		'email' : email,
		   		'mobile' : mobile
		   		 },
		        dataType: 'json',
		        success: function(data)
		        {

	            var status= data.status;
		        var msg = data.msg;
		        if (status ==2) {
		        	
		        	$('#add_'+index).hide();
		        	$('#error_msg_'+index).html(msg)
		            $("#error_msg_"+index).css("color" ,"green" );
		        }
		        else {
		          	
		        	$('#error_msg_'+index).html(msg);
		        	$("#error_msg_"+index).css("color" ,"red" );
		        }   
	        },
		        error: function(XMLHttpRequest, textStatus, errorThrown){} 
		      });
		      return false; 
		}
    }

     function remove(index) 
    {
		$('#row_'+index).remove();
	   
	}
	
</script>
{% endblock %}