Untitled

<?php
class Statistics_Widget extends \Elementor\Widget_Base {
  
    
    public function get_script_depends() {
		return [ 'statistics-widget' ];
	}

    public function get_style_depends() {
		return [ 'statistics-widget' ];
	}

  public function get_name() {
    return 'statistics_widget';
  }

  public function get_title() {
    return __( 'Statistics Section', 'eks' );
  }

  public function get_icon() {
    return 'eicon-counter';
  }

  public function get_categories() {
    return [ 'Eks' ];
  }

  protected function _register_controls() {
    // Content section 
    $this->start_controls_section(
        'content_section',
        [
            'label' => __( 'Content', 'eks' ),
            'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
        ]
    );

    $this->add_control(
      'section_title_text',
      [
        'label' => __( 'Section Title', 'text-domain' ),
        'type' => \Elementor\Controls_Manager::TEXT,
        'default' => __( 'Strength in numbers', 'text-domain' ),
      ]
    );

    $this->end_controls_section();

    // Repeater for Statistics Items
    $this->start_controls_section(
      'statistics_items',
      [
        'label' => __( 'Statistics Items', 'text-domain' ),
        'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
      ]
    );

    $repeater = new \Elementor\Repeater();

    $repeater->add_control(
      'item_title',
      [
        'label' => __( 'Item Title', 'text-domain' ),
        'type' => \Elementor\Controls_Manager::TEXT,
        'default' => __( 'Years of experience', 'text-domain' ),
      ]
    );

    $repeater->add_control(
      'lottie_file',
      [
        'label' => __( 'Lottie Animation JSON', 'text-domain' ),
        'type' => \Elementor\Controls_Manager::MEDIA,
        'media_type' => 'application/json',
      ]
    );

    $repeater->add_control(
      'target_number',
      [
        'label' => __( 'Target Number', 'text-domain' ),
        'type' => \Elementor\Controls_Manager::NUMBER,
        'default' => 30,
      ]
    );

    $repeater->add_control(
      'suffix',
      [
        'label' => __( 'Suffix', 'text-domain' ),
        'type' => \Elementor\Controls_Manager::TEXT,
        'default' => '+',
      ]
    );

    $repeater->add_control(
      'background_image',
      [
        'label' => __( 'Background Image', 'text-domain' ),
        'type' => \Elementor\Controls_Manager::MEDIA,
        'media_type' => 'image',
      ]
    );

    $this->add_control(
      'items_list',
      [
        'label' => __( 'Items', 'text-domain' ),
        'type' => \Elementor\Controls_Manager::REPEATER,
        'fields' => $repeater->get_controls(),
        'default' => [
          [
            'item_title' => __( 'Years of experience', 'text-domain' ),
            'target_number' => 30,
            'suffix' => '+',
          ],
          [
            'item_title' => __( 'Worldwide clients', 'text-domain' ),
            'target_number' => 100,
            'suffix' => '+',
          ],
        ],
        'title_field' => '{{{ item_title }}}',
      ]
    );

    $this->end_controls_section();
  }

  protected function render() {
    $settings = $this->get_settings_for_display();

    // Section title
    echo '<div class="py-24 sm:py-32">
      <div class="mx-auto h-[500px] max-w-7xl px-6 lg:px-8">
        <div class="max-w-2xl mx-auto lg:max-w-none">
          <div>
            <h2 class="text-4xl font-semibold tracking-tight text-gray-900">' . esc_html($settings['section_title_text']) . '</h2>
          </div>
          <dl class="mt-16 grid grid-cols-1 gap-0.5 overflow-hidden sm:grid-cols-2 lg:grid-cols-4 h-[460px]">';

    // Check if there are repeater items to loop through
    if (!empty($settings['items_list'])) {
      foreach ($settings['items_list'] as $index => $item) {
        $counter_id = 'counter-' . $this->get_id() . '-' . $index;
        $lottie_id = 'lottie-' . $this->get_id() . '-' . $index;
        $background_image = !empty($item['background_image']['url']) ? esc_url($item['background_image']['url']) : '';

        echo '<div class="flex flex-col justify-center bg-custom p-8 rounded-[30%] fade-in hover-bg-container">
                <div class="hover-bg" style="background-image: url(' . $background_image . ');"></div>
                <dt class="z-10 text-sm font-semibold leading-6 text-primary">' . esc_html($item['item_title']) . '</dt>
                <dd class="z-10 order-first text-3xl font-semibold tracking-tight">
                  <div class="lottie-container" id="' . esc_attr($lottie_id) . '"></div>
                  <span class="counter" id="' . \esc_attr($counter_id) . '" data-target="' . esc_attr($item['target_number']) . '">0</span>' . esc_html($item['suffix']) . '
                </dd>
              </div>';

        // Lottie animation JSON for each statistic
        if (!empty($item['lottie_file']['url'])) {
          echo '<script>
                  document.addEventListener("DOMContentLoaded", function() {
                    if (typeof lottie !== "undefined") {
                      lottie.loadAnimation({
                        container: document.getElementById("' . esc_js($lottie_id) . '"),
                        renderer: "svg",
                        loop: true,
                        autoplay: true,
                        path: "' . esc_url($item['lottie_file']['url']) . '"
                      });
                    }
                  });
                </script>';
        }
      }
    }

    echo '</dl></div></div></div>';
}


}