@extends('layouts.app')

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

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

@include('finance.top-submenu')

<div class="mb-5 flex flex-wrap items-center justify-between gap-3">
    <p class="text-sm text-slate-600">Your expense claims and salary advance repayments.</p>
    @can('create', App\Models\Expense::class)
        <a href="{{ route('expenses.create') }}" class="inline-flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-hover">
            <i class="bi bi-plus-lg"></i> Submit claim
        </a>
    @endcan
</div>

<div class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
    <div class="relative overflow-hidden rounded-2xl border border-slate-200/70 bg-white p-5 pl-6 shadow-sm">
        <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-slate-500">Pending claims</p>
        <p class="mt-2 text-xl font-bold text-amber-700">{{ $stats['pending_claims'] }}</p>
        <p class="mt-1 text-xs text-slate-500">{{ $currency }}{{ number_format($stats['pending_claims_amount'], 2) }} awaiting review</p>
    </div>
    <div class="relative overflow-hidden rounded-2xl border border-slate-200/70 bg-white p-5 pl-6 shadow-sm">
        <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-emerald-500" aria-hidden="true"></span>
        <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Approved this month</p>
        <p class="mt-2 text-xl font-bold text-emerald-700">{{ $currency }}{{ number_format($stats['approved_mtd'], 2) }}</p>
    </div>
    <div class="relative overflow-hidden rounded-2xl border border-slate-200/70 bg-white p-5 pl-6 shadow-sm">
        <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-sky-500" aria-hidden="true"></span>
        <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Outstanding advance</p>
        <p class="mt-2 text-xl font-bold text-slate-900">{{ $currency }}{{ number_format($stats['outstanding_advance'], 2) }}</p>
        <a href="{{ route('finance.my-advances') }}" class="mt-1 inline-block text-xs text-primary hover:underline">View schedule</a>
    </div>
    <div class="relative overflow-hidden rounded-2xl border border-slate-200/70 bg-white p-5 pl-6 shadow-sm">
        <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-violet-500" aria-hidden="true"></span>
        <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Next payroll deduction</p>
        @if($stats['next_deduction'])
            <p class="mt-2 text-xl font-bold text-slate-900">{{ $currency }}{{ number_format((float) $stats['next_deduction']->amount, 2) }}</p>
            <p class="mt-1 text-xs text-slate-500">{{ date('M Y', mktime(0, 0, 0, $stats['next_deduction']->month, 1, $stats['next_deduction']->year)) }}</p>
        @else
            <p class="mt-2 text-lg font-medium text-slate-500">None scheduled</p>
        @endif
    </div>
</div>

<x-card>
    <div class="mb-4 flex items-center justify-between">
        <h2 class="text-sm font-semibold text-slate-800">Recent claims</h2>
        <a href="{{ route('expenses.index', ['scope' => 'self']) }}" 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">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-left text-xs font-medium uppercase text-slate-500">Status</th>
            </tr>
        </x-slot>
        @forelse($stats['recent_claims'] as $claim)
            <tr>
                <td class="px-4 py-3 text-sm text-slate-900">{{ $claim->category }}</td>
                <td class="px-4 py-3 text-sm font-medium text-slate-900">{{ $currency }}{{ number_format((float) $claim->amount, 2) }}</td>
                <td class="px-4 py-3 text-sm text-slate-600">{{ $claim->date?->format('d M Y') }}</td>
                <td class="px-4 py-3 text-sm capitalize">{{ $claim->status }}</td>
            </tr>
        @empty
            <tr><td colspan="4" class="p-0">
                @include('finance.partials.empty-state', [
                    'title' => 'No claims yet',
                    'description' => 'Your submitted expense claims will appear here.',
                    'actionUrl' => auth()->user()?->can('create', App\Models\Expense::class) ? route('expenses.create') : null,
                    'actionLabel' => 'Submit claim',
                    'icon' => 'bi-receipt',
                ])
            </td></tr>
        @endforelse
    </x-table>
</x-card>
@endsection