@extends('HR.layout')
<style>
    .custom-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 6px;
        border-radius: 10px 0 0 10px;
        background: linear-gradient(180deg, #ff2c54, #ff8a5c54);
    }

    .custom-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
    }

    .card-body .icon-circle {
        width: 50px;
        height: 50px;
        border-radius: 15%;
        background: rgba(250, 67, 102, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: #fa4366;
    }
</style>

@section('content')
    <div class="row g-3">
        <h5>Welcome Back,
            <span class="text-danger">
                <b>{{ Auth::user()->name }}</b>
            </span>
        </h5>

        <div class="col-lg-3 col-sm-6">
            <div class="card h-100 custom-card">
                <div class="card-body d-flex align-items-center justify-content-between">

                    <div>
                        <h6 class="text-uppercase text-muted mb-1">Total Candidates</h6>
                        <h3 class="fw-bold mb-0">{{ $candidateCount }}</h3>
                    </div>

                    <div class="icon-circle">
                        <i class="ti tabler-users"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-sm-6">
            <div class="card h-100 custom-card">
                <div class="card-body d-flex align-items-center justify-content-between">

                    <div>
                        <h6 class="text-uppercase text-muted mb-1">Total Follow Up</h6>
                        <h3 class="fw-bold mb-0">{{ $totalFollowup }}</h3>
                    </div>

                    <div class="icon-circle">
                        <i class="ti tabler-rotate-rectangle"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-sm-6">
            <div class="card h-100 custom-card">
                <div class="card-body d-flex align-items-center justify-content-between">

                    <div>
                        <h6 class="text-uppercase text-muted mb-1">Pending Follow Up</h6>
                        <h3 class="fw-bold mb-0">{{ $pendingFollowup }}</h3>
                    </div>

                    <div class="icon-circle">
                        <i class="ti tabler-clock-pause"></i>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection