@extends('admin.layouts.master')
@section('dashboard','active')
@section('dashColor','dark')
@section('pendColor','light')
@section('listColor','light')
@section('content')
    <!-- Main Content -->
    <div class="main-content">
        <section class="section">
            {{-- <ul class="breadcrumb breadcrumb-style">
            <li class="breadcrumb-item">
                <h4 class="page-title m-b-0">Dashboard</h4>
            </li>
            <li class="breadcrumb-item">
                <a href="index-2.html"> <i data-feather="home"></i></a>
            </li>
            <li class="breadcrumb-item active">Dashboard</li>
        </ul> --}}
            <div class="row">
                <div class="col-xl-3 col-lg-6">
                    <div class="card l-bg-style1">
                        <div class="card-statistic-3 bg-dark">
                            <div class="card-icon card-icon-large">
                                <i class="fa fa-award"></i>
                            </div>
                            <div class="card-content">
                                <h4 class="card-title">New Users</h4>
                                <h6>{{ $customer ?? 0 }}</h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-6">
                    <div class="card l-bg-style2">
                        <div class="card-statistic-3 bg-dark">
                            <div class="card-icon card-icon-large">
                                <i class="fa fa-briefcase"></i>
                            </div>
                            <div class="card-content">
                                <h4 class="card-title">Number of Hosts</h4>
                                <h6>{{ $host ?? 0 }}</h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-6">
                    <div class="card l-bg-style2">
                        <div class="card-statistic-3 bg-dark">
                            <div class="card-icon card-icon-large">
                                <i class="fa fa-briefcase"></i>
                            </div>
                            <div class="card-content">
                                <h4 class="card-title">Active Listings</h4>
                                <h6>{{ $activePosting ?? 0 }}</h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-6">
                    <div class="card l-bg-style2">
                        <div class="card-statistic-3 bg-dark">
                            <div class="card-icon card-icon-large">
                                <i class="fa fa-briefcase"></i>
                            </div>
                            <div class="card-content">
                                <h4 class="card-title">Pending Listings</h4>
                                <h6>{{ $pendingPosting ?? 0 }}</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </section>

    </div>
@endsection