<template>
    <div>      
      <div class="grid grid-cols-1 lg:grid-cols-[1fr_auto] gap-4 p-4 mt-5">
        <!-- Left Column -->
        <div class="pr-4">
          <p class="custom-shape bg-color-1 text-white text-2xl font-bold uppercase">Add-on Deal!</p>
          <a class="relative group text-gray-600 hover:text-blue-500">
            <!-- Use FontAwesomeIcon component -->
            <font-awesome-icon 
              icon="question" 
              size="xl"
              class="border-2 border-gray-600 rounded-full py-2 px-3 ml-5"
            />
            <span class="absolute mb-2 w-max px-2 py-1 text-xs text-white bg-gray-800 rounded-md opacity-0 group-hover:opacity-100 transition-opacity">
              tooltip description here
            </span>
          </a>
          <p class="text-2xl font-bold text-color-1 pt-2">Can purchase cooling fan at <span class="text-color-2">discount price</span> as the amount of purchase made *</p>
          
        </div>
        
        <!-- Right Column -->
        <div class="flex flex-row items-end space-y-2 font-medium">
            
        </div>
      </div>
  
      <hr class="border border-gray-200" /><br /><br />


      <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
          <div 
            v-for="(product, index) in products" 
            :key="index"
            class="space-y-4 mb-5"
            
          >
            <!-- Product Name in its own row -->
            <h2 class="text-xl font-bold" >{{ product.productName }}</h2>

            <!-- Product Image displayed once, vertically aligned to the top -->
            <div class="grid grid-cols-[auto_1fr] gap-4 items-start ">
              <img :src="product.productImage" alt="Product Image" class="object-cover max-w-[9rem]">

              <div class="space-y-10 lg:space-y-5 lg:col-span-1 ">
                <!-- Loop through product types -->
                <div
                  v-for="(type, typeIndex) in product.types"
                  :key="typeIndex"
                  class="grid lg:grid-cols-[1fr_auto_auto] gap-4 items-center"
                >
                  <!-- Column 2: Type and Type Code -->
                  <div class="space-y-1 lg:col-span-1">
                    <h3 class="text-lg font-bold">{{ type.type }}</h3>
                    <p class="text-xs font-bold text-gray-400">{{ type.typeCode }}</p>
                  </div>

                  <!-- Column 3: Promo Price and Normal Price -->
                  <div class="lg:col-span-1">
                    <p class="text-red-500 font-bold">PROMO: RM{{ type.promoPrice }}</p>
                    <p class="line-through text-gray-400">NP: RM{{ type.normalPrice }}</p>
                  </div>

                  <!-- Column 4: Quantity Controls -->
                  <div class="flex items-center space-x-2 lg:col-span-1">
                    <button @click="decreaseQuantity(index, typeIndex)" class="p-1 rounded-full text-gray-600">
                      <font-awesome-icon icon="minus" />
                    </button>
                    <input type="text" v-model="type.quantity" class="w-10 px-1 py-2 text-center border border-gray-400">
                    <button @click="increaseQuantity(index, typeIndex)" class="p-1 rounded-full text-gray-600">
                      <font-awesome-icon icon="plus" />
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

    </div>
  </template>

  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

  const products = ref([]);

  onMounted(async () => {
  try {
    const response = await fetch('../public/products/addON.json');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    products.value = data[0].addon; // Adjusted to access the addon array
  } catch (error) {
    console.error('Failed to fetch products:', error);
  }
});


  const increaseQuantity = (productIndex: number, typeIndex: number) => {
    products.value[productIndex].types[typeIndex].quantity += 1;
  };

  const decreaseQuantity = (productIndex: number, typeIndex: number) => {
    const quantity = products.value[productIndex].types[typeIndex].quantity;
    if (quantity > 0) {
      products.value[productIndex].types[typeIndex].quantity -= 1;
    }
  };

  </script>
  
  <style>
    .line-through {
      text-decoration: line-through;
    }
  </style>
  