<?php
$class = isset($args['class']) ? $args['class'] : '';
?>

<section class="section comprehensive-features manufacturing-warehouse-features store-inventory-features">
    <div class="container">
        <div class="text-cont">
            <div class="row">
                <div class="col-lg-7">
            <h2 class="section-title"><?php echo get_field('features_tabs_heading'); ?></h2></div>
             <div class="col-lg-5">
                    <p class="section-content"><?php echo get_field('features_tabs_description'); ?></p>
         </div>
            </div>
        </div>

       <!-- Tabs Start Here -->
        <?php $tabs = get_field('features_tabs'); ?>
        <div class="responsive-tabs">
            <ul class="nav nav-tabs" role="tablist">
                <?php if ($tabs && is_array($tabs)) : ?>
                    <?php foreach ($tabs as $index => $tab) : ?>
                        <li class="nav-item">
                            <a id="tab-<?php echo $index; ?>" href="#pos-<?php echo $index; ?>" class="nav-link <?php echo $index === 0 ? 'active' : ''; ?>" data-bs-toggle="tab" role="tab">
                                <?php echo $tab['heading']; ?>
                            </a>
                        </li>
                    <?php endforeach; ?>
                <?php endif; ?>
            </ul>

            <div id="content" class="tab-content" role="tablist">

                <?php if ($tabs && is_array($tabs)) : ?>
                    <?php foreach ($tabs as $index => $tab) : ?>
                        <div id="pos-<?php echo $index; ?>" class="card tab-pane fade <?php echo $index === 0 ? 'show active' : ''; ?>" role="tabpanel" aria-labelledby="tab-<?php echo $index; ?>">
                            <div class="card-header" role="tab" id="heading-<?php echo $index; ?>">
                                <h5 class="mb-0">
                                    <a data-bs-toggle="collapse" href="#pos-collapse-<?php echo $index; ?>" aria-expanded="true" aria-controls="collapse-<?php echo $index; ?>">
                                        <?php echo $tab['heading']; ?>
                                    </a>
                                </h5>
                            </div>
                            <div id="pos-collapse-<?php echo $index; ?>" class="collapse <?php echo $index === 0 ? 'show' : ''; ?>" data-bs-parent="#content" role="tabpanel"
                                aria-labelledby="heading-<?php echo $index; ?>">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        
                                        <div class="col-lg-6">
                                            <div class="text-cont">
                                                <h3><?php echo $tab['heading']; ?></h3>
                                                <?php 
                                                $highlights = $tab['highlights']; 
                                                $text = $tab['features_tabs__text']; 
                                                ?>
                                                <?php if($text) :?>
                                                    <p><?php echo $text;?></p>
                                                <?php endif; ?>

                                                <?php if ($tab['cta']) : ?>
                                                    <a href="<?php echo esc_url($tab['cta']['url']); ?>" class="primary animated-cta-btn">
                                                        <?php echo $tab['cta']['title']; ?>
                                                    </a>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="img-cont">
                                                <img src="<?php echo esc_url($tab['image']); ?>" alt="<?php echo strip_tags($tab['heading']); ?>" class="img-fluid">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php else : ?>
                    <p>No tabs available.</p>
                <?php endif; ?>
            </div>
        </div>
        <!-- Tabs END Here -->
    </div>
</section>