@extends('layouts.app')

@section('title', 'Expenses')
@section('heading', ($expenseScope ?? 'company') === 'self' ? 'My expense claims' : 'Expenses')

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

@include('finance.top-submenu')

@if(count($expenseScopeOptions ?? []) > 1)
    <div class="mb-4 flex flex-wrap gap-2">
        @foreach($expenseScopeOptions as $scopeKey)
            <a href="{{ route('expenses.index', array_merge(request()->only('status'), ['scope' => $scopeKey])) }}"
               class="rounded-full px-3 py-1.5 text-sm font-medium transition {{ ($expenseScope ?? '') === $scopeKey ? 'bg-primary text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }}">
                {{ app(\App\Services\Finance\FinanceNavService::class)->expenseScopeLabel($scopeKey) }}
            </a>
        @endforeach
    </div>
@endif

<x-card>
    <div class="mb-4 flex flex-wrap items-center justify-between gap-4">
        <div>
            <p class="text-sm text-slate-600">Track operational spend and reimbursement claims.</p>
            @if(request('status') === 'pending' && $expenses->total() > 0)
                <p class="mt-1 text-xs text-amber-600">{{ $expenses->total() }} expense(s) need review.</p>
            @endif
        </div>
        <div class="flex flex-wrap items-center gap-3">
            <form method="GET" class="flex gap-2">
                @if(request('scope'))
                    <input type="hidden" name="scope" value="{{ request('scope') }}">
                @endif
                <select name="status" class="rounded-lg border border-slate-300 px-3 py-1.5 text-sm js-select2" onchange="this.form.submit()">
                    <option value="">All statuses</option>
                    <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="approved" {{ request('status') === 'approved' ? 'selected' : '' }}>Approved</option>
                    <option value="paid" {{ request('status') === 'paid' ? 'selected' : '' }}>Paid</option>
                    <option value="rejected" {{ request('status') === 'rejected' ? 'selected' : '' }}>Rejected</option>
                </select>
            </form>
            @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> {{ app(\App\Services\Finance\FinanceNavService::class)->canViewCompanyExpenses(auth()->user()) ? 'Add expense' : 'Submit claim' }}
            </a>
            @endcan
        </div>
    </div>
    <x-table>
        <x-slot name="head">
            <tr>
                @if(($expenseScope ?? 'company') !== 'self')
                    <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">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 hidden md:table-cell">Account</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>
                <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Actions</th>
            </tr>
        </x-slot>
        @forelse($expenses as $e)
            <tr class="hover:bg-slate-50/80">
                @if(($expenseScope ?? 'company') !== 'self')
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-700">{{ $e->claimant?->name ?? '—' }}</td>
                @endif
                <td class="whitespace-nowrap px-4 py-3 text-sm font-medium text-slate-900">{{ $e->category }}</td>
                <td class="whitespace-nowrap px-4 py-3 text-sm font-semibold text-slate-800">{{ $currency }}{{ number_format($e->amount, 2) }}</td>
                <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600 hidden md:table-cell">{{ $e->account?->name ?? '—' }}</td>
                <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $e->date?->format('M d, Y') }}</td>
                <td class="whitespace-nowrap px-4 py-3 text-sm">
                    <x-badge :variant="$e->statusBadgeVariant()">{{ $e->statusLabel() }}</x-badge>
                </td>
                <td class="whitespace-nowrap px-4 py-3 text-right text-sm">
                    @can('view', $e)
                        <a href="{{ route('expenses.show', ['expense' => $e, 'scope' => request('scope')]) }}" class="btn-icon-action btn-icon-action--view" title="View" aria-label="View"><i class="bi bi-eye"></i></a>
                    @endcan
                    @can('update', $e)
                        <a href="{{ route('expenses.edit', ['expense' => $e, 'scope' => request('scope')]) }}" class="btn-icon-action btn-icon-action--edit" title="Edit" aria-label="Edit"><i class="bi bi-pencil-square"></i></a>
                    @endcan
                    @can('review', $e)
                        @if($e->status === 'pending')
                            <form action="{{ route('expenses.update-status', $e) }}" method="post" class="ms-2 inline">
                                @csrf
                                <input type="hidden" name="status" value="approved">
                                <button type="submit" class="text-xs text-emerald-600 hover:underline">Approve</button>
                            </form>
                            <form action="{{ route('expenses.update-status', $e) }}" method="post" class="ms-1 inline">
                                @csrf
                                <input type="hidden" name="status" value="rejected">
                                <button type="submit" class="text-xs text-red-600 hover:underline">Reject</button>
                            </form>
                        @elseif($e->status === 'approved')
                            <form action="{{ route('expenses.update-status', $e) }}" method="post" class="ms-2 inline">
                                @csrf
                                <input type="hidden" name="status" value="paid">
                                <button type="submit" class="text-xs text-sky-600 hover:underline">Mark paid</button>
                            </form>
                        @endif
                    @endcan
                </td>
            </tr>
        @empty
            <tr><td colspan="{{ ($expenseScope ?? 'company') === 'self' ? 6 : 7 }}" class="p-0">
                @include('finance.partials.empty-state', [
                    'title' => ($expenseScope ?? 'self') === 'self' ? 'No claims submitted yet' : 'No expenses in this view',
                    'description' => ($expenseScope ?? 'self') === 'self'
                        ? 'Submit a reimbursement claim and track approval status here.'
                        : 'Try another status filter or check back when new claims are submitted.',
                    'actionUrl' => ($expenseScope ?? 'self') === 'self' && auth()->user()?->can('create', App\Models\Expense::class) ? route('expenses.create') : null,
                    'actionLabel' => 'Submit claim',
                    'icon' => 'bi-receipt',
                ])
            </td></tr>
        @endforelse
    </x-table>
    @if($expenses->hasPages())<div class="mt-4">{{ $expenses->links() }}</div>@endif
</x-card>
@endsection