<template>
  <section class="tp-cart-area pb-120">
    <div class="container">
      <div v-if="!cartStore.cart_products || cartStore.cart_products && cartStore.cart_products.items.length == 0" class='text-center pt-50'>
        <h3>No hay productos en el carrito</h3>
        <nuxt-link href="/search" class="tp-cart-checkout-btn mt-20">Ir a comprar</nuxt-link>
      </div>
      <div v-else class="row">
        <div class="col-xl-9 col-lg-8">
            <div class="tp-cart-list mb-25 mr-30">
              <table>
                  <thead>
                    <tr>
                      <th class="tp-cart-header-product">Producto</th>
                      <th class="tp-cart-header-price">Precio</th>
                      <th class="tp-cart-header-quantity">Cantidad</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody v-if="cartStore.cart_products">
                    <!-- cart item start -->
                    <cart-item v-for="item in cartStore.cart_products.items" :key="item.id" :item="item" />
                    <!-- cart item end -->
                  </tbody>
                </table>
            </div>
        </div>
        <div class="col-xl-3 col-lg-4 col-md-6" v-if="cartStore.cart_products">
            <div class="tp-cart-checkout-wrapper">
              <div class="tp-cart-checkout-top d-flex align-items-center justify-content-between">
                  <span class="tp-cart-checkout-top-title">Subtotal</span>
                  <span class="tp-cart-checkout-top-price">
                    ${{cartStore.cart_products.price.toFixed(2)}}
                  </span>
              </div>
              <!-- <div class="tp-cart-checkout-shipping">
                  <h4 class="tp-cart-checkout-shipping-title">Shipping</h4>
                  <div class="tp-cart-checkout-shipping-option-wrapper">
                    <div class="tp-cart-checkout-shipping-option">
                        <input id="flat_rate" type="radio" name="shipping">
                        <label @click="handleShippingCost(20)" for="flat_rate">Flat rate: <span>$20.00</span></label>
                    </div>
                    <div class="tp-cart-checkout-shipping-option">
                        <input id="local_pickup" type="radio" name="shipping">
                        <label @click="handleShippingCost(25)" for="local_pickup">Local pickup: <span> $25.00</span></label>
                    </div>
                    <div class="tp-cart-checkout-shipping-option">
                        <input id="free_shipping" type="radio" name="shipping">
                        <label @click="handleShippingCost('free')" for="free_shipping">Free shipping</label>
                    </div>
                  </div>
              </div> -->
              <div class="tp-cart-checkout-total d-flex align-items-center justify-content-between">
                  <span>Total</span>
                  <span>${{(cartStore.cart_products.price).toFixed(2)}}</span>
              </div>
              <div class="tp-cart-checkout-proceed">
                  <a href="/checkout" class="tp-cart-checkout-btn w-100">Ir a pagar</a>
              </div>
            </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { useCartStore } from '@/pinia/cart/cart.store';

const cartStore = useCartStore();
let shipCost = ref<number>(0);
let couponCode = ref<string>('');

if (!cartStore.cart_products || cartStore.cart_products.items.length == 0) {
  await cartStore.getCart();
}

// handleCouponSubmit
const handleCouponSubmit = () => {
  console.log(couponCode.value)
}

// handle shipping cost 
const handleShippingCost = (value:number | string) => {
    if(value === 'free'){
      shipCost.value = 0;
    }
    else {
      shipCost.value = value as number;
    }
}
</script>
