<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Invoice {{ $payment->invoice_number }}</title>
<style>
    /* DomPDF compatible — no flexbox, no grid, no CSS vars */
    @page { margin: 32px 36px; }
    body { font-family: DejaVu Sans, Arial, sans-serif; color: #1e293b; font-size: 11px; line-height: 1.4; }
    .header { width: 100%; margin-bottom: 24px; }
    .header td { vertical-align: top; }
    .brand { font-size: 22px; font-weight: bold; color: #4f46e5; }
    .doc-title { font-size: 28px; font-weight: bold; text-transform: uppercase; color: #1e293b; letter-spacing: 2px; }
    .meta-table { width: 100%; margin-top: 18px; border-collapse: collapse; }
    .meta-table td { padding: 4px 0; vertical-align: top; }
    .meta-label { color: #64748b; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }
    .meta-value { font-weight: bold; color: #1e293b; }
    .parties { width: 100%; margin-top: 24px; border-collapse: collapse; }
    .parties td { width: 50%; vertical-align: top; padding: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 4px; }
    .parties .role { font-size: 9px; color: #64748b; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; }
    .parties .name { font-weight: bold; font-size: 13px; color: #1e293b; margin-bottom: 4px; }
    .parties .addr { white-space: pre-line; color: #475569; font-size: 10px; }
    .parties .tax { margin-top: 6px; color: #475569; font-size: 10px; }
    .items { width: 100%; margin-top: 24px; border-collapse: collapse; }
    .items th { background: #1e293b; color: #fff; padding: 10px 12px; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
    .items th.r { text-align: right; }
    .items td { padding: 12px; border-bottom: 1px solid #e2e8f0; }
    .items td.r { text-align: right; }
    .totals { width: 40%; margin-top: 8px; margin-left: 60%; border-collapse: collapse; }
    .totals td { padding: 6px 12px; }
    .totals .label { text-align: right; color: #64748b; }
    .totals .val { text-align: right; font-weight: bold; color: #1e293b; }
    .totals .grand { font-size: 14px; color: #4f46e5; border-top: 2px solid #4f46e5; padding-top: 10px; }
    .footer { margin-top: 36px; padding-top: 16px; border-top: 1px solid #e2e8f0; color: #94a3b8; font-size: 9px; text-align: center; }
    .status-paid { display: inline-block; padding: 4px 12px; background: #10b981; color: #fff; font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; border-radius: 4px; }
    .status-pending { display: inline-block; padding: 4px 12px; background: #f59e0b; color: #fff; font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; border-radius: 4px; }
    .status-failed { display: inline-block; padding: 4px 12px; background: #ef4444; color: #fff; font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; border-radius: 4px; }
</style>
</head>
<body>

<table class="header">
    <tr>
        <td>
            @if(!empty($seller['logo_url']))
                <img src="{{ $seller['logo_url'] }}" alt="{{ $seller['name'] }}" style="max-height:48px; max-width:200px; margin-bottom:8px;">
            @endif
            <div class="brand">{{ $seller['name'] }}</div>
            @if($seller['address'])<div style="margin-top:6px; white-space: pre-line; color:#475569;">{{ $seller['address'] }}</div>@endif
            @if($seller['email'])<div style="color:#475569;">{{ $seller['email'] }}</div>@endif
            @if($seller['phone'])<div style="color:#475569;">{{ $seller['phone'] }}</div>@endif
            @if($seller['tax_id'])<div style="color:#475569; margin-top:4px;">Tax ID: {{ $seller['tax_id'] }}</div>@endif
            @if($seller['vat'])<div style="color:#475569;">VAT: {{ $seller['vat'] }}</div>@endif
        </td>
        <td style="text-align: right;">
            <div class="doc-title">Invoice</div>
            <table class="meta-table">
                <tr>
                    <td class="meta-label">Invoice #</td>
                    <td class="meta-value">{{ $payment->invoice_number }}</td>
                </tr>
                <tr>
                    <td class="meta-label">Date</td>
                    <td class="meta-value">{{ $payment->created_at?->format('M d, Y') }}</td>
                </tr>
                <tr>
                    <td class="meta-label">Status</td>
                    <td>
                        @switch($payment->status)
                            @case('succeeded') <span class="status-paid">Paid</span> @break
                            @case('pending')   <span class="status-pending">Pending</span> @break
                            @default           <span class="status-failed">{{ ucfirst($payment->status) }}</span>
                        @endswitch
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<table class="parties">
    <tr>
        <td>
            <div class="role">From</div>
            <div class="name">{{ $seller['name'] }}</div>
            @if($seller['address'])<div class="addr">{{ $seller['address'] }}</div>@endif
            @if($seller['vat'])<div class="tax">VAT: {{ $seller['vat'] }}</div>@endif
            @if($seller['tax_id'])<div class="tax">Tax ID: {{ $seller['tax_id'] }}</div>@endif
        </td>
        <td>
            <div class="role">Bill To</div>
            <div class="name">{{ $buyer['company'] ?: $buyer['name'] ?: $buyer['email'] }}</div>
            @if($buyer['name'] && $buyer['company'])<div class="addr">{{ $buyer['name'] }}</div>@endif
            @if($buyer['address'])<div class="addr">{{ $buyer['address'] }}</div>@endif
            @if($buyer['email'])<div class="tax">{{ $buyer['email'] }}</div>@endif
            @if($buyer['vat'])<div class="tax">VAT: {{ $buyer['vat'] }}</div>@endif
            @if($buyer['tax_id'])<div class="tax">Tax ID: {{ $buyer['tax_id'] }}</div>@endif
        </td>
    </tr>
</table>

<table class="items">
    <thead>
        <tr>
            <th>Description</th>
            <th class="r">Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{{ $lines['description'] }}</td>
            <td class="r">{{ $lines['subtotal_f'] }}</td>
        </tr>
    </tbody>
</table>

<table class="totals">
    <tr>
        <td class="label">Subtotal</td>
        <td class="val">{{ $lines['subtotal_f'] }}</td>
    </tr>
    @if($lines['discount'] > 0)
    <tr>
        <td class="label">Discount @if($payment->coupon_code)({{ $payment->coupon_code }})@endif</td>
        <td class="val">- {{ $lines['discount_f'] }}</td>
    </tr>
    @endif
    @if($lines['tax_rate'] > 0)
    <tr>
        <td class="label">Tax ({{ rtrim(rtrim(number_format($lines['tax_rate'], 2), '0'), '.') }}%)</td>
        <td class="val">{{ $lines['tax_f'] }}</td>
    </tr>
    @endif
    <tr>
        <td class="label grand">Total</td>
        <td class="val grand">{{ $lines['total_f'] }}</td>
    </tr>
</table>

@if($seller['bank'])
<div style="margin-top: 32px; padding: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 4px;">
    <div style="font-size: 9px; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px;">Payment Details</div>
    <div style="white-space: pre-line; color: #475569; font-size: 10px;">{{ $seller['bank'] }}</div>
</div>
@endif

<div class="footer">
    Thank you for your business — {{ $seller['name'] }}
    @if($seller['website']) · {{ $seller['website'] }}@endif
</div>

</body>
</html>
