<div style="width:100%;height:100%;top:0px;left:0px;position:absolute;background:<%= $gray %>;opacity:0.6"></div>
<%  @calendar_view_disable=1    %>
<div style="width:100%;height:100%;top:0px;left:0px;position:absolute;overflow:hidden">
	<div id="login_info_main_container" style="width:500px;left:9px;top:9px;height:350px;border:1px solid <%= $gray %>;position:absolute;background:<%= $white %>;transition:1s">
		<% 
			image=File.file?("app/assets/images/logins_photo/#{@login_info.name}.png")
			image_jpg=File.file?("app/assets/images/logins_photo/#{@login_info.name}.jpg")
			if image == true
				photo = "logins_photo/#{@login_info.name}.png"
				border="border:4px solid #{$d_blue}"
			elsif image_jpg == true
				photo = "logins_photo/#{@login_info.name}.jpg"
				border="border:4px solid #{$d_blue}"
			else
				photo = 'logins_photo/_empty.png'
				border=""
			end
			%>
		<%= image_tag(photo, style: "width:128px;height:128px;top:20px;left:20px;position:absolute;border-radius:75px;#{border}") %>
		<ul class="text_m" style="list-style-type:none;position:absolute;top:0px;width:300px;line-height:40px;left:150px">
			 <li style="font-size:18px"><%= t('.full_name')%>: <b><%= @login_info.full_name == nil ? t('.undefined') :  @login_info.full_name %></b></li>
			 <li><%= t(:login)%>: <b><%= @login_info.name  %></b></li>
			 <li>E-mail: <b><%= @login_info.email == nil ? t('.undefined') :  @login_info.email  %></b></li>
		</ul>
		
		<div style="list-style-type:none;position:absolute;top:180px;width:440px;line-height:25px;left:30px;border-top:2px solid <%= $red %>">
			<ul class="text_m" style="list-style-type:none;padding-left:0px;width:300px">
				 <li><%= t(:offices)%>: <b><%= @login_info.office_name == nil ? t('.undefined') :  @login_info.office_name %></b></li>
				 <li><%= t('.department')%>: <b><%= @login_info.department == nil ? t('.undefined') :  @login_info.department %></b></li>
				 <li><%= t('.phone')%>:<b><%= @login_info.phone == nil ? t('.undefined') :  @login_info.phone %></b></li>
				 <li><%= t('.mobile_phone')%>: <b><%= @login_info.mobile_phone == nil ? t('.undefined') :  @login_info.mobile_phone %></b></li>
			</ul>
			<%
			if @rating_array[:rating] <= 3 
				rating_color=$red
			elsif @rating_array[:rating] > 3 && @rating_array[:rating] < 7
				rating_color=$yellow
			else
				rating_color=$green
			end
				
			%>
			<div style="width:140px;right:0px;top:20px;height:90px;background:<%= rating_color %>;position:absolute;line-height:30px;color:<%= $white %>;font-size:18px" align="center">
				<%= t('.rating')%>:<br>
				<b style="line-height:50px;font-size:42px"><%= @rating_array[:rating] %></b>
			</div>
		</div>
	
		<div onclick="get_to_page('<%= settings_logins_info_index_path %>')" class="href_edit_button" style="position:absolute;bottom:10px;left:30px;width:160px"><%= t('.select_login') %></div>
	</div>

	<div id="login_info_graph_container" style="width:calc(100% - 530px);right:9px;top:9px;height:350px;border:1px solid <%= $gray %>;position:absolute;background:<%= $white %>;transition:1s">
		<div class="text_header_red_line" style="width:600px;height:30px;top:0px;left:10px;"><%= t('.avg_workload_week')%></div>
		<div id="login_info_main_graph" style="width:calc(100% - 20px);height:calc(100% - 60px);left:10px;top:40px;position:absolute">
		
		</div>
	</div>
	
	<div id="login_info_detailed_container" style="width:calc(100% - 20px);left:9px;bottom:9px;height:calc(100% - 380px);border:1px solid <%= $gray %>;position:absolute;background:<%= $white %>;transition:1s">
		<div class="text_header_red_line" style="width:300px;height:30px;top:0px;left:10px;"><%= t('.effectivness_employee')%></div>
		<div id="login_info_perfomance_graph" style="width:400px;top:40px;position:absolute;left:10px;height:calc(100% - 50px)"></div>
		<div style="width:calc(100% - 420px);right:0px;position:absolute;height:calc(100% - 0px);top:0px;border-left:1px solid <%= $gray %>">
			<div class="button" onclick="login_info_update_table(1)" style="width:150px;top:10px;left:10px"><%= t('.by_day')%></div>
			<div class="button" onclick="login_info_update_table(2)" style="width:150px;top:10px;left:170px"><%= t('.by_week')%></div>
			<div class="button" onclick="login_info_update_table(3)" style="width:150px;top:10px;left:330px"><%= t('.by_month')%></div>
			<div style="width:100%;right:0px;position:absolute;height:calc(100% - 50px);top:50px;">
			<%
				#	gt - Глобальная таблица
					@container=''
					@gt_structure=[]	
					@gt_structure.push({:onclick => "", :row_name => t(:date), :value => "'+login_info_date_format(data.data[i])+'", :width => "", :filter => 'date' })
					@gt_structure.push({:onclick => "", :row_name => t(:count), :value => "'+data.data[i].count+'", :width => "width:100px", :filter => 'count' })
					@gt_structure.push({:onclick => "", :row_name => t(:status), :value => "'+build_status_view(data.data[i])+'", :width => "", :filter => 'red' })
					@gt_structure.push({:onclick => "", :row_name => t(:full_time), :value => "'+second_to_hour_converter(data.data[i].duration_sum)+'", :width => "", :filter => 'duration_sum' })
					
					@gt_structure.push({:onclick => "", :row_name => t(:user_time), :value => "'+second_to_hour_converter(data.data[i].user_time_sum)+'", :width => "", :filter => 'user_time_sum' })
					@gt_structure.push({:onclick => "", :row_name => t(:sys_time), :value => "'+second_to_hour_converter(data.data[i].sys_time_sum)+'", :width => "", :filter => 'sys_time_sum' })

			%>
			<%= render partial: "shared/table", locals: {
				name:"login_info_table",
				header:@gt_structure,
				query:"#{params[:id]}/get_login_detailed_info",
				action_after:0,
				time:1,
				add_params:",login_id:#{params[:id]},time_type:login_info_time_type",
				offset:50,
				first_sort:'date;DESC',
				additional_field:@container
			} %>
			</div>
		</div>
		
	</div>
