@extends('layouts.app')

@section('contents')
<style>
    #sidebar-nav{

        font-family: "Poppins Medium";
        background: #4b4b4b !important;
    }
    .list-group-item{
color: white !important;
        background: #4b4b4b !important;
        border: 1px solid rgb(255 255 255 / 13%);
    }

    .list-group-item.active {
        /* z-index: 2; */
        color: #fff;
    border: 0px !important;
      border-color:  #0a0a0a;
        background: #fab900 !important;
    }
    .card-header{
        background: white !important;
        border-bottom: 0px solid rgba(0,0,0,.125);

    }
</style>
    <div class="container">
        <div class="row flex-nowrap">
            @include('layouts.common.left_bar')
            <main class="col-md-9 ps-md-2 pt-2">
                    <div class="page-header pt-3">
                    <h2>Welcome  Muhammad Talha</h2>
                </div>


                <div class="row pb-3">
                    <div class="col-lg-4 col-md-6 col-12">
                        <div class="card">
                            <div class="card-header d-flex flex-column align-items-start pb-3">
                                <div class="avatar bg-rgba-yellow p-50 m-0">
                                    <div class="avatar-content">
                                        <i class="feather icon-users text-black font-medium-5"></i>
                                    </div>
                                </div>
                                <h2 class="text-bold-700 mt-1 mb-25">192</h2>
                                <p class="mb-0">Pending Orders </p>

                            </div>

                    </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-12">
                        <div class="card">
                            <div class="card-header d-flex flex-column align-items-start pb-3">
                                <div class="avatar bg-rgba-yellow p-50 m-0">
                                    <div class="avatar-content">
                                        <i class="feather icon-users text-black font-medium-5"></i>
                                    </div>
                                </div>
                                <h2 class="text-bold-700 mt-1 mb-25">192</h2>
                                <p class="mb-0">Follow Ups Orders </p>

                            </div>

                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-12">
                        <div class="card">
                            <div class="card-header d-flex flex-column align-items-start pb-3">
                                <div class="avatar bg-rgba-yellow p-50 m-0">
                                    <div class="avatar-content">
                                        <i class="feather icon-users text-black font-medium-5"></i>
                                    </div>
                                </div>
                                <h2 class="text-bold-700 mt-1 mb-25">192</h2>
                                <p class="mb-0">In Process Orders </p>

                            </div>

                        </div>
                    </div>

                </div>

                <div class="row pb-3">
                    <div class="col-lg-4 col-md-6 col-12">
                        <div class="card">
                            <div class="card-header d-flex flex-column align-items-start pb-3">
                                <div class="avatar bg-rgba-yellow p-50 m-0">
                                    <div class="avatar-content">
                                        <i class="feather icon-users text-black font-medium-5"></i>
                                    </div>
                                </div>
                                <h2 class="text-bold-700 mt-1 mb-25">192</h2>
                                <p class="mb-0">Complete Orders </p>

                            </div>

                        </div>
                    </div>
                </div>

            </main>
        </div>
    </div>
    <!--Container Main end-->

@endsection