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

class Shabnam_Elementor_Roadmap extends Shabnam_Elementor_Widget_Base {
	public function get_name() { return 'shabnam-muchwow-roadmap'; }
	public function get_title() { return __( 'نقشه راه MuchWOW', 'shabnam-muchwow' ); }
	public function get_icon() { return 'eicon-time-line'; }

	protected function register_controls() {
		$this->start_controls_section( 'content', array( 'label' => __( 'محتوا', 'shabnam-muchwow' ) ) );
		$this->add_control( 'label', array( 'label' => __( 'برچسب', 'shabnam-muchwow' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => 'خط زمانی پروژه' ) );
		$this->add_control( 'title', array( 'label' => __( 'عنوان', 'shabnam-muchwow' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => 'نقشه راه' ) );
		$r = new \Elementor\Repeater();
		$r->add_control( 'phase', array( 'label' => __( 'شماره مرحله', 'shabnam-muchwow' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => 'مرحله ۱' ) );
		$r->add_control( 'status', array( 'label' => __( 'وضعیت', 'shabnam-muchwow' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => '✅ تکمیل‌شده!' ) );
		$r->add_control( 'title', array( 'label' => __( 'عنوان مرحله', 'shabnam-muchwow' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => 'راه‌اندازی و ساخت جامعه' ) );
		$r->add_control( 'items', array( 'label' => __( 'موارد؛ هر خط یک مورد', 'shabnam-muchwow' ), 'type' => \Elementor\Controls_Manager::TEXTAREA, 'default' => "راه‌اندازی وب‌سایت\nآغاز فعالیت در شبکه‌های اجتماعی\nرشد جامعه" ) );
		$this->add_control( 'steps', array(
			'label' => __( 'سه مرحله', 'shabnam-muchwow' ), 'type' => \Elementor\Controls_Manager::REPEATER, 'fields' => $r->get_controls(),
			'default' => array(
				array( 'phase' => 'مرحله ۱', 'status' => '✅ تکمیل‌شده!', 'title' => 'راه‌اندازی و ساخت جامعه', 'items' => "راه‌اندازی وب‌سایت\nآغاز فعالیت در شبکه‌های اجتماعی\nرشد جامعه" ),
				array( 'phase' => 'مرحله ۲', 'status' => '⚙️ در حال اجرا!', 'title' => 'توسعه و همکاری‌های راهبردی', 'items' => "ممیزی قرارداد هوشمند\nفهرست‌شدن در صرافی‌ها\nهمکاری‌های راهبردی" ),
				array( 'phase' => 'مرحله ۳', 'status' => '📢 به‌زودی...', 'title' => 'گسترش و کاربردپذیری', 'items' => "مجموعه NFT\nتوکن حاکمیتی\nسازمان خودگردان جامعه" ),
			), 'title_field' => '{{{ phase }}} — {{{ title }}}',
		) );
		$this->end_controls_section();
		$this->shabnam_register_common_style_controls();
	}

	private function shabnam_render_list( $text ) {
		$lines = preg_split( '/\r\n|\r|\n/', (string) $text );
		$first = true;
		foreach ( $lines as $line ) {
			$line = trim( $line );
			if ( '' === $line ) { continue; }
			printf( '<li%s>%s</li>', $first ? '' : ' class="m-0"', esc_html( $line ) );
			$first = false;
		}
	}

	protected function render() {
		$s = $this->get_settings_for_display();
		$this->add_inline_editing_attributes( 'label', 'none' );
		$this->add_inline_editing_attributes( 'title', 'none' );
		$steps = array_values( $s['steps'] );
		$defaults = array(
			array( 'phase' => 'مرحله ۱', 'status' => '✅ تکمیل‌شده!', 'title' => 'راه‌اندازی و ساخت جامعه', 'items' => "راه‌اندازی وب‌سایت\nآغاز فعالیت در شبکه‌های اجتماعی\nرشد جامعه" ),
			array( 'phase' => 'مرحله ۲', 'status' => '⚙️ در حال اجرا!', 'title' => 'توسعه و همکاری‌های راهبردی', 'items' => "ممیزی قرارداد هوشمند\nفهرست‌شدن در صرافی‌ها\nهمکاری‌های راهبردی" ),
			array( 'phase' => 'مرحله ۳', 'status' => '📢 به‌زودی...', 'title' => 'گسترش و کاربردپذیری', 'items' => "مجموعه NFT\nتوکن حاکمیتی\nسازمان خودگردان جامعه" ),
		);
		for ( $i = 0; $i < 3; $i++ ) { if ( ! isset( $steps[ $i ] ) ) { $steps[ $i ] = $defaults[ $i ]; } }
		?>
		<div class="roadmap section panel overflow-hidden shabnam-elementor-section" id="roadmap"><div class="section-outer panel py-6 sm:py-8 lg:py-9 xl:py-10"><div class="container sm:max-w-lg xl:max-w-xl"><div class="section-inner panel">
		<div class="section-header panel sm:max-w-500px xl:max-w-800px mx-auto mb-4 sm:mb-6 xl:mb-9 text-center" data-anime="onview: -300; targets: &gt;*; translateY: [24, 0]; opacity: [0, 1]; delay: anime.stagger(100, {start: 200});"><div class="category"><div class="-rotate-2"><span class="fs-5 xl:fs-4 text-secondary fw-bold" <?php echo $this->get_render_attribute_string( 'label' ); ?>><?php echo esc_html( $s['label'] ); ?></span></div></div><h2 class="h4 sm:h3 xl:h2 mb-0 mt-2 text-white text-uppercase ls-0" <?php echo $this->get_render_attribute_string( 'title' ); ?>><?php echo esc_html( $s['title'] ); ?></h2></div>
		<div class="section-content panel"><img alt="victor" class="position-absolute start-50 top-50 translate-middle d-none lg:d-block" src="<?php echo esc_url( shabnam_asset_uri( 'images/common/line.svg' ) ); ?>" style="height: 90%"/><div class="row child-cols-12 items-center g-4 sm:g-6 lg:gx-10 lg:gy-8 xl:gy-9">
		<div class="sm:col-8 lg:col-6"><div class="roadmap-item panel" data-anime="onview: -300; translateY: [48, 0]; opacity: [0, 1]; delay: 200;"><img alt="victor" class="position-absolute z-1 w-150px xl:w-auto d-none lg:d-block" src="<?php echo esc_url( shabnam_asset_uri( 'images/home-one/05.svg' ) ); ?>" style="top: -31%; left: 36%"/><img alt="victor" class="position-absolute z-1 w-150px xl:w-auto d-none sm:d-block lg:d-none" src="<?php echo esc_url( shabnam_asset_uri( 'images/home-one/05.svg' ) ); ?>" style="top: -31%; left: 24%"/><div class="px-3 sm:px-4 py-6 xl:px-6 xl:py-8 border border-1 border-gray-100 border-opacity-40 rounded-4 text-white bg-white bg-opacity-5 rotate-1" style="background: linear-gradient(20deg, #ffffff17, var(--shcd-background-color, #0d042c))"><span class="fw-semibold text-opacity-70"><?php echo esc_html( $steps[0]['status'] ); ?></span><h4 class="h5 my-2 xl:my-3 ft-primary text-secondary"><?php echo esc_html( $steps[0]['title'] ); ?></h4><ul class="uc-list uc-list-disc fs-5 xl:fs-4 m-0"><?php $this->shabnam_render_list( $steps[0]['items'] ); ?></ul></div></div></div>
		<div class="sm:col-4 lg:col-6 d-none sm:d-block"><div class="panel"><h4 class="h5 xl:h4 m-0 text-secondary -rotate-2"><?php echo esc_html( $steps[0]['phase'] ); ?></h4><img alt="victor" class="position-absolute top-0 d-none xl:d-block" src="<?php echo esc_url( shabnam_asset_uri( 'images/common/coin.svg' ) ); ?>" style="left: -15.5%"/><img alt="victor" class="position-absolute top-0 w-40px d-none lg:d-block xl:d-none" src="<?php echo esc_url( shabnam_asset_uri( 'images/common/coin.svg' ) ); ?>" style="left: -19.5%"/></div></div>
		<div class="sm:col-4 lg:col-6 d-none sm:d-block"><div class="panel"><h4 class="h5 xl:h4 m-0 text-secondary rotate-2 float-end"><?php echo esc_html( $steps[1]['phase'] ); ?></h4><img alt="victor" class="position-absolute top-0 d-none xl:d-block" src="<?php echo esc_url( shabnam_asset_uri( 'images/common/coin.svg' ) ); ?>" style="right: -15.5%"/><img alt="victor" class="position-absolute top-0 w-40px d-none lg:d-block xl:d-none" src="<?php echo esc_url( shabnam_asset_uri( 'images/common/coin.svg' ) ); ?>" style="right: -19.5%"/></div></div>
		<div class="sm:col-8 lg:col-6"><div class="roadmap-item panel" data-anime="onview: -300; translateY: [48, 0]; opacity: [0, 1]; delay: 200;"><img alt="victor" class="position-absolute z-1 w-200px xl:w-auto d-none sm:d-block" src="<?php echo esc_url( shabnam_asset_uri( 'images/home-one/06.svg' ) ); ?>" style="top: -31%; right: 5%"/><div class="px-3 sm:px-4 py-6 xl:px-6 xl:py-8 border border-1 border-gray-100 border-opacity-40 rounded-4 text-white bg-white bg-opacity-5 rotate-1" style="background: linear-gradient(20deg, #ffffff17, var(--shcd-background-color, #0d042c))"><span class="fw-semibold text-opacity-70"><?php echo esc_html( $steps[1]['status'] ); ?></span><h4 class="h5 my-2 xl:my-3 ft-primary text-secondary"><?php echo esc_html( $steps[1]['title'] ); ?></h4><ul class="uc-list uc-list-disc fs-5 xl:fs-4 m-0"><?php $this->shabnam_render_list( $steps[1]['items'] ); ?></ul></div></div></div>
		<div class="sm:col-8 lg:col-6"><div class="roadmap-item panel" data-anime="onview: -300; translateY: [48, 0]; opacity: [0, 1]; delay: 200;"><img alt="victor" class="position-absolute z-1 w-128px xl:w-auto d-none sm:d-block" src="<?php echo esc_url( shabnam_asset_uri( 'images/home-one/07.svg' ) ); ?>" style="bottom: -7%; right: 7%"/><div class="px-3 sm:px-4 py-6 xl:px-6 xl:py-8 border border-1 border-gray-100 border-opacity-40 rounded-4 text-white bg-white bg-opacity-5 -rotate-2" style="background: linear-gradient(20deg, #ffffff17, var(--shcd-background-color, #0d042c))"><span class="fw-semibold text-opacity-70"><?php echo esc_html( $steps[2]['status'] ); ?></span><h4 class="h5 my-2 xl:my-3 ft-primary text-secondary"><?php echo esc_html( $steps[2]['title'] ); ?></h4><ul class="uc-list uc-list-disc fs-5 xl:fs-4 m-0"><?php $this->shabnam_render_list( $steps[2]['items'] ); ?></ul></div></div></div>
		<div class="sm:col-4 lg:col-6 d-none sm:d-block"><div class="panel"><h4 class="h5 xl:h4 m-0 text-secondary -rotate-2"><?php echo esc_html( $steps[2]['phase'] ); ?></h4><img alt="victor" class="position-absolute top-0 d-none xl:d-block" src="<?php echo esc_url( shabnam_asset_uri( 'images/common/coin.svg' ) ); ?>" style="left: -15.5%"/><img alt="victor" class="position-absolute top-0 w-40px d-none lg:d-block xl:d-none" src="<?php echo esc_url( shabnam_asset_uri( 'images/common/coin.svg' ) ); ?>" style="left: -19.5%"/></div></div>
		</div></div></div></div></div></div>
		<?php
	}
}
