{header}

<!-- BEGIN: Vendor CSS-->
<link rel="stylesheet" type="text/css" href="{url_tmpl_administration}app-assets/vendors/css/charts/chartist.css">
<link rel="stylesheet" type="text/css" href="{url_tmpl_administration}app-assets/vendors/css/charts/chartist-plugin-tooltip.css">
<!-- END: Vendor CSS-->
<!-- BEGIN: Page CSS-->
<link rel="stylesheet" type="text/css" href="{url_tmpl_administration}app-assets/css/plugins/charts/chartist.css">
<!-- END: Page CSS-->

<style id="style_chart"></style>

<div class="content-header row">
	<div class="content-header-left col-md-4 col-12 mb-2">
		<h3 class="content-header-title">{l_title_current}</h3>
	</div>
	<div class="content-header-right col-md-8 col-12">
		<div class="breadcrumbs-top float-md-right">
			<div class="breadcrumb-wrapper mr-1">
				<ol class="breadcrumb">
					<li class="breadcrumb-item">
						<a href="{url_main}administration/home.php">{l_menu_main}</a>
					</li>
					<li class="breadcrumb-item active">
						{l_menu_stats}
					</li>
				</ol>
			</div>
		</div>
	</div>
</div>

<div class="content-body">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">{l_events}</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                        </ul>
                    </div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
					<ul class="lmenu_page">
						<!-- begin_column -->
						<li class="{active}">
							<a href="{url_main}administration/stats.php?c={column}&y={yearActive}&m={monthActive}">{column_name}</a>
							<span class="marker">&#8226;</span>
						</li>
						<!-- end_column -->
					</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!--begin_block-->
<!-- begin_year -->
<div class="content-body">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">{year}</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                        </ul>
                    </div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
					<ul class="lmenu_page">
						<!-- begin_month -->
						<li>
							<!-- begin_month_link -->
							<a href="{url_main}administration/stats.php?c={columnActive}&y={year}&m={month}">{month_name}</a>
							<!-- end_month_link -->
							<!-- begin_month_active -->
							<a class="active" href="" onclick="return false;">{month_name}</a>
							<!-- end_month_active -->
							<span class="marker">&#8226;</span>
						</li>
						<!-- end_month -->
					</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end_year -->

