@extends('layouts.dashboard.main')

@section('home', 'active')

@section('styles')
    <style>
        .small-box-footer {
            text-decoration: none;
            color: #FFFFFF !important;
        }
    </style>
@endsection

@section('main-content')
    <div class="content-wrapper mb-3">
        <div class="content-header p-3">
            <div class="container-fluid mt-2">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 mt-2"><b>Home</b></h1>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-lg-3 col-6">
                        <x-small-box value="{{ $stores ?? 0 }}" text="Stores" icon="fas fa-store" link="/dashboard/stores" />
                    </div>

                    <div class="col-lg-3 col-6">
                        <x-small-box value="{{ $users  ?? 0 }}" text="Users" icon="fas fa-users" link="/dashboard/users" />
                    </div>

                    <div class="col-lg-3 col-6">
                        <x-small-box value="{{ $scanners  ?? 0 }}" text="Scanners" icon="fas fa-barcode" link="/dashboard/scanners" />
                    </div>

                    <div class="col-lg-3 col-6">
                        <x-small-box value="1" text="Coming Soon" icon="fas fa-chart-pie" link="#" />
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset_js('dashboard/scanners.js') }}"></script>
@endsection