@extends('layouts.app')

@section('content')
    @include('hr.top-submenu')

    <div class="mb-5 flex flex-wrap items-center justify-between gap-3">
        <div>
            <h1 class=" font-semibold uppercase tracking-[0.18em] text-primary">HR Dashboard</h1>
            <p class="mt-1 text-sm text-slate-500">Central view across warnings, complaints, promotions, offboardings, resignations, terminations, and appreciations.</p>
        </div>
    </div>

    <div class="space-y-6">
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
            <x-kpi-card
                title="HR Records (This Month)"
                :value="$summary['total_records'] ?? 0"
                accent="sky"
                subtitle="Across all HR operations modules"
            />
            <x-kpi-card
                title="Pending Actions"
                :value="$summary['pending_actions'] ?? 0"
                tone="warning"
                accent="amber"
                subtitle="Pending complaints and resignations"
            />
            <x-kpi-card
                title="Movement (This Month)"
                :value="$summary['movement_this_month'] ?? 0"
                accent="violet"
                subtitle="Promotions + exits workflow"
            />
            <x-kpi-card
                title="Recognitions (This Month)"
                :value="$summary['recognitions_this_month'] ?? 0"
                accent="emerald"
                subtitle="Appreciations recorded"
            />
        </div>

        <div class="grid grid-cols-1 gap-4 xl:grid-cols-3">
            <x-card>
                <x-slot name="header">
                    <div class="flex items-center justify-between">
                        <h2 class="text-sm font-semibold text-slate-700">Complaints by Status</h2>
                        <a href="{{ route('complaints.index') }}" class="btn-icon-action btn-icon-action--view" title="View" aria-label="View"><i class="bi bi-eye"></i></a>
                    </div>
                </x-slot>
                <div class="flex flex-wrap gap-2">
                    @forelse(($summary['complaints_by_status'] ?? []) as $status => $count)
                        <x-badge :status="$status">
                            {{ str_replace('_', ' ', ucfirst($status)) }}: {{ $count }}
                        </x-badge>
                    @empty
                        <p class="text-sm text-slate-500">No complaint records found.</p>
                    @endforelse
                </div>
            </x-card>

            <x-card>
                <x-slot name="header">
                    <div class="flex items-center justify-between">
                        <h2 class="text-sm font-semibold text-slate-700">Resignations by Status</h2>
                        <a href="{{ route('resignations.index') }}" class="btn-icon-action btn-icon-action--view" title="View" aria-label="View"><i class="bi bi-eye"></i></a>
                    </div>
                </x-slot>
                <div class="flex flex-wrap gap-2">
                    @forelse(($summary['resignations_by_status'] ?? []) as $status => $count)
                        <x-badge :status="$status">
                            {{ str_replace('_', ' ', ucfirst($status)) }}: {{ $count }}
                        </x-badge>
                    @empty
                        <p class="text-sm text-slate-500">No resignation records found.</p>
                    @endforelse
                </div>
            </x-card>

            <x-card>
                <x-slot name="header">
                    <div class="flex items-center justify-between">
                        <h2 class="text-sm font-semibold text-slate-700">Terminations by Status</h2>
                        <a href="{{ route('terminations.index') }}" class="btn-icon-action btn-icon-action--view" title="View" aria-label="View"><i class="bi bi-eye"></i></a>
                    </div>
                </x-slot>
                <div class="flex flex-wrap gap-2">
                    @forelse(($summary['terminations_by_status'] ?? []) as $status => $count)
                        <x-badge :variant="$status === 'active' ? 'danger' : \App\Support\StatusBadge::variant($status)">
                            {{ str_replace('_', ' ', ucfirst($status)) }}: {{ $count }}
                        </x-badge>
                    @empty
                        <p class="text-sm text-slate-500">No termination records found.</p>
                    @endforelse
                </div>
            </x-card>
        </div>

        <x-card>
            <x-slot name="header">
                <div class="flex items-center justify-between">
                    <h2 class="text-sm font-semibold text-slate-700">Recent HR Activity</h2>
                    <span class="text-xs text-slate-500">Latest records across all seven HR modules</span>
                </div>
            </x-slot>

            <x-table>
                <x-slot name="head">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Module</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Title</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Employee</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Meta</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Date</th>
                        <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wide text-slate-500">Action</th>
                    </tr>
                </x-slot>

                @forelse($recentActivity as $item)
                    @php
                        $metaValue = (string) ($item['meta'] ?? '');
                    @endphp
                    <tr class="hover:bg-slate-50/60">
                        <td class="px-4 py-3 text-sm text-slate-700">{{ $item['module'] }}</td>
                        <td class="px-4 py-3 text-sm font-medium text-slate-800 ">{{ $item['title'] }}</td>
                        <td class="px-4 py-3 text-sm text-slate-700">{{ $item['employee'] }}</td>
                        <td class="px-4 py-3 text-sm">
                            <x-badge :status="$metaValue">{{ str_replace('_', ' ', $metaValue) }}</x-badge>
                        </td>
                        <td class="px-4 py-3 text-sm text-slate-700">{{ $item['activity_date'] ?? '—' }}</td>
                        <td class="px-4 py-3 text-right">
                            <a href="{{ $item['link'] }}" class="text-sm font-medium text-primary hover:underline">Open</a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-4 py-8 text-center text-sm text-slate-500">
                            No recent HR activity found yet.
                        </td>
                    </tr>
                @endforelse
            </x-table>
        </x-card>
    </div>
@endsection