<?php
/**
 * UX Builder element shortcode: criterion_item
 *
 * Renders 5 criterion columns with number, title, separator, and description.
 */

if ( ! function_exists( 'flatsome_child_criterion_item_shortcode' ) ) {
	function flatsome_child_criterion_item_shortcode( $atts = array() ) {
		$atts = shortcode_atts(
			array(
				'class' => '',

				'number1' => '01.',
				'title1'  => 'Hồ Vải',
				'desc1'   => 'Hồ vải là khâu xử lý vải qua hóa chất keo trước khi in, nhằm giúp mực in thấm đều, thấm sâu trên bề mặt vải.',

				'number2' => '02.',
				'title2'  => 'In Vải',
				'desc2'   => 'Mực sẽ được phun trực tiếp lên bề mặt vải bằng máy in kỹ thuật số để tạo thành các họa tiết.',

				'number3' => '03.',
				'title3'  => 'Sấy Khô',
				'desc3'   => 'Sau khi in, vải sẽ được đưa qua máy sấy để sấy khô lớp mực vừa in.',

				'number4' => '04.',
				'title4'  => 'Hấp Lên Màu',
				'desc4'   => 'Sau khi sấy, vải sẽ được đưa qua công đoạn hấp lên màu để vải in có màu đúng như khách hàng đã duyệt.',

				'number5' => '05.',
				'title5'  => 'Giặt',
				'desc5'   => 'Giặt giúp loại bỏ hết các lớp keo hồ có trong vải, bụi vải để mang đến những tấm vải mềm mại nhất.',
			),
			$atts,
			'criterion_item'
		);

		$uid = 'uid' . wp_rand( 10, 999 ) . uniqid( '_' );

		$classes = array( 'zb-element', 'zb-el-container' );
		if ( ! empty( $atts['class'] ) ) {
			$classes[] = $atts['class'];
		}

		// Animation alternates: odd = fadeInUp, even = fadeInDown
		$animations = array( 'fadeInUp', 'fadeInDown', 'fadeInUp', 'fadeInDown', 'fadeInUp' );

		$items = '';
		for ( $i = 1; $i <= 5; $i++ ) {
			$anim    = $animations[ $i - 1 ];
			$col_uid = $uid . '_col' . $i;

			$items .=
				'<div id="' . esc_attr( $col_uid ) . '" class="zb-column--1of5 continer_in_nhiet_code zb-column zb-element zb-el-zionColumn ajs__element ' . $anim . ' animated" data-ajs-animation="' . $anim . '">' .
					'<div id="' . esc_attr( $col_uid . '_wrap' ) . '" class="continer_in_nhiet zb-element zb-el-container">' .
						'<div id="' . esc_attr( $col_uid . '_header' ) . '" class="zb-element zb-el-container">' .
							'<div id="' . esc_attr( $col_uid . '_num' ) . '" class="number_in_chuyen zb-element zb-el-zionText"><p>' . esc_html( $atts[ 'number' . $i ] ) . '</p></div>' .
							'<div id="' . esc_attr( $col_uid . '_sep' ) . '" class="zb-element zb-el-zionSeparator"><div class="zb-el-zionSeparator-item zb-el-zionSeparator-item--size"></div></div>' .
							'<div id="' . esc_attr( $col_uid . '_title' ) . '" class="text_in_chuyen zb-element zb-el-zionText"><p>' . esc_html( $atts[ 'title' . $i ] ) . '</p></div>' .
						'</div>' .
						'<div id="' . esc_attr( $col_uid . '_desc' ) . '" class="zb-element zb-el-zionText"><p><span style="font-weight: 400;">' . esc_html( $atts[ 'desc' . $i ] ) . '</span></p></div>' .
					'</div>' .
				'</div>';
		}

		return '<div id="' . esc_attr( $uid ) . '" class="' . esc_attr( implode( ' ', $classes ) ) . '">' . $items . '</div>';
	}

	add_shortcode( 'criterion_item', 'flatsome_child_criterion_item_shortcode' );
}
