{% load i18n l10n %}

<style type="text/css" media="screen">
	.clear-fix {
		clear: both;
	}
	#{{view_name}}_div_csvloadlines	> div {
		position: relative;
	}
	#left-button-slider {
		float: left;
		width: 20%;
	}
	#left-button-slider:hover {
		cursor: pointer;
	}
	#right-button-slider {
		float: right;
		width: 20%;
	}
	#right-button-slider:hover {
		cursor: pointer;
	}
	.slider-back {
		display: none;
	}
</style>

{% get_current_language as LANGUAGE_CODE %}
<div id="{{view_name}}_div_csvupload" class="excel_container">
	<a id = "csvupload_{{view_name}}" href="#"> Upload {{upload_type}}</a>
	<a id = "csvuploadclose_{{view_name}}" href="#">Close {{upload_type}} Upload</a>
</div>
<div id="{{view_name}}_div_csvuploadform" class="excel_container csvupload_container">
	<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 id="{{view_name}}_div_csvsummary" class="summarycsv_container">
		<div id="{{view_name}}_div_csvsummarycontent" class='summarycsv_content'>
			<form id="{{view_name}}_csvsummarycontent_frm" enctype="multipart/form-data" method="post">{% csrf_token %}
				<div id="{{view_name}}_csvsummarycontent_frm_content"></div>
			</form>
		</div>
		<p class='clear-fix'></p>
		<div id="{{view_name}}_div_csvsummarybuttons" class='csv_buttons'>
			<a id="{{view_name}}_csvsummaryload_btn" href='#' class="submit">Save</a>
			<a id="{{view_name}}_csvsummarycancel_btn" href='#' class="submit">Cancel</a>
		</div>
	</div>	

</div>


