{% load i18n l10n %}

{% get_current_language as LANGUAGE_CODE %}
<div id="{{view_name}}_div_csvupload" class="excel_container">
	<a id = "csvupload_{{view_name}}" href="#"  alt="{% trans 'Upload CSV' %}">Upload CSV</a>
	<a id = "csvuploadclose_{{view_name}}" href="#"  alt="{% trans 'Close Upload CSV' %}">Close Upload CSV</a>
</div>
<div id="{{view_name}}_div_csvuploadform" class="excel_container csvupload_container" style="border:1px #fff solid; background-color: #999;">
	<form id="{{view_name}}_csvupdate_frm" class="csvupdate_frm" enctype="multipart/form-data" method="post" action="/international/{{view_name}}/csvuploadsubmit/">{% csrf_token %}
		{{UPLOAD_FORM.as_ul}}
		<p class='clear-fix'></p>
		<a id="{{view_name}}_csvupdate_frm_btn" href='#' class="submit">Upload</a>
		
	</form>
	<p class='clear-fix'></p>
	<div id="{{view_name}}_div_csvvalidate" class="validatecsv_container">
		<div id="{{view_name}}_div_csvvalidatelines" class='validatecsv_lines'>
		</div>
		<div id="{{view_name}}_div_csvvalidateform" class='validatecsv_form'>
			<form id="{{view_name}}_csvvalidate_frm" enctype="multipart/form-data" method="post" action="/international/{{view_name}}/csvuploadvalidate/">{% csrf_token %}
				{{VALIDATE_FORM.as_ul}}
			</form>
		</div>
		<p class='clear-fix'></p>
		<div id="{{view_name}}_div_csvvalidatebutton" class='csv_buttons'>
			<a id="{{view_name}}_csvvalidate_frm_btn" href='#' class="submit">Validate</a>
		</div>
	</div>
	<div id="{{view_name}}_div_csvload" class="loadcsv_container">
		<div id="{{view_name}}_div_csvloadlines" class='validatecsv_lines'>
		</div>
		<p class='clear-fix'></p>
		<div id="{{view_name}}_div_csvloadbuttons" class='csv_buttons'>
			<a id="{{view_name}}_csvload_btn" href='#' class="submit">Load</a>
			<a id="{{view_name}}_csvcancel_btn" href='#' class="submit">Cancel</a>
		</div>
	</div>	
</div>


