<!DOCTYPE html>
<html lang="en" class="@auth{{ request()->cookie('theme', 'light') === 'dark' ? 'dark' : '' }}@endauth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Invoice {{ $payment->invoice_number ?: '#' . $payment->id }}</title>
    {{-- Standalone page loaded inside an iframe modal. We pull the same
         theme tokens + body font as the rest of the app so the preview
         feels native (not a generic PDF viewer). --}}
    {!! \App\Helpers\FontHelper::renderHead() !!}
    {!! \App\Helpers\ThemeHelper::renderCss() !!}
    <style>
        :root {
            --bg: var(--color-surface, #F8FAFC);
            --card: var(--color-surface-2, #FFFFFF);
            --ink: var(--color-ink, #0F172A);
            --muted: var(--color-muted, #64748B);
            --border: var(--color-border, #E2E8F0);
            --brand: var(--color-brand, #4F46E5);
            --brand-strong: var(--color-brand-strong, #4338CA);
            --success: var(--color-success, #10B981);
            --warning: var(--color-warning, #F59E0B);
            --danger: var(--color-danger, #EF4444);
        }
        * { box-sizing: border-box; }
        html, body { margin: 0; padding: 0; }
        body {
            font-family: var(--app-font, 'Outfit', system-ui, sans-serif);
            background: var(--bg);
            color: var(--ink);
            -webkit-font-smoothing: antialiased;
            padding: 32px 24px;
            line-height: 1.5;
        }
        .invoice {
            max-width: 820px;
            margin: 0 auto;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 16px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.04);
            overflow: hidden;
        }
        /* Top brand bar */
        .topbar {
            height: 6px;
            background: linear-gradient(90deg, var(--brand) 0%, var(--brand-strong) 100%);
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 32px 36px 24px;
            flex-wrap: wrap;
            gap: 24px;
        }
        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .brand-mark {
            width: 44px; height: 44px;
            background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-weight: 800; font-size: 18px;
        }
        .brand-logo {
            max-height: 44px;
            max-width: 180px;
            object-fit: contain;
            display: block;
        }
        .brand-name {
            font-size: 18px;
            font-weight: 700;
            color: var(--ink);
        }
        .doc-info {
            text-align: right;
        }
        .doc-title {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--muted);
            margin: 0 0 6px;
        }
        .doc-number {
            font-size: 22px;
            font-weight: 800;
            color: var(--ink);
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        }
        .meta {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            padding: 0 36px 28px;
        }
        .meta-cell .label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--muted);
            margin-bottom: 6px;
        }
        .meta-cell .value {
            font-size: 14px;
            font-weight: 600;
            color: var(--ink);
        }
        .pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .pill .dot { width: 6px; height: 6px; border-radius: 50%; }
        .pill-paid { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
        .pill-paid .dot { background: var(--success); }
        .pill-pending { background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--warning); }
        .pill-pending .dot { background: var(--warning); }
        .pill-failed { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
        .pill-failed .dot { background: var(--danger); }

        .parties {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            padding: 0 36px 28px;
        }
        @media (max-width: 640px) { .parties { grid-template-columns: 1fr; } }
        .party {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 18px;
        }
        .party .role {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--muted);
            margin-bottom: 10px;
        }
        .party .name {
            font-size: 15px;
            font-weight: 700;
            color: var(--ink);
            margin-bottom: 6px;
        }
        .party .line {
            font-size: 13px;
            color: var(--muted);
            white-space: pre-line;
            margin: 2px 0;
        }
        .party .tax-line {
            font-size: 12px;
            color: var(--muted);
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px dashed var(--border);
        }

        .items {
            padding: 0 36px;
        }
        .items table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        .items thead th {
            text-align: left;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--muted);
            padding: 12px 16px;
            background: var(--bg);
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
        }
        .items thead th:last-child { text-align: right; }
        .items tbody td {
            padding: 18px 16px;
            border-bottom: 1px solid var(--border);
            color: var(--ink);
        }
        .items tbody td:last-child { text-align: right; font-weight: 700; }

        .totals {
            display: flex;
            justify-content: flex-end;
            padding: 24px 36px 36px;
        }
        .totals-card {
            min-width: 280px;
        }
        .totals-row {
            display: flex;
            justify-content: space-between;
            padding: 6px 0;
            font-size: 14px;
            color: var(--muted);
        }
        .totals-row .v { color: var(--ink); font-weight: 600; }
        .totals-row.grand {
            margin-top: 12px;
            padding-top: 16px;
            border-top: 2px solid var(--brand);
            font-size: 18px;
        }
        .totals-row.grand .l { color: var(--ink); font-weight: 700; }
        .totals-row.grand .v { color: var(--brand); font-weight: 800; font-size: 22px; }
        .totals-row.discount .v { color: var(--success); }

        .footer {
            border-top: 1px solid var(--border);
            padding: 20px 36px;
            background: var(--bg);
        }
        .footer .bank-title {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--muted);
            margin-bottom: 8px;
        }
        .footer .bank-body {
            font-size: 13px;
            color: var(--ink);
            white-space: pre-line;
            margin-bottom: 14px;
        }
        .footer .thanks {
            font-size: 12px;
            color: var(--muted);
            text-align: center;
        }
        /* Floating action bar — visible on screen, hidden when printed. */
        .actions-bar {
            max-width: 820px;
            margin: 0 auto 16px;
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
            border: 1px solid var(--border);
            background: var(--card);
            color: var(--ink);
            cursor: pointer;
            transition: all 150ms ease;
        }
        .btn:hover { border-color: var(--brand); color: var(--brand); }
        .btn-primary {
            background: var(--brand);
            border-color: var(--brand);
            color: #fff;
        }
        .btn-primary:hover {
            background: var(--brand-strong);
            border-color: var(--brand-strong);
            color: #fff;
        }
        @media print {
            .actions-bar { display: none; }
            body { padding: 0; background: #fff; }
            .invoice { box-shadow: none; border: none; }
        }
    </style>
</head>
<body>
    {{-- Top action bar — Download PDF + Print + Close.
         Hidden on print so it doesn't bleed into the printed page. --}}
    <div class="actions-bar">
        <button type="button" class="btn" onclick="window.print()">
            <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9V2h12v7M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2M6 14h12v8H6z"/></svg>
            Print
        </button>
        <a href="{{ route('invoices.download', $payment) }}" class="btn btn-primary">
            <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
            Download PDF
        </a>
        <button type="button" class="btn" onclick="window.close()">
            <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            Close
        </button>
    </div>

    <div class="invoice">
        <div class="topbar"></div>

        <div class="header">
            <div class="brand">
                @if(!empty($seller['logo_url']))
                    <img src="{{ $seller['logo_url'] }}" alt="{{ $seller['name'] }}" class="brand-logo">
                @else
                    <div class="brand-mark">{{ strtoupper(substr($seller['name'] ?: 'M', 0, 1)) }}</div>
                @endif
                <div>
                    <div class="brand-name">{{ $seller['name'] }}</div>
                    @if($seller['website'])<div style="font-size:12px;color:var(--muted);">{{ $seller['website'] }}</div>@endif
                </div>
            </div>
            <div class="doc-info">
                <div class="doc-title">Invoice</div>
                <div class="doc-number">{{ $payment->invoice_number ?: '#' . $payment->id }}</div>
            </div>
        </div>

        <div class="meta">
            <div class="meta-cell">
                <div class="label">Issue Date</div>
                <div class="value">{{ $payment->created_at?->format('M d, Y') }}</div>
            </div>
            <div class="meta-cell">
                <div class="label">Payment Method</div>
                <div class="value">{{ ucfirst($payment->gateway_slug ?: 'Manual') }}</div>
            </div>
            <div class="meta-cell">
                <div class="label">Status</div>
                <div class="value">
                    @switch($payment->status)
                        @case('succeeded') <span class="pill pill-paid"><span class="dot"></span>Paid</span> @break
                        @case('pending')   <span class="pill pill-pending"><span class="dot"></span>Pending</span> @break
                        @default           <span class="pill pill-failed"><span class="dot"></span>{{ ucfirst($payment->status) }}</span>
                    @endswitch
                </div>
            </div>
        </div>

        <div class="parties">
            <div class="party">
                <div class="role">From</div>
                <div class="name">{{ $seller['name'] }}</div>
                @if($seller['address'])<div class="line">{{ $seller['address'] }}</div>@endif
                @if($seller['email'])<div class="line">{{ $seller['email'] }}</div>@endif
                @if($seller['phone'])<div class="line">{{ $seller['phone'] }}</div>@endif
                @if($seller['tax_id'] || $seller['vat'])
                <div class="tax-line">
                    @if($seller['tax_id'])Tax ID: {{ $seller['tax_id'] }}@endif
                    @if($seller['tax_id'] && $seller['vat']) &nbsp;·&nbsp; @endif
                    @if($seller['vat'])VAT: {{ $seller['vat'] }}@endif
                </div>
                @endif
            </div>
            <div class="party">
                <div class="role">Bill To</div>
                <div class="name">{{ $buyer['company'] ?: ($buyer['name'] ?: $buyer['email']) }}</div>
                @if($buyer['name'] && $buyer['company'])<div class="line">{{ $buyer['name'] }}</div>@endif
                @if($buyer['address'])<div class="line">{{ $buyer['address'] }}</div>@endif
                @if($buyer['email'])<div class="line">{{ $buyer['email'] }}</div>@endif
                @if($buyer['tax_id'] || $buyer['vat'])
                <div class="tax-line">
                    @if($buyer['tax_id'])Tax ID: {{ $buyer['tax_id'] }}@endif
                    @if($buyer['tax_id'] && $buyer['vat']) &nbsp;·&nbsp; @endif
                    @if($buyer['vat'])VAT: {{ $buyer['vat'] }}@endif
                </div>
                @endif
            </div>
        </div>

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

        <div class="totals">
            <div class="totals-card">
                <div class="totals-row">
                    <span class="l">Subtotal</span>
                    <span class="v">{{ $lines['subtotal_f'] }}</span>
                </div>
                @if($lines['discount'] > 0)
                <div class="totals-row discount">
                    <span class="l">Discount @if($payment->coupon_code)({{ $payment->coupon_code }})@endif</span>
                    <span class="v">− {{ $lines['discount_f'] }}</span>
                </div>
                @endif
                @if($lines['tax_rate'] > 0)
                <div class="totals-row">
                    <span class="l">{{ \App\Models\SystemSetting::get('tax_label', 'Tax') }} ({{ rtrim(rtrim(number_format($lines['tax_rate'], 2), '0'), '.') }}%)</span>
                    <span class="v">{{ $lines['tax_f'] }}</span>
                </div>
                @endif
                <div class="totals-row grand">
                    <span class="l">Total</span>
                    <span class="v">{{ $lines['total_f'] }}</span>
                </div>
            </div>
        </div>

        @if($seller['bank'])
        <div class="footer">
            <div class="bank-title">Payment Details</div>
            <div class="bank-body">{{ $seller['bank'] }}</div>
        </div>
        @endif

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