@component('mail::message' , ['title' => $title ] )
    <div class="mail-content">
        <img class="banner-image" style="margin: 0; padding: 0; position:relative" src="https://glasshardware.com/wp-content/uploads/2024/08/payment-collection-mail01.jpg" alt="IGT Box"/>
        <div class="text-block"><b>Hi, {{ $additionalPayment->client->first_name }}. Your transaction data:</b></div>
        <p>
            Payment date: <b>{{ $additionalPayment->created_at->format('m/d/Y') }}</b><br>
            Branch: <b>{{ $additionalPayment->branch->name }}</b><br>
            Counter: <b>{{ $additionalPayment->admin->getFullName() }}</b><br>
            Payment amount: <b>${{ number_format($additionalPayment->amount, 2) }}</b><br>
            Payment method: <b>{{ $additionalPayment->paymentType->name }}</b>
        </p>
        <div class="text-block center-text">
            If you want more details or make other payment, visit the payment portal.
        </div>
        <div class="text-block center-text">
            <a class="button background-primary register-button" href="{{ env('WOOCOMMERCE_STORE_URL') }}/my-account/open-invoices/" style="padding: 10px 20px">
                View Payment Portal
            </a>
        </div>
        <div class="center-text text-block">
            <div>If you have any questions, please feel free to contact us</div>
            <div>by email at billing@igt-glasshardware.com</div>
            <div>or by phone at 877-658-9008 ext. 216.</div>
        </div>
        <div class="text-block">
            <div>Thank you for your business.</div>
            <div>Sincerely,</div>
            <div>Accounting Team at IGT Glass Hardware</div>
        </div>
    </div>
    <style>
        .mail-content {
            font-size: 16px;
        }

        .register-button {
            width: 200px;
            padding: 10px 20px;
            margin: 30px;
            border-radius: 5px;
            color: #fff;
            text-decoration: none;
            text-align: center;
        }

        .banner-image {
            width: 100%;
            position: static;
            top: 0;
            left: 0;
        }

        .notes {
            margin-top: 20px;
            font-size: 12px;
            color: #666;
        }

        .center-text{
            text-align: center;
            vertical-align: middle;
            align-content: center;
        }

        div.text-block{
            margin-top: 24px;
            margin-bottom: 24px;
        }
    </style>
@endcomponent