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


<section class="section cutting-edge-features-3pl <?php echo $class;?>">
    <div class="container">
        <div class="text-cont text-center">
            <?php if (get_field('3pl_cef_section_title')) : ?>
                <h2 class="section-title"><?php echo get_field('3pl_cef_section_title'); ?></h2>
            <?php endif; ?>

            <?php if (get_field('3pl_cef_section_text')) : ?>
                <p class="section-content"><?php echo get_field('3pl_cef_section_text'); ?></p>
            <?php endif; ?>
        </div>

        <!-- Tabs Start Here -->
        <div class="responsive-tabs">

            <?php if (have_rows('3pl_cef_section_tabs')) : ?>

                <!-- NAV TABS -->
                <ul class="nav nav-tabs" role="tablist">
                    <?php
                    $i = 0;
                    while (have_rows('3pl_cef_section_tabs')) : the_row();
                        $i++;
                        $active = ($i === 1) ? 'active' : '';
                        $tab_id = 'tab-' . $i;
                        $pos_id = 'pos-' . $i;
                    ?>
                        <li class="nav-item" role="presentation">
                            <a id="<?php echo esc_attr($tab_id); ?>" href="#<?php echo esc_attr($pos_id); ?>" class="nav-link <?php echo esc_attr($active); ?>" data-bs-toggle="tab" role="tab">
                                <?php echo get_sub_field('3pl_cef_section_tab_title'); ?>
                            </a>
                        </li>
                    <?php endwhile; ?>
                </ul>

                <!-- TAB CONTENT -->
                <div id="ceContent" class="mt-4 tab-content" role="tablist">

                    <?php
                    // loop دوبارہ because above loop pointer end ho gaya
                    $i = 0;
                    while (have_rows('3pl_cef_section_tabs')) : the_row();
                        $i++;
                        $activePane = ($i === 1) ? 'show active' : '';
                        $collapseShow = ($i === 1) ? 'show' : '';

                        $tab_id     = 'tab-' . $i;
                        $pos_id     = 'pos-' . $i;

                        $heading_id = 'heading-' . $i;
                        $collapse_id = 'pos-collapse-' . $i;

                        $tab_text   = get_sub_field('3pl_cef_section_tab_text');
                        $button     = get_sub_field('3pl_cef_section_tab_button');
                        $image      = get_sub_field('3pl_cef_section_tab_image');

                        $right_top_title = get_sub_field('3pl_cef_section_tab_right_top_title');
                        $right_title_1   = get_sub_field('3pl_cef_section_tab_right_order_accuracy_text');
                        $right_text_1    = get_sub_field('3pl_cef_section_tab_right_text_1');
                        $right_title_2   = get_sub_field('3pl_cef_section_tab_right_fewer_stockout_text');
                        $right_text_2    = get_sub_field('3pl_cef_section_tab_right_text_2');
                    ?>

                        <div id="<?php echo esc_attr($pos_id); ?>"
                             class="card tab-pane fade <?php echo esc_attr($activePane); ?>"
                             role="tabpanel"
                             aria-labelledby="<?php echo esc_attr($tab_id); ?>">

                            <div class="card-header" role="tab" id="<?php echo esc_attr($heading_id); ?>">
                                <h5 class="mb-0">
                                    <a data-bs-toggle="collapse"
                                       href="#<?php echo esc_attr($collapse_id); ?>"
                                       aria-expanded="<?php echo ($i === 1) ? 'true' : 'false'; ?>">
                                        <?php echo get_sub_field('3pl_cef_section_tab_title'); ?>
                                    </a>
                                </h5>
                            </div>

                            <div id="<?php echo esc_attr($collapse_id); ?>"
                                 class="collapse <?php echo esc_attr($collapseShow); ?>"
                                 data-bs-parent="#ceContent"
                                 role="tabpanel"
                                 aria-labelledby="<?php echo esc_attr($heading_id); ?>">

                                <div class="card-body">
                                    <div class="row gy-3 gy-lg-0 align-items-center">

                                        <!-- LEFT TEXT -->
                                        <div class="col-lg-4 col-xl-4">
                                            <div class="real-time-visibility">
                                                <h3 class="real-time-title">
                                                    <?php echo get_sub_field('3pl_cef_section_tab_title'); ?>
                                                </h3>

                                                <?php if ($tab_text) : ?>
                                                    <p class="real-time-text"><?php echo esc_html($tab_text); ?></p>
                                                <?php endif; ?>

                                                <?php if ($button) : ?>
                                                    <div class="demo-btn-wrapper">
                                                        <a href="<?php echo esc_url($button['url']); ?>"
                                                           target="<?php echo esc_attr($button['target']); ?>"
                                                           class="primary animated-cta-btn">
                                                            <?php echo esc_html($button['title']); ?>
                                                        </a>
                                                    </div>
                                                <?php endif; ?>
                                            </div>
                                        </div>

                                        <!-- CENTER IMAGE -->
                                        <div class="col-lg-4 col-xl-5">
                                            <?php if ($image) : ?>
                                                <div class="img-wrapper">
                                                    <img src="<?php echo $image; ?>" alt="<?php echo wp_strip_all_tags(get_sub_field('3pl_cef_section_tab_title')); ?>" class="img-fluid" loading="lazy">
                                                </div>
                                            <?php endif; ?>
                                        </div>

                                        <!-- RIGHT SIDE -->
                                        <div class="col-lg-4 col-xl-3">
                                            <?php if ($right_top_title) : ?>
                                                <div class="high-performance">
                                                    <h3 class="high-performance-title">
                                                        <?php echo esc_html($right_top_title); ?>
                                                    </h3>
                                                </div>
                                            <?php endif; ?>

                                            <div class="orders-accuracy">
                                                <?php if ($right_title_1) : ?>
                                                    <h3 class="orders-accuracy-title"><?php echo $right_title_1; ?></h3>
                                                    <div class="divider"></div>
                                                <?php endif; ?>

                                                <?php if ($right_text_1) : ?>
                                                    <p class="orders-accuracy-text"><?php echo $right_text_1; ?></p>
                                                <?php endif; ?>

                                                <?php if ($right_title_2) : ?>
                                                    <h3 class="orders-accuracy-title"><?php echo $right_title_2; ?></h3>
                                                    <div class="divider"></div>
                                                <?php endif; ?>

                                                <?php if ($right_text_2) : ?>
                                                    <p class="orders-accuracy-text"><?php echo $right_text_2; ?></p>
                                                <?php endif; ?>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                            </div>
                        </div>

                    <?php endwhile; ?>

                </div>
            <?php endif; ?>

        </div>
        <!-- Tabs END Here -->
    </div>
</section>

