<?php

/**
 * Template Name: Offerings
 *
 * @package ViitorX
 */

if (! defined('ABSPATH')) {
	exit;
}

$off_hero_title    = get_field('off_hero_title');
$off_hero_subtitle = get_field('off_hero_subtitle');
$off_hero_video    = get_template_directory_uri() . '/assets/videos/inner-page-hero-video.webm';
$off_con_heading_1 = get_field('off_con_heading_1');
$off_con_heading_2 = get_field('off_con_heading_2');
$off_con_email     = get_field('off_con_email');
$off_con_desc      = get_field('off_con_desc');
$off_con_shortcode = get_field('off_con_shortcode');

get_header();
?>

<div class="page offerings-page">
	<main id="primary" class="site-main">

		<section class="hero-inner hero-offerings" aria-label="<?php esc_attr_e('Offerings hero', 'viitorx'); ?>">
			<?php get_template_part('template-parts/hero-wordmark'); ?>

			<video class="hero-inner__video" autoplay muted loop playsinline preload="metadata" fetchpriority="high" aria-hidden="true">
				<source src="<?php echo esc_url($off_hero_video); ?>" type="video/webm">
			</video>

			<div class="hero-inner__overlay" aria-hidden="true"></div>

			<div class="container hero-inner__content" data-section-reveal>
				<nav class="hero-breadcrumb" aria-label="<?php esc_attr_e('Breadcrumb', 'viitorx'); ?>">
					<a href="<?php echo esc_url(home_url('/')); ?>"><?php esc_html_e('Home', 'viitorx'); ?></a>
					<span class="hero-breadcrumb__sep" aria-hidden="true">&gt;</span>
					<span class="hero-breadcrumb__current"><?php esc_html_e('Offerings', 'viitorx'); ?></span>
				</nav>

				<?php if ($off_hero_title) : ?>
				<h1 class="hero-inner__title"><?php echo esc_html($off_hero_title); ?></h1>
				<?php endif; ?>

				<?php if ($off_hero_subtitle) : ?>
				<p class="hero-inner__subtitle"><?php echo esc_html($off_hero_subtitle); ?></p>
				<?php endif; ?>
			</div>
		</section>

		<?php if (have_rows('off_items')) : ?>
			<?php while (have_rows('off_items')) : the_row(); ?>
				<?php
				$item_title   = get_sub_field('title');
				$item_desc    = get_sub_field('description');
				$col1_heading = get_sub_field('col_1_heading');
				$col2_heading = get_sub_field('col_2_heading');
				$col3_heading = get_sub_field('col_3_heading');
				$col1_raw     = get_sub_field('col_1_items');
				$col2_raw     = get_sub_field('col_2_items');
				$col3_raw     = get_sub_field('col_3_items');
				$visual_img   = get_sub_field('visual_image');

				$c1 = is_array($col1_raw) ? array_values($col1_raw) : [];
				$c2 = is_array($col2_raw) ? array_values($col2_raw) : [];
				$c3 = is_array($col3_raw) ? array_values($col3_raw) : [];

				$max_rows  = max(count($c1), count($c2), count($c3), 1);
				$grid_rows = 'grid-template-rows:auto repeat(' . $max_rows . ',minmax(min-content,auto))';
				?>

				<div class="offering-group">
				<section class="offering" data-section-reveal aria-label="<?php echo esc_attr($item_title); ?>">
					<div class="container offering__inner">

						<header class="offering__header">
							<?php if ($item_title) : ?>
							<h2 class="offering__title"><?php echo esc_html($item_title); ?></h2>
							<?php endif; ?>

							<?php if ($item_desc) : ?>
							<p class="offering__desc"><?php echo esc_html($item_desc); ?></p>
							<?php endif; ?>
						</header>

						<div class="offering-matrix"
							style="<?php echo esc_attr($grid_rows); ?>"
							aria-label="<?php echo esc_attr($item_title . ' ' . __('capabilities', 'viitorx')); ?>">

							<?php if ($col1_heading) : ?>
							<h3 class="offering-matrix__head offering-matrix__slot--head-c1"><?php echo esc_html($col1_heading); ?></h3>
							<?php endif; ?>

							<?php for ($r = 1; $r <= $max_rows; $r++) : ?>
								<?php $cell = isset($c1[ $r - 1 ]['item_text']) ? $c1[ $r - 1 ]['item_text'] : ''; ?>
								<?php if ($cell) : ?>
								<div class="offering-matrix__cell offering-matrix__slot--r<?php echo $r; ?>c1"><?php echo esc_html($cell); ?></div>
								<?php else : ?>
								<div class="offering-matrix__cell offering-matrix__cell--empty offering-matrix__slot--r<?php echo $r; ?>c1" aria-hidden="true"></div>
								<?php endif; ?>
							<?php endfor; ?>

							<?php if ($col2_heading) : ?>
							<h3 class="offering-matrix__head offering-matrix__slot--head-c2"><?php echo esc_html($col2_heading); ?></h3>
							<?php endif; ?>

							<?php for ($r = 1; $r <= $max_rows; $r++) : ?>
								<?php $cell = isset($c2[ $r - 1 ]['item_text']) ? $c2[ $r - 1 ]['item_text'] : ''; ?>
								<?php if ($cell) : ?>
								<div class="offering-matrix__cell offering-matrix__slot--r<?php echo $r; ?>c2"><?php echo esc_html($cell); ?></div>
								<?php else : ?>
								<div class="offering-matrix__cell offering-matrix__cell--empty offering-matrix__slot--r<?php echo $r; ?>c2" aria-hidden="true"></div>
								<?php endif; ?>
							<?php endfor; ?>

							<?php if ($col3_heading) : ?>
							<h3 class="offering-matrix__head offering-matrix__slot--head-c3"><?php echo esc_html($col3_heading); ?></h3>
							<?php endif; ?>

							<?php for ($r = 1; $r <= $max_rows; $r++) : ?>
								<?php $cell = isset($c3[ $r - 1 ]['item_text']) ? $c3[ $r - 1 ]['item_text'] : ''; ?>
								<?php if ($cell) : ?>
								<div class="offering-matrix__cell offering-matrix__slot--r<?php echo $r; ?>c3"><?php echo esc_html($cell); ?></div>
								<?php else : ?>
								<div class="offering-matrix__cell offering-matrix__cell--empty offering-matrix__slot--r<?php echo $r; ?>c3" aria-hidden="true"></div>
								<?php endif; ?>
							<?php endfor; ?>

						</div>
					</div>
				</section>

				<?php if ($visual_img) : ?>
				<section class="visual" data-section-reveal aria-label="<?php echo esc_attr($item_title . ' ' . __('visual', 'viitorx')); ?>">
					<div class="visual__img" role="img"
						aria-label="<?php echo esc_attr($item_title . ' ' . __('preview', 'viitorx')); ?>"
						style="background-image:url('<?php echo esc_url($visual_img['url']); ?>')"></div>
				</section>
				<?php endif; ?>
				</div><!-- /.offering-group -->

			<?php endwhile; ?>
		<?php endif; ?>

		<section class="contact" data-section-reveal aria-label="<?php esc_attr_e('Contact form', 'viitorx'); ?>">
			<div class="container contact__inner">

				<div class="contact__left">
					<?php if ($off_con_heading_1 || $off_con_heading_2) : ?>
					<h2 class="contact__headline">
						<?php if ($off_con_heading_1) : ?>
							<?php echo esc_html($off_con_heading_1); ?>
						<?php endif; ?>
						<?php if ($off_con_heading_1 && $off_con_heading_2) : ?><br><?php endif; ?>
						<?php if ($off_con_heading_2) : ?>
							<?php echo esc_html($off_con_heading_2); ?>
						<?php endif; ?>
					</h2>
					<?php endif; ?>

					<?php if ($off_con_email) : ?>
					<div class="contact__email">
						<div class="contact__email-icon" aria-hidden="true">
							<img src="<?php echo esc_url( get_template_directory_uri() . '/assets/social/mail.svg' ); ?>" alt="" class="contact__email-icon-img" width="50" height="50">
						</div>
						<a class="contact__email-link"
							href="mailto:<?php echo esc_attr($off_con_email); ?>"
							aria-label="<?php echo esc_attr(sprintf(__('Email %s', 'viitorx'), $off_con_email)); ?>">
							<?php echo esc_html($off_con_email); ?>
						</a>
					</div>
					<?php endif; ?>
				</div>

				<div class="contact__right">
					<?php if ($off_con_desc) : ?>
					<p class="contact__desc"><?php echo esc_html($off_con_desc); ?></p>
					<?php endif; ?>

					<div class="contact-form-cf7">
						<?php
						if ($off_con_shortcode) {
							echo do_shortcode($off_con_shortcode); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
						} else {
							echo viitorx_get_contact_form_7_markup(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
						}
						?>
					</div>
				</div>

			</div>
		</section>

	</main>
</div>

<?php
get_footer();