@extends('backend.layout.main')



@section('content')

<div class="page-wrapper">
    <div class="content">

        <!-- Breadcrumb -->
        <div class="d-md-flex d-block align-items-center justify-content-between page-breadcrumb mb-3">
            <div class="my-auto mb-2">
                <h2 class="mb-1">User Dashboard</h2>

            </div>
            <div class="d-flex my-xl-auto right-content align-items-center flex-wrap ">


                <div class="ms-2 head-icons">
                    <a href="javascript:void(0);" class="" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Collapse" id="collapse-header">
                        <i class="ti ti-chevrons-up"></i>
                    </a>
                </div>
            </div>
        </div>
        <!-- /Breadcrumb -->


        <!-- Welcome Wrap -->
        <div class="welcome-wrap mb-4">
            <div class=" d-flex align-items-center justify-content-between flex-wrap">
                <div class="d-flex align-items-center mb-3  flex-wrap">
                    <span class="avatar avatar-xl flex-shrink-0">
                        <img src="{{ asset(Auth::user()->advocate->image ) }}" class="rounded-circle" alt="img">
                    </span>
                    <div class="ms-3">
                        <h3 class="mb-2 text-white ">Welcome Back, {{ Auth::user()->name }} </h3>
                        <p class="mb-2 text-white ">{{ Auth::user()->role ?? '' }}</p>
                    </div>
                </div>

            </div>

        </div>
        <!-- /Welcome Wrap -->
        <div class="row">

            <!-- Total Companies -->
            <div class="col-xl-3 col-sm-6 d-flex">
                <div class="card flex-fill">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                            <span class="avatar avatar-md bg-dark mb-3">
                                <i class="ti ti-building fs-16"></i>
                            </span>
                            <span class="badge bg-success fw-normal mb-3">
                                +19.01%
                            </span>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <h2 class="mb-1" id="totalCompanies"></h2>
                                <p class="fs-13">Total Companies</p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- /Total Companies -->

            <!-- Active Companies -->
            <div class="col-xl-3 col-sm-6 d-flex">
                <div class="card flex-fill">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                            <span class="avatar avatar-md bg-dark mb-3">
                                <i class="ti ti-carousel-vertical fs-16"></i>
                            </span>
                            <span class="badge bg-danger fw-normal mb-3">
                                -12%
                            </span>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <h2 class="mb-1" id="activeCompanies"></h2>
                                <p class="fs-13">Active Companies</p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- /Active Companies -->

            <!-- Total Subscribers -->
            <div class="col-xl-3 col-sm-6 d-flex">
                <div class="card flex-fill">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                            <span class="avatar avatar-md bg-dark mb-3">
                                <i class="ti ti-chalkboard-off fs-16"></i>
                            </span>
                            <span class="badge bg-success fw-normal mb-3">
                                +6%
                            </span>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <h2 class="mb-1" id="inactiveCompanies"></h2>
                                <p class="fs-13">Inactive Companies</p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- /Total Subscribers -->

            <!-- Total Earnings -->
            <div class="col-xl-3 col-sm-6 d-flex">
                <div class="card flex-fill">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                            <span class="avatar avatar-md bg-dark mb-3">
                                <i class="ti ti-businessplan fs-16"></i>
                            </span>
                            <span class="badge bg-danger fw-normal mb-3">
                                -16%
                            </span>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <h2 class="mb-1" id="planExpiredCount"></h2>
                                <p class="fs-13">Total Plan Expired</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Total Earnings -->

        </div>
    </div>


<!-- /Page Wrapper -->



@endsection