{{> header
    title="Konfirmasi Pesanan Scuto Store"
    preview="Pembayaran pesanan #{{ order.code }} telah kami terima."
}}

<mj-raw>
    <style type="text/css">
        .order-summary td {
            border-bottom: 1px solid #e4e4e7;
            color: #27272a;
            vertical-align: middle;
        }
        .order-summary .number {
            text-align: right;
            white-space: nowrap;
        }
        .order-total td {
            border-top: 2px solid #b69547;
            border-bottom: 0;
            font-weight: bold;
        }
        .address-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }
    </style>
</mj-raw>

<mj-section background-color="#ffffff" padding="16px 32px 8px">
    <mj-column>
        <mj-text padding="0">
            <h3>Pesanan Anda telah dikonfirmasi</h3>
            Halo {{ order.customer.firstName }} {{ order.customer.lastName }}, pembayaran Anda telah kami terima. Kami akan memproses pesanan dan menginformasikan perkembangan berikutnya.
        </mj-text>
    </mj-column>
</mj-section>

<mj-section background-color="#faf8f2" padding="16px 24px">
    <mj-column>
        <mj-text align="center" padding="4px">
            <strong>Kode Pesanan</strong><br />
            {{ order.code }}
        </mj-text>
    </mj-column>
    <mj-column>
        <mj-text align="center" padding="4px">
            <strong>Tanggal Pesanan</strong><br />
            {{ formatDate order.orderPlacedAt "dd/mm/yyyy" }}
        </mj-text>
    </mj-column>
    <mj-column>
        <mj-text align="center" padding="4px">
            <strong>Total Pembayaran</strong><br />
            {{ formatMoney order.totalWithTax order.currencyCode 'id-ID' }}
        </mj-text>
    </mj-column>
</mj-section>

<mj-section background-color="#ffffff" padding="24px 32px 8px">
    <mj-column>
        <mj-text padding="0">
            <h3>Alamat Pengiriman</h3>
            {{#with order.shippingAddress }}
                <ul class="address-list">
                    {{#if fullName}}<li><strong>{{ fullName }}</strong></li>{{/if}}
                    {{#if company}}<li>{{ company }}</li>{{/if}}
                    {{#if streetLine1}}<li>{{ streetLine1 }}</li>{{/if}}
                    {{#if streetLine2}}<li>{{ streetLine2 }}</li>{{/if}}
                    {{#if city}}<li>{{ city }}</li>{{/if}}
                    {{#if province}}<li>{{ province }}{{#if postalCode}} {{ postalCode }}{{/if}}</li>{{else}}{{#if postalCode}}<li>{{ postalCode }}</li>{{/if}}{{/if}}
                    {{#if country}}<li>{{ country }}</li>{{/if}}
                    {{#if phoneNumber}}<li>Telepon: {{ phoneNumber }}</li>{{/if}}
                </ul>
            {{else}}
                Alamat pengiriman tidak tersedia.
            {{/with}}
        </mj-text>
    </mj-column>
</mj-section>

<mj-section background-color="#ffffff" padding="16px 32px 24px">
    <mj-column>
        <mj-text padding="0 0 8px">
            <h3>Ringkasan Pesanan</h3>
        </mj-text>
        <mj-table css-class="order-summary" cellpadding="8px">
            <tr>
                <th align="left">Produk</th>
                <th align="center">Jumlah</th>
                <th align="right">Harga</th>
            </tr>
            {{#each order.lines }}
                <tr>
                    <td>
                        {{#if featuredAsset}}
                            <img alt="{{ productVariant.name }}"
                                 src="{{ featuredAsset.preview }}?w=64&h=64&mode=crop"
                                 width="48"
                                 height="48"
                                 style="display: inline-block; margin-right: 8px; vertical-align: middle; border-radius: 4px;" />
                        {{/if}}
                        <span>{{ productVariant.name }}</span>
                    </td>
                    <td align="center">{{ quantity }}</td>
                    <td class="number">{{ formatMoney discountedLinePriceWithTax ../order.currencyCode 'id-ID' }}</td>
                </tr>
            {{/each}}
            {{#each order.discounts }}
                <tr>
                    <td colspan="2">Diskon — {{ description }}</td>
                    <td class="number">{{ formatMoney amount ../order.currencyCode 'id-ID' }}</td>
                </tr>
            {{/each}}
            <tr>
                <td colspan="2">Subtotal</td>
                <td class="number">{{ formatMoney order.subTotalWithTax order.currencyCode 'id-ID' }}</td>
            </tr>
            {{#each shippingLines }}
                <tr>
                    <td colspan="2">Pengiriman — {{ shippingMethod.name }}</td>
                    <td class="number">{{ formatMoney priceWithTax ../order.currencyCode 'id-ID' }}</td>
                </tr>
            {{/each}}
            <tr class="order-total">
                <td colspan="2">Total</td>
                <td class="number">{{ formatMoney order.totalWithTax order.currencyCode 'id-ID' }}</td>
            </tr>
        </mj-table>

        <mj-button padding="24px 0 0" href="{{ storefrontUrl }}/dashboard">
            Lihat Pesanan Saya
        </mj-button>

        <mj-text color="#71717a" font-size="13px" line-height="20px" align="center" padding="12px 0 0">
            Simpan email ini sebagai bukti konfirmasi pesanan Anda.
        </mj-text>
    </mj-column>
</mj-section>

{{> footer }}