@php
    $company = $invoice->company_snapshot ?? [];
    $logoUrl = $invoice->logoPath() ? route('woo.public.logo', $invoice->public_token) : null;
@endphp
<div class="overflow-hidden rounded-2xl bg-white shadow-lg ring-1 ring-slate-200">
    <div class="bg-gradient-to-r from-indigo-600 to-violet-600 px-8 py-6 text-white">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div class="flex items-center gap-4">
                @if($logoUrl)
                    <img src="{{ $logoUrl }}" alt="" class="h-12 w-12 rounded-xl bg-white/10 object-contain p-1">
                @endif
                <div>
                    <p class="text-lg font-bold">{{ $company['company_name'] ?? 'Company' }}</p>
                    @if(!empty($company['email']))<p class="text-sm text-indigo-100">{{ $company['email'] }}</p>@endif
                </div>
            </div>
            <div class="text-left sm:text-right">
                <p class="text-sm uppercase tracking-widest text-indigo-100">Invoice</p>
                <p class="text-2xl font-bold">{{ $invoice->invoice_number }}</p>
            </div>
        </div>
    </div>
    <div class="grid gap-6 px-8 py-6 sm:grid-cols-2">
        <div>
            <p class="text-xs font-bold uppercase tracking-wide text-slate-400">Bill to</p>
            <p class="mt-2 text-lg font-semibold text-slate-900">{{ $invoice->client_name }}</p>
            @if($invoice->client_email)<p class="text-sm text-slate-600">{{ $invoice->client_email }}</p>@endif
            @if($invoice->client_address)<p class="mt-1 whitespace-pre-line text-sm text-slate-600">{{ $invoice->client_address }}</p>@endif
        </div>
        <div class="text-left sm:text-right text-sm text-slate-600">
            <p><span class="text-slate-400">Issued</span> {{ $invoice->issue_date->format('M j, Y') }}</p>
            @if($invoice->due_date)<p class="mt-1"><span class="text-slate-400">Due</span> {{ $invoice->due_date->format('M j, Y') }}</p>@endif
        </div>
    </div>
    <div class="px-8 pb-8">
        @include('invoices.templates._body', ['showPay' => $showPay ?? false])
    </div>
</div>