@php
    $pct = (int) $case->progress_percent;
    $bar = config('theme.colors.primary');
    if ($pct >= 100) {
        $bar = config('theme.ui.severity.success');
    } elseif ($pct >= 70) {
        $bar = config('theme.ui.severity.info');
    } elseif ($pct >= 35) {
        $bar = config('theme.ui.severity.warning');
    }
@endphp

<div class="card border-0 shadow-sm h-100">
    <div class="card-body d-flex flex-column">
        <div class="d-flex justify-content-between align-items-start mb-2">
            <div>
                <div class="fw-semibold">{{ $case->employee?->full_name }}</div>
                <div class="small text-muted">{{ $case->employee?->employee_code }} · {{ $case->reference_code }}</div>
            </div>
            <span class="badge" style="background: {{ config('theme.colors.muted') }}">
                {{ __('recruitment.onboarding.case_status.'.$case->status) }}
            </span>
        </div>
        <div class="mb-2">
            <div class="d-flex justify-content-between small mb-1">
                <span>{{ __('recruitment.onboarding.progress') }}</span>
                <strong>{{ $pct }}%</strong>
            </div>
            <div class="progress" style="height: 8px;">
                <div class="progress-bar" role="progressbar" style="width: {{ $pct }}%; background: {{ $bar }};" aria-valuenow="{{ $pct }}" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        @if ($case->vacancy)
            <div class="small text-muted mb-3">{{ $case->vacancy->title }}</div>
        @endif
        <div class="mt-auto">
            <x-ui.buttons.secondary :href="route('hr.recruitment.onboarding.show', $case)" icon="fe fe-layout">
                {{ __('recruitment.onboarding.actions.open_workspace') }}
            </x-ui.buttons.secondary>
        </div>
    </div>
</div>
