<?
	$this->title = 'Community metrics';
	$this->subtitle = 'Crunchbutton overview';
	$this->titleicon = 'bar-chart';

	$communities = $this->communities;

?>
<div class="container-fluid padded">
	<div class="box">
		<div class="box-header">
			 <span class="title">Community metrics</span>
		</div>
		<div class="box-content padded">
			<div class="row-fluid">
			<h3>Communities</h3>

			<?php foreach( $communities as $community ) { ?>
				 <div class="span3">
						<div>
							<?php
								$restaurants = $community->totalRestaurantsByCommunity()[ 'community' ];
							?>
							 <input type="checkbox"
									class="icheck"
									id="checkbox-<?php echo $community->id_community;?>"
									community="<?php echo $community->id_community;?>"
									name="checkbox-<?php echo $community->id_community;?>">
							 <label for="checkbox-<?php echo $community->id_community;?>"><?php echo $community->name; ?> ( <?php echo $restaurants; ?> restaurants )</label>
						</div>
				 </div>

			<?php } ?>
		</div>
		<hr/>
		<?php if (c::admin()->permission()->check(['global', 'metrics-all'])) { ?>
		<div>
			<a href="/charts/community/delivery-tips">
				Delivery fees + Tips Graphs
			</a> &nbsp; | &nbsp;
			<a href="/charts/community/orders-per-day">
				Orders per Day By Community - Last 14 Days
			</a>
		</div>
		<hr/>
		<?php } ?>
		<?php foreach( $communities as $community ) { ?>

		<?php $restaurants = $community->totalRestaurantsByCommunity()[ 'community' ]; ?>

		<div class="container-<?php echo $community->id_community; ?>" style="display:none;">

				<center><h3><?php echo $community->name; ?> ( <?php echo $restaurants; ?> restaurants )</h3></center>

				<div class="row-fluid">

					<div type="orders" class="span3 orders- <?php echo $community->id_community; ?>" id="orders-<?php echo $community->id_community; ?>" community="<?php echo $community->id_community; ?>"></div>
					<div type="new-users" class="span3 new-users <?php echo $community->id_community; ?>" id="new-users-<?php echo $community->id_community; ?>" community="<?php echo $community->id_community; ?>"></div>

					<div type="repeated-orders" class="span3 repeated-orders <?php echo $community->id_community; ?>" id="repeated-orders-<?php echo $community->id_community; ?>" community="<?php echo $community->id_community; ?>"></div>

					<div type="gross-revenue" class="span3 group-revenue-by <?php echo $community->id_community; ?>" id="group-revenue-by-<?php echo $community->id_community; ?>" community="<?php echo $community->id_community; ?>"></div>

				</div>

				<div class="row-fluid">

					<div type="users-rate" class="span3 group-user-rate <?php echo $community->id_community; ?>" id="group-user-rate-<?php echo $community->id_community; ?>" community="<?php echo $community->id_community; ?>"></div>

					<div type="per-weekday" class="span3 group-per-weekday <?php echo $community->id_community; ?>" id="group-per-weekday-<?php echo $community->id_community; ?>" community="<?php echo $community->id_community; ?>"></div>

					<div type="per-hour" class="span3 group-per-hour <?php echo $community->id_community; ?>" id="group-per-hour-<?php echo $community->id_community; ?>" community="<?php echo $community->id_community; ?>"></div>


					<div type="avg-delivery-time" class="span3 group-avg-delivery-time <?php echo $community->id_community; ?>" id="group-avg-delivery-time-<?php echo $community->id_community; ?>" community="<?php echo $community->id_community; ?>"></div>

				</div>

				<div class="row-fluid">

					<div type="orders-delivered-in-greater-than-60-min" class="span3 group-orders-delivered-in-greater-than-60-min <?php echo $community->id_community; ?>" id="group-orders-delivered-in-greater-than-60-min-<?php echo $community->id_community; ?>" community="<?php echo $community->id_community; ?>"></div>

					<div type="past-orders" class="span3 group-past-orders <?php echo $community->id_community; ?>" id="group-past-orders-<?php echo $community->id_community; ?>" community="<?php echo $community->id_community; ?>"></div>


				</div>


				<hr/>

		</div>

		<?php } ?>

		</div>
	</div>
</div>
<script type="text/javascript">

