Coupon con scadenza

<div
  class="coupon coupon-home block md:flex lg:flex md:justify-between lg:justify-between items-center bg-emerald-50 rounded-md shadow">
  <div class="py-2 px-3 flex items-center justify-items-start">
    <figure>
      <img
        alt="immagine prodotto coupon"
        loading="lazy"
        width="100"
        height="100"
        decoding="async"
        data-nimg="1"
        class="rounded-lg"
        src="/images/blog/coupon/kodak.avif"
        style="color: transparent;" />
    </figure>
    <div class="ml-3">
      <div class="flex items-center font-serif">
        <h6 class="pl-1 text-base font-medium text-gray-600">
          <span
            class="text-lg md:text-xl lg:text-xl text-red-500 border-red-500 bg-red-50 px-4 py-1 font-bold"
            ><span>15%</span></span
          >
          Off
        </h6>
        <div class="ml-2">
          <span
            id="attivo"
            class="text-white inline-block px-4 py-1 rounded-full font-bold text-l bg-emerald-500"
            >Attivo</span
          >
        </div>
      </div>
      <h2
        class="pl-1 font-serif text-base text-gray-700 leading-6 font-semibold mb-2">
        Da spendere su quello che vuoi
      </h2>
      <span class="inline-block mb-2">
        <div id="demo" class="flex items-center font-semibold">
          <span
            id="giorni"
            class="flex items-center justify-center bg-emerald-500 text-white text-sm font-serif font-semibold px-2 py-1 rounded mx-1"
            >0</span
          >:
          <span
            id="ore"
            class="flex items-center justify-center bg-emerald-500 text-white text-sm font-serif font-semibold px-2 py-1 rounded mx-1"
            >0</span
          >:
          <span
            id="minuti"
            class="flex items-center justify-center bg-emerald-500 text-white text-sm font-serif font-semibold px-2 py-1 rounded mx-1"
            >0</span
          >:
          <span
            id="secondi"
            class="flex items-center justify-center bg-emerald-500 text-white text-sm font-serif font-semibold px-2 py-1 rounded mx-1"
            >0</span
          >
        </div>
      </span>
    </div>
  </div>
  <div
    class="md:border-l-2 lg:border-l-2 border-dashed lg:w-1/3 md:w-1/3 relative px-4">
    <div class="info flex items-center">
      <div class="w-full">
        <div class="block">
          <div
            class="font-serif border border-dashed py-1 border-gray-700  rounded-lg text-center block">
            <button
              id="copiabtn"
              class="block w-full"
              onclick="copyIt()"
              data-content="SUMMER24">
              <span
                id="copiaTesto"
                class="uppercase font-serif font-semibold text-sm leading-7 text-gray-700"
                >SUMMER24</span
              >
            </button>
          </div>
        </div>
        <p class="text-xs leading-4 text-gray-500 mt-2">
          * Questo coupon si applica con una spesa minima di
          <span class="font-bold">€500</span>
        </p>
      </div>
    </div>
  </div>
</div>

<script>

  // Imposta il tempo del coundown iniziale
  const countdown = {
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 6,
  }

  // Aggiorna il countdown ogni secondo
  const countdownInterval = setInterval(updateCountdown, 1000)

  function updateCountdown() {
    // Aggiorna il counter
    updateCountdownDisplay(countdown)

    // Decrementa i secondi
    countdown.seconds--

    // Aggiusta i valori in abse a giorni, ore, minuti, secondi
    if (countdown.seconds < 0) {
      countdown.seconds = 59
      countdown.minutes--
    }
    if (countdown.minutes < 0) {
      countdown.minutes = 59
      countdown.hours--
    }
    if (countdown.hours < 0) {
      countdown.hours = 23
      countdown.days--
    }

    // Cambia il testo del countdown quando si azzera
    if (countdown.days < 0) {
      clearInterval(countdownInterval)
      updateCountdownDisplay({ days: 0, hours: 0, minutes: 0, seconds: 0 })
      changeColors()
      changeText()
    }
  }

  function updateCountdownDisplay(countdown: { days: number, hours: number, minutes: number, seconds: number }) {
    const { days, hours, minutes, seconds } = countdown
    const elements = {
      daysElement: document.getElementById("giorni"),
      hoursElement: document.getElementById("ore"),
      minutesElement: document.getElementById("minuti"),
      secondsElement: document.getElementById("secondi"),
    }

    if (elements.daysElement) {
      elements.daysElement.textContent = `${days}d`
    }
    if (elements.hoursElement) {
      elements.hoursElement.textContent = `${hours}h`
    }
    if (elements.minutesElement) {
      elements.minutesElement.textContent = `${minutes}m`
    }
    if (elements.secondsElement) {
      elements.secondsElement.textContent = `${seconds}s`
    }
  }

  function changeColors() {
    // Seleziona dal DOM tutti gli elementi con una classe che inizi con bg-emerald
    const emeraldElements = document.querySelectorAll("[class*='bg-emerald']")

    // Cambia tutte le classi bg-emerald con bg-red
    emeraldElements.forEach(el => {
      el.classList.forEach(className => {
        if (className.startsWith("bg-emerald")) {
          el.classList.replace(className, className.replace("bg-emerald", "bg-red"))
        }
      })
    })
  }

  function changeText(){
  const attivoElement = document.querySelector("#attivo")
  if(attivoElement){
    attivoElement.textContent = "Inattivo"
  }
}
</script>