<?php
/**
 * Front-end markup for RSM Features chip cards.
 *
 * @package Rsmspark_Content_Widgets
 */

defined( 'ABSPATH' ) || exit;

$chip_layout = ! empty( $chip_layout ) ? sanitize_key( (string) $chip_layout ) : 'stacked';
if ( ! in_array( $chip_layout, array( 'stacked', 'media-left' ), true ) ) {
	$chip_layout = 'stacked';
}

$wrapper_classes = array(
	'rsmspark-features',
	'rsmspark-content-widgets',
	'rsmspark-features--layout-' . sanitize_html_class( $chip_layout ),
	'rsmspark-features--style-' . ( ! empty( $chip_style ) ? sanitize_html_class( $chip_style ) : 'soft' ),
	'rsmspark-features--align-' . ( ! empty( $align ) ? sanitize_html_class( $align ) : 'left' ),
);
if ( 'stacked' === $chip_layout ) {
	$wrapper_classes[] = 'rsmspark-features--icon-align-' . ( ! empty( $icon_align ) ? sanitize_html_class( $icon_align ) : 'center' );
}
if ( ! empty( $container_border ) ) {
	$wrapper_classes[] = 'rsmspark-features--has-container-border';
}
if ( ! empty( $popouts_enabled ) ) {
	$wrapper_classes[] = 'rsmspark-features--has-popouts';
}
?>
<div
	id="<?php echo esc_attr( $widget_uid ); ?>"
	class="<?php echo esc_attr( implode( ' ', $wrapper_classes ) ); ?>"
	style="<?php echo esc_attr( $inline_style ); ?>"
	data-rsmspark-features="1"
	<?php if ( ! empty( $popouts_enabled ) ) : ?>
		data-rf-popouts="1"
	<?php endif; ?>
