<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 v-if="footerData.msgDeal" class="custom-shape bg-color-1 text-white text-2xl font-bold uppercase">{{ footerData.msgDeal }}</p>

          <!-- Tooltip section, displayed only if footerData.tooltip is not empty -->
          <a v-if="footerData.tooltip" 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">
              {{ footerData.tooltip }}
            </span>
          </a>

          <p v-if="footerData.discountMessage" class="text-2xl font-bold text-color-1 pt-2" v-html="footerData.discountMessage"></p>
          <p v-if="footerData.otherMessage" class="text-xl text-gray-400">{{ footerData.otherMessage }}</p>
        </div>

        
        <!-- Right Column -->
        <div class="flex flex-col items-end space-y-2 font-medium">
          <div class="flex justify-between w-full">
            <span class="pr-4">Merchandise Subtotal:</span>
            <span class="pl-4 flex">
              <span>RM</span>
              <span class="w-24 text-right">{{ formattedMerchandiseSubtotal }}</span>
            </span>
          </div>
          <div class="flex justify-between w-full">
            <span class="pr-4">Total Saving:</span>
            <span class="pl-4 flex">
              <span>RM</span>
              <span class="w-24 text-right">{{ formattedTotalSaving }}</span>
            </span>
          </div>
          <div class="flex justify-between w-full font-bold">
            <span class="pr-4">Total Payment:</span>
            <span class="pl-4 flex">
              <span>RM</span>
              <span class="w-24 text-right">{{ formattedTotalPayment }}</span>
            </span>
          </div>
        </div>
      </div>
  
      <hr class="border border-gray-200" />
  
      <div class="flex flex-col gap-4 p-4">
        <!-- Top Row: Text and Buttons -->
        <div class="flex flex-col lg:flex-row items-center md:justify-between flex-wrap">
          <!-- Left Column -->
          <div class="text-xs flex-1 xl:max-w-[60%] mb-5" v-html="footerData.priceDisclaimer"></div>
          
          <!-- Right Column -->
          <div class="flex gap-4 items-center font-medium flex-shrink-0">
            <a href="#" class="flex-1 flex items-center add-to-cart py-2 px-4 rounded whitespace-nowrap">
              Add to Cart
              <font-awesome-icon icon="shopping-cart" class="ml-1" />
            </a>
            <a href="#" class="flex-1 flex items-center buy-now text-white py-2 px-4 rounded whitespace-nowrap">
              Buy Now
              <font-awesome-icon icon="shopping-cart" class="ml-1" />
            </a>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed } from 'vue';
  import { defineProps } from 'vue';
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
  
  const props = defineProps({
    product: {
      type: Object,
      required: true
    }
  });
  
  const merchandiseSubtotal = ref(2980.00); 
  const totalSaving = ref(40.00); 
  
  // Function to format numbers to 2 decimal places
  const formatCurrency = (amount) => amount.toFixed(2);
  
  // Computed properties for formatted values
  const formattedMerchandiseSubtotal = computed(() => formatCurrency(merchandiseSubtotal.value));
  const formattedTotalSaving = computed(() => formatCurrency(totalSaving.value));
  const formattedTotalPayment = computed(() => formatCurrency(merchandiseSubtotal.value - totalSaving.value));


  
  // Define category-specific data
  const categorySpecificData = {
    "Keyboard": {
      msgDeal: "Keyboard Special!",
      tooltip: "Keyboard tooltip",
      discountMessage: "Special discount on keyboards!",
      otherMessage: "(Available in multiple colors)",
      priceDisclaimer: "* Keyboard prices are subject to change."
    },
    "Power Supply": {
      msgDeal: "Power Supply Deal!",
      tooltip: "Power Supply tooltip",
      discountMessage: "Buy more <span class='text-color-2'>power supplies</span> for a discount!",
      otherMessage: "(Various power options available)",
      priceDisclaimer: "* All prices are subject to change without prior notice and are not guaranteed, except that prices for an order that have been accepted by Fusion Tech Supply Sdn. Bhd."
    },
    "PC Case": {
      msgDeal: "",
      tooltip: "",
      discountMessage: "Every Purchase of <span class='text-color-2'>SINGLE FAN</span> discount <span class='text-color-2'>-RM 2</span> *<br />Every Purchase of <span class='text-color-2'>3 IN 1 FAN</span> discount <span class='text-color-2'>-RM 1</span> *",
      otherMessage: "",
      priceDisclaimer: "* All prices are subject to change without prior notice and are not guaranteed, except that prices for an order that have been accepted by Fusion Tech Supply Sdn. Bhd."
    },
    "Promotion": {
      msgDeal: "",
      tooltip: "",
      discountMessage: "<span class='text-color-2'>Max Order Per Order: 3sets</span>",
      otherMessage: "",
      priceDisclaimer: "* All prices are subject to change without prior notice and are not guaranteed, except that prices for an order that have been accepted by Fusion Tech Supply Sdn. Bhd."
    }
  };
  
  // Computed property to handle conditional footer data
  const footerData = computed(() => {
    const defaultData = {
      msgDeal: "Better Deal!",
      tooltip: "Tooltip description here",
      discountMessage: "Purchase 8pcs & above get a discount of <span class='text-color-2'>-RM5</span> each! *",
      otherMessage: "(Mix colour/switches)",
      priceDisclaimer: "* All prices are subject to change without prior notice and are not guaranteed, except that prices for an order that have been accepted by Fusion Tech Supply Sdn. Bhd."
    };
  
    const category = props.product?.category;
    return category ? (categorySpecificData[category] || defaultData) : defaultData;
  });
  </script>
  
  <style>
  .custom-shape {
    position: relative;
    display: inline-block;
    padding:10px 50px 10px 20px;
    clip-path: polygon(100% 100%, 0% 100%, 0% 0%, 85% 0%, 100% 100%);
  }
  .tooltip {
    visibility: hidden;
    opacity: 0;
  }
  
  .relative:hover .tooltip {
    visibility: visible;
    opacity: 1;
  }
  </style>
  