<?
	$this->title = 'Charts overview';
	$this->subtitle = 'Crunchbutton overview';
	$this->titleicon = 'bar-chart';
?>
<!-- content -->
<div class="container-fluid padded">

	<?php if ( c::admin()->permission()->check( [ 'global', 'metrics-all', 'metrics-main', 'metrics-investors', 'metrics-detailed-analytics', 'metrics-no-grouped-charts' ] ) ) { ?>
	 <div class="box">
			<div class="box-header">
				 <span class="title">Metrics</span>
				 <ul class="box-toolbar">
						<li class="toolbar-link">
							 <a data-toggle="modal" href="#modal-simple"><i class="icon-info-sign"></i></a>
						</li>
				 </ul>
			</div>
			<div class="box-content padded">
			Graphs that don’t work and other problems:
			<br/>
			<strong>Main: </strong>Repeat Order Rate by month. (Repeat Order Rate by week is just slightly inaccurate)
			<br/>
			<strong>Detailed Analytics: </strong> All Graphs
			<br/>
			<strong>Old Graphs: </strong>Churn Rate, Orders per Restaurant by Community (not last 14 days, time period unknown)
			<br/>
			<br/>
Also, anywhere it says "The number of users who _________ in the past 60 days (time period defined at bottom)” it’s not actually the past 60 days, it’s the period defined at the bottom, which is by default 45 days”


				 <?php
						foreach ($this->graphs as $category => $graphs ){
							?>
				 <h5><?php echo $category;?></h5>
				 <?php
						$count = 1;
						foreach ($graphs as $id => $graph ){

							if( $count == 1 ){
									echo '<div class="row-fluid">';
								}
								$title = $graph[ 'title' ];
								$divId = $id;
								?>
				 <div class="span4">
						<div>
							 <input type="checkbox"
									class="icheck cat-<?php echo strtolower( str_replace( ' ', '-', $category ) ); ?>"
									id="checkbox-<?php echo $divId;?>"
									data-divId="<?php echo $divId;?>"
									name="checkbox-<?php echo $divId;?>">
							 <label for="checkbox-<?php echo $divId;?>"><?php echo $title; ?></label>
						</div>
				 </div>
				 <?
						if( $count % 3 == 0 ){
							echo '</div>';
							$count = 0;
						}
						$count++;
						}
						if( $count != 1){ echo '</div>'; }
						?>
				 <hr/>
				 <?
						foreach ( $graphs as $id => $graph ){
							$chart = $graph[ 'url' ];
							$activeDays = ( $graph[ 'activeDays' ] ) ? $graph[ 'activeDays' ] : 45;
							$divId = $id;
							echo '<div id="' . $divId . '" data-active-days="' . $activeDays . '" data-permalink="' . $chart . '" class="chart" style="display:none;width:49%;min-height:420px;;float:left;border-bottom:1px solid #CCC;"><i class="icon-spinner icon-spin"></i> Loading </div>';
						} ?>
						<div style="clear:both;"></div>

				 <?php
						}
					?>
			<!-- Settings -->
			 <div class="row-fluid">
						<div class="span2">
							<div>
								<b>Active user (days)</b>
							</div>
							<div>
								<input name="active-user-days" class="span12" id="active-user-days" type="number" placeholder="days" value="45">
							</div>
						</div>
						<div class="span2">
							<div>
								<b>Community</b>
							</div>
							<div>
								<?php
									$communities = Restaurant::getCommunities();
								?>
								<select name="filter-by-community" id="filter-by-community" class="span10">
									<option value="">Ignore filter</option>
									<option value="all">All</option>
									<?php
										foreach( $communities as $community ){
											echo '<option value="' . $community . '">' . $community . '</option>';
										}
									?>

								</select>
							</div>
						</div>
						<div class="span6">
							 <div id="slider-master"></div>
							 <br />
							 <div id="slider-label"></div>
						</div>
						<div class="span2">
							 <button class="btn btn-blue" id="button-reload" title="Reload all charts"><i class="icon-refresh"></i></button>
							 &nbsp;
							 <button class="btn btn-green" id="button-open-all" title="Open all">Open all</button>
						</div>
						<div class="clearfix"></div>
						<hr/>
				 </div>
			</div>
	 </div>
	 <?php } ?>