>
	<?php if ( ! empty( $heading_title ) ) : ?>
		<div class="rsmspark-features__heading-wrap">
			<?php echo wp_kses_post( $before_title ); ?>
			<h2 class="rsmspark-features__heading"><?php echo esc_html( $heading_title ); ?></h2>
			<?php echo wp_kses_post( $after_title ); ?>
		</div>
	<?php endif; ?>

	<div class="rsmspark-features__grid" role="list">
		<?php foreach ( $features as $feature ) : ?>
			<?php
			$has_media = ! empty( $feature['image_url'] ) || ! empty( $feature['icon_html'] );
			$chip_classes = array( 'rsmspark-features__chip' );
			if ( $has_media ) {
				$chip_classes[] = 'rsmspark-features__chip--has-media';
			}
			if ( ! empty( $feature['is_hot'] ) ) {
				$chip_classes[] = 'rsmspark-features__chip--hot';
			}
			$content = isset( $feature['description'] ) ? $feature['description'] : '';
			$content = Rsmspark_Rich_Text_Body::render( $content );
			$has_body  = Rsmspark_Rich_Text_Body::has_text( $content );
			$is_hot    = ! empty( $feature['is_hot'] );
			$chip_tag  = $is_hot ? 'button' : 'article';
			?>
			<<?php echo esc_html( $is_hot ? 'button' : 'article' ); ?>
				<?php if ( $is_hot ) : ?>
					type="button"
				<?php endif; ?>
				class="<?php echo esc_attr( implode( ' ', $chip_classes ) ); ?>"
				style="<?php echo esc_attr( $feature['inline_style'] ); ?>"
				role="<?php echo esc_attr( $is_hot ? 'button' : 'listitem' ); ?>"
				<?php if ( $is_hot ) : ?>
					data-rf-popout-id="<?php echo esc_attr( $feature['popout_id'] ); ?>"
					aria-haspopup="dialog"
					aria-controls="<?php echo esc_attr( $widget_uid ); ?>-modal"
				<?php endif; ?>
			>
				<?php if ( $has_media ) : ?>
					<div class="rsmspark-features__chip-media" aria-hidden="true">
						<span class="rsmspark-features__chip-media__graphic<?php echo ! empty( $feature['image_url'] ) ? ' rsmspark-features__chip-media__graphic--image' : ''; ?>">
							<?php if ( ! empty( $feature['image_url'] ) ) : ?>
								<img class="rsmspark-features__chip-media__img" src="<?php echo esc_url( $feature['image_url'] ); ?>" alt="" loading="lazy" decoding="async" />
							<?php elseif ( ! empty( $feature['icon_html'] ) ) : ?>
								<?php echo wp_kses_post( (string) $feature['icon_html'] ); ?>
							<?php endif; ?>
						</span>
					</div>
				<?php endif; ?>

				<div class="rsmspark-features__chip-content">
					<?php if ( Rsmspark_Content_Widgets_Headline_Styles::line_has_text( $feature['title'] ?? '' ) ) : ?>
						<h3 class="rsmspark-features__chip-title rsmspark-rt-root"><?php echo wp_kses( $feature['title'], Rsmspark_Content_Widgets_Headline_Styles::allowed_line_html() ); ?>
					<?php endif; ?>

					<?php if ( $has_body ) : ?>
						<div class="rsmspark-features__chip-body rsmspark-rt-root">
							<?php echo wp_kses_post( $content ); ?>
						</div>
					<?php endif; ?>
				</div>
			</<?php echo esc_html( $is_hot ? 'button' : 'article' ); ?>>
		<?php endforeach; ?>
	</div>

	<?php if ( ! empty( $popouts_enabled ) ) : ?>
		<div class="rsmspark-features__popout-store" hidden aria-hidden="true">
			<?php foreach ( $features as $feature ) : ?>
				<?php if ( empty( $feature['is_hot'] ) ) : ?>
					<?php continue; ?>
				<?php endif; ?>
				<?php
				$popout_body = Rsmspark_Content_Widgets_Features_Popouts::render_content( $feature['popout_content'] ?? '' );
				?>
				<div data-rf-popout-template="<?php echo esc_attr( $feature['popout_id'] ); ?>" hidden>
					<div class="rsmspark-features__popout-panel">
						<?php
						$popout_has_media = ! empty( $feature['popout_image_url'] ) || ! empty( $feature['popout_icon_html'] );
						$popout_has_head  = Rsmspark_Content_Widgets_Headline_Styles::line_has_text( $feature['popout_title'] ?? '' )
							|| Rsmspark_Content_Widgets_Headline_Styles::line_has_text( $feature['popout_subtitle'] ?? '' );
						?>
						<?php if ( $popout_has_media || $popout_has_head ) : ?>
							<?php
							$popout_header_style = '--rf-popout-header-gap:' . (int) $popout_header_gap_px . 'px;';
							if ( ! empty( $feature['popout_media_style'] ) ) {
								$popout_header_style .= $feature['popout_media_style'];
							}
							?>
							<div
								class="rsmspark-features__popout-header"
								<?php if ( '' !== $popout_header_style ) : ?>
									style="<?php echo esc_attr( $popout_header_style ); ?>"
								<?php endif; ?>
							>
								<?php if ( $popout_has_media ) : ?>
									<div class="rsmspark-features__popout-media" aria-hidden="true">
										<span class="rsmspark-features__popout-media__graphic<?php echo ! empty( $feature['popout_image_url'] ) ? ' rsmspark-features__popout-media__graphic--image' : ''; ?>">
											<?php if ( ! empty( $feature['popout_image_url'] ) ) : ?>
												<img class="rsmspark-features__popout-media__img" src="<?php echo esc_url( $feature['popout_image_url'] ); ?>" alt="" loading="lazy" decoding="async" />
											<?php elseif ( ! empty( $feature['popout_icon_html'] ) ) : ?>
												<?php echo wp_kses_post( (string) $feature['popout_icon_html'] ); ?>
											<?php endif; ?>
										</span>
									</div>
								<?php endif; ?>
								<?php if ( $popout_has_head ) : ?>
									<div class="rsmspark-features__popout-heading">
										<?php if ( Rsmspark_Content_Widgets_Headline_Styles::line_has_text( $feature['popout_title'] ?? '' ) ) : ?>
											<h3
												class="rsmspark-features__popout-title rsmspark-rt-root"
												id="<?php echo esc_attr( $widget_uid . '-popout-title-' . $feature['popout_id'] ); ?>"
											>
												<?php echo wp_kses( $feature['popout_title'], Rsmspark_Content_Widgets_Headline_Styles::allowed_line_html() ); ?>
											</h3>
										<?php endif; ?>
										<?php if ( Rsmspark_Content_Widgets_Headline_Styles::line_has_text( $feature['popout_subtitle'] ?? '' ) ) : ?>
											<p class="rsmspark-features__popout-subtitle rsmspark-rt-root">
												<?php echo wp_kses( $feature['popout_subtitle'], Rsmspark_Content_Widgets_Headline_Styles::allowed_line_html() ); ?>
											</p>
										<?php endif; ?>
									</div>
								<?php endif; ?>
							</div>
						<?php endif; ?>
						<?php if ( ! empty( $popout_header_divider ) ) : ?>
							<div class="rsmspark-features__popout-header-divider" aria-hidden="true"></div>
						<?php endif; ?>
						<?php if ( '' !== trim( wp_strip_all_tags( $popout_body ) ) ) : ?>
							<div class="rsmspark-features__popout-body rsmspark-rt-root">
								<?php echo wp_kses_post( $popout_body ); ?>
							</div>
						<?php endif; ?>
					</div>
				</div>
			<?php endforeach; ?>
		</div>

		<div
			id="<?php echo esc_attr( $widget_uid ); ?>-modal"
			class="rsmspark-features__modal"
			hidden
			aria-hidden="true"
		>
			<div class="rsmspark-features__modal-backdrop" tabindex="-1"></div>
			<div
				class="rsmspark-features__modal-dialog"
				role="dialog"
				aria-modal="true"
				<?php if ( ! empty( $popout_dialog_style ) ) : ?>
					style="<?php echo esc_attr( $popout_dialog_style ); ?>"
				<?php endif; ?>
			>
				<div class="rsmspark-features__modal-header">
					<button type="button" class="rsmspark-features__modal-close" aria-label="<?php esc_attr_e( 'Close', 'rsm-content-widgets' ); ?>">&times;</button>
				</div>
				<div class="rsmspark-features__modal-body"></div>
			</div>
		</div>
	<?php endif; ?>
</div>
