@if(!empty($isLayaway))
<h2 style="margin: 24px 0 10px; font-size: 1rem; font-weight: 700; color: #111;">Layaway plan summary</h2>

@if(!empty($orderNumber) || !empty($productImageUrl) || (!empty($isStoryLayaway) && !empty($productTitle)))
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="margin-bottom: 16px; background: #f8fafc; border-radius: 10px; border: 1px solid #e5e7eb;">
    <tr>
        @if(!empty($productImageUrl))
        <td style="padding: 14px 12px 14px 16px; width: 96px; vertical-align: middle;">
            <img src="{{ $productImageUrl }}" alt="{{ $productTitle ?? 'Layaway product' }}" width="80" height="80" style="display: block; width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid #e5e7eb;">
        </td>
        @endif
        <td style="padding: 14px 18px; vertical-align: middle;">
            @if(!empty($orderNumber))
            <div style="font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #6b7280; margin-bottom: 4px;">Store order</div>
            <div style="font-size: 1.25rem; font-weight: 700; color: #111;">Order #{{ $orderNumber }}</div>
            @endif
            @if(!empty($isStoryLayaway) && !empty($productTitle) && $productTitle !== 'Custom Payment' && $productTitle !== 'Layaway Plan')
            <div style="font-size: 0.95rem; color: #374151; line-height: 1.4; margin-top: 4px;">{{ $productTitle }}</div>
            @endif
            @if(!empty($isStoryLayaway))
            <div style="font-size: 0.8rem; color: #be185d; font-weight: 600; margin-top: 6px;">Instagram Story</div>
            @endif
        </td>
    </tr>
</table>
@endif

<table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="margin-bottom: 20px; font-size: 0.95rem; color: #374151; background: #f8fafc; border-radius: 10px; border: 1px solid #e5e7eb;">
    <tr>
        <td style="padding: 14px 18px 6px;">Plan subtotal</td>
        <td style="padding: 14px 18px 6px; text-align: right;">{{ $planSubtotal ?? '—' }}</td>
    </tr>
    @if(!empty($planHasTax))
    <tr>
        <td style="padding: 6px 18px;">Plan tax{{ !empty($planTaxRatePercent) ? ' (' . $planTaxRatePercent . ')' : '' }}</td>
        <td style="padding: 6px 18px; text-align: right;">{{ $planTaxAmount ?? '—' }}</td>
    </tr>
    @endif
    <tr>
        <td style="padding: 6px 18px;">Plan total</td>
        <td style="padding: 6px 18px; text-align: right; font-weight: 600;">{{ $planTotalAmount ?? '—' }}</td>
    </tr>
    <tr>
        <td style="padding: 6px 18px;">Paid to date</td>
        <td style="padding: 6px 18px; text-align: right; color: #166534; font-weight: 600;">{{ $planAmountPaid ?? '—' }}</td>
    </tr>
    <tr>
        <td style="padding: 10px 18px 14px; font-weight: 700;">Balance due</td>
        <td style="padding: 10px 18px 14px; text-align: right; font-weight: 700; font-size: 1.1rem; color: {{ !empty($layawayCompleted) ? '#166534' : '#111' }};">
            @if(!empty($layawayCompleted))
                $0.00 — Paid in full
            @else
                {{ $planBalanceDue ?? '—' }}
            @endif
        </td>
    </tr>
</table>

@if(!empty($paymentHistory))
<h2 style="margin: 0 0 10px; font-size: 1rem; font-weight: 700; color: #111;">All payments on this plan</h2>
<table role="presentation" width="100%" style="margin-bottom: 20px; border-collapse: collapse; font-size: 0.9rem; color: #374151;">
    <tr>
        <th align="left" style="padding: 10px 12px; background: #f3f4f6; border: 1px solid #e5e7eb; font-weight: 600;">Date</th>
        <th align="left" style="padding: 10px 12px; background: #f3f4f6; border: 1px solid #e5e7eb; font-weight: 600;">Payment</th>
        @if(!empty($showPaymentHistoryTxnId))
        <th align="left" style="padding: 10px 12px; background: #f3f4f6; border: 1px solid #e5e7eb; font-weight: 600;">Txn ID</th>
        @endif
        <th align="right" style="padding: 10px 12px; background: #f3f4f6; border: 1px solid #e5e7eb; font-weight: 600;">Amount</th>
    </tr>
    @foreach($paymentHistory as $payment)
    <tr>
        <td style="padding: 10px 12px; border: 1px solid #e5e7eb;">{{ $payment['date'] }}</td>
        <td style="padding: 10px 12px; border: 1px solid #e5e7eb;">{{ $payment['typeLabel'] }}</td>
        @if(!empty($showPaymentHistoryTxnId))
        <td style="padding: 10px 12px; border: 1px solid #e5e7eb; font-size: 0.85rem;">{{ $payment['transactionId'] ? '#' . $payment['transactionId'] : 'Cash' }}</td>
        @endif
        <td style="padding: 10px 12px; border: 1px solid #e5e7eb; text-align: right; font-weight: 600;">{{ $payment['amount'] }}</td>
    </tr>
    @endforeach
</table>
@endif

@if(empty($layawayCompleted) && !empty($planExpiresAt))
<p style="font-size: 0.9rem; color: #92400e; background: #fef3c7; border-radius: 8px; padding: 10px 14px; margin-bottom: 16px;">
    Layaway must be paid in full by <strong>{{ $planExpiresAt }}</strong>@if(!empty($durationDays)) ({{ $durationDays }} calendar days from first payment)@endif.
</p>
@endif
@endif