<template>
  <!-- counter start -->
  <section class="section cta-bg">
    <div class="bg-overlay bg-dark"></div>
    <b-container>
      <b-row id="counter">
        <b-col sm="6" lg="3">
          <div class="text-center my-3">
            <div class="d-flex align-items-center counter-content text-start">
              <div class="flex-shrink-0">
                <i class="mdi mdi-web text-white display-5"></i>
              </div>
              <div class="flex-grow-1 ms-4">
                <h1 class="text-white">
                  <span class="counter_value" data-target="825">0</span>
                </h1>
                <p
                  class="counter-name text-white opacity-75 mb-0 text-uppercase"
                >
                  Global Brands
                </p>
              </div>
            </div>
          </div>
        </b-col>
        <b-col sm="6" lg="3">
          <div class="text-center my-3">
            <div class="d-flex align-items-center counter-content text-start">
              <div class="flex-shrink-0">
                <i class="mdi mdi-emoticon-happy text-white display-5"></i>
              </div>
              <div class="flex-grow-1 ms-4">
                <h1 class="text-white">
                  <span class="counter_value" data-target="1800">0</span>+
                </h1>
                <p
                  class="counter-name text-white opacity-75 mb-0 text-uppercase"
                >
                  Happy Clients
                </p>
              </div>
            </div>
          </div>
        </b-col>
        <b-col sm="6" lg="3">
          <div class="text-center my-3">
            <div class="d-flex align-items-center counter-content text-start">
              <div class="flex-shrink-0">
                <i class="mdi mdi-lightbulb-on text-white display-5"></i>
              </div>
              <div class="flex-grow-1 ms-4">
                <h1 class="text-white">
                  <span class="counter_value" data-target="599">0</span>+
                </h1>
                <p
                  class="counter-name text-white opacity-75 mb-0 text-uppercase"
                >
                  Creative Idea
                </p>
              </div>
            </div>
          </div>
        </b-col>
        <b-col sm="6" lg="3">
          <div class="text-center my-3">
            <div class="d-flex align-items-center counter-content text-start">
              <div class="flex-shrink-0">
                <i class="mdi mdi-account-multiple text-white display-5"></i>
              </div>
              <div class="flex-grow-1 ms-4">
                <h1 class="text-white">
                  <span class="counter_value" data-target="2000">0</span>+
                </h1>
                <p
                  class="counter-name text-white opacity-75 mb-0 text-uppercase"
                >
                  User clients
                </p>
              </div>
            </div>
          </div>
        </b-col>
      </b-row>
    </b-container>
  </section>
  <!-- counter end -->
</template>

<script lang="ts">
export default {
  mounted() {
    const counter = document.querySelectorAll(".counter_value");
    const speed = 400; // The higher the slower

    counter.forEach((counter_value) => {
      const updateCount = () => {
        const targetStr = counter_value.getAttribute("data-target");

        if (targetStr) {
          const target = JSON.parse(targetStr);
          const count = parseInt(counter_value.innerHTML);
          if (target) {
            const inc: number = target / speed;

            // Check if target is reached
            if (count < target) {
              // Add inc to count and output in counter_value
              counter_value.innerHTML = (count + inc).toFixed(0);
              // Call function every ms
              setTimeout(updateCount, 1);
            } else {
              counter_value.innerHTML = target;
            }
          }
        }
      };
      updateCount();
    });
  },
};
</script>

<style scoped></style>