<!-- begin_stats -->
<div class="content-body">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">{l_title_current}</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                        </ul>
                    </div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body hide-768">
                        <div id="areaGradient" class="height-400 areaGradientShadow chart_stats"></div>

						<div class="stats_chart_box">
							<!-- begin_item_stats_title -->
							<div class="stats_chart_or" style="color:{color}">
								<svg><circle style="fill:{color}" cx="9" cy="6" r="5"/></svg>
								{title}
							</div>
							<!-- end_item_stats_title -->
						</div>
					</div>

					<div class="card-body">
						<div class="table-responsive">
						<!--begin_table-->
						<table class="table table-striped table-hover mb-0 table-th-min-width">
							<thead class="bg-primary white">
                                <tr>
									<th>{l_day}</th>
									<!--begin_day_th-->
									<th class="a_c">{day}</th>
									<!--end_day_th-->
								</tr>
                            </thead>
							<!--begin_orientation-->
							<tr>
								<td>{orientation}</td>
								<!--begin_day_td-->
								<td class="a_c">{value}</td>
								<!--end_day_td-->
							</tr>
							<!--end_orientation-->
						</table>
						</div><br>
						<div class="table-responsive">
						<!--end_table-->
						<!-- begin_row -->
						<tr>
							<td>{name}</td>
							<td>{day}</td>
							<td>{month}</td>
							<td>{year}</td>
							<td>{total}</td>
						</tr>
						<!-- end_row -->
						</table>
					</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script language="javascript" type="text/javascript">
    var labels=[], i=0, dataChar=[], stats=[], statsData=[], j=0, k=0, m=0, customStyle='',
		chartAlias = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
    <!-- begin_item_stats_date -->
    labels[i]='{date}'.replace(/ /, '\n');
    i++;
    <!-- end_item_stats_date -->
    <!-- begin_item_data -->
    stats[{or}]=[];
	statsData[m]=[];
    <!-- begin_item_data_stats -->
    stats[{or}][k]='{count}';
	statsData[m][k]='{count}';
    k++;
    <!-- end_item_data_stats -->
    dataChar[j] = { label: '{data_title}',
					fillColor : 'rgba(220,220,220,0)',
					strokeColor : '{color}',
					pointColor : '{color}',
					pointStrokeColor : '#fff',
					pointHighlightFill : '#fff',
					pointHighlightStroke : '{color}',
					data : stats[{or}]
				};
    j++;
    k=0;
	if (m) {
		//customStyle +='.ct-series-'+chartAlias[m]+' .ct-line{stroke:{color}!important;}';
		customStyle +='.chart_stats .ct-series-'+chartAlias[m]+' .ct-point-circle {fill:{color}!important;}';
	}
	m++;

    <!-- end_item_data -->


	$('#style_chart')[0].innerHTML=customStyle;

    var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
	var lineChartData = {
			labels : labels,
			datasets : dataChar,
    };
	$win.on('load', function () {
		var maxValues=[], maxValuesDefault=[];
		if (typeof statsData[0] != 'undefined' && statsData[0].length) {
			var dataValues=$.extend([], statsData[0]).sort(),
				lD=dataValues.length <= 3 ? 0 : (dataValues.length-3);
			maxValues=dataValues.splice(lD, 3);
			maxValuesDefault=$.extend([], maxValues);
		}

		var areaGradientChart = new Chartist.Line('#areaGradient', {
				labels: labels,
				series: statsData
			}, {
            lineSmooth: Chartist.Interpolation.simple({
                divisor: 3
            }),
            fullWidth: true,
            showArea: true,
            chartPadding: {
                right: 25
            },
            axisX: {

            },
            axisY: {
                scaleMinSpace: 40,
				onlyInteger: true,
				/*labelInterpolationFnc: function (value) {
                    return (value / 1000) + 'k';
                },*/
            },
            plugins: [
                Chartist.plugins.tooltip({
                    appendToBody: false,
                    pointClass: 'ct-point-circle'
                  })
              ],
            low: 0,
            onlyInteger: true,
        });

		areaGradientChart.on('created', function (data) {
            var defs = data.svg.querySelector('defs') || data.svg.elem('defs');
            defs.elem('linearGradient', {
                id: 'area-gradient',
                x1: 1,
                y1: 0,
                x2: 0,
                y2: 0
            }).elem('stop', {
                offset: 0,
                'stop-color': 'rgba(248,161,236, 1)'
            }).parent().elem('stop', {
                offset: 1,
                'stop-color': 'rgba(115,150,255, 1)'
            });

			maxValues=$.extend([], maxValuesDefault);

			chartResetTooltipMax();
			chartCreateTooltipMax();

            return defs;
        })

        areaGradientChart.on('draw', function (data) {
			var circleRadius = 9;
			if (data.type === 'point') {
				var clActive = '';
				if (data.group._node.classList.contains('ct-series-a')) {
					for (k in maxValues) {
						if (maxValues[k] == data.value.y) {
							clActive = 'point_active';
							delete maxValues[k];
						}
					}
				}

				var circle = new Chartist.Svg('circle', {
					cx: data.x,
					cy: data.y,
					'ct:value': data.value.y,
					r: circleRadius,
					class: data.value.y === 0 ? 'ct-point-circle-transperent' : ('ct-point-circle ' + clActive)
				});
				data.element.replace(circle);
			}
			if (data.type === 'line' || data.type == 'area') {
				data.element.animate({
					d: {
						begin: 100,
						dur: 1000,
						from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
						to: data.path.clone().stringify(),
						easing: Chartist.Svg.Easing.easeOutQuint
					}
				})
			}
		})
	})
</script>
<!-- end_stats -->
<!--end_block-->

<!-- begin_nostats -->
<div class="content-body">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">{l_title_current}</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                        </ul>
                    </div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
						<div class="alert alert-light mb-2 alert-info-1" role="alert">
                            {l_no_stats}
                        </div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end_nostats -->



<!-- BEGIN: Page Vendor JS-->
<script src="{url_tmpl_administration}app-assets/vendors/js/charts/chartist.min.js{cache_version_param}" type="text/javascript"></script>
<script src="{url_tmpl_administration}app-assets/vendors/js/charts/chartist-plugin-tooltip.js{cache_version_param}" type="text/javascript"></script><!-- END: Page Vendor JS-->

{footer}