@extends('layouts.app')

@section('title', 'Team Finance')
@section('heading', 'Team Finance')

@section('content')
@php $currency = config('app.currency_symbol', '₹'); @endphp

@include('finance.top-submenu')

<div class="mb-5">
    <p class="text-sm text-slate-600">Review and approve expense claims for your team ({{ $stats['team_size'] }} {{ Str::plural('member', $stats['team_size']) }}).</p>
</div>

<div class="mb-6 grid gap-4 sm:grid-cols-2">
    <a href="{{ route('expenses.index', ['scope' => 'team', 'status' => 'pending']) }}"
       class="relative block overflow-hidden rounded-2xl border border-amber-200/80 bg-amber-50/50 p-5 pl-6 shadow-sm transition hover:border-amber-300">
        <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-amber-500" aria-hidden="true"></span>
        <p class="text-xs font-semibold uppercase tracking-wider text-amber-800">Pending approvals</p>
        <p class="mt-2 text-xl font-bold text-amber-900">{{ $stats['pending_count'] }}</p>
        <p class="mt-1 text-sm text-amber-800/80">{{ $currency }}{{ number_format($stats['pending_amount'], 2) }} total</p>
    </a>
    <a href="{{ route('expenses.index', ['scope' => 'team']) }}"
       class="relative block overflow-hidden rounded-2xl border border-slate-200/70 bg-white p-5 pl-6 shadow-sm transition hover:border-primary/30">
        <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-teal-600" aria-hidden="true"></span>
        <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">All team expenses</p>
        <p class="mt-2 text-lg font-semibold text-primary">Open team list →</p>
        <p class="mt-1 text-xs text-slate-500">Includes approved, paid, and rejected</p>
    </a>
</div>

<x-card>
    <div class="mb-4 flex items-center justify-between">
        <h2 class="text-sm font-semibold text-slate-800">Pending team claims</h2>
        <a href="{{ route('expenses.index', ['scope' => 'team', 'status' => 'pending']) }}" class="inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline">
            View all <i class="bi bi-chevron-right text-[10px]"></i>
        </a>
    </div>
    <x-table>
        <x-slot name="head">
            <tr>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Employee</th>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Category</th>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Amount</th>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Date</th>
                <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Action</th>
            </tr>
        </x-slot>
        @forelse($stats['recent_pending'] as $expense)
            <tr>
                <td class="px-4 py-3 text-sm text-slate-900">{{ $expense->claimant?->name ?? '—' }}</td>
                <td class="px-4 py-3 text-sm text-slate-700">{{ $expense->category }}</td>
                <td class="px-4 py-3 text-sm font-medium text-slate-900">{{ $currency }}{{ number_format((float) $expense->amount, 2) }}</td>
                <td class="px-4 py-3 text-sm text-slate-600">{{ $expense->date?->format('d M Y') }}</td>
                <td class="px-4 py-3 text-right text-sm">
                    @can('review', $expense)
                        <a href="{{ route('expenses.edit', $expense) }}" class="font-medium text-primary hover:underline">Review</a>
                    @endcan
                </td>
            </tr>
        @empty
            <tr><td colspan="5" class="p-0">
                @include('finance.partials.empty-state', [
                    'title' => 'No pending team claims',
                    'description' => 'When your team submits expense claims, they will appear here for review.',
                    'actionUrl' => route('expenses.index', ['scope' => 'team']),
                    'actionLabel' => 'View all team expenses',
                    'icon' => 'bi-people',
                ])
            </td></tr>
        @endforelse
    </x-table>
</x-card>
@endsection