</div>

<script>
	var calendar_from_date=new Date()
	var calendar_to_date=new Date()
	var login_info_time_type = 1
	var login_info_graph_data=<%= raw (@login_week_activity).to_json(:except => [:red,:green,:yellow]) %>
	var login_info_day_of_week=['<%= t(:calendar_sun_full) %>','<%= t(:calendar_mon_full) %>','<%= t(:calendar_tue_full) %>','<%= t(:calendar_wen_full) %>','<%= t(:calendar_thu_full) %>','<%= t(:calendar_fri_full) %>','<%= t(:calendar_sat_full) %>']
	

window.onload = function(){
	login_info_build_graph()
}

function login_info_update_table(date_type){
	login_info_time_type = date_type
	gt_build_table_login_info_table(gt_last_sort_login_info_table)
}
function login_info_date_format(data){
	if (login_info_time_type == 1){
		return nice_date_format(data.date)
	}else if (login_info_time_type == 2){
		return data.week+' <%= t('.week') %> '+data.year
	}else{
		return calendar_month_names[data.month - 1].name+' '+data.year
	}
}
function login_info_build_graph(){
	$("#login_info_main_graph").dxChart({ 
			argumentAxis: {
				tickInterval: 1,
				grid:{visible: true},
				label: {customizeText: function () {
				       		return login_info_day_of_week[this.value];
				       }
				}
			},
			series:[
				{axis: 'valueAxis', name: '', valueField: 'busy', type: 'bar',color: '<%= $blue %>',label:{font:{size:14}, visible: false,backgroundColor:'<%= $blue %>',customizeText: function () {return this.value.toFixed(2)+' <%= t('.oper_hour') %>';}}},
				/*{ 
					valueField: "busy_all", 
					name: "Средний показатель загруженности по всем сотрудникам", 
					color: "<%= $yellow %>", 
					type: "stepline"
				},*/
			],
			valueAxis: [
				{title:{text: '<%= t('.oper_hour') %>' , font: { size: 12 }}, name: 'valueAxis'}
			],
			tooltip: {
				enabled: true,
				customizeText: function () {return this.value.toFixed(2)+' <%= t('.oper_hour_short') %>';}
				
			},
			//title: { text:'Средняя загруженность сотрудника в течении недели',font: {color: '<%= $d_blue %>',size:18}},
			legend: {visible:false,horizontalAlignment: 'center',verticalAlignment: 'top',itemTextPosition: 'right'},
			dataSource: login_info_graph_data,
			commonSeriesSettings: {
				argumentField:'dow',
				stepline: {
				            point: {
				                visible: false
				            }
				        }
			}
		});
		$("#login_info_perfomance_graph").dxPieChart({
		    palette: ['<%= $green %>','<%= $yellow %>','<%= $red %>'],
		    dataSource: [{arg: "<%= t('.time_in_norm') %>",val: <%= @rating_array[:green] %>}, {arg: "<%= t('.time_up_norm') %>",val: <%= @rating_array[:yellow] %>}, {arg: "<%= t('.time_up_kpi') %>",val: <%= @rating_array[:red] %>}],
		    //title: {text:"Эффективность сотрудника",font:{size:18}},
		    tooltip: {
		        enabled: true
		    },
		    legend: {
		        horizontalAlignment: "center",
		        verticalAlignment: "bottom",
		        margin: 0
		    },
		    series: [{
		        type: "doughnut",
		        argumentField: "arg",
		        label: {
		            visible: true,
		            connector: {
		                visible: true
		            }
		        }
		    }]
		});
}
</script>