@extends('layouts.app')

@section('title', 'View Expense')
@section('heading', 'View Expense')

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

@include('finance.top-submenu')

<x-card>
    <div class="mb-6 flex flex-wrap items-start justify-between gap-3">
        <div>
            <p class="text-sm text-slate-500">Expense claim · read only</p>
            <h2 class="mt-1 text-lg font-semibold text-slate-900">{{ $expense->category }}</h2>
        </div>
        <x-badge :variant="$expense->statusBadgeVariant()">{{ $expense->statusLabel() }}</x-badge>
    </div>

    <dl class="grid gap-4 sm:grid-cols-2 max-w-3xl text-sm">
        <div>
            <dt class="text-slate-500">Claimant</dt>
            <dd class="mt-1 font-medium text-slate-900">{{ $expense->claimant?->name ?? '—' }}</dd>
        </div>
        <div>
            <dt class="text-slate-500">Amount</dt>
            <dd class="mt-1 font-semibold text-slate-900">{{ $currency }}{{ number_format((float) $expense->amount, 2) }}</dd>
        </div>
        <div>
            <dt class="text-slate-500">Date</dt>
            <dd class="mt-1 text-slate-900">{{ $expense->date?->format('M d, Y') ?? '—' }}</dd>
        </div>
        <div>
            <dt class="text-slate-500">Account</dt>
            <dd class="mt-1 text-slate-900">{{ $expense->account?->name ?? '—' }}</dd>
        </div>
        <div>
            <dt class="text-slate-500">Vendor</dt>
            <dd class="mt-1 text-slate-900">{{ $expense->vendor?->name ?? '—' }}</dd>
        </div>
        <div>
            <dt class="text-slate-500">Submitted by</dt>
            <dd class="mt-1 text-slate-900">{{ $expense->submitter?->name ?? '—' }}</dd>
        </div>
        @if($expense->reviewed_at)
            <div>
                <dt class="text-slate-500">Reviewed by</dt>
                <dd class="mt-1 text-slate-900">{{ $expense->reviewer?->name ?? '—' }}</dd>
            </div>
            <div>
                <dt class="text-slate-500">Reviewed at</dt>
                <dd class="mt-1 text-slate-900">{{ $expense->reviewed_at->format('M d, Y h:i A') }}</dd>
            </div>
        @endif
        <div class="sm:col-span-2">
            <dt class="text-slate-500">Description</dt>
            <dd class="mt-1 text-slate-900">{{ $expense->description ?: '—' }}</dd>
        </div>
        @if($expense->review_remarks)
            <div class="sm:col-span-2">
                <dt class="text-slate-500">Review remarks</dt>
                <dd class="mt-1 text-slate-900">{{ $expense->review_remarks }}</dd>
            </div>
        @endif
    </dl>

    <div class="mt-6 flex gap-2">
        <a href="{{ route('expenses.index', ['scope' => request('scope')]) }}" class="inline-flex items-center rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200">Back to list</a>
    </div>
</x-card>
@endsection