@extends('layout.master')
@section('content')
<style>
body {
    background-color: #f8f9fa;
}

.card {
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    text-align: center;
    border: none;
    height: 180px;
    /* Fixed height */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card:hover {
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}

.card .icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.card-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.card-text {
    font-size: 22px;
    font-weight: bold;
    color: #007bff;
}

.users .icon {
    color: #007bff;
}

.active .icon {
    color: #28a745;
}

.jobs .icon {
    color: #ffc107;
}
</style>
</style>
<div class="main-content app-content">
    <div class="maxwidth">
        <div class="page-header">
            <div>
                <h2 class="main-content-title text-primary ms-1 tx-24 mg-b-5">Welcome To Dashboard</h2>
                @if (session('message'))
                .maxwidth {
                width: calc(100% - 250px);
                }

                <div class="alert alert-success">
                    {{ session('message') }}
                </div>
                @endif

            </div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card users">
                    <i class="fa fa-users icon"></i>
                    <h3 class="card-title">Active Users</h3>
                    <p class="card-text">{{$getusers ?? 0}}</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card active">
                    <i class="fa fa-user-check icon"></i>
                    <h3 class="card-title">Active Job Seeker</h3>
                    <p class="card-text">{{$totaljobseeker ?? 0}}</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card users">
                    <i class="fa fa-users icon"></i>
                    <h3 class="card-title">Total Employers</h3>
                    <p class="card-text">{{$totalemployer ?? 0}}</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card jobs">
                    <i class="fa fa-briefcase icon"></i>
                    <h3 class="card-title">Total Jobs</h3>
                    <p class="card-text">{{$joblistingcount ?? 0}}</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card jobs">
                    <i class="fa fa-briefcase icon"></i>
                    <h3 class="card-title">Active Jobs</h3>
                    <p class="card-text">{{$joblisting ?? 0}}</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card jobs">
                    <i class="fa fa-briefcase icon"></i>
                    <h3 class="card-title">Users Application</h3>
                    <p class="card-text">{{$getapplications ?? 0}}</p>
                </div>
            </div>
        </div>
    </div>

</div>



@endsection