@component('mail::layout', ['company' => $company])
    <div class="card">
        @component('mail::header', ['image' => AssetS3('/assets/image/order.png')])
            {{-- <p class="text-uppercase text-blue">CONGRATULATION</p> --}}
            <h2>Invoice #{{ $invoice }}</h2>
        @endcomponent
        <div class="card-body">
            @if($with_aio_payment)
                <p style="margin: 0; padding: 0;">
                    <span style="font-size: 16px; font-weight: bold; display: block; margin-bottom: 5px; color: #000;">Order from {{ $company['name'] }}</span>
                    <span style="font-size: 22px; font-weight: bold; display: block; color: #000;">${{ number_format($overall_balance_due, 2) }}</span>
                </p>

                <div style="text-align: center; font-weight: bold; margin: 15px 0;"><a href="{{ $invoice_link }}" download style="color: #000; text-decoration: underline;">Download Invoice</a></div>
                <a href="{{ $customer_portal_link }}" style="background-color: #000; color: #fff; text-decoration: none; padding: 15px 30px; border-radius: 5px; display: block; box-sizing: border-box; text-align: center; font-weight: bold;">
                    Pay This Invoice
                </a>
                <div style="border-top: 1px dotted #ccc; margin: 20px 0;"></div>
                <br>
            @endif
            {!! $content !!}
        </div>                  
    </div>
@endcomponent