<?php
if (function_exists('render_block_preview_image') && render_block_preview_image($block, 'Tab section block preview')) {
    return;
}
$block_id = !empty($block['id']) ? sanitize_html_class($block['id']) : uniqid('tab-section-', false);
$accordion_id = $block_id . '-accordion';
$className = 'ai-workforce-platform ' . ($block['className'] ?? '');
?>
<section class="<?php echo esc_attr(trim($className)); ?>">
    <div class="container">
        <div class="ai-workforce-content">
            <?php
            $workforce_heading = get_field('workforce_heading') ?? '';
            $workforce_description = get_field('workforce_description') ?? '';
            ?>
            <div class="ai-workforce-heading">
                <?php if (!empty($workforce_heading)) { ?>
                    <h2><?php echo esc_html($workforce_heading); ?></h2>
                <?php } ?>
                <?php if (!empty($workforce_description)) { ?>
                    <?php echo wp_kses_post($workforce_description); ?>
                <?php } ?>
            </div>
            <div class="ai-workforce-cta">
                <?php
                $workforce_cta = get_field('workforce_cta') ?? '';
                if ($workforce_cta) {
                    $cta_url = $workforce_cta['url'];
                    $cta_title = $workforce_cta['title'];
                    $cta_target = $workforce_cta['target'] ? $workforce_cta['target'] : '_self';
                ?>
                    <a href="<?php echo esc_url($cta_url); ?>" class="custom-btn" target="<?php echo esc_attr($cta_target); ?>">
                        <?php echo esc_html($cta_title); ?>
                    </a>
                <?php } ?>
            </div>
        </div>
        <?php $ai_tabs = get_field('ai_workforce_tabs') ?? ''; ?>
        <?php if (!empty($ai_tabs)) : ?>
            <div class="ai-wordkforce-tabs d-none d-md-block">
                <div class="row">
                    <div class="col-md-6">
                        <div class="nav flex-column nav-pills" role="tablist">
                            <?php foreach ($ai_tabs as $index => $tab) :
                                $active_class = ($index === 0) ? 'active' : '';
                            ?>
                                <button class="nav-link <?php echo $active_class; ?>"
                                    data-bs-toggle="pill"
                                    data-bs-target="#<?php echo esc_attr($block_id . '-tab-' . $index); ?>"
                                    type="button">
                                    <?php if (!empty($tab['tab_icon']['url'])) : ?>
                                        <img src="<?php echo esc_url($tab['tab_icon']['url']); ?>" alt="">
                                    <?php endif; ?>
                                    <span><?php echo esc_html($tab['tab_title']); ?></span>
                                    <div class="tab-description">
                                        <p><?php echo esc_html($tab['tab_description']); ?></p>
                                        <?php if (!empty($tab['tab_link'])) : ?>
                                            <a href="<?php echo esc_url($tab['tab_link']['url']); ?>" target="<?php echo esc_attr($tab['tab_link']['target'] ?? '_self'); ?>">
                                                <?php echo esc_html($tab['tab_link']['title'] ?? ''); ?>
                                                <span><i class="fa fa-arrow-right"></i></span>
                                            </a>
                                        <?php endif; ?>
                                    </div>
                                </button>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="tab-content">
                            <?php foreach ($ai_tabs as $index => $tab) :
                                $active_class = ($index === 0) ? 'show active' : '';
                            ?>
                                <div class="tab-pane fade <?php echo $active_class; ?>" id="<?php echo esc_attr($block_id . '-tab-' . $index); ?>">
                                    <?php if (!empty($tab['tab_image']['url'])) : ?>
                                        <img src="<?php echo esc_url($tab['tab_image']['url']); ?>" class="tab-image" alt="<?php echo esc_attr($tab['tab_title']); ?>">
                                    <?php endif; ?>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ai-wordkforce-tabs d-block d-md-none">
                <div class="accordion" id="<?php echo esc_attr($accordion_id); ?>">
                    <?php foreach ($ai_tabs as $index => $tab) : ?>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="nav-link <?php echo ($index === 0) ? '' : 'collapsed'; ?>"
                                    type="button"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#<?php echo esc_attr($block_id . '-collapse-' . $index); ?>">
                                    <?php if (!empty($tab['tab_icon']['url'])) : ?>
                                        <img src="<?php echo esc_url($tab['tab_icon']['url']); ?>" alt="">
                                    <?php endif; ?>
                                    <span><?php echo esc_html($tab['tab_title']); ?></span>
                                </button>
                            </h2>
                            <div id="<?php echo esc_attr($block_id . '-collapse-' . $index); ?>"
                                class="accordion-collapse collapse <?php echo ($index === 0) ? 'show' : ''; ?>"
                                data-bs-parent="#<?php echo esc_attr($accordion_id); ?>">
                                <div class="accordion-body">
                                    <div class="tab-description">
                                        <p><?php echo esc_html($tab['tab_description']); ?></p>
                                        <?php if (!empty($tab['tab_link'])) : ?>
                                            <a href="<?php echo esc_url($tab['tab_link']['url']); ?>">Learn More <span><i class="fa fa-arrow-right"></i></span></a>
                                        <?php endif; ?>
                                    </div>
                                    <?php if (!empty($tab['tab_image']['url'])) : ?>
                                        <img src="<?php echo esc_url($tab['tab_image']['url']); ?>" class="tab-image" alt="">
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        <?php endif; 
         $bottom_cta = get_field('bottom_cta');
         if(isset($bottom_cta) && !empty($bottom_cta)): ?>
        <div class="bottom-cta" style="text-align:center;">
			<a href="<?php echo (isset($bottom_cta['url']) && !empty($bottom_cta['url'])) ? esc_url($bottom_cta['url']) : '#'; ?>" class="custom-btn"><?php echo esc_html($bottom_cta['title']);  ?></a>
		</div>
        <?php endif ; ?>
    </div>
</section>