# Checkout

<snt-app #default="{ _, router, goTo }">
  <snt-section name="เช็คเอาท์">
    <snt-checkout #default="{ selectedPurchase, totalPrice, shippingFee, promoCodeDiscount, netPrice, errors, valid, submitting, submit }">
      <snt-container>
        <snt-tabs
          value="shipping"
          #default="{ selectTab, isTabSelected }">
          <div class="checkout-tabs">
            <div
              :class="{ 'checkout-tabs__item--active' : isTabSelected('shipping') || isTabSelected('address') }"
              class="checkout-tabs__item">
              การส่งสินค้า
            </div>
            <div
              :class="{ 'checkout-tabs__item--active' : isTabSelected('payment') }"
              class="checkout-tabs__item">
              การชำระเงิน
            </div>
            <div
              :class="{ 'checkout-tabs__item--active' : isTabSelected('checkout') }"
              class="checkout-tabs__item">
              ยืนยัน
            </div>
          </div>
          <div class="checkout-tabs-items">
            <div class="checkout-tabs-items__container">
              <div
                v-if="isTabSelected('shipping')"
                class="checkout-shipping">
                <div class="checkout-shipping__header">เลือกวิธีจัดส่ง</div>
                <snt-shipping #default="{ items, selectShipping, isShippingSelected }">
                  <div class="checkout-shipping__wrapper">
                    <div v-for="(item, i) in items"
                      :key="`shipping-item-${i}`"
                      :class="{ 'checkout-shipping-item--active': isShippingSelected(item) }"
                      class="checkout-shipping-item"
                      @click="selectShipping(item)">
                      <div>{{ item.name }}</div>
                      <div>{{ item.cost }} บาท</div>
                    </div>
                  </div>
                </snt-shipping>
                <snt-button
                    :disabled="_.includes(errors, 'shipping')"
                    class="checkout__next"
                    color="secondary"
                    depressed
                    large
                    block
                    @click="selectTab('address')">
                    ยืนยัน
                  </snt-button>
              </div>
              <div
                v-if="isTabSelected('address')"
                class="checkout-address">
                <div class="checkout-shipping__header">ส่งไปยังที่อยู่ของฉัน</div>
                <snt-address />
                <snt-button
                    :disabled="_.includes(errors, 'address')"
                    class="checkout__next"
                    color="secondary"
                    depressed
                    large
                    block
                    @click="selectTab('payment')">
                    ยืนยัน
                  </snt-button>
              </div>
              <div
                v-if="isTabSelected('payment')"
                class="checkout-payment-methods">
                <div class="checkout-shipping__header">เลือกช่องทางชำระเงิน</div>
                <snt-payment-methods />
                <snt-button
                    :disabled="_.includes(errors, 'payment-method')"
                    class="checkout__next"
                    color="secondary"
                    depressed
                    large
                    block
                    @click="selectTab('checkout')">
                    ยืนยัน
                  </snt-button>
              </div>
              <div v-if="isTabSelected('checkout')">
                <div class="checkout-shipping__header">ยืนยันการสั่งซื้อ</div>
                <snt-cart
                  #default
                  class="checkout-cart">
                  <div class="checkout-purchase">
                    <div class="checkout-purchase__summary">
                      <snt-address class="checkout-purchase__address"/>
                      <snt-shipping class="checkout-purchase__shipping"/>
                      <div class="checkout-purchase-payment">
                        <div class="checkout-purchase-payment__title">เลือกวิธีชำระเงิน</div>
                        <snt-payment-methods
                          #default="{ value, items, selectMethod }"
                          class="checkout-purchase-payment__items">
                          <snt-select
                            :value="value"
                            :items="items"
                            placeholder="เลือกวิธีขำระเงิน"
                            dense
                            outlined
                            @change="selectMethod($event)" />
                        </snt-payment-methods>
                      </div>
                      <snt-promo-codes class="checkout-purchase__promo"/>
                      <div class="checkout-purchase-cart">
                        <div class="checkout-purchase-cart__title">จำนวนสินค้าในตะกร้า</div>
                        <template v-for="item in selectedPurchase">
                          <div class="checkout-purchase-cart-item">
                            <snt-image
                              :src="item.pictureUrl"
                              height="112px"
                              width="85px" />
                            <div class="checkout-purchase-cart-item__content">
                              <div class="checkout-purchase-cart-title">
                                <div>{{ item.name }}</div>
                              </div>
                              <div class="checkout-purchase-cart-item__options">
                                <div class="checkout-purchase-cart-title__price">
                                  <div>ราคา</div>
                                  <div>{{ item.price | toLocaleString }} ฿</div>
                                </div>
                                <div class="checkout-purchase-cart-item__quantity">
                                  <div>จำนวน</div>
                                  <div class="checkout-purchase-cart-item__quantity-text">{{ item.quantity | toLocaleString }}</div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </template>
                      </div>
                    </div>
                    <div class="checkout-purchase__summary">
                      <div class="checkout-purchase-summary__title">
                        สรุปคำสั่งซื้อ
                      </div>
                      <div class="checkout-purchase-summary__row">
                        <div>
                          ยอดรวม
                        </div>
                        <div>
                          {{ totalPrice | toLocaleString }} ฿
                        </div>
                      </div>
                      <div class="checkout-purchase-summary__row">
                        <div>
                          ส่วนลด
                        </div>
                        <div>
                          {{ promoCodeDiscount | toLocaleString }} ฿
                        </div>
                      </div>
                      <div class="checkout-purchase-summary__row">
                        <div>
                          ค่าส่งสินค้า
                        </div>
                        <div v-if="shippingFee">
                          {{ shippingFee | toLocaleString }} ฿
                        </div>
                        <div v-else>ฟรี</div>
                      </div>
                      <div class="checkout-purchase-summary__row checkout-purchase-summary__row--no-border">
                        <div class="checkout-purchase-summary__subtitle">
                          ยอดรวมทั้งหมด
                        </div>
                        <div class="checkout-purchase-summary__subtitle">
                          {{ netPrice | toLocaleString }} ฿
                        </div>
                      </div>
                      <snt-button
                        :loading="submitting"
                        :disabled="!valid"
                        class="checkout-purchase-submit"
                        color="secondary"
                        depressed
                        large
                        block
                        @click="submit()">
                        ยืนยันการสั่งซื้อ
                      </snt-button>
                    </div>
                  </div>
                </snt-cart>
              </div>
            </div>
          </div>
        </snt-tabs>
      </snt-container>
    </snt-checkout>
  </snt-section>
</snt-app>