<script type="text/javascript" lang="text/javascript">

	// var for slider visualization
	var slider_position = 0;

	$('#{{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()
			$("#{{view_name}}_div_csvsummary").hide()
		});
	});	


	function {{view_name}}_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();
		$("#{{view_name}}_div_csvsummary").hide();
	}

	$("[id$=datepicker]").each(function(){
     	$(this).datepicker({
 			defaultDate: "",
 			dateFormat:"yy-mm-dd",
 			changeMonth: true,
 			numberOfMonths: 1,
 			firstDay: 1,
    	});
	});

	function {{view_name}}_initializeValidate(response){
		$("#{{view_name}}_div_csvvalidate").show();
		{{view_name}}_upload_id=response['upload_id']
	}

	function {{view_name}}_initializeLoad(response){
		$("#{{view_name}}_div_csvvalidate").hide();
		{{view_name}}_upload_id=response['upload_id']
		$("#{{view_name}}_div_csvload").show();
		for (t=0;t<response['response'].length;t++){
			table='<table id="{{view_name}}_csvload_table_'+t+'" class="{{view_name}}_csvload_table">';
			for (i=0;i<response['response'][t].length;i++){
				table+='<tr>';
				for (j=0;j<response['response'][t][i].length;j++){
					if (i == 0){
						cell_label='th'
					}
					else{
						cell_label='td'
					}
					table+='<'+cell_label+'>';
					table+=response['response'][t][i][j]
					table+='</'+cell_label+'>';
				}
				table+='</tr>';
			}
			table+='</table>';
			$("#{{view_name}}_div_csvloadlines").append(table);
			options = {
					caption: 'Upload Sample'
				}
			if (response['response'].length > 1){
				options.caption+=' Sheet #'+(t+1);
			}
			tableToGrid("#{{view_name}}_csvload_table_"+t,options);
		}
		if (response['response'].length > 1){
			$("#{{view_name}}_div_csvloadlines").append("<p><span id='left-button-slider'>&lt;--</span><span id='right-button-slider'>--&gt;</span><span class='clear-fix'></span></p>");
			$("#{{view_name}}_div_csvloadlines").append("<p class='clear-fix'></p>");
		}
		
		$('#left-button-slider').button();
		$('#right-button-slider').button();

		$("#{{view_name}}_div_csvloadlines>div").each(function(n){
			// $(this).css('top', '-'+($(this).width()*n)+"px");
			if(n!=0){
				$(this).addClass('slider-back');
			}
			// $(this).css('z-index', (100+n));
		});

		$('#left-button-slider').click(function(){
			$('#gbox_destination_range_csvload_table_'+(slider_position)).addClass('slider-back');
			if(slider_position>0){
				slider_position--;
			}
			else{
				slider_position = ($("#{{view_name}}_div_csvloadlines>div").length - 1);
			}
			$('#gbox_destination_range_csvload_table_'+(slider_position)).removeClass('slider-back');
		});
		$('#right-button-slider').click(function(){
			$('#gbox_destination_range_csvload_table_'+(slider_position)).addClass('slider-back');
			if(slider_position<($("#{{view_name}}_div_csvloadlines>div").length - 1)){
				slider_position++;
			}
			else{
				slider_position = 0;
			}
			$('#gbox_destination_range_csvload_table_'+(slider_position)).removeClass('slider-back');
		});
	}

	function {{view_name}}_initializeSummary(response){
		$("#{{view_name}}_div_csvload").hide();
		$("#{{view_name}}_div_csvsummary").show();
		$("#{{view_name}}_csvsummarycontent_frm_content").html(response);
		if ({{view_name}}_csvupload_summary_error){
			$("#{{view_name}}_div_csvsummarybuttons").hide();
		}
		else{
			$("#{{view_name}}_div_csvsummarybuttons").show();
		}
	}

	$("#{{view_name}}_div_csvuploadform").hide();
	$("#{{view_name}}_div_csvvalidate").hide();
	$("#{{view_name}}_div_csvload").hide();
	$("#{{view_name}}_div_csvsummary").hide();
	$("#{{view_name}}_csvupdate_frm_btn").button();
	$("#{{view_name}}_csvvalidate_frm_btn").button();
	$("#{{view_name}}_csvload_btn").button();
	$("#{{view_name}}_csvcancel_btn").button();
	$("#{{view_name}}_csvsummaryload_btn").button();
	$("#{{view_name}}_csvsummarycancel_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}}_div_csvsummary").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}}_csvload_btn").button({ label: "Load" });
		$("#{{view_name}}_csvload_btn").button( "enable" );
		$("#{{view_name}}_csvsummaryload_btn").button({ label: "Save" });
		$("#{{view_name}}_csvsummaryload_btn").button( "enable" );
		$("#{{view_name}}_div_csvuploadform").unblock();
		$("{{view_name}}_div_csvsummarybuttons").show();
	});
	
	$("#{{view_name}}_csvupdate_frm_btn").click(function(){
		{{view_name}}_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>');
					}
					{% if VALIDATE_FORM %}
						{{view_name}}_initializeValidate(response)
					{% else %}
						{{view_name}}_initializeLoad(response)
					{% endif %}
					

					// $("#{{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({{view_name}}_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}}_initializeLoad(response)
				}		
				$("#{{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}}_csvsummarycancel_btn").click(function(){
		$("#csvuploadclose_{{view_name}}").click();
	});					

	$("#{{view_name}}_csvload_btn").click(function(){
		$("#{{view_name}}_div_csvuploadform").block()
		$.ajax({
			type: 'POST',
			dataType:'html',
			url: '/international/{{view_name}}/csvsummary/',
			data:  { upload_id: {{view_name}}_upload_id, 'csrfmiddlewaretoken': '{{ csrf_token }}' },
			success: function(response) {
				{{view_name}}_initializeSummary(response)
				$("#{{view_name}}_div_csvuploadform").unblock()
			}
		});
	});

	$("#{{view_name}}_csvsummaryload_btn").click(function(){
		data = $('#{{view_name}}_csvsummarycontent_frm').serialize();
		data+='&upload_id='+{{view_name}}_upload_id;
		data+='&unique_exec_id='+unique_exec_id;
		$("#{{view_name}}_div_csvuploadform").block()
			$.ajax({
			type: 'POST',
			dataType:'json',
			url: '/international/{{view_name}}/csvloadtomodel/',
			data: data,
			success: function(response) {
				if (response['messages']){
					showMessages('{{view_name}}_result_messages', response['messages']);
				}
				$("#{{view_name}}_div_csvuploadform").unblock()
				$("#csvuploadclose_{{view_name}}").click();
			}
		});
	});
	
</script>