<template>
  <div class="gap-0 px-0 mb-5">
  <!-- Secondary Products -->

    <div class="grid grid-cols-1 gap-0">
      <template v-for="n in 7" :key="n">
        <div v-if="variation[`ProductImage${n}`] || variation[`ProductName${n}`] || variation[`ProductCode${n}`]" class="grid grid-cols-6 gap-1 items-center" >
          <!-- Product Name and Code -->
          <div class="flex flex-col justify-center col-span-4 mb-3">
            <h2 class="text-lg font-semibold m-0 p-0">{{ variation[`ProductName${n}`] }}</h2>
            <p class="text-sm text-gray-400 font-semibold">{{ variation[`ProductCode${n}`] }}</p>
          </div>
          <!-- Promo Price and Normal Price -->
          <div v-if="variation[`PromoPrice${n}`]" class="flex flex-col justify-center col-span-1">
            <p class="text-red-500 font-bold">PROMO: RM{{ variation[`PromoPrice${n}`] }}</p>
            <p class="line-through text-gray-400">NP: RM{{ variation[`NormalPrice${n}`] }}</p>
          </div>
          <div v-else class="col-span-1"></div>
          <!-- Quantity Adjustment -->
         <div v-if="variation[`ProductQuantity${n}`] && variation[`ProductQuantity${n}`] !== '' && variation[`ProductQuantity${n}`] !== null" class="flex items-center justify-end col-span-1">
            <button 
              @click.prevent="decreaseQuantity(n)"
              :disabled="quantities[n] <= 0"
              class="px-2 py-1 text-gray-600 rounded-l"
            >
              <font-awesome-icon icon="minus" />
            </button>
            <input 
              type="text" 
              v-model.number="quantities[n]" 
              class="px-1 py-2 text-center border border-gray-500 w-12 dark:text-gray-900" 
            />
            <button 
              @click.prevent="increaseQuantity(n)"
              class="px-2 py-1 text-gray-600 rounded-r"
            >
              <font-awesome-icon icon="plus" />
            </button>
          </div>
          <div v-else class="col-span-1"></div>
        </div>
      </template>
    </div>   
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { defineProps } from 'vue';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

const props = defineProps({
  variation: {
    type: Object,
    required: true
  }
});

const quantities = ref({});

onMounted(() => {
  // Initialize quantities with default values from props
  for (let i = 1; i <= 5; i++) {
    if (props.variation[`ProductQuantity${i}`] !== undefined) {
      quantities.value[i] = props.variation[`ProductQuantity${i}`];
    }
  }
});

const decreaseQuantity = (index) => {
  if (quantities.value[index] > 0) {
    quantities.value[index]--;
  }
};

const increaseQuantity = (index) => {
  quantities.value[index]++;
};
</script>

<style scoped>
</style>