</div>
<div id="modal-simple" class="modal hide fade" style="display: none;" aria-hidden="true">
	 <div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h6 id="modal-tablesLabel">Metrics info</h6>
	 </div>
	 <div class="modal-body">
			<h4>Communities</h4>
			<?php
				 $communities = Crunchbutton_Restaurant::getCommunities();
				 foreach( $communities as $community ){
					?>
			<b><?php echo $community; ?></b> <br/>
			<ul>
				 <?php
						$restaurants = Crunchbutton_Restaurant::getRestaurantsByCommunity( $community );
						foreach( $restaurants as $restaurant ){
							?>
				 <li><?php echo  $restaurant->name; ?></li>
				 <?php
						}
						?>
			</ul>
			<?php
				 }
				 ?>
			<?php if ( c::admin()->permission()->check( ['global','metrics-manage-cohorts'] ) ) { ?>
				<h4>Cohorts</h4>
				<a href="/charts/cohort/" class="btn btn-green"><i class="icon-group"></i> Manage cohorts </a>
			<?php } ?>
	 </div>
	 <div class="modal-footer">
			<button class="btn btn-default" data-dismiss="modal">Close</button>
	 </div>
</div>
<script type="text/javascript">

	var activeDaysChanged = false;

	 $( document ).ready( function(){

	 	$( '#active-user-days' ).change( function(){
	 		activeDaysChanged = true;
	 	} );

		$( '.icheck' ).on( 'ifChanged', function( event ){
			var check = $( this );
			var divId = check.attr( 'data-divId' );
			var chart = $( '#' + divId );
			var title = chart.attr( 'data-title' );
			if( check.is( ':checked' ) ){
				chart.show();
				if( !chart.attr( 'opened' ) ){
					loadChart( { 'divId' : divId  } );
				}
			} else {
				chart.attr( 'opened', false );
				chart.hide();
			}
		});

		$( '#button-open-all' ).click( function(){
			$( '.icheck' ).iCheck( 'check' );
		} );

		$( '#button-reload' ).click( function(){
			$( '.chart' ).each( function(){
				var chart = $( this );
				if( chart.attr( 'opened' ) == 'true'  ){
					var permalink = chart.attr( 'data-permalink' );
					var params = { 'divId' : chart.attr( 'id' ), 'permalink' : permalink, 'force' : true, 'interval' : 'week' };
					loadChart( params );
					$( '#button-reload' ).find( 'i' ).addClass( 'icon-spin ' );
					setTimeout( function(){
						$( '#button-reload' ).find( 'i' ).removeClass( 'icon-spin ' );
					}, 2000 );
				}
			} );
		} );

		/* Load the weeks */
		var url = '/home/charts/weeks';
		$.ajax( { dataType: 'json', url: url, } ).done(
			function( weeks ) {
				var total = weeks.length;
				$( '#slider-label' ).html( 'Show from <b>' + weeks[ 0 ] + '</b> to <b>' + weeks[ total - 1 ] + '</b>' );
				$( '#slider-master' ).attr( 'data-from', 1 );
				$( '#slider-master' ).attr( 'data-to', total );
				$( '#slider-master' ).slider( {
						range: true,
						min: 1,
						values: [ 1, total ],
						max: total,
						slide: function( event, ui ) {
							$( '#slider-label' ).html( 'Show from <b>' + weeks[ ui.values[ 0 ] - 1 ] + '</b> to <b>' + weeks[ ui.values[ 1 ] - 1 ] + '</b>' );
							$( '#slider-master' ).attr( 'data-from', ui.values[ 0 ] );
							$( '#slider-master' ).attr( 'data-to', ui.values[ 1 ] );
						}
					} );
		} );

		/* the main charts start opened */
		$( '.cat-main' ).iCheck( 'check' );

	 } );

	 function loadChart( info ){

		var divId = info[ 'divId' ];

		var chart = $( '#' + divId );

		if( activeDaysChanged ){
			var activeUserDays = $( '#active-user-days' ).val();
		} else {
			var activeUserDays = chart.attr( 'data-active-days' );
		}

		var params = { 'activeUserDays' : activeUserDays };

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

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

		if( info[ 'permalink' ] ){
			var permalink = info[ 'permalink' ];
		} else {
			var permalink = chart.attr( 'data-permalink' );
		}

		chart.attr( 'data-permalink', permalink );

		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' );
			}
		}

		if( info[ 'force' ] ){

			var weekFrom = $( '#slider-master' ).attr( 'data-from' );
			var weekTo = $( '#slider-master' ).attr( 'data-to' );

			if( weekFrom && weekFrom != '' && typeof weekFrom != 'undefined' ){
				params[ 'from' ] = weekFrom;
			}
			if( weekTo && weekTo != '' && typeof weekTo != 'undefined' ){
				params[ 'to' ] = weekTo;
			}
		}

		if( $('#filter-by-community').val() != '' ){
			params[ 'filter' ] = 'community';
			params[ 'community' ] = $('#filter-by-community').val();
		}

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

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

	 if( info[ 'force' ] ){
			chart.html( '<i class="icon-spinner icon-spin"></i> Loading </div>' );
		}

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

		chart.attr( 'opened', true );
	 }

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