{extends file="admin-layout.tpl"}

{block name="page-title"}{intl l='Back-office home'}{/block}

{block name="main-content"}
	<div class="homepage">
	      <div id="wrapper" class="container">

		    {module_include location='home_top'}
			
			<div class="col-md-12 general-block-decorator dashboard">

				<div class="title title-without-tabs clearfix">
					{intl l='Dashboard'}
					<div class="btn-group pull-right">
						<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-chevron-left"></span></button>
						<button type="button" class="btn btn-default disabled"><span class="glyphicon glyphicon-calendar"></span></button>
						<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-chevron-right"></span></button>
					</div>
				</div>	
				
				<div class="text-center clearfix">
					<div class="btn-group">
						<button type="button" class="btn btn-default active" data-toggle="jqplot" data-target="turnover"><span class="glyphicon glyphicon-euro"></span> {intl l="Turnover"}</button>
						<button type="button" class="btn btn-primary" data-toggle="jqplot" data-target="registration"><span class="glyphicon glyphicon-user"></span> {intl l="Registrations"}</button>
						<button type="button" class="btn btn-success" data-toggle="jqplot" data-target="orders"><span class="glyphicon glyphicon-shopping-cart"></span> {intl l="Orders"}</button>
						<button type="button" class="btn btn-info" data-toggle="jqplot" data-target="first-orders"><span class="glyphicon glyphicon-thumbs-up"></span> {intl l="First orders"}</button>
						<button type="button" class="btn btn-danger" data-toggle="jqplot" data-target="aborted-orders"><span class="glyphicon glyphicon-thumbs-down"></span> {intl l="Aborted orders"}</button>
					</div>					
				</div>

				<hr/>
				
				<div class="jqplot-content">
					<div id="jqplot"></div>

					<div id="turnover" data-toggle="jqplot-serie" class="active"></div>
					<div id="registration" data-toggle="jqplot-serie"></div>
					<div id="orders" data-toggle="jqplot-serie"></div>
					<div id="first-orders" data-toggle="jqplot-serie"></div>
					<div id="aborted-orders" data-toggle="jqplot-serie"></div>
				</div>

 			</div>
	 		

	 		<div class="row">
	 			<div class="col-md-4">
					<div class="general-block-decorator">
						<div class="title title-without-tabs">{intl l="Informations site"}</div>
						<table class="table table-striped">
							<tbody>
								<tr>
									<th>{intl l="Customers"}</th>
	                                <td>1</td>
								</tr>
								<tr>
									<th>{intl l="Sections"}</th>
	                                <td>8</td>
								</tr>
								<tr>
									<th>{intl l="Products"}</th>
	                                <td>43</td>
								</tr>
								<tr>
									<th>{intl l="Products online"}</th>
	                                <td>43</td>
								</tr>
								<tr>
									<th>{intl l="Products offline"}</th>
	                                <td>0</td>
								</tr>
								<tr>
									<th>{intl l="Orders"}</th>
	                                <td>1</td>
								</tr>
								<tr>
									<th>{intl l="Orders pending"}</th>
	                                <td>1</td>
								</tr>
								<tr>
									<th>{intl l="Orders treatment"}</th>
	                                <td>0</td>
								</tr>
								<tr>
									<th>{intl l="Shipped orders"}</th>
	                                <td>0</td>
								</tr>
								<tr>
									<th>{intl l="Canceled orders"}</th>
	                                <td>0</td>
								</tr>
				            </tbody>
				        </table>                    
					</div>
				</div>
				
				<div class="col-md-4">
					<div class="general-block-decorator">
						<div class="title title-without-tabs">{intl l="Sales statistics"}</div>

						<ul class="nav nav-tabs">
							<li class="active"><a href="#statjour" data-toggle="tab">{intl l="Today"}</a></li>
							<li><a href="#statmois" data-toggle="tab">{intl l="This month"}</a></li>
							<li><a href="#statannee" data-toggle="tab">{intl l="This year"}</a></li>
						</ul>

						<div class="tab-content">
							<div class="tab-pane fade active in" id="statjour">
								<table class="table table-striped">
	                                <tbody>
	                                	<tr>
	                                        <th>{intl l="C. A. TTC"}</th>
	                                        <td>2000.00 €</td>
	                                    </tr>
	                                    <tr>
	                                        <th>{intl l="C. A. TTC hors frais de port"}</th>
	                                        <td>2500.00 €</td>
	                                    </tr>
	                                    <tr>
	                                        <th>{intl l="C. A. TTC précédent"}</th>
	                                        <td>1700.00 €</td>
	                                    </tr>
	                                    <tr>
	                                        <th>{intl l="Commandes en instance"}</th>
	                                        <td>4</td>
	                                    </tr>
	                                    <tr>
	                                        <th>{intl l="Commandes en traitement"}</th>
	                                        <td>52</td>
	                                    </tr>
	                                    <tr>
	                                        <th>{intl l="Commandes annulées"}</th>
	                                        <td>3</td>
	                                    </tr>
	                                    <tr>
	                                        <th>{intl l="Panier moyen TTC"}</th>
	                                        <td>25.00 €</td>
	                                    </tr>
	                           		</tbody>
	                        	</table>                                    
	                        </div>
							<div class="tab-pane fade" id="statmois">
	                            <table class="table table-striped">
	                                <tbody>
	                                	<tr>
	                                        <th>{intl l="C. A. TTC"}</th>
	                                        <td>2000.00 €</td>
	                                    </tr>
	                                    <tr>
	                                        <th>{intl l="C. A. TTC hors frais de port"}</th>
	                                        <td>2500.00 €</td>
	                                    </tr>
	                                    <tr>
	                                        <th>{intl l="C. A. TTC précédent"}</th>
	                                        <td>1700.00 €</td>
	                                    </tr>
	                                    <tr>
	                                        <th>{intl l="Commandes en instance"}</th>
	                                        <td>4</td>
	                                    </tr>
	                                    <tr>
	                                        <th>{intl l="Commandes en traitement"}</th>
	                                        <td>52</td>
	                                    </tr>
	                                    <tr>
	                                        <th>{intl l="Commandes annulées"}</th>
	                                        <td>3</td>
	                                    </tr>
	                                    <tr>
	                                        <th>{intl l="Panier moyen TTC"}</th>
	                                        <td>25.00 €</td>
	                                    </tr>
	                           		</tbody>
	                        	</table>
							</div>
							<div class="tab-pane fade" id="statannee">
	                            <table class="table table-striped">
	                                <tbody>
	                                	<tr>
	                                        <th>{intl l="C. A. TTC"}</th>
	                                        <td>2000.00 €</td>
	                                    </tr>
	                                    <tr>
	                                        <th>{intl l="C. A. TTC hors frais de port"}</th>
	                                        <td>2500.00 €</td>
	                                    </tr>
	                                    <tr>
	                                        <th>{intl l="C. A. TTC précédent"}</th>
	                                        <td>1700.00 €</td>
	                                    </tr>
	                                    <tr>
	                                        <th>{intl l="Commandes en instance"}</th>
	                                        <td>4</td>
	                                    </tr>
	                                    <tr>
	                                        <th>{intl l="Commandes en traitement"}</th>
	                                        <td>52</td>
	                                    </tr>
	                                    <tr>
	                                        <th>{intl l="Commandes annulées"}</th>
	                                        <td>3</td>
	                                    </tr>
	                                    <tr>
	                                        <th>{intl l="Panier moyen TTC"}</th>
	                                        <td>25.00 €</td>
	                                    </tr>
	                           		</tbody>
	                            </table>                           
	                        </div>
						</div>
					</div>
				</div>

				<div class="col-md-4">
					<div class="general-block-decorator">
						<div class="title title-without-tabs">{intl l="Thelia informations"}</div>
						<table class="table table-striped">
								<tbody>
								<tr>
									<th>{intl l="Current version"}</th>
									<td>V2.0.0-beta</td>
								</tr>
								<tr>
									<th>{intl l="Latest version available"}</th>
									<td><a href="">V1.5.4.2</a></td>
								</tr>
								<tr>
									<th>{intl l="News"}</th>
									<td><a href="" target="_blank">{intl l="Click here"}</a></td>
								</tr>
							</tbody>
						</table>		                      
					</div>
				</div>

			</div>

			{module_include location='home_bottom'}
		</div>
	</div>
{/block}

