	<%  @calendar_view_disable=1    %>
	<div class="stat_dc_block_hider" style="left:0px"></div>
	<div class="stat_dc_block_hider" style="right:0px"></div>
<!---------------------------------------------->
	<% 
		blocks=[] 
		blocks.push({:name => 'blue',:color => $blue,:position => 'left;right'})
		blocks.push({:name => 'red',:color => $red,:position => 'right;left'})
	%>
	<% blocks.each do |item| %>
	<div id="stat_compare_<%= item[:name] %>_picker_container" style="z-index:2;;transition:0.5s;width:250px;height:150px;z-index:40;position:absolute;<%= item[:position].split(';')[0] %>:calc(50% - 420px);top:0px;border-<%= item[:position].split(';')[1] %>:20px solid <%= item[:color] %>;border-bottom:2px solid <%= item[:color] %>">
		<% $date_picker_name="#{item[:name]}_picker"
		   $date_picker_after_action=1
		 %>
		<%= render "shared/date_picker" %>
		
		
		<div id="stat_compare_<%= item[:name] %>_oper_select_image" onclick="stat_compare_add_filter('oper','<%= item[:name] %>')" style="width:30px;height:30px;top:60px;<%= item[:position].split(';')[1] %>:10px;position:absolute;background:<%= $gray %>;transition:0.5s">
			<%= image_tag( "white_plus.png", height: "20", width:"20", style:"position:absolute;top:5px;left:5px") %>
		</div>
			<div id="stat_compare_<%= item[:name] %>_oper_select" class="text_m" style="width:170px;<%= item[:position].split(';')[1] %>:50px;top:50px;line-height:50px;position:absolute;opacity:0.6" align="<%= item[:position].split(';')[1] %>"><%= t('.oper_not_selected')%></div>
		<div style="width:30px;height:30px;top:60px;<%= item[:position].split(';')[0] %>:0px;position:absolute">
			<%= image_tag( "cross_db.png",id: "stat_compare_#{item[:name]}_oper_select_clear",onclick:"stat_compare_clear_filter_selection('oper','#{item[:name]}')", height: "20", width:"20", style:"display:none;position:absolute;top:5px;left:5px") %>
		</div>
		
		<div id="stat_compare_<%= item[:name] %>_login_select_image" onclick="stat_compare_add_filter('user','<%= item[:name] %>')" style="width:30px;height:30px;top:110px;<%= item[:position].split(';')[1] %>:10px;position:absolute;background:<%= $gray %>;transition:0.5s">
			<%= image_tag( "white_plus.png", height: "20", width:"20", style:"position:absolute;top:5px;left:5px") %>
		</div>
			<div id="stat_compare_<%= item[:name] %>_login_select" class="text_m" style="width:170px;<%= item[:position].split(';')[1] %>:50px;top:100px;line-height:50px;position:absolute;opacity:0.6" align="<%= item[:position].split(';')[1] %>"><%= t('.login_not_selected')%></div>
		<div style="width:30px;height:30px;top:110px;<%= item[:position].split(';')[0] %>:0px;position:absolute">
			<%= image_tag( "cross_db.png",id: "stat_compare_#{item[:name]}_login_select_clear",onclick:"stat_compare_clear_filter_selection('user','#{item[:name]}')", height: "20", width:"20", style:"display:none;position:absolute;top:5px;left:5px") %>
		</div>
	
	</div>
	<div class="stat_comapre_hide_element" style="transition:0.5s;width:50%;height:100%;position:absolute;top:0px;<%= item[:position].split(';')[0] %>:0px;z-index:10;background:<%= $white %>;overflow:hidden">
		<div style="width:270px;height:calc(100% - 150px);top:150px;<%= item[:position].split(';')[1] %>:0px;border-<%= item[:position].split(';')[1] %>:2px solid <%= item[:color] %>;border-top:2px solid <%= item[:color] %>;position:absolute">
			<div class="text_m" align="left" style="width:250px;line-height:20px;position:absolute;left:10px;top:10px;"><%= t(:count_opers)%>: <b id="stat_compare_detailed_<%= item[:name] %>_count_oper">-</b></div>
			<div class="text_m" align="left" style="width:250px;line-height:20px;position:absolute;left:10px;top:40px;"><%= t(:unique_opers)%>: <b id="stat_compare_detailed_<%= item[:name] %>_unique_oper">-</b></div>
			<div class="text_m" align="left" style="width:250px;line-height:20px;position:absolute;left:10px;top:70px;"><%= t(:count_logins)%>: <b id="stat_compare_detailed_<%= item[:name] %>_count_user">-</b></div>
		</div>
	</div>
	<% end %>