<script type="text/javascript" lang="text/javascript">
	$('#{{view_name}}_csvupdate_frm #id_csv_file').attr("accept",".csv")
	$('#{{view_name}}_csvupdate_frm').each(function(){
		$(this).change(function(){
			$("#{{view_name}}_div_csvvalidate").hide()
			$('#{{view_name}}_csvvalidate_frm').each(function(){
				this.reset();
			});
			$("#{{view_name}}_div_csvload").hide()
		});
	});	


	function initializeCsvUpload(){
		$("#{{view_name}}_csvupdate_frm_btn").button({ label: "Loading..." });
		$("#{{view_name}}_csvupdate_frm_btn").button( "disable" );
		// $("#{{view_name}}_csvload_table").GridUnload();
		$("#{{view_name}}_div_csvvalidatelines").html('');
		$("#{{view_name}}_div_csvloadlines").html('');
		$("#{{view_name}}_div_csvvalidate").hide();
		$("#{{view_name}}_div_csvload").hide();
	}

	$("[id$=datepicker]").each(function(){
     	$(this).datepicker({
 			defaultDate: "",
 			dateFormat:"yy-mm-dd",
 			changeMonth: true,
 			numberOfMonths: 1
    	});
	});
	$("#{{view_name}}_div_csvuploadform").hide();
	$("#{{view_name}}_div_csvvalidate").hide();
	$("#{{view_name}}_div_csvload").hide();
	$("#{{view_name}}_csvupdate_frm_btn").button();
	$("#{{view_name}}_csvvalidate_frm_btn").button();
	$("#{{view_name}}_csvload_btn").button();
	$("#{{view_name}}_csvcancel_btn").button();
	
 	$("#csvupload_{{view_name}}").button({icons: {primary: "ui-icon-disk"}});  //.attr('style','font-size:0.7em');
 	$("#csvuploadclose_{{view_name}}").button({icons: {primary: "ui-icon-disk"}});  //.attr('style','font-size:0.7em');
 	$("#csvuploadclose_{{view_name}}").hide();
 	$("#csvupload_{{view_name}}").click(function(){
		$("#{{view_name}}_div_csvuploadform").show();
		$("#csvupload_{{view_name}}").hide();
		$("#csvuploadclose_{{view_name}}").show();
	});
	$("#csvuploadclose_{{view_name}}").click(function(){
		$("#{{view_name}}_div_csvuploadform").hide();
		$("#{{view_name}}_div_csvvalidate").hide();
		$("#{{view_name}}_div_csvload").hide();
		{{view_name}}_csvuploadform_is_shown = 0;
		$('#{{view_name}}_csvupdate_frm').each(function(){
			this.reset();
		});			
		$("#csvuploadclose_{{view_name}}").hide();
		$("#csvupload_{{view_name}}").show();
		$("#{{view_name}}_csvupdate_frm_btn").button({ label: "Upload" });
		$("#{{view_name}}_csvupdate_frm_btn").button( "enable" );
		$("#{{view_name}}_csvvalidate_frm_btn").button({ label: "Validate" });
		$("#{{view_name}}_csvvalidate_frm_btn").button( "enable" );
	});
	
	$("#{{view_name}}_csvupdate_frm_btn").click(function(){
		initializeCsvUpload()

		var options_csvupdate_frm_btn = { 
			dataType:'json',
			success: function(response){
				if (response['messages']){
					showMessages('{{view_name}}_result_messages', response['messages']);
				}
				if (response['status'] == 'success'){
					for (i=0;i<response['response'].length;i++){
						$("#{{view_name}}_div_csvvalidatelines").append('<pre class="validatecsv_line">'+response['response'][i]+'</pre>');
					}
					$("#{{view_name}}_div_csvvalidate").show();
					upload_id=response['upload_id']

					// $("#{{view_name}}_div_csvvalidatelines").html();

				}
				$("#{{view_name}}_csvupdate_frm_btn").button({ label: "Upload" });
				$("#{{view_name}}_csvupdate_frm_btn").button( "enable" );

			},

			resetForm: false        // reset the form after successful submit 
	    };
		$("#{{view_name}}_csvupdate_frm").ajaxSubmit(options_csvupdate_frm_btn); 

	});
	$("#{{view_name}}_csvvalidate_frm_btn").click(function(){
		$("#{{view_name}}_csvvalidate_frm_btn").button({ label: "Validating..." });
		$("#{{view_name}}_csvvalidate_frm_btn").button( "disable" );
		$("#id_upload_id").val(upload_id)

		var options_csvvalidate_frm_btn = { 
			dataType:'json',
			success: function(response){
				if (response['messages']){
					showMessages('{{view_name}}_result_messages', response['messages']);
				}
				if (response['status'] == 'success'){
					$("#{{view_name}}_div_csvvalidate").hide();
					table='<table id="{{view_name}}_csvload_table" class="csvload_table">';
					for (i=0;i<response['response'].length;i++){
						table+='<tr>';
						for (j=0;j<response['response'][i].length;j++){
							if (i == 0){
								cell_label='th'
							}
							else{
								cell_label='td'
							}
							table+='<'+cell_label+'>';
							table+=response['response'][i][j]
							table+='</'+cell_label+'>';
						}
						table+='</tr>';
					}
					table+='</table>';
					$("#{{view_name}}_div_csvloadlines").append(table);
					$("#{{view_name}}_div_csvload").show();
					options = {
							caption: 'Upload Sample'
						}
					tableToGrid(".csvload_table",options);
				}		
				$("#{{view_name}}_csvvalidate_frm_btn").button({ label: "Validate" });
				$("#{{view_name}}_csvvalidate_frm_btn").button( "enable" );
			},
			resetForm: true        // reset the form after successful submit 
	    };
		$("#{{view_name}}_csvvalidate_frm").ajaxSubmit(options_csvvalidate_frm_btn); 
	});	

	$("#{{view_name}}_csvcancel_btn").click(function(){
		$("#csvuploadclose_{{view_name}}").click();
	});									
	$("#{{view_name}}_csvload_btn").click(function(){
		$("#{{view_name}}_div_csvuploadform").block()
		$.ajax({
		type: 'POST',
		dataType:'json',
		url: '/international/{{view_name}}/csvloadtomodel/',
		data:  { upload_id: upload_id, 'csrfmiddlewaretoken': '{{ csrf_token }}' },
		success: function(response) {
			if (response['messages']){
				showMessages('{{view_name}}_result_messages', response['messages']);
			}
			$("#{{view_name}}_div_csvuploadform").unblock()
			$("#csvuploadclose_{{view_name}}").click();
		}
		});
	});
</script>



