@component('mail::message', ['title' => $title])
<div class="email-container">
      <img src="https://glasshardware.com/wp-content/uploads/2024/08/payment-portal-email.jpg" width="100%" alt="phone picture">
      <h3>Dear {{ $company_name }},</h3>
      <p>We invite you to use our payment portal, it´s easy and convenient for you to pay your open invoices:</p>
      <ul>
            <li>Pay your invoices online 24/7.</li>
            <li>Choose from any credit card, debit card, or saved card on file.</li>
            <li>Get instant confirmation of your payment.</li>
      </ul>
      <p>To get started, simply click the button below to be redirected to our payment portal.</p>
      <div class="btn-pay-container">
            <div class="inner-container">
                  <a class="pay-now-btn" href="{{ $portal_link }}" target="_blank">View Payment Portal</a><br><br>
                  <p><i>This link is valid until {{ $expiration_date }}.</i></p>
            </div>
      </div>
      <p>If you have any questions, please feel free to contact us by email at billing@igt-glasshardware.com or by phone at 877-658-9008 ext. 216.</p>
      <p>Thank you for your business.</p>
      <p>Sincerely,<br>
            Accounting Team at IGT Glass Hardware</p>
</div>
@endcomponent
<style>
      .email-container {
            font-size: 16px;
            color: black !important
      }

      .btn-pay-container {
            position: relative;
      }

      .inner-container {
            position: absolute;
            top: 10%;
            bottom: 20%;
            left: 15%;
            right: 15%;
            text-align: center;
      }

      .pay-now-btn {
            background-color: #eb1c24;
            color: white;
            padding: 10px 15px;
            text-decoration: none;
            border-radius: 10px;
      }

      .inner-container>p {
            text-align: center;
      }
</style>