@extends('layouts.app')
@section('content')
<div class="max-w-3xl mx-auto px-4 lg:px-10 py-8">
<p class="pulso-label">Invoice {{ $invoice->reference }}</p>
<h1 class="text-3xl font-display mt-1">${{ number_format($invoice->total,2) }} <span class="text-lg text-ink-400">· {{ $invoice->status->value }}</span></h1>
<div class="mt-6 border border-stone-200 bg-white p-6">
<table class="w-full text-sm"><thead class="text-[11px] tracking-[0.14em] uppercase border-b"><tr><th class="text-left py-2">Description</th><th class="text-right">Amount</th></tr></thead><tbody>
@foreach($invoice->items as $item)<tr class="border-b border-stone-100"><td class="py-3">{{ $item->description }}</td><td class="text-right">${{ number_format($item->line_total,2) }}</td></tr>@endforeach
</tbody><tfoot><tr><td class="py-3 font-medium">Total</td><td class="text-right font-bold">${{ number_format($invoice->total,2) }}</td></tr><tr><td class="py-1 text-ink-500">Balance</td><td class="text-right font-medium">${{ number_format($invoice->balance,2) }}</td></tr></tfoot></table>
@if($invoice->balance > 0)
<form method="POST" action="{{ route('portal.invoices.pay',$invoice) }}" class="mt-6">@csrf<button class="w-full bg-ink-900 text-white py-3 text-[11px] tracking-[0.14em] uppercase">Pay ${{ number_format($invoice->balance,2) }}</button></form>
@endif
</div>
</div>
@endsection