{% extends 'layouts/base.html' %}

{% block breadcrumbs %}{% endblock breadcrumbs %}

{% block content %}

	<!-- [ Main Content ] start -->
	<div class="row">
		<!-- [ daily sales section ] start -->
		<div class="col-md-6 col-xl-4">
			<div class="card">
				<div class="card-block">
					<h6 class="mb-4">Daily Sales</h6>
					<div class="row d-flex align-items-center">
						<div class="col-9">
							<h3 class="f-w-300 d-flex align-items-center m-b-0"><i
									class="feather icon-arrow-up text-c-green f-30 m-r-10"></i>$249.95</h3>
						</div>

						<div class="col-3 text-end">
							<p class="m-b-0">67%</p>
						</div>
					</div>
					<div class="progress m-t-30" style="height: 7px;">
						<div class="progress-bar progress-c-theme" role="progressbar" style="width: 50%;"
							aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
					</div>
				</div>
			</div>
		</div>
		<!-- [ daily sales section ] end -->

		<!-- [ Monthly  sales section ] start -->
		<div class="col-md-6 col-xl-4">
			<div class="card">
				<div class="card-block">
					<h6 class="mb-4">Monthly Sales</h6>
					<div class="row d-flex align-items-center">
						<div class="col-9">
							<h3 class="f-w-300 d-flex align-items-center  m-b-0"><i
									class="feather icon-arrow-down text-c-red f-30 m-r-10"></i>$2.942.32</h3>
						</div>
						<div class="col-3 text-end">
							<p class="m-b-0">36%</p>
						</div>
					</div>
					<div class="progress m-t-30" style="height: 7px;">
						<div class="progress-bar progress-c-theme2" role="progressbar" style="width: 35%;"
							aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
					</div>
				</div>
			</div>
		</div>
		<!-- [ Monthly  sales section ] end -->

		<!-- [ year  sales section ] start -->
		<div class="col-md-12 col-xl-4">
			<div class="card">
				<div class="card-block">
					<h6 class="mb-4">Yearly Sales</h6>
					<div class="row d-flex align-items-center">
						<div class="col-9">
							<h3 class="f-w-300 d-flex align-items-center  m-b-0"><i
									class="feather icon-arrow-up text-c-green f-30 m-r-10"></i>$8.638.32</h3>
						</div>
						<div class="col-3 text-end">
							<p class="m-b-0">80%</p>
						</div>
					</div>
					<div class="progress m-t-30" style="height: 7px;">
						<div class="progress-bar progress-c-theme" role="progressbar" style="width: 70%;"
							aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
					</div>
				</div>
			</div>
		</div>
		<!-- [ year  sales section ] end -->

		<!-- [ worldLow section ] start -->
		<div class="col-xl-8 col-md-6">
			<div class="card">
				<div class="card-header">
					<h5>Users From United States</h5>
					<div class="card-header-right">
						<div class="btn-group card-option">
							<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"
								aria-haspopup="true" aria-expanded="false">
								<i class="feather icon-more-horizontal"></i>
							</button>
							<ul class="list-unstyled card-option dropdown-menu dropdown-menu-end">
								<li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i>
											maximize</span><span style="display:none"><i class="feather icon-minimize"></i>
											Restore</span></a></li>
								<li class="dropdown-item minimize-card"><a href="#!"><span><i
												class="feather icon-minus"></i> collapse</span><span style="display:none"><i
												class="feather icon-plus"></i> expand</span></a></li>
								<li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i>
										reload</a></li>
								<li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i>
										remove</a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="card-block">
					<div id="world-low" style="height:450px;"></div>
				</div>
			</div>
		</div>
		<!-- [ worldLow section ] end -->

		<!-- [ statistics year chart ] start -->
		<div class="col-xl-4 col-md-6">
			<div class="card bg-c-blue">
				<div class="card-header borderless">
					<h5 class="text-white">Earnings</h5>
				</div>
				<div class="card-block" style="padding:0 25px;">
					<div class="earning-text mb-0">
						<h3 class="mb-2 text-white f-w-300">$4295.36 <i class="feather icon-arrow-up teal accent-3"></i>
						</h3>
						<span class="text-uppercase text-white d-block">Total Earnings</span>
					</div>
					<div id="Widget-line-chart" class="WidgetlineChart2 ChartShadow" style="height:180px;"></div>
				</div>
			</div>
			<div class="card">
				<div class="card-block border-bottom">
					<div class="row d-flex align-items-center">
						<div class="col-auto">
							<i class="feather icon-zap f-30 text-c-green"></i>
						</div>
						<div class="col">
							<h3 class="f-w-300">235</h3>
							<span class="d-block text-uppercase">TOTAL IDEAS</span>
						</div>
					</div>
				</div>
				<div class="card-block">
					<div class="row d-flex align-items-center">
						<div class="col-auto">
							<i class="feather icon-map-pin f-30 text-c-blue"></i>
						</div>
						<div class="col">
							<h3 class="f-w-300">26</h3>
							<span class="d-block text-uppercase">TOTAL LOCATIONS</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- [ statistics year chart ] end -->

		<!-- [social-media section] start -->
		<div class="col-md-12 col-xl-4">
			<div class="card card-social">
				<div class="card-block border-bottom">
					<div class="row align-items-center justify-content-center">
						<div class="col-auto">
							<i class="fab fa-facebook-f text-primary f-36"></i>
						</div>
						<div class="col text-end">
							<h3>12,281</h3>
							<h5 class="text-c-green mb-0">+7.2% <span class="text-muted">Total Likes</span></h5>
						</div>
					</div>
				</div>
				<div class="card-block">
					<div class="row align-items-center justify-content-center card-active">
						<div class="col-6">
							<h6 class="text-center m-b-10"><span class="text-muted m-r-5">Target:</span>35,098</h6>
							<div class="progress">
								<div class="progress-bar progress-c-theme" role="progressbar" style="width:60%;height:6px;"
									aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
						</div>
						<div class="col-6">
							<h6 class="text-center  m-b-10"><span class="text-muted m-r-5">Duration:</span>3,539</h6>
							<div class="progress">
								<div class="progress-bar progress-c-theme2" role="progressbar" style="width:45%;height:6px;"
									aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6 col-xl-4">
			<div class="card card-social">
				<div class="card-block border-bottom">
					<div class="row align-items-center justify-content-center">
						<div class="col-auto">
							<i class="fab fa-twitter text-c-blue f-36"></i>
						</div>
						<div class="col text-end">
							<h3>11,200</h3>
							<h5 class="text-c-purple mb-0">+6.2% <span class="text-muted">Total Likes</span></h5>
						</div>
					</div>
				</div>
				<div class="card-block">
					<div class="row align-items-center justify-content-center card-active">
						<div class="col-6">
							<h6 class="text-center m-b-10"><span class="text-muted m-r-5">Target:</span>34,185</h6>
							<div class="progress">
								<div class="progress-bar progress-c-green" role="progressbar" style="width:40%;height:6px;"
									aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
						</div>
						<div class="col-6">
							<h6 class="text-center  m-b-10"><span class="text-muted m-r-5">Duration:</span>4,567</h6>
							<div class="progress">
								<div class="progress-bar progress-c-blue" role="progressbar" style="width:70%;height:6px;"
									aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6 col-xl-4">
			<div class="card card-social">
				<div class="card-block border-bottom">
					<div class="row align-items-center justify-content-center">
						<div class="col-auto">
							<i class="fab fa-google-plus-g text-c-red f-36"></i>
						</div>
						<div class="col text-end">
							<h3>10,500</h3>
							<h5 class="text-c-blue mb-0">+5.9% <span class="text-muted">Total Likes</span></h5>
						</div>
					</div>
				</div>
				<div class="card-block">
					<div class="row align-items-center justify-content-center card-active">
						<div class="col-6">
							<h6 class="text-center m-b-10"><span class="text-muted m-r-5">Target:</span>25,998</h6>
							<div class="progress">
								<div class="progress-bar progress-c-theme" role="progressbar" style="width:80%;height:6px;"
									aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
						</div>
						<div class="col-6">
							<h6 class="text-center  m-b-10"><span class="text-muted m-r-5">Duration:</span>7,753</h6>
							<div class="progress">
								<div class="progress-bar progress-c-theme2" role="progressbar" style="width:50%;height:6px;"
									aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- [social-media section] end -->

		<!-- [ rating list ] starts-->
		<div class="col-xl-4 col-md-6">
			<div class="card user-list">
				<div class="card-header">
					<h5>Rating</h5>
					<div class="card-header-right">
						<div class="btn-group card-option">
							<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"
								aria-haspopup="true" aria-expanded="false">
								<i class="feather icon-more-horizontal"></i>
							</button>
							<ul class="list-unstyled card-option dropdown-menu dropdown-menu-end">
								<li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i>
											maximize</span><span style="display:none"><i class="feather icon-minimize"></i>
											Restore</span></a></li>
								<li class="dropdown-item minimize-card"><a href="#!"><span><i
												class="feather icon-minus"></i> collapse</span><span style="display:none"><i
												class="feather icon-plus"></i> expand</span></a></li>
								<li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i>
										reload</a></li>
								<li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i>
										remove</a></li>
							</ul>

						</div>
					</div>
				</div>
				<div class="card-block">
					<div class="row align-items-center justify-content-center m-b-20">
						<div class="col-6">
							<h2 class="f-w-300 d-flex align-items-center float-start m-0">4.7 <i
									class="fas fa-star f-10 m-l-10 text-c-yellow"></i></h2>
						</div>
						<div class="col-6">
							<h6 class="d-flex  align-items-center float-end m-0">0.4 <i
									class="fas fa-caret-up text-c-green f-22 m-l-10"></i></h6>
						</div>
					</div>
					<div class="row">
						<div class="col-xl-12">
							<h6 class="align-items-center float-start"><i
									class="fas fa-star f-10 m-r-10 text-c-yellow"></i>5</h6>
							<h6 class="align-items-center float-end">384</h6>
							<div class="progress m-t-30 m-b-20" style="height: 6px;">
								<div class="progress-bar progress-c-theme" role="progressbar" style="width: 70%;"
									aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
						</div>
						<div class="col-xl-12">
							<h6 class="align-items-center float-start"><i
									class="fas fa-star f-10 m-r-10 text-c-yellow"></i>4</h6>
							<h6 class="align-items-center float-end">145</h6>
							<div class="progress m-t-30  m-b-20" style="height: 6px;">
								<div class="progress-bar progress-c-theme" role="progressbar" style="width: 35%;"
									aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
						</div>
						<div class="col-xl-12">
							<h6 class="align-items-center float-start"><i
									class="fas fa-star f-10 m-r-10 text-c-yellow"></i>3</h6>
							<h6 class="align-items-center float-end">24</h6>
							<div class="progress m-t-30  m-b-20" style="height: 6px;">
								<div class="progress-bar progress-c-theme" role="progressbar" style="width: 25%;"
									aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
						</div>
						<div class="col-xl-12">
							<h6 class="align-items-center float-start"><i
									class="fas fa-star f-10 m-r-10 text-c-yellow"></i>2</h6>
							<h6 class="align-items-center float-end">1</h6>
							<div class="progress m-t-30  m-b-20" style="height: 6px;">
								<div class="progress-bar progress-c-theme" role="progressbar" style="width: 10%;"
									aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
						</div>
						<div class="col-xl-12">
							<h6 class="align-items-center float-start"><i
									class="fas fa-star f-10 m-r-10 text-c-yellow"></i>1</h6>
							<h6 class="align-items-center float-end">0</h6>
							<div class="progress m-t-30  m-b-20" style="height: 6px;">
								<div class="progress-bar" role="progressbar" style="width:0;" aria-valuenow="0"
									aria-valuemin="0" aria-valuemax="100"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- [ rating list ] end -->

		<!-- [ Recent Users ] start -->
		<div class="col-xl-8 col-md-6">
			<div class="card Recent-Users">
				<div class="card-header">
					<h5>Recent Users</h5>
					<div class="card-header-right">
						<div class="btn-group card-option">
							<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"
								aria-haspopup="true" aria-expanded="false">
								<i class="feather icon-more-horizontal"></i>
							</button>
							<ul class="list-unstyled card-option dropdown-menu dropdown-menu-end">
								<li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i>
											maximize</span><span style="display:none"><i class="feather icon-minimize"></i>
											Restore</span></a></li>
								<li class="dropdown-item minimize-card"><a href="#!"><span><i
												class="feather icon-minus"></i> collapse</span><span style="display:none"><i
												class="feather icon-plus"></i> expand</span></a></li>
								<li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i>
										reload</a></li>
								<li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i>
										remove</a></li>
							</ul>

						</div>
					</div>
				</div>
				<div class="card-block px-0 py-3">
					<div class="table-responsive">
						<table class="table table-hover">
							<tbody>
								<tr class="unread">
									<td><img class="rounded-circle" style="width:40px;"
											src="/static/assets/images/user/avatar-1.jpg" alt="activity-user"></td>
									<td>
										<h6 class="mb-1">Isabella Christensen</h6>
										<p class="m-0">Lorem Ipsum is simply dummy</p>
									</td>
									<td>
										<h6 class="text-muted"><i class="fas fa-circle text-c-green f-10 m-r-15"></i>11 MAY
											12:56</h6>
									</td>
									<td><a href="#!" class="label theme-bg2 text-white f-12">Reject</a><a href="#!"
											class="label theme-bg text-white f-12">Approve</a></td>
								</tr>
								<tr class="unread">
									<td><img class="rounded-circle" style="width:40px;"
											src="/static/assets/images/user/avatar-2.jpg" alt="activity-user"></td>
									<td>
										<h6 class="mb-1">Mathilde Andersen</h6>
										<p class="m-0">Lorem Ipsum is simply</p>
									</td>
									<td>
										<h6 class="text-muted"><i class="fas fa-circle text-c-red f-10 m-r-15"></i>11 MAY 10:35
										</h6>
									</td>
									<td><a href="#!" class="label theme-bg2 text-white f-12">Reject</a><a href="#!"
											class="label theme-bg text-white f-12">Approve</a></td>
								</tr>
								<tr class="unread">
									<td><img class="rounded-circle" style="width:40px;"
											src="/static/assets/images/user/avatar-3.jpg" alt="activity-user"></td>
									<td>
										<h6 class="mb-1">Karla Sorensen</h6>
										<p class="m-0">Lorem Ipsum is simply dummy</p>
									</td>
									<td>
										<h6 class="text-muted"><i class="fas fa-circle text-c-green f-10 m-r-15"></i>9 MAY 17:38
										</h6>
									</td>
									<td><a href="#!" class="label theme-bg2 text-white f-12">Reject</a><a href="#!"
											class="label theme-bg text-white f-12">Approve</a></td>
								</tr>
								<tr class="unread">
									<td><img class="rounded-circle" style="width:40px;"
											src="/static/assets/images/user/avatar-1.jpg" alt="activity-user"></td>
									<td>
										<h6 class="mb-1">Ida Jorgensen</h6>
										<p class="m-0">Lorem Ipsum is simply</p>
									</td>
									<td>
										<h6 class="text-muted f-w-300"><i class="fas fa-circle text-c-red f-10 m-r-15"></i>19
											MAY 12:56</h6>
									</td>
									<td><a href="#!" class="label theme-bg2 text-white f-12">Reject</a><a href="#!"
											class="label theme-bg text-white f-12">Approve</a></td>
								</tr>
								<tr class="unread">
									<td><img class="rounded-circle" style="width:40px;"
											src="/static/assets/images/user/avatar-2.jpg" alt="activity-user"></td>
									<td>
										<h6 class="mb-1">Albert Andersen</h6>
										<p class="m-0">Lorem Ipsum is</p>
									</td>
									<td>
										<h6 class="text-muted"><i class="fas fa-circle text-c-green f-10 m-r-15"></i>21 July
											12:56</h6>
									</td>
									<td><a href="#!" class="label theme-bg2 text-white f-12">Reject</a><a href="#!"
											class="label theme-bg text-white f-12">Approve</a></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<!-- [ Recent Users ] end -->
	</div>
	<!-- [ Main Content ] end -->

{% endblock content %}

{% block extra_js %}
<!-- apexcharts js -->
<script src="/static/assets/js/plugins/apexcharts.min.js"></script>
<script src="/static/assets/js/plugins/jsvectormap.min.js"></script>
<script src="/static/assets/js/plugins/world.js"></script>
<!-- dashboard-custom js -->
<script src="/static/assets/js/pages/dashboard-custom.js"></script>
{% endblock extra_js %}