<template>
    
    <div class="col-12 px-0 mb-2">
        <!-- placeholder for card under bold text-->
        <div class="">
            <p class="h7 fw-bold mb-1">Pay by Card </p>
            <p class="textmuted h8 mb-2">Make payment by filling in the card details</p>
            <div class="form">
                <div class="row">
                    <div class="col-12">
                        <div class="card border-0 input-icon-container">
                            <input v-model="cardNumber" @input="formatCardNumber" class="form-control with-icon" type="text" placeholder="Card Number" ref="cardNumberInput">
                            <font-awesome-icon :icon="cardIcon" v-if="cardIcon" class="input-icon" />
                        </div>
                    </div>
                    <div class="col-6"> <input v-model="expiry" @input="formatExpiry" class="form-control my-3" type="text" placeholder="MM/YY" ref="expiryInput"> </div>
                    <div class="col-6"> <input v-model="cvv" class="form-control my-3" type="text" placeholder="CVV" maxlength="4" ref="cvvInput"> </div>
                    
                </div>
                <div class="btn btn-primary d-block h8 mb-2">Make Payment <!-- <span class="fas fa-dollar-sign ms-2"></span>1400<span class="ms-3 fas fa-arrow-right"></span> --></div>
                
                

                
            </div>
        </div>

    </div>
</template>
  
<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import creditCardType from 'credit-card-type';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

export default defineComponent({
    components: {
        FontAwesomeIcon,
    },
  setup() {
    const cardNumber = ref('');
    const cardIcon = ref('');

    const detectCardType = () => {
      const cardType = creditCardType(cardNumber.value)[0]; // Get the first detected card type
      if (cardType) {
        switch (cardType.type) {
          case 'visa':
            cardIcon.value = ['fab', 'cc-visa'];
            break;
          case 'mastercard':
            cardIcon.value = ['fab', 'cc-mastercard'];
            break;
          case 'american-express':
            cardIcon.value = ['fab', 'cc-amex'];
            break;
          // Add more cases for other card types
          default:
            cardIcon.value = ''; // No icon for unknown types
        }
      } else {
        cardIcon.value = ''; // Clear icon if no card type detected
      }
    };

    return {
      cardNumber,
      cardIcon,
      detectCardType
    };
    
  }
});
</script>

<style>
    .fa-cc-visa { color: blue; }
    .fa-cc-mastercard { color: orange; }
    .fa-cc-amex { color: green; }
    /* Add more styles for other card types */
</style>

<style scoped>
.input-icon-container {
  position: relative;
}

.with-icon {
  padding-left: 30px; /* Adjust the padding to accommodate the icon */
}

.input-icon {
  position: absolute;
  left: 10px; /* Adjust the position as needed */
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em; /* Adjust the icon size as needed */
}
</style>



  