<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="spacesTypeSelect" class="spaces" id="spacesTypeSelect" ng-model="spacesType" ng-change="setSpacesType()" ng-show="showSpaces">
							<option value="customer">Customer Spaces</option>
							<option value="internal">Internal Spaces</option>
						</select>
						<select name="spaces" id="space" class="spaces"
                        ng-options="space.name for space in spaces | filter:internalFilter  track by space.groupId"
                        ng-model="selectedSpace" ng-change="getSpaceData(selectedSpace.groupId)" ng-show="showSpaces">
						</select>
                        </div>
                        </div>

                    </div>


                </li>


                <li id="timerangPicker" class="span4 timerangPicker">
                 <button type="button" class="btn btn-primary" id="saveType" ng-click="getAll()" style="float: right; text-align: center; height: 34px;" ng-show="showGetAll">All</button>
                    <md-date-range ng-model="pickerModel" md-on-select="setRange($dates)" auto-confirm="true">

               </md-date-range>
                </li>
                <li  class="item  span1" id="chartsTab">
                    <a class="" ng-click="openTab('charts')">
                        <i class="uiIconViewStatistic"></i>
                        <span class="tabName">{{i18n.charts}}</span>
                    </a>
                </li>
                <li  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 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>
				<div class="chartsArea">
                    <h4 class="titleWithBorder pull-left" style="width: 89%">{{i18n.customerSatlineChart}}</h4>
				    <select name="satisfactionLinePeriod" class="periodSelect" id="satisfactionlinlinePeriodSelect" ng-model="satisfactionLinePeriod" ng-change="getSatisfactionChart()">
							<option value="weekly">{{i18n.weekly}}</option>
							<option value="monthly">{{i18n.monthly}}</option>
					</select>
					 
					
                        <div google-chart chart="cSatlineChartObject" agc-on-select="hideSatisfactionSeries(selectedItem)"  width="800" height="350"></div>
                </div> 
				<div class="chartsArea">				
					<h4 class="titleWithBorder pull-left" style="width: 89%">{{i18n.timeMetricslineChart}}</h4>
					<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 google-chart chart="timeMetricslineChartObject" agc-on-select="hideTimeToFirstResponseSeries(selectedItem)" v></div>
                    
				</div> 
				<div class="chartsArea">	
			
				<h4 class="titleWithBorder pull-left" style="width: 89%">{{i18n.openVSClosedLineChart}}</h4>
				 <select name="openVSClosedLinePeriod" class="periodSelect" id="openVSClosedLinePeriodSelect" ng-model="openVSClosedLinePeriod" ng-change="getOpenVSClosedLineChartData()">
							<option value="weekly">{{i18n.weekly}}</option>
							<option value="monthly">{{i18n.monthly}}</option>
					</select>
					
                        <div google-chart chart="lineClvsOpChartObject" agc-on-select="hideClvsOpSeries(selectedItem)"  width="800" height="350"></div>
				</div> 
				<div class="chartsArea">	
				<h4 class="titleWithBorder pull-left" style="width: 89%">{{i18n.lineLogbyStatusChart}}</h4>
				 <select name="logbyStatusChartPeriod" class="periodSelect" id="logbyStatusChartPeriod" ng-model="logbyStatusChartPeriod" ng-change="getLogbyStatusChartData()" >
							<option value="weekly">{{i18n.weekly}}</option>
							<option value="monthly">{{i18n.monthly}}</option>
					</select>

                        <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 chartsArea" style="margin: auto; height: auto">
                <div class="span12">


                <div  ng-show="currentSpace==''" class="span6" style="float: left; margin: auto; height: auto">
                    <div google-chart class="" chart="pieChartBySpaceObject" agc-on-select="getTicketsFilteredBySpace(selectedItem)"  style="height:600px; width:100%;"></div>
                </div>

				
				<div class="span6" style="float: left; margin: auto; height: auto">
                    <div google-chart class="" chart="pieChartByAssigneeObject" agc-on-select="getTicketsFilteredByAssignee(selectedItem)"  style="height:600px; width:100%;"></div>
                </div>	
				
				
                <div class="span6" style="float: left; margin: auto; height: auto">
                    <div google-chart class="" chart="pieChartByOwnerObject" agc-on-select="getTicketsFilteredByOwner(selectedItem)"  style="height:600px; width:100%;"></div>
                </div>


				<div class="span6" style="float: left; margin: auto; height: auto">
                    <div google-chart class="" chart="pieChartBySeverityObject" agc-on-select="getTicketsFilteredBySeverity(selectedItem)"  style="height:600px; width:100%;"></div>
                </div>

                <div class="span6" style="float: left; margin: auto; height: auto">
                    <div google-chart class="" chart="pieChartByStatusObject" agc-on-select="getTicketsFilteredByStatus(selectedItem)"  style="height:600px; width:100%;"></div>
                </div>

                <div class="span6" style="float: left; margin: auto; height: auto">
                    <div google-chart class="" chart="pieChartClosedVsOpenedObject" agc-on-select="getClosedVsOpened(selectedItem)" style="height:600px; width:100%;"></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>
        </div>
        <!--end Graphs tab-->

</div>

