<div class="row">
	<div class="col-sm-6">
		<p class="lead">&nbsp; At a glance</p>
	</div>

	<div class="col-sm-6">
		<div id="reportrange" class="pull-right" ng-model="helpers.dates" ng-daterangepicker data-ranges="helpers.daterangepicker.ranges" data-format="MMMM D, YYYY">
			<i class="fa fa-calendar fa-lg"></i>
			<span>{[{ helpers.dates.startDate.format('MMMM D, YYYY') }]} - {[{ helpers.dates.endDate.format('MMMM D, YYYY') }]}</span> <b class="caret"></b>
		</div>
	</div>

</div>

<div class="row">
    
	<div class="col-sm-3">
        @if ( Auth::user()->isMemberOf(4))
			<div class="widget-content">
				<p class="lead">Income</p>
				<div data-stats-income="" data-start-date="helpers.dates.startDate" data-end-date="helpers.dates.endDate"></div>
			</div>
        @endif
        
        @if ( Auth::user()->isMemberOf(4) || Auth::user()->isMemberOf(14))
		<div class="widget widget-classic">
			<div class="widget-content">
				<p class="lead">Customer Feedback</p>
				<div feedback-list data-reverse="true"></div>
			</div>
		</div>
        @endif
	</div>

	<div class="col-sm-9">
    @if ( Auth::user()->isMemberOf(4))
		<div class="row">

            <div class="col-sm-4">
				<div class="widget widget-classic">
					<div class="widget-content">
						<p class="lead">Average pick-up time</p>
                        <dl class="dl-horizontal">
                            <dt>Repairs:</dt>
                            <dd>5 hours</dd>
                            <dt>Remote support:</dt>
                            <dd>30 minutes</dd>
                        </dl>
                        <span class="text-danger text-center">Not implemented</span>
                        <!-- <br> Add an empty line to have equal heights -->
					</div>
				</div>
			</div>

            <div class="col-sm-4">
				<div class="widget widget-classic">
					<div class="widget-content">
						<p class="lead">Average completion time</p>
						<dl class="dl-horizontal">
							<dt>Repairs:</dt>
							<dd>2 days</dd>
							<dt>Remote support:</dt>
							<dd>30 minutes</dd>
							<dt>Onsite:</dt>
							<dd>2 hours</dd>
						</dl>
					</div>
				</div>
			</div>

            <div class="col-sm-4">
				<div class="widget widget-classic">
					<div class="widget-content">
						<p class="lead">Average feedback</p>
						<div data-stats-average-feedback="" data-start-date="helpers.dates.startDate" data-end-date="helpers.dates.endDate"></div>
					</div>
				</div>
			</div>
            
		</div>

		<!-- Render the pie charts -->
		<div class="row">

            <div class="col-sm-4">
				<div class="widget widget-classic">
					<div class="widget-content">
						<p class="lead">Repairs</p>
						<div data-stats-piechart data-type="repair" data-start-date="helpers.dates.startDate" data-end-date="helpers.dates.endDate"></div>
					</div>
				</div>
			</div>

            <div class="col-sm-4">
				<div class="widget widget-classic">
					<div class="widget-content">
						<p class="lead">Remote Support</p>
						<div data-stats-piechart data-type="support" data-start-date="helpers.dates.startDate" data-end-date="helpers.dates.endDate"></div>
					</div>
				</div>
			</div>

            <div class="col-sm-4">
				<div class="widget widget-classic">
					<div class="widget-content">
						<p class="lead">Onsite</p>
						<div data-stats-piechart data-type="onsite" data-start-date="helpers.dates.startDate" data-end-date="helpers.dates.endDate"></div>
					</div>
				</div>
			</div>
            
		</div>

		<!-- Render the QA pie charts -->
		<div class="row">

            <div class="col-sm-4">
				<div class="widget widget-classic">
					<div class="widget-content">
						<p class="lead">Repairs QA</p>
						<div data-stats-piechart data-type="qa" data-qa-type='repair' data-data-type='count' data-start-date="helpers.dates.startDate" data-end-date="helpers.dates.endDate"></div>
					</div>
				</div>
			</div>

            <div class="col-sm-4">
				<div class="widget widget-classic">
					<div class="widget-content">
						<p class="lead">Remote Support QA</p>
						<div data-stats-piechart data-type="qa" data-qa-type='support' data-data-type='count' data-start-date="helpers.dates.startDate" data-end-date="helpers.dates.endDate"></div>
					</div>
				</div>
			</div>
            
			 

            <div class="col-sm-4">
				<div class="widget widget-classic">
					<div class="widget-content">
						<p class="lead">Onsite QA</p>
						<div data-stats-piechart data-type="qa" data-qa-type='onsite' data-data-type='count' data-start-date="helpers.dates.startDate" data-end-date="helpers.dates.endDate"></div>
					</div>
				</div>
			</div>
            
		</div>
        @endif
        
		<!-- Render the line chart -->
        @if ( Auth::user()->isMemberOf(4))
		<div data-labour-points-graph="" data-start-date="helpers.dates.startDate" data-end-date="helpers.dates.endDate"></div>
        @endif
        
		<!-- Render the table of users -->
        @if ( Auth::user()->isMemberOf(4) || Auth::user()->isMemberOf(14))
		<div class="widget widget-classic">
			<div class="widget-content">
				<p class="lead">Users summary</p>
				<div data-stats-users-list="" data-start-date="helpers.dates.startDate" data-end-date="helpers.dates.endDate"></div>
			</div>
		</div>
        @endif

	</div>
</div>

