{{ 'section-countto-v1.css' | asset_url | stylesheet_tag }}

<xo-animate xo-cascade>
  <div class='countto-v1'>
    <div
      {% render 'section-attr' %}
    >
      {% render 'section-bg-image' %}
      <xo-container
        {% render 'section-layout' %}
      >
        <div class='countto-v1__content'>
          <div class='countto-v1__title'>
            {{ section.settings.title }}
          </div>
          <div class='countto-v1__description'>
            {{ section.settings.description }}
          </div>
        </div>
        <xo-grid style='--xs:1;--md:2;--xl:{{ section.settings.columns }}'>
          {%- for block in section.blocks -%}
            <div class='countto-v1__block'>
              <div class='countto-v1__box'>
                <div class='countto-v1__countto' id='count-section'>
                  <div
                    class='count'
                    data-start='{{ block.settings.from }}'
                    data-end='{{ block.settings.to }}'
                    number-duration='{{ block.settings.duration }}'
                    number-delay='{{ block.settings.delay }}'
                  >
                    {{ block.settings.from }}
                  </div>
                </div>
                <div class='countto-v1__block-title'>
                  {{ block.settings.title }}
                </div>
              </div>
            </div>
          {%- endfor -%}
        </xo-grid>
      </xo-container>
    </div>
  </div>
</xo-animate>
<script>
  function countUpElements() {
    const countElements = document.querySelectorAll('.count');

    countElements.forEach((countElement) => {
      const start = parseInt(countElement.getAttribute('data-start'));
      const end = parseInt(countElement.getAttribute('data-end'));
      let current = start;
      const duration = parseInt(countElement.getAttribute('number-duration'));
      const increment = (end - start) / (duration / 10);
      const delay = parseInt(countElement.getAttribute('number-delay'));

      setTimeout(() => {
        const timer = setInterval(() => {
          current += increment;
          if (current >= end) {
            current = end;
            clearInterval(timer);
          }

          let displayValue;

          if (end < 1000) {
            displayValue = Math.floor(current).toLocaleString('en-US') + '+';
          } else if (end >= 1000000000) {
            if (end % 1000000000 === 0) {
              displayValue = Math.floor(current / 1000000000) + 'T';
            } else {
              displayValue = (current / 1000000000).toFixed(1).replace('.', ',') + 'T';
            }
          } else if (end >= 1000000) {
            if (end % 1000000 === 0) {
              displayValue = Math.floor(current / 1000000) + 'M';
            } else {
              displayValue = (current / 1000000).toFixed(1).replace('.', ',') + 'M';
            }
          } else if (end >= 1000) {
            if (end < 1000) {
              displayValue = (current / 1000).toFixed(1).replace('.', ',') + 'K';
            } else {
              displayValue = Math.floor(current / 1000) + 'K';
            }
          } else {
            displayValue = Math.floor(current).toLocaleString('en-US');
          }

          countElement.textContent = displayValue;
        }, 10);
      }, delay);
    });
  }

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        countUpElements();
        observer.unobserve(entry.target);
      }
    });
  });

  const countSection = document.getElementById('count-section');
  observer.observe(countSection);
</script>

{% schema %}
{
  "name": "t:sections.countto_v1.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "select",
      "id": "width",
      "label": "t:sections.all.width.label",
      "default": "box",
      "options": [
        {
          "value": "box",
          "label": "t:sections.all.width.options__1.label"
        },
        {
          "value": "wide",
          "label": "t:sections.all.width.options__2.label"
        },
        {
          "value": "fullwidth",
          "label": "t:sections.all.width.options__3.label"
        }
      ]
    },
    {
      "type": "text",
      "id": "title",
      "label": "t:sections.countto_v1.settings.title.label"
    },
    {
      "type": "text",
      "id": "description",
      "label": "t:sections.countto_v1.settings.description.label"
    },
    {
      "type": "range",
      "id": "columns",
      "min": 2,
      "max": 5,
      "step": 1,
      "label": "t:sections.countto_v1.settings.columns.label",
      "default": 3
    },
    {
      "type": "header",
      "content": "t:sections.all.heading.content"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.color_scheme.label"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "t:sections.all.bg_color.label"
    },
    {
      "type": "color_background",
      "id": "background_gradient",
      "label": "t:sections.all.bg_gradient.label"
    },
    {
      "type": "image_picker",
      "id": "background_image_desktop",
      "label": "t:sections.all.background_image_desktop.label"
    },
    {
      "type": "image_picker",
      "id": "background_image_mobile",
      "label": "t:sections.all.background_image_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "use_parallax",
      "label": "t:sections.all.use_parallax.label",
      "default": true
    },
    {
      "type": "number",
      "id": "padding_top",
      "label": "t:sections.all.padding_top.label",
      "default": 50
    },
    {
      "type": "number",
      "id": "padding_bottom",
      "label": "t:sections.all.padding_bottom.label",
      "default": 50
    }
  ],
  "blocks": [
    {
      "type": "grid",
      "name": "t:sections.countto_v1.blocks.grid.name",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "t:sections.countto_v1.blocks.grid.title.label"
        },
        {
          "type": "number",
          "id": "from",
          "label": "From",
          "default": 0
        },
        {
          "type": "number",
          "id": "to",
          "label": "To",
          "default": 0
        },
        {
          "type": "number",
          "id": "duration",
          "label": "Duration"
        },
        {
          "type": "number",
          "id": "delay",
          "label": "Delay"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.countto_v1.presets.name"
    }
  ]
}
{% endschema %}
