<div id="csLoadingBar" class="csLoadingBar"></div>
<div id="ticketCharts" class="ticketCharts" style="visibility: hidden;">
    <div ng-controller="ticketChartsCtrl" id="ticketChartsCtrl">
        <div id="resultMessage" ng-show="showAlert"
             class="result-message userSearch alert {{resultMessageClass}}">
            <i class="{{resultMessageClassExt}}"></i> {{resultMessage}}
        </div>
        <div id="ticketChartsApplication">



            <ul class="nav nav-tabs addonMenu row-fluid" id="addonMenu">


                <li class="span4">

                    <div style="position: relative">

                        <div class="chartsDiv">
                            <div class="chartsManagement">
						<select name="spaces" id="space" class="spaces"
                        ng-options="space.name for space in spaces track by space.groupId"
                        ng-model="selectedSpace" ng-change="getSpaceData(selectedSpace.groupId)" ng-show="showSpaces">
						</select>
                            </div>
                        </div>

                    </div>


                </li>


                <li ng-hide="showSpaceCharts" class="span4 timerangPicker">
                    <md-date-range ng-model="pickerModel" md-on-select="setRange($dates)" auto-confirm="true"  style="float:  left; width: 85%;"> </md-date-range>
                    <button type="button" class="btn btn-primary" id="saveType" ng-click="getAll()" style="float: left; text-align: center; height: 34px;" ng-show="showGetAll">All</button>
                </li>
                <li ng-hide="showSpaceCharts"  class="item  span1" id="chartsTab">
                    <a class="" ng-click="openTab('charts')">
                        <i class="uiIconViewStatistic"></i>
                        <span class="tabName">{{i18n.charts}}</span>
                    </a>
                </li>
                <li ng-hide="showSpaceCharts" class="item active span1" id="trendsTab">
                    <a class="" ng-click="openTab('trends');">
                        <i class="uiIconViewByChart"></i>
                        <span class="tabName show-calender">{{i18n.trends}}</span>
                    </a>
                </li>



            </ul>



        <!--begin trends tab-->

        <div ng-hide="showSpaceCharts" id="trends" class="tabcontent" style="display: block;">

            <div  class="row-fluid trends_page">
				     <div class="span12 metrics">
					    <div class="span4">
                            <div class="metric">
							<h5 class="description">{{i18n.customerSatisfactionPrc}}</h5>
                                <h2 class="value cs">
                                    
									<div class="satisfaction">
										<span>{{customerSatisfactionPrc}} % 
										<small>Total: {{customerTotalVotes}}</small>
										</span>
									</div> 
                                </h2>
                                
                                <div class="separator"></div>
                            </div>
                        </div>
					
                        <div class="span4">
                            <div class="metric">
							<h5 class="description">{{i18n.firstTimeResponceAverage}}</h5>
                                <h2 class="value cs">
									<div class="time">
										<span>{{firstTimeResponceAverage.day}}
											<small>{{i18n.day}}</small>
										</span>
										<span>{{firstTimeResponceAverage.hour}}
											<small>{{i18n.hour}}</small>
										</span>
										<span>{{firstTimeResponceAverage.minute}}
											<small>{{i18n.minute}}</small>
										</span>
									</div> 
								</h2>
                                
                                <div class="separator"></div>
                            </div>
                        </div>
                        <div class="span4">
                            <div class="metric">
							<h5 class="description">{{i18n.timeToResolutionAverage}}</h5>
                                <h2 class="value cs">
									<div class="time">
										<span>{{timeToResolutionAverage.day}}
											<small>{{i18n.day}}</small>
										</span>
										<span>{{timeToResolutionAverage.hour}}
											<small>{{i18n.hour}}</small>
										</span>
										<span>{{timeToResolutionAverage.minute}}
											<small>{{i18n.minute}}</small>
										</span>
									</div>                                </h2>
                                
                                <div class="separator"></div>
                            </div>
                        </div>

                    </div>	
					 </div>
				
				    <select name="timeMetricslinePeriod" class="periodSelect" id="timeMetricslinePeriodSelect" ng-model="timeMetricslinePeriod" ng-change="getTimeMetricsChart()">
							<option value="weekly">{{i18n.weekly}}</option>
							<option value="monthly">{{i18n.monthly}}</option>
					</select>
					 
					 <div class="span10" style="float: none; margin: auto; height: auto">
                        <div google-chart chart="timeMetricslineChartObject" agc-on-select="hideTimeToFirstResponseSeries(selectedItem)" width="800" height="350"></div>
                    </div>
					
			
								
				 <select name="openVSClosedLinePeriod" class="periodSelect" id="openVSClosedLinePeriodSelect" ng-model="openVSClosedLinePeriod" ng-change="getOpenVSClosedLineChartData()">
							<option value="daily">{{i18n.daily}}</option>
							<option value="weekly">{{i18n.weekly}}</option>
							<option value="monthly">{{i18n.monthly}}</option>
					</select>
					
                    <div class="span10" style="float: none; margin: auto; height: auto">
                        <div google-chart chart="lineClvsOpChartObject" agc-on-select="hideClvsOpSeries(selectedItem)" width="800" height="350"></div>
                    </div>
					
				
				 <select name="logbyStatusChartPeriod" class="periodSelect" id="logbyStatusChartPeriod" ng-model="logbyStatusChartPeriod" ng-change="getLogbyStatusChartData()">
							<option value="daily">{{i18n.daily}}</option>
							<option value="weekly">{{i18n.weekly}}</option>
							<option value="monthly">{{i18n.monthly}}</option>
					</select>

                    <div class="span10" style="float: none; margin: auto; height: auto">
                        <div google-chart chart="lineLogbyStatusChartObject" agc-on-select="hideLogbyStatusSeries(selectedItem)" width="800" height="350"></div>
                    </div>




           

        </div>
        <!--end trends tab-->
		
		            <!--begin Graphs tab-->
            <div id="charts" class="tabcontent active" style="display: none;">


                <div class="row-fluid" style="margin: auto; height: auto">

                <div class="span12" ng-show="showAllCustomerCharts">




                <div class="span10" style="float: none; margin: auto; height: auto">
                    <div google-chart class="" chart="pieChartClosedVsOpenedObject" style="height:600px; width:100%;"></div>
                </div>

                <div class="span10" style="float: none; margin: auto; height: auto">
                    <div google-chart class="" chart="pieChartByStatusObject" style="height:600px; width:100%;"></div>
                </div>

                <div class="span10" style="float: none; margin: auto; height: auto">
                    <div google-chart class="" chart="columnChartBySpaceObject" style="height:600px; width:100%;"></div>
                </div>

                <div class="span10" style="float: none; margin: auto; height: auto">
                    <div google-chart class="" chart="pieChartBySpaceObject" style="height:600px; width:100%;"></div>
                </div>

                <div class="span10" style="float: none; margin: auto; height: auto">
                    <div google-chart class="" chart="pieChartByOwnerObject" style="height:600px; width:100%;"></div>
                </div>
                </div>
                <div class="span12" ng-show="showSpaceCharts">
				
				            <div  class="row-fluid trends_page">
				     <div class="span12 metrics">
					    <div class="span4">
                            <div class="metric">
							<h5 class="description">{{i18n.customerSatisfactionPrc}}</h5>
                                <h2 class="value cs">
                                    
									<div class="satisfaction">
										<span>{{customerSatisfactionPrc}} % 
										<small>Total: {{customerTotalVotes}}</small>
										</span>
									</div> 
                                </h2>
                                
                                <div class="separator"></div>
                            </div>
                        </div>
					
                        <div class="span4">
                            <div class="metric">
							<h5 class="description">{{i18n.firstTimeResponceAverage}}</h5>
                                <h2 class="value cs">
									<div class="time">
										<span>{{firstTimeResponceAverage.day}}
											<small>{{i18n.day}}</small>
										</span>
										<span>{{firstTimeResponceAverage.hour}}
											<small>{{i18n.hour}}</small>
										</span>
										<span>{{firstTimeResponceAverage.minute}}
											<small>{{i18n.minute}}</small>
										</span>
									</div> 
								</h2>
                                
                                <div class="separator"></div>
                            </div>
                        </div>
                        <div class="span4">
                            <div class="metric">
							<h5 class="description">{{i18n.timeToResolutionAverage}}</h5>
                                <h2 class="value cs">
									<div class="time">
										<span>{{timeToResolutionAverage.day}}
											<small>{{i18n.day}}</small>
										</span>
										<span>{{timeToResolutionAverage.hour}}
											<small>{{i18n.hour}}</small>
										</span>
										<span>{{timeToResolutionAverage.minute}}
											<small>{{i18n.minute}}</small>
										</span>
									</div>                                </h2>
                                
                                <div class="separator"></div>
                            </div>
                        </div>

                    </div>	
					 </div>
				
				
                <div class="span10" style="float: none; margin: auto; height: auto">
                    <div google-chart class="" chart="pieChartSpaceByStatusObject" style="height:600px; width:100%;"></div>
                </div>
                <div class="span10" style="float: none; margin: auto; height: auto">
                    <div google-chart class="" chart="pieChartSpaceByOwnerObject" style="height:600px; width:100%;"></div>
                </div>
                <div class="span10" style="float: none; margin: auto; height: auto">
                    <div google-chart class="" chart="pieChartSpaceByAssigneeObject" style="height:600px; width:100%;"></div>
                </div>
                </div>

                </div>
					<div class="span12" style="float: none; margin: auto; height: auto" ng-show="!showGraphs">
                    <h3 class="chartsDiv no-graph">{{i18n.noChart}}</h3>
                </div>
            </div>
        </div>
        <!--end Graphs tab-->

</div>

