@extends('layout.admin.list_master')
@section('content')
	<style>
	    .donut-chart-sale small {
	        font-size: 16px;
		    position: absolute;
		    width: 100%;
		    height: 100%;
		    left: 0;
		    display: flex;
		    align-items: center;
		    top: 0;
		    justify-content: center;
		    font-weight: 600;
		}		
		.news .post-item {
			background: #181822;
			border-radius: 14px;
			padding: 15px;
			margin-bottom:10px
		}
		.card {
		    padding: 0px;
		}
		.header{
			display:none;
		}
		[data-header-position="fixed"] .content-body {
			padding-top: 0 !important;
		}
    </style>
    	<div class="content-body">
        <div class="welcome-text">
			@section('titleBar')
			<span class="ml-2 text-white">Dashboard</span>
			@endsection
        </div>
               
    	<!-- row -->
		<div style="padding-top:0px;" class="container-fluid">
			<div class="row">
				<div class="col-md-9 col-sm-9">
					<div class="row">
						<div class="col-md-3 col-sm-6">
							<div class="card">
								<div class="card-body text-center">
								<img src="/public/images/widget-icon1.svg" alt="image" class="mb-3">
									<h2 class="fs-30 text-black font-w600 mb-1">{{$total_things}}</h2>
									<span class="fs-14">Total Things</span>								
								</div>
							</div>
						</div>

						<div class="col-md-3 col-sm-6">
							<div class="card">
								<div class="card-body text-center">
								<img src="/public/images/widget-icon2.svg" alt="image" class="mb-3">
									<h2 class="fs-30 text-black font-w600 mb-1">{{$total_categories}}</h2>
									<span class="fs-14">Total Categories</span>								
								</div>
							</div>
						</div>

						<div class="col-md-3 col-sm-6">
							<div class="card">
								<div class="card-body text-center">
								<img src="/public/images/widget-icon3.svg" alt="image" class="mb-3">
									<h2 class="fs-30 text-black font-w600 mb-1">{{$total_categories_sub}}</h2>
									<span class="fs-14">Total Sub-Categories</span>								
								</div>
							</div>
						</div>

						<div class="col-md-3 col-sm-6">
							<div class="card">
								<div class="card-body text-center">
								<img src="/public/images/widget-icon4.svg" alt="image" class="mb-3">
									<h2 class="fs-30 text-black font-w600 mb-1">{{$total_active_users_customers}}</h2>
									<span class="fs-14">Users Active</span>								
								</div>
							</div>
						</div>
					</div>

					<div class="card col-md-12 col-sm-12">
						<div class="card-header d-sm-flex d-block pb-0 border-0">
							<div class="d-flex align-items-center">
								<div class="mr-auto pr-3">
									<ul class="d-flex flex-wrap">
										<li class="mr-5 mb-2">
											<svg class="mr-2" width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
												<rect width="19" height="19" rx="9.5" fill="#7825CB"></rect>
											</svg>
											<span class="fs-12 text-black">Things</span>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="container" style="position: relative;">
							<div id="chartBarThings"></div>
						</div>
						<!-- Venues CHART -->
						
						<hr>

						<!-- USERS CHART -->
						<div class="card-header d-sm-flex d-block pb-0 border-0">
							<div class="d-flex align-items-center">
								<div class="mr-auto pr-3">
									<ul class="d-flex flex-wrap">
										<li class="mr-5 mb-2">
											<svg class="mr-2" width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
												<rect width="19" height="19" rx="9.5" fill="#7825CB"></rect>
											</svg>
											<span class="fs-12 text-black">Users</span>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="container" style="position: relative;">
							<div id="chartBarUsers"></div>
						</div>
					</div>
					<!-- USERS CHART -->
				</div>

				<div class="col-md-3 col-sm-3">
					<div class="card">
						<div class="card-body pb-0 px-3">

						<div class="text-center mb-5">