<template>
  <div class="gap-0 px-0 mb-5">
    <!-- Primary Product Information -->
    <div class="mb-4 px-5" :class="productClass">
      <img v-if="variation.image1" :src="variation.image1" alt="Primary Product Image" class="w-full xl:h-48 xl:object-contain h-auto" />
      <h2 class="text-xl text-center font-semibold my-3" v-if="variation.name">{{ variation.name }}</h2>

      <div class="flex justify-between items-center text-sm mb-3 px-4">
        <div class="text-gray-900 dark:text-gray-400 font-bold text-xl" v-if="variation.SDP">
          <sup class="font-normal text-sm">SDP</sup> RM{{ variation.SDP }}
        </div>
        <div class="text-gray-900 dark:text-gray-400 font-bold text-xl" v-if="variation.SRP">
          <sup class="font-normal text-sm">SRP</sup> RM{{ variation.SRP }}
        </div>
      </div>
    </div>

    <hr class="border-t-2 border-gray-300 dark:border-gray-700 my-4" />

    <!-- Secondary Products -->
    <div class="grid grid-cols-1 gap-0">
      <template v-for="n in 5" :key="n">
        <div v-if="variation[`ProductImage${n}`] || variation[`ProductName${n}`] || variation[`ProductCode${n}`]" class="grid grid-cols-6 gap-1 items-center" :class="productClass">
          <!-- Product Image -->
          <div v-if="variation[`ProductImage${n}`]" class="flex justify-center col-span-1">
            <img :src="variation[`ProductImage${n}`]" alt="Secondary Product Image" class="w-full h-auto" />
          </div>
          <div v-else class="col-span-1"></div>
          <!-- Product Name and Code -->
          <div class="flex flex-col justify-center col-span-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>
          <!-- Quantity Adjustment -->
          <div class="flex items-center justify-center col-span-2">
            <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>
      </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
  }
});


console.log('FBWProductCardSub.vue received variation:', props.variation); // Debug log


const productClass = computed(() => {
  return {
    'border-gray-300 dark:border-gray-700': true,
    'border-t border-b': false,
    'xl:border-l-2 xl:border-r-2': props.variation.border,
    ':border-0': !props.variation.border
  };
});

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>
