@extends('layouts.app')

@section('title', $canManage ? 'Appreciations' : 'My Appreciations')
@section('heading', $canManage ? 'Appreciations' : 'My Appreciations')

@section('content')
@if($canManage)
@include('hr.top-submenu')
@endif

    <div class="mb-5 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <x-kpi-card
            :title="$canManage ? 'Total appreciations' : 'My appreciations'"
            :value="$kpis['total'] ?? 0"
            accent="emerald"
            :subtitle="$canManage ? 'Company recognition records' : 'Recognition you received'"
        />
    </div>

    <x-card>
        <div class="mb-4 flex justify-between items-center">
            <p class="text-slate-600">
                @if($canManage)
                    Employee appreciations and recognition.
                @else
                    Recognition and appreciations given to you.
                @endif
            </p>
            @if($canManage)
            <a href="{{ route('appreciations.create') }}" class="inline-flex items-center rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700"><i class="bi bi-plus-lg me-1"></i>Add Appreciation</a>
            @endif
        </div>
        <x-table>
            <x-slot name="head">
                <tr>
                    @if($canManage)
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Employee</th>
                    @endif
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Title</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">From</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Date</th>
                    @if($canManage)
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Actions</th>
                    @endif
                </tr>
            </x-slot>
            @forelse($appreciations as $a)
                <tr>
                    @if($canManage)
                    <td class="whitespace-nowrap px-4 py-3">
                        <div class="flex items-center gap-3">
                            @if($a->user)
                                <x-user-avatar :user="$a->user" size="sm" class="shrink-0" />
                            @endif
                            <span class="text-slate-900">{{ $a->user?->name ?? '—' }}</span>
                        </div>
                    </td>
                    @endif
                    <td class="px-4 py-3 text-sm text-slate-900 font-medium">
                        <div>{{ $a->title }}</div>
                        @if($a->description)
                            <div class="mt-1 text-xs font-normal text-slate-500">{{ \Illuminate\Support\Str::limit((string) $a->description, 100) }}</div>
                        @endif
                    </td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $a->givenByUser?->name ?? '—' }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $a->appreciation_date?->format('M d, Y') }}</td>
                    @if($canManage)
                    <td class="whitespace-nowrap px-4 py-3 text-sm"><a href="{{ route('appreciations.edit', $a) }}" class="btn-icon-action btn-icon-action--edit" title="Edit" aria-label="Edit"><i class="bi bi-pencil-square"></i></a></td>
                    @endif
                </tr>
            @empty
                <tr><td colspan="{{ $canManage ? 5 : 3 }}" class="px-4 py-8 text-center text-sm text-slate-500">No appreciations yet.</td></tr>
            @endforelse
        </x-table>
        @if($appreciations->hasPages())<div class="mt-4">{{ $appreciations->links() }}</div>@endif
    </x-card>
@endsection