@extends('layouts.app')
@section('title',$expense->expense_number)
@section('content')
<x-ui.page-toolbar :title="$expense->expense_number" description="Expense request, evidence, approval and financial posting history." :breadcrumbs="[['label'=>'Dashboard','url'=>route('dashboard')],['label'=>'Expenses','url'=>route('expenses.index')],['label'=>$expense->expense_number]]">
    <x-slot:actions>@if($expense->status==='approved' && $expense->financial_account_transaction_id && $expense->accounting_journal_number)<a class="mf-btn" href="{{ route('documents.expense-voucher.print',$expense) }}">Print Voucher</a><a class="mf-btn mf-btn-primary" href="{{ route('documents.expense-voucher.pdf',$expense) }}">Download PDF</a>@endif</x-slot:actions>
</x-ui.page-toolbar>

<div class="grid gap-4 lg:grid-cols-3">
    <div class="lg:col-span-2 space-y-4">
        <div class="mf-card mf-card-body">
            <div class="flex flex-wrap items-center justify-between gap-3"><div><div class="text-xs text-muted-foreground">Status</div><span class="mf-badge {{ $expense->status==='approved'?'mf-badge-success':($expense->status==='rejected'?'mf-badge-danger':'mf-badge-warning') }}">{{ ucfirst($expense->status) }}</span></div><div class="text-right"><div class="text-xs text-muted-foreground">Amount</div><div class="text-2xl font-semibold">{{ $expense->branch->business->currency_symbol }}{{ number_format((float)$expense->amount,2) }}</div></div></div>
            <div class="mt-5 grid gap-4 md:grid-cols-2">
                <div><div class="text-xs text-muted-foreground">Category</div><div class="font-medium">{{ $expense->category->name }}</div></div>
                <div><div class="text-xs text-muted-foreground">Expense date</div><div class="font-medium">{{ $expense->expense_date->format('d M Y') }}</div></div>
                <div><div class="text-xs text-muted-foreground">Branch</div><div class="font-medium">{{ $expense->branch->name }}</div></div>
                <div><div class="text-xs text-muted-foreground">Paid-from account</div><div class="font-medium">{{ $expense->financialAccount->name }}</div></div>
                <div class="md:col-span-2"><div class="text-xs text-muted-foreground">Description</div><div class="font-medium">{{ $expense->description }}</div></div>
                <div><div class="text-xs text-muted-foreground">Supplier</div><div class="font-medium">{{ $expense->supplier ?: '—' }}</div></div>
                <div><div class="text-xs text-muted-foreground">Entered by</div><div class="font-medium">{{ $expense->enteredBy?->name ?? '—' }}</div></div>
                <div class="md:col-span-2"><div class="text-xs text-muted-foreground">Notes</div><div>{{ $expense->notes ?: '—' }}</div></div>
            </div>
        </div>

        <div class="mf-card mf-card-body">
            <h2 class="font-semibold">Evidence & source</h2>
            <div class="mt-3 grid gap-3 md:grid-cols-2">
                <div><div class="text-xs text-muted-foreground">Receipt</div>@if($expense->receipt_path)<a class="text-primary hover:underline" href="{{ route('expenses.receipt',$expense) }}">{{ $expense->receipt_original_name }}</a>@else<div>Not attached</div>@endif</div>
                <div><div class="text-xs text-muted-foreground">Recurring source</div>@if($expense->recurringExpense)<a class="text-primary hover:underline" href="{{ route('recurring-expenses.edit',$expense->recurringExpense) }}">Recurring schedule #{{ $expense->recurringExpense->id }}</a>@else<div>Manual expense</div>@endif</div>
            </div>
        </div>

        @if($expense->status==='approved')
        <div class="mf-card mf-card-body">
            <h2 class="font-semibold">Financial posting</h2>
            <div class="mt-3 grid gap-3 md:grid-cols-2">
                <div><div class="text-xs text-muted-foreground">Approved by</div><div>{{ $expense->approver?->name ?? '—' }}</div></div>
                <div><div class="text-xs text-muted-foreground">Approved at</div><div>{{ $expense->approved_at?->format('d M Y H:i') }}</div></div>
                <div><div class="text-xs text-muted-foreground">Account transaction</div><div>{{ $expense->accountTransaction?->transaction_number ?? '—' }}</div></div>
                <div><div class="text-xs text-muted-foreground">Journal</div><div>{{ $expense->accounting_journal_number ?? '—' }}</div></div>
            </div>
            <p class="mt-3 text-xs text-muted-foreground">Approval reduced the selected account and posted a balanced operating-expense journal. This expense is available to future P&amp;L reporting through the ledger.</p>
        </div>
        @elseif($expense->status==='rejected')
        <div class="mf-card mf-card-body"><h2 class="font-semibold">Rejection</h2><p class="mt-2">{{ $expense->decision_comments }}</p><div class="mt-2 text-xs text-muted-foreground">Rejected by {{ $expense->rejecter?->name ?? '—' }} · {{ $expense->rejected_at?->format('d M Y H:i') }}</div></div>
        @endif
    </div>

    <div>
        @if($expense->status==='pending' && auth()->user()->can('expenses.approve'))
        <div class="mf-card mf-card-body">
            <h2 class="font-semibold">Approval decision</h2>
            <p class="mt-1 text-xs text-muted-foreground">Approving posts the expense immediately and cannot be repeated. Rejecting creates no financial movement.</p>
            <form method="POST" action="{{ route('expenses.decision',$expense) }}" class="mt-4 space-y-3">@csrf
                <div><label class="mf-label">Comments</label><textarea class="mf-textarea" name="comments" rows="4" placeholder="Required for rejection; optional for approval">{{ old('comments') }}</textarea>@error('comments')<div class="mf-error">{{ $message }}</div>@enderror @error('expense')<div class="mf-error">{{ $message }}</div>@enderror @error('amount')<div class="mf-error">{{ $message }}</div>@enderror</div>
                <div class="grid grid-cols-2 gap-2"><button class="mf-btn mf-btn-primary" name="decision" value="approve">Approve & post</button><button class="mf-btn" name="decision" value="reject">Reject</button></div>
            </form>
        </div>
        @else
        <div class="mf-card mf-card-body"><div class="text-sm font-medium">Decision record</div><div class="mt-2 text-xs text-muted-foreground">{{ $expense->decision_comments ?: 'No decision comments.' }}</div></div>
        @endif
    </div>
</div>
@endsection