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


<section class="section construction-inventory-management-process <?php echo $class;?>">
    <div class="container">
        <div class="row gy-4">
            <div class="col-lg-6 col-xxl-5">
                <div class="left-wrapper">
                    <h2 class="section-title text-center text-lg-start">
                        <?php echo get_field('inventory_process_timeline_section_title'); ?>
                    </h2>
                    <p class="section-content text-center text-lg-start">
                        <?php echo get_field('inventory_process_timeline_section_text'); ?>
                    </p>

                    <div class="img-cont">
                        <?php if( have_rows('inventory_process_timeline_cards_repeater') ): ?>
                            <?php the_row(); // first row load ?>
                            <?php $first_img = get_sub_field('inventory_process_timeline_repeater_card_image'); ?>
                            <img id="process-img" src="<?php echo esc_url($first_img); ?>" 
                                class="img-fluid" loading="lazy" alt="">
                        <?php endif; ?>
                    </div>

                    <?php $cta = get_field('inventory_process_timeline_section_cta');
                    if($cta) : ?>
                        <div class="text-center text-lg-start mt-4">
                            <a href="<?php echo esc_url($cta['url']); ?>" 
                            class="primary animated-cta-btn"><?php echo $cta['title']; ?></a>
                        </div>
                    <?php endif; ?>
                </div>
            </div>

            <div class="col-lg-6 col-xxl-7">
                <div class="inventory-process-steps-wrapper-main">
                    <div class="inventory-process-steps-wrapper">
                        <?php if( isset($first_img) ): ?>
                            <div class="inventory-steps-card-wrapper active" data-image="<?php echo esc_url($first_img); ?>">
                                <div class="svg-wrapper">
                                    <?php echo get_sub_field('inventory_process_timeline_repeater_crd_icon'); ?>
                                </div>
                                <div class="inventory-process-steps">
                                    <div class="text-cont">
                                        <h3><?php echo get_sub_field('inventory_process_timeline_repeater_card_title'); ?></h3>
                                        <p><?php echo get_sub_field('inventory_process_timeline_repeater_card_text'); ?></p>
                                    </div>
                                </div>
                            </div>
                        <?php endif; ?>

                        <?php $i = 2; while( have_rows('inventory_process_timeline_cards_repeater') ): the_row(); ?>
                            <div class="inventory-steps-card-wrapper" data-image="<?php echo esc_url(get_sub_field('inventory_process_timeline_repeater_card_image')); ?>">
                                <div class="svg-wrapper">
                                    <?php echo get_sub_field('inventory_process_timeline_repeater_crd_icon'); ?>
                                </div>
                                <div class="inventory-process-steps">
                                    <div class="text-cont">
                                        <h3><?php echo get_sub_field('inventory_process_timeline_repeater_card_title'); ?></h3>
                                        <p><?php echo get_sub_field('inventory_process_timeline_repeater_card_text'); ?></p>
                                    </div>
                                </div>
                            </div>
                        <?php $i++; endwhile; ?>
                    </div>

                    <!-- Control Scroll Height -->
                    <div class="scroll-height-control">
                        <div class="track-div"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>