@php
    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('common.hr')],
        ['label' => __('recruitment.onboarding.title'), 'url' => route('hr.recruitment.onboarding.index')],
        ['label' => $case->employee?->full_name ?? $case->reference_code],
    ];
    $pct = (int) $case->progress_percent;
@endphp

<x-ui.layout.page
    :title="$case->employee?->full_name ?? __('recruitment.onboarding.title')"
    :subtitle="$case->reference_code"
    page-icon="fe fe-user-check"
    :breadcrumbs="$breadcrumbs"
>
    <x-slot:actions>
        <x-ui.buttons.secondary :href="route('hr.recruitment.onboarding.index')" icon="fe fe-arrow-left">
            {{ __('recruitment.common.back') }}
        </x-ui.buttons.secondary>
        @if ($case->employee)
            <x-ui.buttons.secondary :href="route('hr.employees.edit', $case->employee)" icon="fe fe-user">
                {{ __('recruitment.onboarding.actions.employee') }}
            </x-ui.buttons.secondary>
        @endif
    </x-slot:actions>

    <div class="row g-3 mb-4">
        <x-ui.dashboard.stat-card :label="__('recruitment.onboarding.progress')" :value="$pct.'%'" icon="fe fe-activity" />
        <x-ui.dashboard.stat-card :label="__('recruitment.onboarding.fields.status')" :value="__('recruitment.onboarding.case_status.'.$case->status)" icon="fe fe-flag" />
        <x-ui.dashboard.stat-card :label="__('recruitment.onboarding.fields.hire_date')" :value="($case->employee?->hire_date?->format('Y-m-d') ?? '—')" icon="fe fe-calendar" />
        <x-ui.dashboard.stat-card :label="__('recruitment.onboarding.fields.department')" :value="($case->employee?->department?->name ?? '—')" icon="fe fe-briefcase" />
    </div>

    @if ($case->employee?->onboarding_completed_at)
        <div class="alert mb-3" style="background: {{ config('theme.ui.severity.success') }}22; border-color: {{ config('theme.ui.severity.success') }}; color: {{ config('theme.ui.severity.success') }};">
            {{ __('recruitment.onboarding.completed_banner', ['at' => $case->employee->onboarding_completed_at->format('Y-m-d H:i')]) }}
        </div>
    @endif

    <div class="row g-2 mb-3 small text-muted">
        @if ($case->hiring)
            <div class="col-auto">{{ __('recruitment.onboarding.links.hiring') }}: {{ $case->hiring->reference_code }}</div>
        @endif
        @if ($case->candidate)
            <div class="col-auto">{{ __('recruitment.onboarding.links.candidate') }}: {{ $case->candidate->first_name }} {{ $case->candidate->last_name }}</div>
        @endif
        @if ($case->vacancy)
            <div class="col-auto">{{ __('recruitment.onboarding.links.vacancy') }}: {{ $case->vacancy->title }}</div>
        @endif
    </div>

    <ul class="nav nav-tabs mb-3 flex-wrap">
        @foreach ($tabs as $tabKey)
            @php $count = $sectionCounts[$tabKey] ?? ['done' => 0, 'total' => 0]; @endphp
            <li class="nav-item">
                <a
                    class="nav-link {{ $tab === $tabKey ? 'active' : '' }}"
                    href="{{ route('hr.recruitment.onboarding.show', ['onboarding' => $case, 'tab' => $tabKey]) }}"
                    style="{{ $tab === $tabKey ? 'color: '.config('theme.colors.primary').'; border-color: '.config('theme.colors.primary') : '' }}"
                >
                    {{ __('recruitment.onboarding.sections.'.$tabKey) }}
                    <span class="badge ms-1" style="background: {{ config('theme.colors.muted') }}">{{ $count['done'] }}/{{ $count['total'] }}</span>
                </a>
            </li>
        @endforeach
    </ul>

    <div class="card border-0 shadow-sm">
        <div class="card-body">
            @include('pages.hr.recruitment.onboarding.tabs.'.$tab, [
                'case' => $case,
                'sectionTasks' => $sectionTasks,
                'assignees' => $assignees,
                'employeeDocuments' => $employeeDocuments ?? collect(),
            ])
        </div>
    </div>
</x-ui.layout.page>
