<div class="receipt-container">
  <table width="100%" cellpadding="0" cellspacing="0" style="padding: 0; margin: 0">
    <tr>
      <td align="center">
        <table width="600" cellpadding="0" cellspacing="0" style="
          background: #fff;
          border-radius: 8px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
          padding: 0;
          margin: 40px 0;
          border: 1px solid #1976d2;
        ">
          <!-- Header -->
          <tr>
            <td colspan="2" style="
              border-bottom: 2px solid #1976d2;
              padding: 24px 24px 16px 24px;
            ">
              <table width="100%" cellpadding="0" cellspacing="0">
                <tr>
                  <td align="left" valign="middle">
                    <span style="
                      font-size: 1.7em;
                      color: #1976d2;
                      font-weight: bold;
                    ">{{ "label.receipt_preview" | i18next }}</span>
                  </td>
                  <td width="60" align="right" valign="middle">
                    <img ng-src="{{receiptData.logoUrl}}" alt="Logo" width="48" height="48" style="display: block" />
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <!-- Thank You -->
          <tr>
            <td colspan="2" style="
              text-align: center;
              color: #1976d2;
              font-size: 1.2em;
              padding: 24px 24px 16px 24px;
              font-weight: bold;
            ">
              {{ "label.thank_you" | i18next }} <span>{{ receiptData.type }}</span>
            </td>
          </tr>
          <!-- Details Section -->
          <tr>
            <td colspan="2" style="padding: 0 24px 24px 24px">
              <table width="100%" cellpadding="0" cellspacing="0">
                <tr>
                  <!-- Left Column -->
                  <td width="50%" valign="top" style="padding-right: 8px">
                    <table cellpadding="0" cellspacing="0" width="100%">
                      <tr>
                        <td style="
                          color: #1976d2;
                          font-weight: bold;
                          width: 120px;
                          padding: 4px 0;
                        ">
                          {{ "label.team_name" | i18next }}
                        </td>
                        <td style="padding: 4px 0">{{ receiptData.teamName }}</td>
                      </tr>
                      <tr>
                        <td style="
                          color: #1976d2;
                          font-weight: bold;
                          width: 120px;
                          padding: 4px 0;
                        ">
                          {{ "label.charged_date" | i18next }}
                        </td>
                        <td style="padding: 4px 0">{{ receiptData.chargedDate }}</td>
                      </tr>
                      <tr>
                        <td style="
                          color: #1976d2;
                          font-weight: bold;
                          width: 120px;
                          padding: 4px 0;
                        ">
                          {{ "label.expire_date" | i18next }}
                        </td>
                        <td style="padding: 4px 0">{{ receiptData.expiryDate }}</td>
                      </tr>
                    </table>
                  </td>
                  <!-- Right Column -->
                  <td width="50%" valign="top" style="padding-left: 8px">
                    <table cellpadding="0" cellspacing="0" width="100%">
                      <tr>
                        <td style="
                          color: #1976d2;
                          font-weight: bold;
                          width: 120px;
                          padding: 4px 0;
                        ">
                          {{ "label.plan" | i18next }}
                        </td>
                        <td style="padding: 4px 0">{{ receiptData.planName }}</td>
                      </tr>
                      <tr>
                        <td style="
                          color: #1976d2;
                          font-weight: bold;
                          width: 120px;
                          padding: 4px 0;
                        ">
                          {{ "label.price_per_user" | i18next }}
                        </td>
                        <td style="padding: 4px 0">{{ receiptData.pricePerUser }}</td>
                      </tr>
                      <tr>
                        <td style="
                          color: #1976d2;
                          font-weight: bold;
                          width: 120px;
                          padding: 4px 0;
                        ">
                          {{ "label.billing.cycle" | i18next }}
                        </td>
                        <td style="padding: 4px 0">
                          <span>
                            {{
                              receiptData.billingCycle === "ANNUALLY"
                                ? ("label.annually" | i18next | uppercase) 
                                : ("label.monthly" | i18next | uppercase) 
                            }}
                          </span>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <!-- Details Table -->
          <tr>
            <td colspan="2" style="padding: 0 24px 24px 24px">
              <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse">
                <tr>
                  <th style="
                    border: 1px solid #1976d2;
                    background: #1976d2;
                    color: #fff;
                    padding: 8px 12px;
                    text-align: left;
                  ">
                    {{ "label.description" | i18next }}
                  </th>
                  <th style="
                    border: 1px solid #1976d2;
                    background: #1976d2;
                    color: #fff;
                    padding: 8px 12px;
                    text-align: left;
                  ">
                    {{ "label.quantity" | i18next }}
                  </th>
                  <th style="
                    border: 1px solid #1976d2;
                    background: #1976d2;
                    color: #fff;
                    padding: 8px 12px;
                    text-align: left;
                  ">
                    {{ "label.price" | i18next }}
                  </th>
                  <th style="
                    border: 1px solid #1976d2;
                    background: #1976d2;
                    color: #fff;
                    padding: 8px 12px;
                    text-align: left;
                  ">
                    {{ "label.total" | i18next }}
                  </th>
                </tr>
                <tr>
                  <td style="border: 1px solid #1976d2; padding: 8px 12px">
                    {{ "label.receipt_user" | i18next }}
                  </td>
                  <td style="border: 1px solid #1976d2; padding: 8px 12px">
                    {{ receiptData.userCount }}
                  </td>
                  <td style="border: 1px solid #1976d2; padding: 8px 12px">
                    {{ receiptData.pricePerUser }}
                  </td>
                  <td style="border: 1px solid #1976d2; padding: 8px 12px">
                    {{ receiptData.totalPrice || "0.00" }}
                  </td>
                </tr>
                <tr>
                  <td style="
                    border: 1px solid #1976d2;
                    padding: 8px 12px;
                    background: #e3f0fb;
                    color: #1976d2;
                    font-weight: bold;
                  ">
                    {{ "label.receipt_credit_applied" | i18next }}
                  </td>
                  <td style="
                    border: 1px solid #1976d2;
                    padding: 8px 12px;
                    background: #e3f0fb;
                    color: #1976d2;
                    font-weight: bold;
                  ">
                    -
                  </td>
                  <td style="
                    border: 1px solid #1976d2;
                    padding: 8px 12px;
                    background: #e3f0fb;
                    color: #1976d2;
                    font-weight: bold;
                  ">
                    -
                  </td>
                  <td style="
                    border: 1px solid #1976d2;
                    padding: 8px 12px;
                    background: #e3f0fb;
                    color: #1976d2;
                    font-weight: bold;
                  ">
                    {{ receiptData.creditApplied || "0.00" }}
                  </td>
                </tr>
                <tr>
                  <td colspan="3" style="
                    border: 1px solid #1976d2;
                    padding: 8px 12px;
                    text-align: right;
                    font-weight: bold;
                  ">
                    {{ "label.grand_total" | i18next }}
                  </td>
                  <td style="
                    border: 1px solid #1976d2;
                    padding: 8px 12px;
                    font-weight: bold;
                  ">
                    {{ receiptData.totalPayment || "0.00" }}
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <!-- Footer -->
          <tr>
            <td colspan="2" style="
              border-top: 1px solid #e0e0e0;
              margin-top: 32px;
              padding: 16px 24px 24px 24px;
              text-align: center;
              color: #888;
              font-size: 0.95em;
            ">
              <div style="color: #1976d2; font-weight: bold">689Cloud Inc.</div>
              <div>
                {{ "label.contact" | i18next }}
                <a href="mailto:info@689cloud.com" style="color: #1976d2; text-decoration: none">info@689cloud.com</a>
              </div>
              <div style="font-style: italic; color: #1976d2">
                {{ "label.company_slogan" | i18next }}
              </div>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>