<!---------------------------------------------->
	<div id="stat_compare_select_container" >
		<div class="button" onclick="stat_compare_get_data()" id="stat_compare_button"><%= t('.compare_day')%></div>
		<div class="stat_dc_search_container" style="top:50px;z-index:50">
			<%= render partial: "shared/search_list", locals: {
					select_id:'oper',
					select_name:t(:oper_search),
					search_command:'operation_sort',
					drop_direction:'down',
					delete_function:0
				} %>
		</div>
		<div class="stat_dc_search_container" style="top:100px">
			<%= render partial: "shared/search_list", locals: {
				select_id:'login',
				select_name:t(:login_search),
				search_command:'login_sort',
				drop_direction:'down',
				delete_function:0
			} %>
		</div>
	</div>
<!---------------------------------------------->

<!---------------------------------------------->


<div id="stat_compare_main_blur_container">
	<div id="stat_dc_main_graph"></div>
	<div class="button" onclick="stat_compare_change_select()" style="top:10px;right:290px;width:120px"><%= t(:edit)%></div>
	<div class="button" onclick="stat_compare_change_table_type('operation_id')" style="top:310px;left:300px;width:200px"><%= t('.by_oper')%></div>
	<div class="button" onclick="stat_compare_change_table_type('login_id')" style="top:310px;left:510px;width:200px"><%= t('.by_login')%></div>
	<div id="stat_dc_main_table">		
		<%
			#	gt - Глобальная таблица
				@container=''
				@gt_structure=[]	
				@gt_structure.push({:onclick => "", :row_name => t(:name), :value => "'+data.data[i].oper_name+'", :width => "", :filter => 'oper_name' })
				@gt_structure.push({:onclick => "", :row_name => t('.blue_day'), :value => "'+data.data[i].blue+'", :width => "width:120px", :filter =>  'blue_count' })
				@gt_structure.push({:onclick => "", :row_name => t('.red_day'), :value => "'+data.data[i].red+'", :width => "width:120px", :filter => 'red_count' })

		%>
		<%= render partial: "shared/table", locals: {
			name:"compare_table",
			header:@gt_structure,
			query:"get_day_compare_for_table",
			action_after:0,
			time:1,
			add_params:',blue_date:document.getElementById("blue_picker_year").value+"-"+document.getElementById("blue_picker_month").value+"-"+document.getElementById("blue_picker_day").value,red_date:document.getElementById("red_picker_year").value+"-"+document.getElementById("red_picker_month").value+"-"+document.getElementById("red_picker_day").value,blue_oper:selected_date_for_request.blue_oper,red_oper:selected_date_for_request.red_oper,blue_user:selected_date_for_request.blue_user,red_user:selected_date_for_request.red_user,type:stat_compare_table_type',
			offset:50,
			first_sort:'oper_name;DESC',
			additional_field:@container
		} %>
	</div>
