<?php
/** Numbers Elementor widget. */
defined( 'ABSPATH' ) || exit;

class Shabnam_Elementor_Numbers extends Shabnam_Elementor_Widget_Base {
	public function get_name() { return 'shabnam-muchwow-numbers'; }
	public function get_title() { return __( 'آمار MuchWOW', 'shabnam-muchwow' ); }
	public function get_icon() { return 'eicon-counter'; }

	protected function register_controls() {
		$this->start_controls_section( 'content', array( 'label' => __( 'کارت‌های آمار', 'shabnam-muchwow' ) ) );
		$r = new \Elementor\Repeater();
		$r->add_control( 'value', array( 'label' => __( 'عدد/مقدار', 'shabnam-muchwow' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => '100%' ) );
		$r->add_control( 'label', array( 'label' => __( 'عنوان', 'shabnam-muchwow' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => 'متعلق به جامعه' ) );
		$this->add_control( 'items', array(
			'label' => __( 'کارت‌ها', 'shabnam-muchwow' ), 'type' => \Elementor\Controls_Manager::REPEATER, 'fields' => $r->get_controls(),
			'default' => array(
				array( 'value' => '100%', 'label' => 'متعلق به جامعه' ), array( 'value' => '#1', 'label' => 'میم‌کوین ۲۰۲۵' ),
				array( 'value' => '2025', 'label' => 'سال تأسیس' ), array( 'value' => '24/7', 'label' => 'پشتیبانی' ),
			), 'title_field' => '{{{ value }}} — {{{ label }}}',
		) );
		$this->add_control( 'button_text', array( 'label' => __( 'متن دکمه', 'shabnam-muchwow' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => 'به این حرکت بپیوندید!' ) );
		$this->shabnam_add_url_control( 'button_url', __( 'لینک دکمه', 'shabnam-muchwow' ), shabnam_contact_url() );
		$this->end_controls_section();
		$this->shabnam_register_common_style_controls();
	}

	protected function render() {
		$s = $this->get_settings_for_display();
		$this->add_link_attributes( 'button_url', $s['button_url'] );
		$this->add_inline_editing_attributes( 'button_text', 'none' );
		$rotations = array( 'rotate-2', '-rotate-2', '-rotate-2', 'rotate-2' );
		?>
		<div class="numbers section panel overflow-hidden shabnam-elementor-section" id="numbers"><div class="section-outer panel py-6 sm:py-8 lg:py-9 xl:py-10"><div class="container sm:max-w-lg"><div class="section-inner panel">
		<div class="section-content panel text-center"><div class="row child-cols-12 sm:child-cols-6 justify-center g-4 sm:gx-3 sm:gy-6 xl:gx-4 xl:gy-8" data-anime="onview: -300; targets: &gt;*; translateY: [24, 0]; opacity: [0, 1]; delay: anime.stagger(100, {start: 200});">
		<?php foreach ( $s['items'] as $index => $item ) : $rotation = isset( $rotations[ $index ] ) ? $rotations[ $index ] : ( 0 === $index % 2 ? 'rotate-2' : '-rotate-2' ); ?>
		<div><div class="numbers-item vstack items-center gap-1 px-6 py-8 border border-1 border-gray-100 border-opacity-40 rounded-3 <?php echo esc_attr( $rotation ); ?>" style="background: linear-gradient(20deg, #ffffff17, var(--shcd-background-color, #0d042c))"><h2 class="h3 xl:h2 m-0 text-secondary"><?php echo esc_html( $item['value'] ); ?></h2><span class="fs-5 xl:fs-4"><?php echo esc_html( $item['label'] ); ?></span></div></div>
		<?php endforeach; ?>
		</div></div>
		<div class="section-footer panel d-flex justify-center mt-4 sm:mt-8 xl:mt-9" data-anime="onview: -100; translateY: [24, 0]; opacity: [0, 1]; delay: 200;"><a class="btn btn-md sm:btn-xl xl:btn-2xl px-4 xl:px-6 border border-3 border-black bg-gradient-45n from-secondary to-tertiary contrast-shadow -rotate-2 hover:rotate-0" <?php echo $this->get_render_attribute_string( 'button_url' ); ?> style="--shadowColor: var(--color-secondary)"><span class="text-black" <?php echo $this->get_render_attribute_string( 'button_text' ); ?>><?php echo esc_html( $s['button_text'] ); ?></span><span class="fs-4 mb-narrow">🚀</span></a></div>
		</div></div></div></div>
		<?php
	}
}
