---
title: "Your Sale Receipt - Salamanda"
preheader: "Thank you for your purchase! Here's your receipt."
bodyClass: bg-slate-50
---

<x-main>
  <div class="bg-slate-50 sm:px-4 font-sans">
    <table align="center">
      <tr>
        <td class="w-[552px] max-w-full">

          <!-- Main Content Container with Logo Overlapping -->
          <table class="w-full">
            <tr>
              <td class="relative">
                <!-- Logo positioned to overlap the card -->
                <div class="text-center" style="margin-bottom: -50px; z-index: 10; position: relative;">
                  <a href="https://salamanda.org">
                    <img src="@{{ $message->embed('images/emails/salamanda.png') }}" width="100" alt="Salamanda">
                  </a>
                </div>

                <!-- Card content with top padding to account for overlapping logo -->
                <div class="pt-16 pb-12 px-12 sm:px-6 text-base text-slate-700 bg-white rounded shadow-sm">

                <!-- Receipt Header -->
                <div class="text-center mb-8">
                  <h1 class="m-0 mb-2 text-2xl sm:leading-8 text-black font-bold">
                    Sale Receipt
                  </h1>
                  <p class="m-0 text-slate-600" style="font-size: 14px;">
                    Thank you for your purchase!
                  </p>
                </div>

                <!-- Receipt Details Table -->
                <table class="w-full mb-6" style="border-collapse: collapse;">
                  <tr>
                    <td class="py-2 px-0" style="border-bottom: 1px solid #e2e8f0;">
                      <strong>Receipt #:</strong> <span class="text-slate-800">RECEIPT_NUMBER</span>
                    </td>
                    <td class="py-2 px-0 text-right" style="border-bottom: 1px solid #e2e8f0;">
                      <strong>Date:</strong> <span class="text-slate-800">SALE_DATE</span>
                    </td>
                  </tr>
                  <tr>
                    <td class="py-2 px-0" style="border-bottom: 1px solid #e2e8f0;">
                      <strong>Customer:</strong> <span class="text-slate-800">CUSTOMER_NAME</span>
                    </td>
                    <td class="py-2 px-0 text-right" style="border-bottom: 1px solid #e2e8f0;">
                      <strong>Time:</strong> <span class="text-slate-800">SALE_TIME</span>
                    </td>
                  </tr>
                  <tr>
                    <td class="py-2 px-0" style="border-bottom: 1px solid #e2e8f0;">
                      <strong>Store:</strong> <span class="text-slate-800">STORE_NAME</span>
                    </td>
                    <td class="py-2 px-0 text-right" style="border-bottom: 1px solid #e2e8f0;">
                      <strong>Cashier:</strong> <span class="text-slate-800">CASHIER_NAME</span>
                    </td>
                  </tr>
                </table>

                <x-spacer height="16px" />

                <!-- Items Table Header -->
                <table class="w-full mb-4" style="border-collapse: collapse;">
                  <thead>
                    <tr class="bg-slate-50">
                      <th class="py-3 px-2 text-left font-semibold text-slate-700" style="border: 1px solid #e2e8f0; font-size: 14px;">
                        Item
                      </th>
                      <th class="py-3 px-2 text-center font-semibold text-slate-700" style="border: 1px solid #e2e8f0; font-size: 14px;">
                        Qty
                      </th>
                      <th class="py-3 px-2 text-right font-semibold text-slate-700" style="border: 1px solid #e2e8f0; font-size: 14px;">
                        Price
                      </th>
                      <th class="py-3 px-2 text-right font-semibold text-slate-700" style="border: 1px solid #e2e8f0; font-size: 14px;">
                        Total
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    ITEMS_LOOP_PLACEHOLDER
                  </tbody>
                </table>

                <!-- Totals Section -->
                <div class="ml-auto" style="width: 250px;">
                  <table class="w-full" style="border-collapse: collapse;">
                    <tr>
                      <td class="py-2 px-3 text-right text-slate-700" style="border-bottom: 1px solid #e2e8f0; font-size: 14px;">
                        <strong>Subtotal:</strong>
                      </td>
                      <td class="py-2 px-3 text-right text-slate-800" style="border-bottom: 1px solid #e2e8f0; font-size: 14px;">
                        $SUBTOTAL_AMOUNT
                      </td>
                    </tr>
                    <tr>
                      <td class="py-2 px-3 text-right text-slate-700" style="border-bottom: 1px solid #e2e8f0; font-size: 14px;">
                        <strong>Tax:</strong>
                      </td>
                      <td class="py-2 px-3 text-right text-slate-800" style="border-bottom: 1px solid #e2e8f0; font-size: 14px;">
                        $TAX_AMOUNT
                      </td>
                    </tr>
                    <tr>
                      <td class="py-2 px-3 text-right text-slate-700" style="border-bottom: 1px solid #e2e8f0; font-size: 14px;">
                        <strong>Discount:</strong>
                      </td>
                      <td class="py-2 px-3 text-right text-red-600" style="border-bottom: 1px solid #e2e8f0; font-size: 14px;">
                        -$DISCOUNT_AMOUNT
                      </td>
                    </tr>
                    <tr>
                      <td class="py-2 px-3 text-right text-slate-700 font-bold" style="border-bottom: 2px solid #023020; font-size: 16px;">
                        <strong>Total:</strong>
                      </td>
                      <td class="py-2 px-3 text-right text-slate-800 font-bold" style="border-bottom: 2px solid #023020; font-size: 16px;">
                        $TOTAL_AMOUNT
                      </td>
                    </tr>
                  </table>
                </div>

                <x-spacer height="24px" />

                <!-- Payment Information -->
                <div class="bg-slate-50 p-4 rounded" style="border: 1px solid #e2e8f0;">
                  <h3 class="m-0 mb-3 text-lg font-semibold text-slate-800">
                    Payment Information
                  </h3>
                  <table class="w-full" style="border-collapse: collapse;">
                    <tr>
                      <td class="py-1 text-slate-700" style="font-size: 14px;">
                        <strong>Payment Method:</strong> <span class="text-slate-800">PAYMENT_METHOD</span>
                      </td>
                    </tr>
                    <tr>
                      <td class="py-1 text-slate-700" style="font-size: 14px;">
                        <strong>Amount Paid:</strong> <span class="text-slate-800">$AMOUNT_PAID</span>
                      </td>
                    </tr>
                    <tr>
                      <td class="py-1 text-slate-700" style="font-size: 14px;">
                        <strong>Change Given:</strong> <span class="text-slate-800">$CHANGE_GIVEN</span>
                      </td>
                    </tr>
                  </table>
                </div>

                <x-spacer height="24px" />

                <!-- Thank You Message -->
                <div class="text-center">
                  <p class="m-0 mb-4 text-slate-700" style="font-size: 14px;">
                    Thank you for choosing Salamanda! We appreciate your business.
                  </p>

                  <x-button href="https://test.com" bg-color="#023020">
                    <label style="font-size: 14px;">Visit Our Store &rarr;</label>
                  </x-button>
                </div>

                <x-spacer height="24px" />

                <!-- Additional Information -->
                <div class="text-center text-slate-600" style="font-size: 12px;">
                  <p class="m-0 mb-2">
                    Keep this receipt for your records
                  </p>
                  <p class="m-0">
                    Questions about this receipt? Contact us at STORE_EMAIL or call STORE_PHONE
                  </p>
                </div>
              </td>
            </tr>

            <!-- Footer Separator -->
            <tr role="separator">
              <td class="leading-12">&zwj;</td>
            </tr>

            <!-- Footer -->
            <tr>
              <td class="text-center text-slate-600 text-xs px-6">
                <p class="m-0 mb-4 uppercase">
                  Powered by Salamanda ERP
                </p>

                <p class="cursor-default">
                  <label style="font-size: 12px;">If you have questions, please visit </label>
                  <a style="font-size: 12px;" href="https://test.com">Salamanda Help Center</a>
                  <label style="font-size: 12px;"> or chat with our consultants</label>
                  <br />
                  <label style="font-size: 12px;">Sincerely, The Salamanda team</label>
                  <br />
                  <a style="font-size: 12px;" href="https://test.com">Unsubscribe</a>
                  <br />
                  <br />
                  <label style="font-size: 12px;">Copyright © 2024 </label>
                  <a style="font-size: 12px;" href="https://test.com"> Salamanda</a>
                </p>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
</x-main>