@php
    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('common.hr')],
        ['label' => __('recruitment.reports.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' => 'hires_period', 'icon' => 'fe fe-user-plus'],
        ['key' => 'avg_time_to_hire', 'icon' => 'fe fe-clock'],
    ];
    $q = $filters->toQuery();
@endphp

<x-ui.layout.page
    :title="__('recruitment.reports.title')"
    :subtitle="__('recruitment.reports.subtitle')"
    page-icon="fe fe-bar-chart-2"
    :breadcrumbs="$breadcrumbs"
>
    @include('pages.hr.recruitment.reports._filters', [
        'action' => route('hr.recruitment.reports.index'),
        'filters' => $filters,
        'filterOptions' => $filterOptions,
        'showStatus' => false,
    ])

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

    <div class="row g-3">
        @foreach ($reports as $item)
            <div class="col-md-6 col-xl-4">
                <a href="{{ route('hr.recruitment.reports.show', array_merge(['report' => $item['type']], $q)) }}"
                   class="card border-0 shadow-sm h-100 text-decoration-none">
                    <div class="card-body">
                        <div class="d-flex align-items-center gap-3 mb-2">
                            <span
                                class="avatar avatar-md rounded d-inline-flex align-items-center justify-center justify-content-center"
                                style="background: {{ config('theme.gradients.primary') }};">
                                <i class="{{ $item['icon'] }} text-white"></i>
                            </span>
                            <strong style="color: {{ config('theme.colors.text') }};">
                                {{ __('recruitment.reports.types.'.$item['type']) }}
                            </strong>
                        </div>
                        <p class="text-muted small mb-0">{{ __('recruitment.reports.types.'.$item['type'].'_hint') }}</p>
                    </div>
                </a>
            </div>
        @endforeach
    </div>
</x-ui.layout.page>
