<div class="ma_page_content">
	<div class="ma_pc_inner">
		<div class="container">
			<div class="ma_dashboard">
				<div class="row dashboard_small_stats">
					<div class="col-md-4">
						<div class="small_stat songs">
							<h2>{{LANG Total Events}}</h2>
							<p>{{TOTAL_EVENTS}}</p>
						</div>
					</div>
					<div class="col-md-4">
						<div class="small_stat plays">
							<h2>{{LANG Total Joined Users}}</h2>
							<p>{{TOTAL_JOIN}}</p>
						</div>
					</div>
					<div class="col-md-4">
						<div class="small_stat downs">
							<h2>{{LANG Total Available Tickets}}</h2>
							<p>{{TOTAL_Tickets}}</p>
						</div>
					</div>
				</div>
				
				<div class="content">
					<canvas id="today_chart" height="100"></canvas>
				</div>
				
				<div class="row">
					<div class="col-md-6">
						<div class="content">
							<div class="dash_stat_title">{{LANG Most joined events}}</div>
							<ul class="list-unstyled mb-0 short_track_stats">
								{{most_joined_events}}
							</ul>
						</div>
					</div>
					<div class="col-md-6">
						<div class="content">
							<div class="dash_stat_title">{{LANG Most sold events}}</div>
							<ul class="list-unstyled mb-0 short_track_stats">
								{{most_sold_events}}
							</ul>
						</div>
					</div>
					<?php if($music->config->artist_sell == 'on'){?>
					<div class="col-md-12">
						<hr>
						<div class="row dashboard_small_stats">
							<div class="col-md-4">
								<div class="small_stat sales">
									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M5,6H23V18H5V6M14,9A3,3 0 0,1 17,12A3,3 0 0,1 14,15A3,3 0 0,1 11,12A3,3 0 0,1 14,9M9,8A2,2 0 0,1 7,10V14A2,2 0 0,1 9,16H19A2,2 0 0,1 21,14V10A2,2 0 0,1 19,8H9M1,10H3V20H19V22H1V10Z"></path></svg>
									<h2>{{LANG Total Sales}}</h2>
									<p>{{CONFIG currency_symbol}}{{total_sales}}</p>
								</div>
							</div>
							<div class="col-md-4">
								<div class="small_stat mnthsale">
									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M9,10V12H7V10H9M13,10V12H11V10H13M17,10V12H15V10H17M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H6V1H8V3H16V1H18V3H19M19,19V8H5V19H19M9,14V16H7V14H9M13,14V16H11V14H13M17,14V16H15V14H17Z"></path></svg>
									<h2>{{LANG Total Sales This Month}}</h2>
									<p>{{CONFIG currency_symbol}}{{total_month_sales}}</p>
								</div>
							</div>
							<div class="col-md-4">
								<div class="small_stat todsale">
									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7,10H12V15H7M19,19H5V8H19M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z"></path></svg>
									<h2>{{LANG Total Sales Today}}</h2>
									<p>{{CONFIG currency_symbol}}{{total_today_sales}}</p>
								</div>
							</div>
						</div>
						<div class="content">
							<div class="dash_stat_title">{{LANG Recent sales}}</div>
							<table class="table" id="music-user-ads-table">
								<thead>
									<th>{{LANG ID}}</th>
									<th>{{LANG Title}}</th>
									<th>{{LANG Type}}</th>
									<th>{{LANG Price}}</th>
									<th>{{LANG Commission}}</th>
									<th>{{LANG Final Price}}</th>
								</thead>
								<tbody>{{RECENT_SALES}}</tbody>
							</table>
						</div>
					</div>
					<?php } ?>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script>
// Today Live Line Chart
var ctx = document.getElementById('today_chart').getContext('2d');
Chart.defaults.global.defaultFontColor = '#fff';
var today_chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',

// The data for our dataset
data: {
	labels: {{THIS_MONTH}},
	datasets: [{
		label: "{{LANG TOTAL JOINED USERS}}",
		borderColor: '#ff6873',
		backgroundColor: '#ff6873',
		fill: false,
		data: {{joinThisMonth}},
		pointRadius: 5,
		pointHoverRadius: 5,
	},{
		label: "{{LANG TOTAL Sales}}",
		borderColor: '#dc1d53',
		backgroundColor: '#dc1d53',
		fill: false,
		data: {{SalesThisMonth}},
		pointRadius: 5,
		pointHoverRadius: 5,
	},
	]
},

// Configuration options go here
options: {
	responsive: true,
	tooltips: {
		mode: 'index',
		intersect: false,
	},
	hover: {
		mode: 'nearest',
		intersect: true
	},
	legend: {
		position: 'bottom',
		labels: {
			// This more specific font property overrides the global property
			fontColor: '#d2d2d2'
		}
	},
	scales: {
		xAxes: [{
			display: true,
			gridLines: {
				display: true,
				color: "#333"
			}
		}],
		yAxes: [{
			display: true,
			gridLines: {
				display: true,
				color: "#333"
			}
		}]
	}
}
});

</script>