@php
    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('common.hr')],
        ['label' => __('recruitment.dashboard.title')],
    ];
    $kpiCards = [
        ['key' => 'open_vacancies', 'icon' => 'fe fe-briefcase'],
        ['key' => 'active_applications', 'icon' => 'fe fe-file-text'],
        ['key' => 'scheduled_interviews', 'icon' => 'fe fe-calendar'],
        ['key' => 'offers_pending', 'icon' => 'fe fe-mail'],
        ['key' => 'pending_job_requests', 'icon' => 'fe fe-file-plus'],
        ['key' => 'hires_this_month', 'icon' => 'fe fe-user-plus'],
        ['key' => 'onboarding_in_progress', 'icon' => 'fe fe-refresh-cw'],
        ['key' => 'onboarding_completed', 'icon' => 'fe fe-check-circle'],
    ];
@endphp

<x-ui.layout.page
    :title="__('recruitment.dashboard.title')"
    :subtitle="__('recruitment.dashboard.subtitle')"
    page-icon="fe fe-pie-chart"
    :breadcrumbs="$breadcrumbs"
>
    <div class="row g-3 mb-4">
        @foreach ($kpiCards as $card)
            <x-ui.dashboard.stat-card
                :label="__('recruitment.dashboard.kpis.'.$card['key'])"
                :value="(string) ($kpis[$card['key']] ?? 0)"
                :icon="$card['icon']"
            />
        @endforeach
    </div>

    <div class="row g-3 mb-4">
        @foreach ($shortcuts as $item)
            @if (($item['permission'] ?? null) === null || auth()->user()?->can($item['permission']))
                <div class="col-6 col-md-4 col-xl-2">
                    <a href="{{ route($item['route']) }}" class="card border-0 shadow-sm h-100 text-decoration-none">
                        <div class="card-body text-center py-3">
                            <span
                                class="avatar avatar-md rounded d-inline-flex align-items-center justify-content-center mb-2"
                                style="background: {{ config('theme.gradients.primary') }};"
                            >
                                <i class="{{ $item['icon'] }} text-white"></i>
                            </span>
                            <div class="small fw-semibold" style="color: {{ config('theme.colors.text') }};">
                                {{ __('recruitment.features.'.$item['label_key']) }}
                            </div>
                        </div>
                    </a>
                </div>
            @endif
        @endforeach
    </div>

    <div class="row g-3">
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <h6 class="mb-3">{{ __('recruitment.dashboard.pipeline_title') }}</h6>
                    @foreach ($pipeline as $status => $total)
                        <div class="d-flex justify-content-between small py-1 border-bottom">
                            <span>{{ __('recruitment.applications.status.'.$status) }}</span>
                            <strong>{{ $total }}</strong>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="mb-0">{{ __('recruitment.dashboard.upcoming_interviews') }}</h6>
                        <a href="{{ route('hr.recruitment.interviews.index') }}" class="small">{{ __('recruitment.common.view') }}</a>
                    </div>
                    @forelse ($upcomingInterviews as $interview)
                        <div class="small py-2 border-bottom">
                            <div class="fw-semibold">{{ $interview->application?->candidate?->first_name }} {{ $interview->application?->candidate?->last_name }}</div>
                            <div class="text-muted">{{ $interview->scheduled_at?->format('Y-m-d H:i') }} · {{ $interview->application?->vacancy?->title }}</div>
                        </div>
                    @empty
                        <p class="text-muted small mb-0">{{ __('recruitment.dashboard.empty_interviews') }}</p>
                    @endforelse
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="mb-0">{{ __('recruitment.dashboard.recent_applications') }}</h6>
                        <a href="{{ route('hr.recruitment.applications.index') }}" class="small">{{ __('recruitment.common.view') }}</a>
                    </div>
                    @forelse ($recentApplications as $application)
                        <div class="small py-2 border-bottom">
                            <div class="fw-semibold">{{ $application->candidate?->first_name }} {{ $application->candidate?->last_name }}</div>
                            <div class="text-muted">{{ $application->vacancy?->title }} · {{ __('recruitment.applications.status.'.$application->status) }}</div>
                        </div>
                    @empty
                        <p class="text-muted small mb-0">{{ __('recruitment.dashboard.empty_applications') }}</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm mt-3">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="mb-0">{{ __('recruitment.dashboard.active_onboarding') }}</h6>
                <a href="{{ route('hr.recruitment.onboarding.index') }}" class="small">{{ __('recruitment.common.view') }}</a>
            </div>
            <div class="row g-3">
                @forelse ($activeOnboarding as $case)
                    <div class="col-md-6 col-xl-4">
                        <a href="{{ route('hr.recruitment.onboarding.show', $case) }}" class="text-decoration-none">
                            <div class="border rounded-3 p-3" style="border-color: {{ config('theme.colors.muted') }} !important;">
                                <div class="fw-semibold" style="color: {{ config('theme.colors.text') }};">{{ $case->employee?->full_name }}</div>
                                <div class="small text-muted mb-2">{{ $case->reference_code }}</div>
                                <div class="progress" style="height: 8px;">
                                    <div class="progress-bar" style="width: {{ (int) $case->progress_percent }}%; background: {{ config('theme.colors.primary') }};"></div>
                                </div>
                                <div class="small mt-1" style="color: {{ config('theme.colors.text') }};">{{ (int) $case->progress_percent }}%</div>
                            </div>
                        </a>
                    </div>
                @empty
                    <div class="col-12"><p class="text-muted small mb-0">{{ __('recruitment.dashboard.empty_onboarding') }}</p></div>
                @endforelse
            </div>
        </div>
    </div>
</x-ui.layout.page>