function loadChartsOfCommunity( community ){

	if ( typeof community == 'undefined' ) {
		return;
	}

	$( '.container-' + community ).show();
	$( '.' + community ).each( function(){

		var area = $( this );
		var chart = area.attr( 'id' );
		var type = area.attr( 'type' );
		var partial = '';
		var more_info = '';
		switch( type){
			case 'orders':
				partial = 'orders-per-day-by-community/group-orders-community';
				break;
			case 'new-users':
				partial = 'users-new-per-week-by-community/group-new-users-community';
				break;
			case 'repeated-orders':
				partial = 'orders-repeat-week-by-community/group-users-repeat-community';
				break;
			case 'gross-revenue':
				partial = 'gross-revenue-per-week-by-community/group-revenue-by-community';
				break;
			case 'users-rate':
				partial = 'users-new-per-active-users-per-week-by-community/group-new-users-per-active-user-by-community';
				break;
			case 'per-weekday':
				partial = 'orders-per-weekday-by-community/group-orders-per-weekday-by-community';
				more_info = '&hideSlider=1';
				break;
			case 'per-hour':
				partial = 'orders-per-hour-by-community/group-orders-per-hour-by-community';
				more_info = '&hideSlider=1';
				break;
			case 'avg-delivery-time':
				partial = 'median-delivery-time-community-per-week-by-community/group-orders-median-delivery-time-community';
				more_info = '&hideSlider=1';
				break;
			case 'orders-delivered-in-greater-than-60-min':
				partial = 'orders-delivered-in-greater-than-60-min-community/group-orders-delivered-in-greater-than-60-min-community';
				more_info = '&hideSlider=1';
				break;
			case 'past-orders':
				partial = 'past-orders-per-restaurant-by-community/group-past-orders-per-restaurant-by-community';
				more_info = '&hideSlider=1';
				break;
		}
		var url = '/home/charts/' + partial + '/?activeUserDays=45&=1&community=' + community + more_info;
		$.ajax( { url: url, } ).done( function( data ) { area.html( data ); } );
	} );
}


$( document ).ready( function(){

	$( '.icheck' ).on( 'ifChanged', function( event ){

		var check = $( this );
		var community = check.attr( 'community' );
		var container = $( '.container-' + community );
		if( check.is( ':checked' ) ){
			if( !container.attr( 'loaded' ) ){
				loadChartsOfCommunity( community );
				container.attr( 'loaded', true );
			}
			container.show();
		} else {
			container.hide();
		}
	});

<!--	--><?php //foreach( $communities as $community ) {
//		if( $community->hasShiftThisWeek() ){ ?>
//			$( '#checkbox-<?php //echo $community->id_community;?>//' ).iCheck( 'check' );
//	<?php
//		}
//	 } ?>

} );

	function loadChart( info ){

		var divId = info[ 'divId' ];
		var permalink = info[ 'permalink' ];
		var chart = $( '#' + divId );
		chart.attr( 'data-permalink', permalink );
		var params = { 'community' : info[ 'community' ] };

		if( info[ 'interval' ] ){
			params[ 'interval' ] = info[ 'interval' ];
		}

		var slider = $( '#slider-' + divId );
		if( slider.length > 0 ){
			if( slider.attr( 'data-from' ) ){
				params[ 'from' ] = slider.attr( 'data-from' );
			}
			if( slider.attr( 'data-to' ) ){
				params[ 'to' ] = slider.attr( 'data-to' );
			}
		}

		var strParams = "?";
		for ( var key in params ) {
			if ( strParams != "?" ) {
				strParams += "&";
			}
			strParams += key + "=" + params[key];
		}

		var group = divId.replace( '-' + info[ 'community' ], '' );

		var url = '/home/charts/' + permalink + '/' + divId + '/' + strParams;

		chart.html( '<i class="icon-spinner icon-spin"></i> Loading </div>' );

		$.ajax( { url: url, }).done( function( data ) { chart.html( data ); } );

	}

	function loadSubChart( id ){
		var select = $( id );
		var divId = $( '#' + id ).attr( 'data-divId' );
		var slider = $( '#slider-' + divId );
		slider.attr( 'data-from', false );
		slider.attr( 'data-to', false );
		var values = $( '#' + id + ' option:selected' ).val().split( '|' );
		var interval = values[ 1 ];
		var community = $( '#' + id ).attr( 'community' );
		var permalink = values[ 0 ].replace( '-' + community, '' );
		$( '#' + divId ).html( '<i class="icon-spinner icon-spin"></i> Loading </div>' );
		 loadChart( { 'divId' : divId, 'permalink' : permalink, 'interval' : interval, 'community' : community } );
	}
</script>