@push('email-styles')
<style>
    .email-stack-col {
        vertical-align: top;
    }
    .invoice-email-container .logo img {
        width: 110px;
        max-width: 110px;
    }
    .invoice-email-container .footer,
    .invoice-email-container .footer p {
        text-align: center !important;
    }
    .email-items-mobile {
        display: none !important;
        mso-hide: all;
        max-height: 0 !important;
        overflow: hidden !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }
    @media only screen and (max-width: 620px) {
        .email-header-row .email-from-col,
        .email-header-row .email-amount-meta-col,
        .email-footer-col {
            display: block !important;
            width: 100% !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        .email-invoice-title-row td {
            display: block !important;
            width: 100% !important;
            text-align: center !important;
            padding-bottom: 8px !important;
        }
        .email-invoice-title-row td:last-child {
            padding-bottom: 0 !important;
        }
        .email-header-row .email-amount-meta-col,
        .email-footer-col-last {
            padding-top: 12px !important;
        }
        .email-items-desktop {
            display: none !important;
            max-height: 0 !important;
            overflow: hidden !important;
        }
        .email-items-mobile {
            display: block !important;
            max-height: none !important;
            overflow: visible !important;
            font-size: inherit !important;
            line-height: inherit !important;
        }
    }
</style>
@endpush
@include('emails.partials.header', [
    'title' => 'Invoice ' . $invoice->invoice_number . ' – MJ VAC Services',
    'containerClass' => 'invoice-email-container',
    'containerStyle' => 'max-width:820px;margin:20px auto;background-color:#ffffff;padding:32px 36px;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,0.1);',
    'hideHeaderLogo' => true,
])
@php
    function numberToWordsEmail($number) {
        $ones = ['','One','Two','Three','Four','Five','Six','Seven','Eight','Nine','Ten',
                 'Eleven','Twelve','Thirteen','Fourteen','Fifteen','Sixteen','Seventeen','Eighteen','Nineteen'];
        $tens = ['','','Twenty','Thirty','Forty','Fifty','Sixty','Seventy','Eighty','Ninety'];
        if ($number == 0) return 'Zero';
        $words = ''; $num = (int) $number;
        if ($num >= 1000) { $words .= numberToWordsEmail((int)floor($num/1000)) . ' Thousand '; $num %= 1000; }
        if ($num >= 100)  { $words .= $ones[(int)floor($num/100)] . ' Hundred '; $num %= 100; }
        if ($num >= 20)   { $words .= $tens[(int)floor($num/10)] . ' '; $num %= 10; }
        if ($num > 0)     { $words .= $ones[$num] . ' '; }
        return trim($words);
    }

    $taxType          = $invoice->tax_type ?? 'exclusive';
    $overallDiscount  = (float)($invoice->discount_amount ?? 0);
    $totals           = \App\Models\Invoice::computeTotals($invoice->line_items, $taxType, $overallDiscount);
    $itemsSubtotal     = $totals['itemsSubtotal'];
    $lineDiscountTotal = $totals['lineDiscountTotal'];
    $gstAmount         = $totals['gstAmount'];
    $pstAmount         = $totals['pstAmount'];
    $gstLabel          = \App\Models\Invoice::taxSummaryLabel('GST', $totals['gstRateTotal'] ?? 0);
    $pstLabel          = \App\Models\Invoice::taxSummaryLabel('HST/PST', $totals['pstRateTotal'] ?? 0);
    $totalExact        = $totals['totalExact'];
    $totalRounded      = $totals['totalRounded'];
    $roundedOff        = $totals['roundedOff'];
    $showLineDiscount  = $setting->usesLineItemDiscount();
    $dueDate           = $invoice->due_date
        ? $invoice->due_date->format('M d, Y')
        : $invoice->invoice_date->copy()->addDays(30)->format('M d, Y');
    $rawNum            = $invoice->invoice_number;
    $numOnly           = ltrim(preg_replace('/^INV-0*/i', '', $rawNum), '0') ?: '0';
    $displayNum        = '#' . $numOnly;
    $termsContent      = $setting->terms_conditions ?? '';
    $termsHtml         = (strip_tags($termsContent) === $termsContent)
        ? nl2br(e($termsContent))
        : $termsContent;

    $metaLabel = 'padding:4px 0; color:#666666; font-size:12px;';
    $metaValue = 'padding:4px 0; color:#111111; font-size:12px; font-weight:600; text-align:right;';
    $rowLabel = 'padding:8px 16px; color:#666666; font-size:14px; border-bottom:1px solid #eeeeee;';
    $rowValue = 'padding:8px 16px; color:#111111; font-size:14px; font-weight:600; text-align:right; border-bottom:1px solid #eeeeee;';
    $itemLabel = 'padding:6px 0; color:#666666; font-size:13px;';
    $itemValue = 'padding:6px 0; color:#111111; font-size:13px; font-weight:600; text-align:right;';
@endphp

<p style="font-size:15px; line-height:1.6; margin:0 0 6px;">Hi <strong>{{ $invoice->customer_name }}</strong>,</p>
<p style="font-size:14px; line-height:1.6; color:#555555; margin:0 0 20px;">Please find your invoice details below. A PDF copy is attached to this email.</p>

{{-- Header: Logo | INVOICE | #num — matches PDF --}}
<table width="100%" cellpadding="0" cellspacing="0" role="presentation" class="email-invoice-title-row" style="border-collapse:collapse; margin-bottom:20px;">
    <tr>
        <td width="270" style="width:33%; vertical-align:middle;">
            @if($setting->logo_path)
                <img src="{{ asset('storage/'.$setting->logo_path) }}" alt="{{ $setting->business_name }}" style="max-width:110px; width:110px; display:block;">
            @else
                <img src="{{ asset('/assets/img/gallery/logo-mac-vac.png') }}" alt="{{ $setting->business_name }}" style="max-width:110px; width:110px; display:block;">
            @endif
        </td>
        <td width="280" style="width:34%; vertical-align:middle; text-align:center;">
            <span style="font-size:28px; font-weight:bold; letter-spacing:2px; color:#111111;">INVOICE</span>
        </td>
        <td width="270" style="width:33%; vertical-align:top; text-align:right;">
            <div style="font-size:22px; font-weight:bold; color:#111111;">{{ $displayNum }}</div>
            <div style="font-size:11px; color:#666666; margin-top:2px;">Original Copy</div>
        </td>
    </tr>
</table>

{{-- From (left) + Amount Due & invoice meta (right) — matches PDF layout --}}
<table width="100%" cellpadding="0" cellspacing="0" role="presentation" class="email-header-row" style="border-collapse:collapse; margin-bottom:20px;">
    <tr>
        <td width="400" class="email-from-col email-stack-col" style="width:52%; vertical-align:top; padding-right:20px;">
            <div style="font-size:20px; font-weight:bold; color:#111111; margin-bottom:6px;">{{ $setting->business_name }}</div>
            <div style="font-size:12px; line-height:1.9; color:#333333;">
                @if($setting->address)<div>{{ $setting->address }}</div>@endif
                @if($setting->phone)<div>Phone: {{ $setting->phone }}</div>@endif
                @if($setting->email)<div>Email: {{ $setting->email }}</div>@endif
                @if($setting->website)<div>Website: {{ $setting->website }}</div>@endif
                @foreach($setting->displayTaxNumbers($invoice->gst_number ?? null) as $taxLine)
                    <div>{{ $taxLine['label'] }}: {{ $taxLine['value'] }}</div>
                @endforeach
            </div>
        </td>
        <td width="360" class="email-amount-meta-col email-stack-col" style="width:48%; vertical-align:top;">
            <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse; background:#222222; border-radius:4px 4px 0 0;">
                <tr>
                    <td style="padding:10px 16px; color:#ffffff; font-size:12px; font-weight:bold; letter-spacing:1px; text-transform:uppercase; vertical-align:middle;">Amount Due:</td>
                    <td style="padding:10px 16px; color:#ffffff; font-size:18px; font-weight:bold; text-align:right; vertical-align:middle; line-height:1.1;">${{ number_format($totalRounded, 2) }}</td>
                </tr>
            </table>
            <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse; border:1px solid #cccccc; border-top:none; border-radius:0 0 4px 4px; background:#ffffff;">
                <tr>
                    <td style="padding:10px 16px;">
                        <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse; font-size:12px;">
                            <tr>
                                <td style="{{ $metaLabel }}; width:80px;">Invoice No:</td>
                                <td style="{{ $metaValue }}">{{ $invoice->invoice_number }}</td>
                            </tr>
                            @if($invoice->payment_terms)
                            <tr>
                                <td style="{{ $metaLabel }}">Terms:</td>
                                <td style="{{ $metaValue }}">{{ \App\Models\Invoice::paymentTermsOptions()[$invoice->payment_terms] ?? $invoice->payment_terms }}</td>
                            </tr>
                            @endif
                            <tr>
                                <td style="{{ $metaLabel }}">Issue Date:</td>
                                <td style="{{ $metaValue }}">{{ $invoice->invoice_date->format('d - M - Y') }}</td>
                            </tr>
                            <tr>
                                <td style="{{ $metaLabel }}">Due Date:</td>
                                <td style="{{ $metaValue }}">{{ $dueDate }}</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

{{-- Bill To (full width) --}}
<table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse; margin-bottom:20px;">
    <tr>
        <td style="background:#f8f8f8; border:1px solid #dddddd; border-radius:4px; padding:12px 16px; font-size:12px; line-height:1.85; color:#333333;">
            <div style="font-size:10px; font-weight:bold; letter-spacing:1px; text-transform:uppercase; color:#888888; margin-bottom:4px;">Bill To</div>
            <div style="font-size:14px; font-weight:bold; color:#111111; margin-bottom:4px;">{{ $invoice->customer_name }}</div>
            @if($invoice->customer_phone)<div>{{ $invoice->customer_phone }}</div>@endif
            @if($invoice->customer_email)<div>{{ $invoice->customer_email }}</div>@endif
            @if($invoice->customer_address)<div>{{ $invoice->customer_address }}</div>@endif
            @if($invoice->customer_country)<div>{{ $invoice->customer_country }}</div>@endif
        </td>
    </tr>
</table>

<div style="font-size:11px; font-weight:bold; letter-spacing:1px; text-transform:uppercase; color:#888888; margin-bottom:10px;">Invoice Items</div>

{{-- Desktop: table layout --}}
<div class="email-items-desktop">
<table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse; margin-bottom:16px;">
    <thead>
        <tr style="background:#222222;">
            <th style="padding:8px 6px; color:#ffffff; font-size:11px; font-weight:bold; text-align:center; width:28px;">#</th>
            <th style="padding:8px 6px; color:#ffffff; font-size:11px; font-weight:bold; text-align:left;">Item &amp; Description</th>
            <th style="padding:8px 6px; color:#ffffff; font-size:11px; font-weight:bold; text-align:center; width:44px;">Qty</th>
            <th style="padding:8px 6px; color:#ffffff; font-size:11px; font-weight:bold; text-align:right; width:64px;">Price</th>
            @if($showLineDiscount)
            <th style="padding:8px 6px; color:#ffffff; font-size:11px; font-weight:bold; text-align:right; width:52px;">Disc%</th>
            @endif
            @if($taxType === 'exclusive')
            <th style="padding:8px 6px; color:#ffffff; font-size:11px; font-weight:bold; text-align:right; width:56px;">GST</th>
            <th style="padding:8px 6px; color:#ffffff; font-size:11px; font-weight:bold; text-align:right; width:56px;">HST/PST</th>
            @endif
            <th style="padding:8px 6px; color:#ffffff; font-size:11px; font-weight:bold; text-align:right; width:72px;">Amount</th>
        </tr>
    </thead>
    <tbody>
        @foreach($invoice->line_items as $i => $item)
        @php
            $li       = \App\Models\Invoice::computeLineItem($item, $taxType);
            $itemDesc = $invoice->lineItemDescriptionForDisplay($item, $loop->first);
            $gstRateShow = $li['gstRate'] > 0 || ($li['gstRate'] + $li['pstRate'] === 0.0 && ($item['tax_rate'] ?? 0) > 0)
                ? ($li['gstRate'] + $li['pstRate'] === 0.0 ? ($item['tax_rate'] ?? 0) : $li['gstRate'])
                : 0;
        @endphp
        <tr>
            <td style="padding:8px 6px; border-bottom:1px solid #eeeeee; font-size:12px; text-align:center; color:#666666;">{{ $i + 1 }}</td>
            <td style="padding:8px 6px; border-bottom:1px solid #eeeeee; font-size:12px; text-align:left; vertical-align:top;">
                <div style="font-weight:600; color:#111111;">{{ $item['description'] }}</div>
                @if($itemDesc)
                    <div style="font-size:11px; color:#666666; margin-top:3px; line-height:1.45;">{!! nl2br(e($itemDesc)) !!}</div>
                @endif
                @if($loop->first && ($linkedItems = $invoice->linkedItemsLabel()))
                    <div style="font-size:11px; color:#666666; margin-top:3px;">Item(s): {{ $linkedItems }}</div>
                @endif
            </td>
            <td style="padding:8px 6px; border-bottom:1px solid #eeeeee; font-size:12px; text-align:center;">{{ $li['qty'] % 1 == 0 ? (int)$li['qty'] : $li['qty'] }}</td>
            <td style="padding:8px 6px; border-bottom:1px solid #eeeeee; font-size:12px; text-align:right;">${{ number_format($li['displayRate'], 2) }}</td>
            @if($showLineDiscount)
            <td style="padding:8px 6px; border-bottom:1px solid #eeeeee; font-size:12px; text-align:right;">
                @if($li['discPct'] > 0)
                    <span style="color:#e53e3e;">{{ number_format($li['discPct'], 0) }}%</span>
                @else
                    <span style="color:#bbbbbb;">—</span>
                @endif
            </td>
            @endif
            @if($taxType === 'exclusive')
            <td style="padding:8px 6px; border-bottom:1px solid #eeeeee; font-size:12px; text-align:right; vertical-align:top;">
                @if($gstRateShow > 0)
                    ${{ number_format($li['gstAmt'], 2) }}<br>
                    <span style="font-size:10px; color:#888888;">{{ number_format($gstRateShow, 0) }}%</span>
                @else
                    <span style="color:#bbbbbb;">—</span>
                @endif
            </td>
            <td style="padding:8px 6px; border-bottom:1px solid #eeeeee; font-size:12px; text-align:right; vertical-align:top;">
                @if($li['pstRate'] > 0)
                    ${{ number_format($li['pstAmt'], 2) }}<br>
                    <span style="font-size:10px; color:#888888;">{{ number_format($li['pstRate'], 0) }}%</span>
                @else
                    <span style="color:#bbbbbb;">—</span>
                @endif
            </td>
            @endif
            <td style="padding:8px 6px; border-bottom:1px solid #eeeeee; font-size:12px; text-align:right; font-weight:600;">${{ number_format($li['rowAmt'], 2) }}</td>
        </tr>
        @endforeach
    </tbody>
</table>
</div>

{{-- Mobile: card layout --}}
<div class="email-items-mobile" style="display:none;max-height:0;overflow:hidden;mso-hide:all;font-size:0;line-height:0;">
@foreach($invoice->line_items as $i => $item)
@php
    $li       = \App\Models\Invoice::computeLineItem($item, $taxType);
    $itemDesc = $invoice->lineItemDescriptionForDisplay($item, $loop->first);
@endphp
<table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse; border:1px solid #e5e7eb; border-radius:10px; margin-bottom:10px; background:#ffffff;">
    <tr>
        <td style="padding:14px 16px;">
            <div style="font-size:15px; font-weight:bold; color:#111111; margin-bottom:6px;">{{ $item['description'] }}</div>
            @if($itemDesc)
                <div style="font-size:12px; color:#666666; line-height:1.5; margin-bottom:10px;">{!! nl2br(e($itemDesc)) !!}</div>
            @endif
            @if($loop->first && ($linkedItems = $invoice->linkedItemsLabel()))
                <div style="font-size:12px; color:#666666; margin-bottom:10px;">Item(s): {{ $linkedItems }}</div>
            @endif
            <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;">
                <tr>
                    <td style="{{ $itemLabel }}">Quantity</td>
                    <td style="{{ $itemValue }}">{{ $li['qty'] % 1 == 0 ? (int)$li['qty'] : $li['qty'] }}</td>
                </tr>
                <tr>
                    <td style="{{ $itemLabel }}">Price</td>
                    <td style="{{ $itemValue }}">${{ number_format($li['displayRate'], 2) }}</td>
                </tr>
                @if($showLineDiscount && $li['discPct'] > 0)
                <tr>
                    <td style="{{ $itemLabel }}">Discount</td>
                    <td style="{{ $itemValue }}; color:#e53e3e;">{{ number_format($li['discPct'], 0) }}%</td>
                </tr>
                @endif
                @if($taxType === 'exclusive' && ($li['gstRate'] > 0 || ($li['gstRate'] + $li['pstRate'] === 0.0 && ($item['tax_rate'] ?? 0) > 0)))
                <tr>
                    <td style="{{ $itemLabel }}">GST</td>
                    <td style="{{ $itemValue }}">${{ number_format($li['gstAmt'], 2) }}</td>
                </tr>
                @endif
                @if($taxType === 'exclusive' && $li['pstRate'] > 0)
                <tr>
                    <td style="{{ $itemLabel }}">HST/PST</td>
                    <td style="{{ $itemValue }}">${{ number_format($li['pstAmt'], 2) }}</td>
                </tr>
                @endif
                <tr>
                    <td style="padding:10px 0 0; color:#111111; font-size:14px; font-weight:bold; border-top:1px solid #eeeeee;">Amount</td>
                    <td style="padding:10px 0 0; color:#111111; font-size:14px; font-weight:bold; text-align:right; border-top:1px solid #eeeeee;">${{ number_format($li['rowAmt'], 2) }}</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
@endforeach
</div>

{{-- Summary + Terms (side by side on desktop) --}}
<table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse; margin-top:8px;">
    <tr>
        <td width="390" class="email-footer-col email-footer-col-first email-stack-col" style="width:50%; vertical-align:top; padding-right:12px;">
            @if($termsContent)
            <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse; background:#f8f9fa; border:1px solid #e5e7eb; border-radius:10px;">
                <tr>
                    <td style="padding:14px 16px; font-size:12px; line-height:1.7; color:#555555;">
                        <div style="font-size:10px; font-weight:bold; letter-spacing:1px; text-transform:uppercase; color:#888888; margin-bottom:8px;">Payment Instructions</div>
                        {!! $termsHtml !!}
                    </td>
                </tr>
            </table>
            @else
            <p style="font-size:13px; line-height:1.7; color:#555555; margin:0;">
                Please send E-Transfer payment to <strong>{{ $setting->email }}</strong>.
            </p>
            @endif
        </td>
        <td width="390" class="email-footer-col email-footer-col-last email-stack-col" style="width:50%; vertical-align:top; padding-left:12px;">
            <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse; margin-bottom:8px;">
                <tr>
                    <td style="{{ $rowLabel }}">Subtotal</td>
                    <td style="{{ $rowValue }}">${{ number_format($itemsSubtotal, 2) }}</td>
                </tr>
                @if($showLineDiscount && $lineDiscountTotal > 0)
                <tr>
                    <td style="{{ $rowLabel }}">Discount</td>
                    <td style="{{ $rowValue }}; color:#e53e3e;">-${{ number_format($lineDiscountTotal, 2) }}</td>
                </tr>
                @endif
                @if($overallDiscount > 0)
                <tr>
                    <td style="{{ $rowLabel }}">
                        Overall Discount{{ $invoice->discount_type === 'percent' ? ' ('.$invoice->discount_value.'%)' : '' }}
                    </td>
                    <td style="{{ $rowValue }}; color:#e53e3e;">-${{ number_format($overallDiscount, 2) }}</td>
                </tr>
                @endif
                @if($taxType !== 'inclusive' && $gstAmount > 0)
                <tr>
                    <td style="{{ $rowLabel }}">{{ $gstLabel }}</td>
                    <td style="{{ $rowValue }}">${{ number_format($gstAmount, 2) }}</td>
                </tr>
                @endif
                @if($taxType !== 'inclusive' && $pstAmount > 0)
                <tr>
                    <td style="{{ $rowLabel }}">{{ $pstLabel }}</td>
                    <td style="{{ $rowValue }}">${{ number_format($pstAmount, 2) }}</td>
                </tr>
                @endif
                <tr>
                    <td style="{{ $rowLabel }}">Total before rounding</td>
                    <td style="{{ $rowValue }}">${{ number_format($totalExact, 2) }}</td>
                </tr>
                <tr>
                    <td style="padding:8px 16px; color:#666666; font-size:14px;">Rounded Off</td>
                    <td style="padding:8px 16px; color:#111111; font-size:14px; font-weight:600; text-align:right;">{{ $roundedOff >= 0 ? '+' : '' }}{{ number_format($roundedOff, 2) }}</td>
                </tr>
            </table>

            <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse; background:#111111; border-radius:10px; margin-bottom:8px;">
                <tr>
                    <td style="padding:14px 16px; color:#ffffff; font-size:16px; font-weight:bold;">TOTAL</td>
                    <td style="padding:14px 16px; color:#ffffff; font-size:18px; font-weight:bold; text-align:right;">${{ number_format($totalRounded, 2) }}</td>
                </tr>
            </table>

            <p style="font-size:12px; color:#666666; font-style:italic; margin:0;">* {{ numberToWordsEmail($totalRounded) }} Dollars Only</p>
        </td>
    </tr>
</table>

@include('emails.partials.footer')