@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">

		<!-- @if (session('status'))
			<div class="notification success closeable" >
				<p>{{ session('status') }}</p>
				<a class="close" href="#"></a>
			</div>
		@endif -->
		</div>
		
	<div class="col-md-12 margin-top-25">
		
	</div>			
	
	<div class="fun-facts-container">
		<div class="fun-fact" data-fun-fact-color="#36bd78">
			<div class="fun-fact-text">
				<span>Customers</span>
				<h4>{{ $data['customersCount'] }}</h4>
			</div>
			<div class="fun-fact-icon"><i class="icon-feather-users"></i></div>
		</div>
		<div class="fun-fact" data-fun-fact-color="#b81b7f">
			<div class="fun-fact-text">
				<span>Service Providers</span>
				<h4>{{ $data['tradesmenCount'] }}</h4>
			</div>
			<div class="fun-fact-icon"><i class="icon-material-outline-business-center"></i></div>
		</div>
		<div class="fun-fact" data-fun-fact-color="#efa80f">
			<div class="fun-fact-text">
				<span>Jobs</span>
				<h4>{{ $data['listingsCount'] }}</h4>
			</div>
			<div class="fun-fact-icon"><i class="icon-material-outline-rate-review"></i></div>
		</div>

		<!-- Last one has to be hidden below 1600px, sorry :( -->
		<div class="fun-fact" data-fun-fact-color="#2a41e6">
			<div class="fun-fact-text">
				<span>This Month Views</span>
				<h4>987</h4>
			</div>
			<div class="fun-fact-icon"><i class="icon-feather-trending-up"></i></div>
		</div>
	</div>

	<div class="fun-facts-container margin-top-5">
		<div class="fun-fact" data-fun-fact-color="#B9C41A">
			<div class="fun-fact-text">
				<span>Services / Active</span>
				<h4>{{ $data['allServicesCount'] }} / {{ $data['activeServicesCount'] }}</h4>
			</div>
			<div class="fun-fact-icon"><i class="icon-material-outline-gavel"></i></div>
		</div>
		<div class="fun-fact" data-fun-fact-color="#0D928D">
			<div class="fun-fact-text">
				<span>Bids Placed</span>
				<h4>{{ $data['bidsPlacedCount'] }}</h4>
			</div>
			<div class="fun-fact-icon"><i class="icon-line-awesome-dollar"></i></div>
		</div>
		<div class="fun-fact" data-fun-fact-color="#8631A9">
			<div class="fun-fact-text">
				<span>Hubs / Active</span>
				<h4>{{ $data['allHubsCount'] }} / {{ $data['activeHubsCount'] }}</h4>
			</div>
			<div class="fun-fact-icon"><i class="icon-material-outline-location-on"></i></div>
		</div>

		<!-- Last one has to be hidden below 1600px, sorry :( -->
		<div class="fun-fact" data-fun-fact-color="#2a41e6">
			<div class="fun-fact-text">
				<span>Areas / Active</span>
				<h4>{{ $data['allAreasCount'] }} / {{ $data['activeAreasCount'] }}</h4>
			</div>
			<div class="fun-fact-icon"><i class="icon-feather-trending-up"></i></div>
		</div>
	</div>


		<div class="col-xl-8">
					<!-- Dashboard Box -->
					<div class="dashboard-box main-box-in-row">
						<div class="headline">
							<h3><i class="icon-feather-bar-chart-2"></i> Your Profile Views</h3>
							<div class="sort-by">
								<select class="selectpicker hide-tick">
									<option>Last 6 Months</option>
									<option>This Year</option>
									<option>This Month</option>
								</select>
							</div>
						</div>
						<div class="content">
							<!-- Chart -->
							<div class="chart">
								<canvas id="chart" width="100" height="45"></canvas>
							</div>
						</div>
					</div>
					<!-- Dashboard Box / End -->
				</div>
			
			</div>



	
</div>
@endsection
@section('scripts')
<script src="{{ asset('demo-2/js/chart.min.js') }}"></script>
<script>
	Chart.defaults.global.defaultFontFamily = "Nunito";
	Chart.defaults.global.defaultFontColor = '#888';
	Chart.defaults.global.defaultFontSize = '14';

	var ctx = document.getElementById('chart').getContext('2d');

	var chart = new Chart(ctx, {
		type: 'line',

		// The data for our dataset
		data: {
			labels: ["January", "February", "March", "April", "May", "June"],
			// Information about the dataset
	   		datasets: [{
				label: "Views",
				backgroundColor: 'rgba(42,65,232,0.08)',
				borderColor: '#2a41e8',
				borderWidth: "3",
				data: [196,132,215,362,210,252],
				pointRadius: 5,
				pointHoverRadius:5,
				pointHitRadius: 10,
				pointBackgroundColor: "#fff",
				pointHoverBackgroundColor: "#fff",
				pointBorderWidth: "2",
			}]
		},

		// Configuration options
		options: {

		    layout: {
		      padding: 10,
		  	},

			legend: { display: false },
			title:  { display: false },

			scales: {
				yAxes: [{
					scaleLabel: {
						display: false
					},
					gridLines: {
						 borderDash: [6, 10],
						 color: "#d8d8d8",
						 lineWidth: 1,
	            	},
				}],
				xAxes: [{
					scaleLabel: { display: false },  
					gridLines:  { display: false },
				}],
			},

		    tooltips: {
		      backgroundColor: '#333',
		      titleFontSize: 13,
		      titleFontColor: '#fff',
		      bodyFontColor: '#fff',
		      bodyFontSize: 13,
		      displayColors: false,
		      xPadding: 10,
		      yPadding: 10,
		      intersect: false
		    }
		},


});

</script>
@endsection