<?php
/**
 * UX Builder element shortcode: icon_detail
 *
 * Renders 4 icon-detail columns based on element options.
 */

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

				'img1'      => 'https://invaidangquang.com/wp-content/uploads/2023/10/Group-6.svg',
				'heading1'  => '100% chất lượng',
				'text1'     => 'Ổn định giữa các đơn hàng',
				'btn_text1' => 'XEM THÊM',
				'btn_url1'  => '#',

				'img2'      => 'https://invaidangquang.com/wp-content/uploads/2023/11/Group.png',
				'heading2'  => 'công nghệ hiện đại',
				'text2'     => 'Của Nhật Bản',
				'btn_text2' => 'XEM THÊM',
				'btn_url2'  => '#',

				'img3'      => 'https://invaidangquang.com/wp-content/uploads/2023/11/Group-1.png',
				'heading3'  => 'đội ngũ R&D',
				'text3'     => 'Thiết kế sáng tạo',
				'btn_text3' => 'XEM THÊM',
				'btn_url3'  => '#',

				'img4'      => 'https://invaidangquang.com/wp-content/uploads/2023/11/Group-2-1.png',
				'heading4'  => 'cam kết sản lượng',
				'text4'     => 'Tối thiểu 50.000 m/ngày',
				'btn_text4' => 'XEM THÊM',
				'btn_url4'  => '#',
			),
			$atts,
			'icon_detail'
		);

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

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

		$items = array();
		for ( $i = 1; $i <= 4; $i++ ) {
			$col_uid = $uid . '_col' . $i;
			$items[] =
				'<div id="' . esc_attr( $col_uid ) . '" class="zb-column--3 zb-column zb-element zb-el-zionColumn">' .
					'<div id="' . esc_attr( $col_uid . '_img' ) . '" class="icon_image zb-element zb-el-zionImage">' .
						'<div><img loading="lazy" decoding="async" src="' . esc_url( $atts[ 'img' . $i ] ) . '" class="attachment-full size-full" alt="' . esc_attr( $atts[ 'heading' . $i ] ) . '"></div>' .
					'</div>' .
					'<h3 id="' . esc_attr( $col_uid . '_h' ) . '" class="h3_text_gradient zb-element zb-el-zionHeading">' . esc_html( $atts[ 'heading' . $i ] ) . '</h3>' .
					'<div id="' . esc_attr( $col_uid . '_t' ) . '" class="text_sub_gradient zb-element zb-el-zionText"><p>' . esc_html( $atts[ 'text' . $i ] ) . '</p></div>' .
					'<div id="' . esc_attr( $col_uid . '_btn' ) . '" class="zb-el-zionButton--align--center button_more zb-element zb-el-zionButton">' .
						'<a href="' . esc_url( $atts[ 'btn_url' . $i ] ) . '" class="zb-el-button"><span class="zb-el-button__text">' . esc_html( $atts[ 'btn_text' . $i ] ) . '</span></a>' .
					'</div>' .
				'</div>';
		}

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

	add_shortcode( 'icon_detail', 'flatsome_child_icon_detail_shortcode' );
}