</div>
<script>
	var calendar_from_date=new Date()
	var calendar_to_date=new Date()
	var selected_date_for_request={'red_oper':0,'red_user':0,'blue_oper':0,'blue_user':0}
	var stat_compare_table_type='operation_id'
			red_picker_set_days(calendar_to_date.getDate(),calendar_to_date.getMonth()+1,calendar_to_date.getFullYear())
			blue_picker_set_days(calendar_to_date.getDate(),calendar_to_date.getMonth()+1,calendar_to_date.getFullYear())
	<%
		 selectors = []
		 selectors.push({:name => 'oper'})
		 selectors.push({:name => 'login'})
	 %>
	 <% selectors.each do |item| %>
		var stat_compare_selected_<%= item[:name] %>=0
		function <%= item[:name] %>_select_search(id) {
			stat_compare_selected_<%= item[:name] %>=id
			blue=document.getElementById('stat_compare_blue_<%= item[:name] %>_select_image')
			red=document.getElementById('stat_compare_red_<%= item[:name] %>_select_image')
			blue.style.background="<%= $blue %>"
			blue.style.cursor='pointer'
			red.style.background="<%= $red %>"
			red.style.cursor='pointer'
		}
		function <%= item[:name] %>_action_after_clean_select(){
			stat_compare_selected_<%= item[:name] %>=0
			blue=document.getElementById('stat_compare_blue_<%= item[:name] %>_select_image')
			red=document.getElementById('stat_compare_red_<%= item[:name] %>_select_image')
			blue.style.background="<%= $gray %>"
			blue.style.cursor=''
			red.style.background="<%= $gray %>"
			red.style.cursor=''
		}
	<% end %>
		window.onload = function(){

			//stat_compare_update_day_info()
			$("#stat_dc_main_graph").dxChart({ 
				
				series:[	
					{axis: 'user', name: '<%= t('.blue_day') %>', valueField: 'blue', type: 'Bar',color: '<%= $blue %>' },
					{axis: 'user', name: '<%= t('.red_day') %>', valueField: 'red', type: 'Bar',color: '<%= $red %>' },
					{axis: 'user', name: '<%= t('.same_count') %>', valueField: 'green', type: 'Bar',color: '<%= $green %>' }
							
		
				],
				equalBarWidth: false,
				legend: {visible:true,horizontalAlignment: 'center',verticalAlignment: 'top',itemTextPosition: 'right'},
				tooltip: {
					enabled: true
				},
				valueAxis: [
					{placeholderSize:60,title:{text: '<%= t(:count_opers) %>' ,font: { size: 12 }}, name: 'user' }
				],
				dataSource: stat_compare_date_for_main_graph,
				commonSeriesSettings: {line: {point: {size: 1}},spline: {point: {size: 1}},argumentField:'hour'}
			});
		}
		function stat_compare_add_filter(type,color){
			if (type == 'oper' && stat_compare_selected_oper > 0){
				selected_date_for_request[color+'_'+type]=stat_compare_selected_oper
			}else if(stat_compare_selected_login > 0){
				//console.log('asdf')
				selected_date_for_request[color+'_'+type]=stat_compare_selected_login
				//console.log(selected_date_for_request[color+'_'+type])
				//console.log(color+'_'+type)
			}
			//console.log(selected_date_for_request.red_user)
			if (selected_date_for_request[color+'_'+type] > 0){
				if (type == 'user'){type='login'}
				document.getElementById('stat_compare_'+color+'_'+type+'_select').innerHTML=document.getElementById(type+'_select_field').value
				document.getElementById('stat_compare_'+color+'_'+type+'_select').style.opacity=1
				document.getElementById('stat_compare_'+color+'_'+type+'_select_clear').style.display=''
			}
			stat_compare_update_day_info()
		}
		function stat_compare_clear_filter_selection(type,color){
			selected_date_for_request[color+'_'+type]=0
			stat_compare_update_day_info()
			if (type == 'oper'){
				document.getElementById('stat_compare_'+color+'_'+type+'_select').innerHTML='Операция не выбрана'
				document.getElementById('stat_compare_'+color+'_'+type+'_select').style.opacity=0.6
			}else{
				document.getElementById('stat_compare_'+color+'_login_select').innerHTML='Сотрудник не выбран'
				document.getElementById('stat_compare_'+color+'_login_select').style.opacity=0.6
			}
			document.getElementById('stat_compare_'+color+'_'+type+'_select_clear').style.display='none'
		}
		var stat_compare_date_for_main_graph=[]
		function stat_compare_get_data(){
			class_hide=document.getElementsByClassName('stat_comapre_hide_element')
			document.getElementById('stat_compare_select_container').style.top='-150px'
			for(i=0;i<class_hide.length;i++){
				class_hide[i].style.width='calc(50% - 150px)'
			}
			setTimeout(function(){
				document.getElementById('stat_compare_red_picker_container').style.right='0px'
				document.getElementById('stat_compare_blue_picker_container').style.left='0px'
				for(i=0;i<class_hide.length;i++){
					class_hide[i].style.width='270px'
				}
			},500)
			//document.getElementById('stat_dc_main_graph').style.top='0px'
			
			
			stat_compare_date_for_main_graph.length=0
			for (i=0;i<24;i++){
				stat_compare_date_for_main_graph.push({'hour':i,'red':0,'blue':0,'green':0})
			}
			/*var chart = $("#stat_dc_main_graph").dxChart('instance');
			var renderOptions = {force: true};
			chart.option({dataSource: stat_compare_date_for_main_graph });
			chart.render(renderOptions);*/
			gt_build_table_compare_table(gt_last_sort_compare_table)
			$.getJSON('get_day_compare_for_graph' ,{
				blue_date:document.getElementById('blue_picker_year').value+'-'+document.getElementById('blue_picker_month').value+'-'+document.getElementById('blue_picker_day').value,
				red_date:document.getElementById('red_picker_year').value+'-'+document.getElementById('red_picker_month').value+'-'+document.getElementById('red_picker_day').value,
				blue_oper:selected_date_for_request.blue_oper,
				red_oper:selected_date_for_request.red_oper,
				blue_user:selected_date_for_request.blue_user,
				red_user:selected_date_for_request.red_user,
			}, function(data) {
				for (i=0;i<data.red.length;i++){
					stat_compare_date_for_main_graph[data.red[i].hour].red=data.red[i].count
				}
				for (i=0;i<data.blue.length;i++){
					stat_compare_date_for_main_graph[data.blue[i].hour].blue=data.blue[i].count
				}
				for (i=0;i<stat_compare_date_for_main_graph.length;i++){
					if (stat_compare_date_for_main_graph[i].red == stat_compare_date_for_main_graph[i].blue){
						stat_compare_date_for_main_graph[i].green=stat_compare_date_for_main_graph[i].red
						stat_compare_date_for_main_graph[i].red=0
						stat_compare_date_for_main_graph[i].blue=0
						
					}
					console.log(stat_compare_date_for_main_graph[i].hour,stat_compare_date_for_main_graph[i].red,stat_compare_date_for_main_graph[i].blue,stat_compare_date_for_main_graph[i].green)
				}
				setTimeout(function(){
					var chart = $("#stat_dc_main_graph").dxChart('instance');
					var renderOptions = {force: true};
					chart.option({dataSource: stat_compare_date_for_main_graph });
					chart.render(renderOptions);
				},500)
			}).fail(function(error) {
				show_loading(0)
				error_show(error.statusText,error.status)
  			})
			
		}
		function stat_compare_change_select(){
			class_hide=document.getElementsByClassName('stat_comapre_hide_element')
			for(i=0;i<class_hide.length;i++){
				class_hide[i].style.width='calc(50% - 150px)'
			}
				document.getElementById('stat_compare_red_picker_container').style.right='calc(50% - 420px)'
				document.getElementById('stat_compare_blue_picker_container').style.left='calc(50% - 420px)'
			setTimeout(function(){
				
				for(i=0;i<class_hide.length;i++){
					class_hide[i].style.width='50%'
				}
				document.getElementById('stat_compare_select_container').style.top='0px'
			},500)
		}
		function stat_compare_change_table_type(type){
			stat_compare_table_type=type
			gt_build_table_compare_table(gt_last_sort_compare_table)
			document.getElementById('stat_compare_row1_name').innerHTML= type == 'FO_ID' ? '<%= t(:opers) %>' : '<%= t(:login_s) %>'
		}
		function stat_compare_update_day_info(){
			$.getJSON('get_day_compare_stat_for_day' ,{
				blue_date:document.getElementById('blue_picker_year').value+'-'+document.getElementById('blue_picker_month').value+'-'+document.getElementById('blue_picker_day').value,
				red_date:document.getElementById('red_picker_year').value+'-'+document.getElementById('red_picker_month').value+'-'+document.getElementById('red_picker_day').value,
				blue_oper:selected_date_for_request.blue_oper,
				red_oper:selected_date_for_request.red_oper,
				blue_user:selected_date_for_request.blue_user,
				red_user:selected_date_for_request.red_user,
			}, function(data) {
     		   	<% colors=["red","blue"]
      		  	colors.each do |item| %>
					document.getElementById('stat_compare_detailed_<%= item %>_count_oper').innerHTML=data['<%= item %>'][0].count
					document.getElementById('stat_compare_detailed_<%= item %>_unique_oper').innerHTML=data['<%= item %>'][0].uniq_oper
					document.getElementById('stat_compare_detailed_<%= item %>_count_user').innerHTML=data['<%= item %>'][0].users
				<% end %> 
			}).fail(function(error) {
				show_loading(0)
				error_show(error.statusText,error.status)
  			})
		}
		<% blocks.each do |item| %>
		function date_picker_action_<%= item[:name] %>_picker_after(){
			stat_compare_update_day_info()
		}
		<% end %>
</script>