{block name="javascript-initialization"}

	{javascripts file='assets/js/jqplot/jquery.jqplot.min.js'}
        <script src="{$asset_url}"></script>
		
		{javascripts file='assets/js/jqplot/plugins/jqplot.highlighter.min.js'}
			<script type="text/javascript" src="{$asset_url}"></script>
		{/javascripts}
		{javascripts file='assets/js/jqplot/plugins/jqplot.barRenderer.min.js'}
			<script type="text/javascript" src="{$asset_url}"></script>
		{/javascripts}
		{javascripts file='assets/js/jqplot/plugins/jqplot.pieRenderer.min.js'}
			<script type="text/javascript" src="{$asset_url}"></script>
		{/javascripts}

        <script>

        	(function($, window, document){
    			
			    $(function(){			    				    	

			    	var $elem			= $('#jqplot');

		            var url 			= '/web/test_to_remove/admin-stats.json',
		    			series 			= [],
		    			seriesColors 	= [],
		    			ticks 			= [],
		    			days 			= 0,
		    			jqplot;

		    		var options = {		    			
	    				animate: true,
	    				axesDefaults: {
	    					tickOptions: { showMark: true, showGridline: true }
	    				},
	    				axes: {
				            xaxis: {
				                borderColor: '#ccc',
				                ticks : ticks,
				                tickOptions:    { showGridline: false }
				            },
				            yaxis: {
								tickOptions: { showGridline: true, showMark: false, showLabel: false, shadow: false }
							}
				        },
						seriesDefaults: {
							lineWidth: 3,
							shadow : false,							
							markerOptions: { shadow : false, style: 'filledCircle', size: 12 }
						},
						grid: {											       
					        background: '#FFF',
					        shadow : false,
					        borderColor : '#FFF'			        
					    },
					    highlighter: {
					    	show: true,
					        sizeAdjust: 7,
					        tooltipLocation: 'n',
					        tooltipContentEditor: function(str, seriesIndex, pointIndex, plot){

					        	// Return axis value : data value				            					         				            	
				                return ticks[pointIndex][1] + ': ' + plot.data[seriesIndex][pointIndex][1];
				            }
    					}
					};

					// Get datas Json
					$.getJSON(url)
		            .done(function(data) {		                		               		                

			    		// Init series datas and colors
						initJqplotDatas(series, seriesColors, options, data);    		

						// Add days to xaxis
						for(var i = 1; i < (days+1); i++){
			    			ticks.push([i-1, i]);
			    		}
			    		
			    		// Start jqplot
			    		var elementId = $elem.attr('id');
			    		jqplot = $.jqplot(elementId, series, options);

			    		$('[data-toggle="jqplot"]').each(function(){		    			

			    			$(this).click(function(){

			    				if($('[data-toggle="jqplot-serie"].active').length > 1 || !$(this).hasClass('active')){
				    				
				    				// Active button and jqplot-serie management
				    				$(this).toggleClass('active');

				    				var id = $(this).data('target');
				    				$('[data-toggle="jqplot-serie"]#' + id).toggleClass('active');

				    				// Reinit variables
				    				series = [];
				    				seriesColors = [];

				    				// Init series datas and colors
						    		initJqplotDatas(series, seriesColors, options, data);	

				    				// Restart jqplot
				    				jqplot.destroy();
				    				jqplot = $.jqplot(elementId, series, options);
			    				}

			    			});			    		
				    		
			    		});			    			    			

						$(window).bind('resize', function(event, ui) {
	        				jqplot.replot( { resetAxes: true } );
	    				});

		            })
		            .fail(function() {
		                $elem.append('<div class="alert alert-danger">An error occurred while reading from JSON file</div>');
		            });	


    				function initJqplotDatas(series, seriesColors, options, json){
    					$('[data-toggle="jqplot-serie"].active').each(function(i){
    						var position = $(this).index() - 1;      						
			    			series.push(json.series[position].datas);
			    			seriesColors.push(json.series[position].color);			    			
			    		});			    		

    					// Number of days to display ( = datas.length in one serie)
    					days = json.series[0].datas.length;

			    		// Graph title
			    		options.title = json.title;

			    		// Graph series colors
			    		options.seriesColors = seriesColors;
    				}

			    });
    
			}(window.jQuery, window, document));

        </script>
    {/javascripts}
{/block}