@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;
}

.login-heading {
    font-size: 24px;
    /* Bigger and bold */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: linear-gradient(45deg, #6a5acd, #483d8b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
</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 login-heading">Welcome To Dashboard</h2>
                @if (session('message'))
                <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