<?php
/*
Template Name: Inventory Management Software Bill
*/
get_header('new');
?>

<!-- first section -->
<section class="section banner supply-chain-banner pb-5 no-lazy">
    <div class="container">
        <div class="row mt-xl-5 mt-lg-0">
            <div class="col-lg-6">
                <div class="text-cont mt-0">
                    <h1 class="banner-heading"><?php echo get_field('banner_heading'); ?></h1>
                    <p class="banner-content">
                        <?php echo get_field('banner_description'); ?>
                    </p>
					<?php $highlights = get_field('banner_highlights'); ?>
                    <ul>
                        <?php if ($highlights && is_array($highlights)) : ?>
                            <?php foreach ($highlights as $highlight) : ?>
                                <li>
                                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/apparel-inventory-management/tick.webp" alt="tick" class="img-fluid">
                                    <?php echo $highlight['item']; ?>
                                </li>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </ul>
                    <div class="banner-btns">
						<?php $cta_1 = get_field('banner_cta_1'); ?>
						 <?php if (!is_null($cta_1)) : ?>
                        <a href="<?php echo esc_url($cta_1['url']); ?>" class="primary animated-cta-btn <?php echo is_modal_link($cta_1['url']); ?>"><?php echo $cta_1['title']; ?>
                            <!-- <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.598 0.799999H8.19L13.59 6.2L8.19 11.6H5.598L10.062 7.136H0.9V5.264H10.062L5.598 0.799999Z" fill="white"/>
                            </svg> -->
                        </a>
						<?php endif; ?>
						<?php $cta_2 = get_field('banner_cta_2'); ?>
						<?php if (!is_null($cta_2)) : ?>
                        <a href="<?php echo esc_url($cta_2['url']); ?>" class="border-gradient-btn animated-btn <?php echo is_modal_link($cta_2['url']); ?>"><?php echo $cta_2['title']; ?>
                            <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.35816 0.0996094H7.95016L13.3502 5.49961L7.95016 10.8996H5.35816L9.82216 6.43561H0.660156V4.56361H9.82216L5.35816 0.0996094Z" fill="black"/>
                            </svg>
                        </a>
						<?php endif; ?>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="img-cont">
					<?php
	$desktop_img_url = get_field('banner_image');
	$mobile_img_url  = get_field('banner_mobile_image');
?>
    <picture>
        <source class="no-lazy" media="(max-width: 767px)" srcset="<?php echo $mobile_img_url ? $mobile_img_url : $desktop_img_url ?>">
        <img src="<?php echo $desktop_img_url;?>" loading="eager" fetchpriority="high" decoding="async" width="546" height="397" class="img-fluid no-lazy" alt="<?php echo strip_tags(get_field('banner_heading')); ?>">
    </picture>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- end first section -->

<!-- certificates section -->
<?php  get_template_part('templates-parts/pages/certificates');?>
<!-- end certificates section -->

<!-- Icons Cards Start start -->
 <?php
 $counters = ['class' => 'pt-5 '];
 get_template_part('templates-parts/pages/counter-new',null,$counters)?>
<!-- Icons Cards Start end -->

<!--  3rd section-->
<?php
$heading = get_field('bom_heading');
$content = get_field('bom_content');

$btn_text = get_field('bom_btn_text');
$btn_link = get_field('bom_btn_link');

$btn_url    = !empty($btn_link['url']) ? $btn_link['url'] : 'javascript:;';
$btn_target = !empty($btn_link['target']) ? $btn_link['target'] : '_self';
?>

<section class="section apparel-inventory-management-system bill-materials-software bg-white pt-4">
    <div class="container">
        <div class="text-cont">
            <div class="row">
                <div class="col-lg-6">
                    <?php if (!empty($heading)) : ?>
                        <h2 class="section-title mb-5"><?php echo wp_kses_post($heading); ?></h2>
                    <?php endif; ?>
                </div>
                <div class="col-lg-6">
                    <?php if (!empty($content)) : ?>
                        <p class="section-content"><?php echo wp_kses_post($content); ?></p>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <div class="row gy-4">
            <?php if (have_rows('bom_cards')) : ?>
                <?php while (have_rows('bom_cards')) : the_row();
                    $svg   = get_sub_field('bom_svg'); // pasted svg code
                    $title = get_sub_field('bom_card_title');
                    $back  = get_sub_field('bom_card_back_text');
                ?>
                    <div class="col-lg-4 col-md-6">
                        <div class="flip-card">
                            <div class="flip-card-inner">

                                <div class="flip-card-front">
                                    <div class="svg-content">
                                        <?php
                                        // SVG allow (safe-ish). If your WP blocks SVG, add SVG support or use wp_kses with svg allowed tags.
                                        echo $svg ? $svg : '';
                                        ?>
                                    </div>
                                    <div class="text-content">
                                        <?php if (!empty($title)) : ?>
                                            <h3><?php echo esc_html($title); ?></h3>
                                        <?php endif; ?>
                                    </div>
                                </div>

                                <div class="flip-card-back">
                                    <?php if (!empty($back)) : ?>
                                        <p><?php echo wp_kses_post($back); ?></p>
                                    <?php endif; ?>
                                </div>

                            </div>
                        </div>
                    </div>
                <?php endwhile; ?>
            <?php endif; ?>
        </div>

        <?php if (!empty($btn_text)) : ?>
            <div class="text-center mt-5">
                <a href="<?php echo esc_url($btn_url); ?>"
                   target="<?php echo esc_attr($btn_target); ?>"
                   class="primary animated-cta-btn">
                    <?php echo esc_html($btn_text); ?>
                </a>
            </div>
        <?php endif; ?>
    </div>
</section>

<!-- end -->
<!-- 4th section -->




<?php
$heading = get_field('bom_mgmt_heading');
$content = get_field('bom_mgmt_content');

// Build tabs array
$tabs = [];
if (have_rows('bom_mgmt_tabs')) {
    while (have_rows('bom_mgmt_tabs')) { the_row();
        $tabs[] = [
            'nav'   => get_sub_field('bom_mgmt_nav_label'),
            'title' => get_sub_field('bom_mgmt_title'),
            'desc'  => get_sub_field('bom_mgmt_desc'),
            'img'   => get_sub_field('bom_mgmt_image'), // array
        ];
    }
}

// Helper: 0->AA, 1->BB, 2->CC ...
function wgo_double_letter($index) {
    $letter = chr(65 + (int)$index); // A, B, C...
    return $letter . $letter;        // AA, BB, CC...
}
?>

<section class="section bom-management-software bg-white pt-5">
    <div class="container">
        <div class="text-cont text-center">
            <?php if (!empty($heading)) : ?>
                <h2 class="section-title"><?php echo esc_html($heading); ?></h2>
            <?php endif; ?>

            <?php if (!empty($content)) : ?>
                <p class="section-content"><?php echo wp_kses_post($content); ?></p>
            <?php endif; ?>
        </div>

        <!-- Tabs Start Here -->
        <div class="responsive-tabs">
            <div class="row">
                <div class="col-lg-4">
                    <?php if (!empty($tabs)) : ?>
                        <ul class="nav nav-tabs" role="tablist">
                            <?php foreach ($tabs as $i => $t) :
                                $id = wgo_double_letter($i);
                                $active = ($i === 0) ? 'active' : '';
                                $nav_label = !empty($t['nav']) ? $t['nav'] : (($i+1) . '.');
                            ?>
                                <li class="nav-item">
                                    <a id="tab-<?php echo esc_attr($id); ?>"
                                       href="#pos-<?php echo esc_attr($id); ?>"
                                       class="nav-link <?php echo esc_attr($active); ?>"
                                       data-bs-toggle="tab"
                                       role="tab">
                                        <?php echo esc_html($nav_label); ?>
                                    </a>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    <?php endif; ?>
                </div>

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

                        <?php if (!empty($tabs)) : ?>
                            <?php foreach ($tabs as $i => $t) :
                                $id = wgo_double_letter($i);

                                $pane_active   = ($i === 0) ? 'show active' : '';
                                $collapsed     = ($i === 0) ? '' : 'collapsed';
                                $collapse_show = ($i === 0) ? 'show' : '';

                                $nav_label = !empty($t['nav']) ? $t['nav'] : (($i+1) . '.');
                                $title     = !empty($t['title']) ? $t['title'] : '';
                                $desc      = !empty($t['desc']) ? $t['desc'] : '';

                                $img_url = !empty($t['img']['url']) ? $t['img']['url'] : '';
                                $img_alt = !empty($t['img']['alt']) ? $t['img']['alt'] : 'tab';
                            ?>
                                <div id="pos-<?php echo esc_attr($id); ?>"
                                     class="card tab-pane fade <?php echo esc_attr($pane_active); ?>"
                                     role="tabpanel"
                                     aria-labelledby="tab-<?php echo esc_attr($id); ?>">

                                    <div class="card-header" role="tab" id="heading-<?php echo esc_attr($id); ?>">
                                        <div class="mb-0">
                                            <a class="<?php echo esc_attr($collapsed); ?>"
                                               data-bs-toggle="collapse"
                                               href="#pos-collapse-<?php echo esc_attr($id); ?>"
                                               aria-expanded="<?php echo ($i === 0) ? 'true' : 'false'; ?>"
                                               aria-controls="collapse-<?php echo esc_attr($id); ?>">
                                                <?php echo esc_html($nav_label); ?>
                                            </a>
                                        </div>
                                    </div>

                                    <div id="pos-collapse-<?php echo esc_attr($id); ?>"
                                         class="collapse <?php echo esc_attr($collapse_show); ?>"
                                         data-bs-parent="#content"
                                         role="tabpanel"
                                         aria-labelledby="heading-<?php echo esc_attr($id); ?>">

                                        <div class="card-body">
                                            <div class="text-content">
                                                <?php if (!empty($title)) : ?>
                                                    <h3><?php echo esc_html($title); ?></h3>
                                                <?php endif; ?>

                                                <?php if (!empty($desc)) : ?>
                                                    <p><?php echo wp_kses_post($desc); ?></p>
                                                <?php endif; ?>
                                            </div>

                                            <div class="img-content">
                                                <?php if (!empty($img_url)) : ?>
                                                    <img src="<?php echo esc_url($img_url); ?>"
                                                         alt="<?php echo esc_attr($img_alt); ?>"
                                                         class="img-fluid"
                                                         loading="lazy">
                                                <?php endif; ?>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            <?php endforeach; ?>
                        <?php endif; ?>

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

    </div>
</section>


<!--4th section end  -->
<!-- 5th section -->
<?php
$heading = get_field('brew_oc_heading');
$content = get_field('brew_oc_content');
$image   = get_field('brew_oc_image');

$btn_text = get_field('brew_oc_btn_text');
$btn_link = get_field('brew_oc_btn_link');

$btn_url    = !empty($btn_link['url']) ? $btn_link['url'] : 'javascript:;';
$btn_target = !empty($btn_link['target']) ? $btn_link['target'] : '_self';

$img_url = !empty($image['url']) ? $image['url'] : '';
$img_alt = !empty($image['alt']) ? $image['alt'] : 'work';
?>

<!-- Brew Overcome Challages Section Start -->
<section class="section sync-data-shipping brew-overcome-challenges warego-bill-materials bg-white">
    <div class="container">
        <div class="text-cont text-center">
            <?php if (!empty($heading)) : ?>
                <h2 class="section-title"><?php echo wp_kses_post($heading); ?></h2>
            <?php endif; ?>

            <?php if (!empty($content)) : ?>
                <p class="section-content"><?php echo wp_kses_post($content); ?></p>
            <?php endif; ?>
        </div>

        <div class="sync-data-accordian-wrapper">
            <div class="row gy-4 flex-row-reverse">
                <div class="col-lg-6">
                    <div class="text-cont">
                        <?php if (have_rows('brew_oc_items')) : ?>
                            <?php
                            // Unique accordion id per page render (prevents conflicts if section repeats)
                            $accordion_id = 'accordionExample-' . wp_unique_id();
                            ?>
                            <div class="accordion" id="<?php echo esc_attr($accordion_id); ?>">

                                <?php while (have_rows('brew_oc_items')) : the_row();
                                    static $i = 0; // keeps index inside loop
                                    $number = get_sub_field('brew_oc_number');
                                    $title  = get_sub_field('brew_oc_title');
                                    $body   = get_sub_field('brew_oc_body');

                                    $i++;
                                    $is_first = ($i === 1);

                                    $heading_id  = 'heading-' . $i . '-' . $accordion_id;
                                    $collapse_id = 'collapse-' . $i . '-' . $accordion_id;
                                ?>
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="<?php echo esc_attr($heading_id); ?>">
                                            <button class="accordion-button <?php echo $is_first ? '' : 'collapsed'; ?>"
                                                    type="button"
                                                    data-bs-toggle="collapse"
                                                    data-bs-target="#<?php echo esc_attr($collapse_id); ?>"
                                                    aria-expanded="<?php echo $is_first ? 'true' : 'false'; ?>"
                                                    aria-controls="<?php echo esc_attr($collapse_id); ?>">
                                                <?php if (!empty($number)) : ?>
                                                    <span><?php echo esc_html($number); ?></span>
                                                <?php endif; ?>
                                                <?php echo esc_html($title); ?>
                                            </button>
                                        </h2>

                                        <div id="<?php echo esc_attr($collapse_id); ?>"
                                             class="accordion-collapse collapse <?php echo $is_first ? 'show' : ''; ?>"
                                             aria-labelledby="<?php echo esc_attr($heading_id); ?>"
                                             data-bs-parent="#<?php echo esc_attr($accordion_id); ?>">
                                            <div class="accordion-body">
                                                <?php echo wp_kses_post($body); ?>
                                            </div>
                                        </div>
                                    </div>
                                <?php endwhile; ?>

                            </div>
                        <?php endif; ?>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="img-wrapper d-flex justify-content-center align-items-center">
                        <?php if (!empty($img_url)) : ?>
                            <img src="<?php echo esc_url($img_url); ?>"
                                 alt="<?php echo esc_attr($img_alt); ?>"
                                 class="img-fluid"
                                 loading="lazy">
                        <?php endif; ?>
                    </div>
                </div>

            </div>
        </div>

        <?php if (!empty($btn_text)) : ?>
            <div class="demo-btn-wrapper text-center">
                <a href="<?php echo esc_url($btn_url); ?>"
                   target="<?php echo esc_attr($btn_target); ?>"
                   class="primary animated-cta-btn">
                    <?php echo esc_html($btn_text); ?>
                </a>
            </div>
        <?php endif; ?>

    </div>
</section>
<!-- Brew Overcome Challages Section End -->


<!--5th section end   -->
<!-- 6th section -->
<?php
$heading = get_field('bskf_heading');
$content = get_field('bskf_content');

$btn_text = get_field('bskf_btn_text');
$btn_link = get_field('bskf_btn_link');

$btn_url    = !empty($btn_link['url']) ? $btn_link['url'] : 'javascript:;';
$btn_target = !empty($btn_link['target']) ? $btn_link['target'] : '_self';
?>

<section class="section bill-software-key-features bg-white pt-4">
    <div class="container">
        <div class="text-cont text-center">
            <?php if (!empty($heading)) : ?>
                <h2 class="section-title"><?php echo esc_html($heading); ?></h2>
            <?php endif; ?>

            <?php if (!empty($content)) : ?>
                <p class="section-content"><?php echo wp_kses_post($content); ?></p>
            <?php endif; ?>
        </div>

        <div class="row">
            <div class="col-xl-9 col-lg-8">
                <div class="owl-carousel owl-theme bill-software-key-features-slider owl-loaded owl-drag">

                    <?php if (have_rows('bskf_slider')) : ?>
                        <?php while (have_rows('bskf_slider')) : the_row();
                            $img   = get_sub_field('bskf_slide_image');
                            $title = get_sub_field('bskf_slide_title');
                            $desc  = get_sub_field('bskf_slide_desc');

                            $img_url = !empty($img['url']) ? $img['url'] : '';
                            $img_alt = !empty($img['alt']) ? $img['alt'] : 'features';
                        ?>
                            <div class="item">
                                <div class="row align-items-center">
                                    <div class="col-lg-6">
                                        <div class="img-content">
                                            <?php if (!empty($img_url)) : ?>
                                                <img src="<?php echo esc_url($img_url); ?>"
                                                     alt="<?php echo esc_attr($img_alt); ?>"
                                                     class="img-fluid"
                                                     loading="lazy">
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="text-content">
                                            <?php if (!empty($title)) : ?>
                                                <h3><?php echo esc_html($title); ?></h3>
                                            <?php endif; ?>

                                            <?php if (!empty($desc)) : ?>
                                                <p><?php echo wp_kses_post($desc); ?></p>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endwhile; ?>
                    <?php endif; ?>

                </div>
            </div>

            <div class="col-xl-3 col-lg-4">
                <div class="box">
                    <?php if (have_rows('bskf_stats')) : ?>
                        <ul>
                            <?php while (have_rows('bskf_stats')) : the_row();
                                $st_title = get_sub_field('bskf_stat_title');
                                $st_desc  = get_sub_field('bskf_stat_desc');
                            ?>
                                <li>
                                    <?php if (!empty($st_title)) : ?>
                                        <h4><?php echo esc_html($st_title); ?></h4>
                                    <?php endif; ?>
                                    <?php if (!empty($st_desc)) : ?>
                                        <p><?php echo wp_kses_post($st_desc); ?></p>
                                    <?php endif; ?>
                                </li>
                            <?php endwhile; ?>
                        </ul>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <?php if (!empty($btn_text)) : ?>
            <div class="text-center mt-5">
                <a href="<?php echo esc_url($btn_url); ?>"
                   target="<?php echo esc_attr($btn_target); ?>"
                   class="primary animated-cta-btn">
                    <?php echo esc_html($btn_text); ?>
                </a>
            </div>
        <?php endif; ?>

    </div>
</section>


<!--6th section end  -->
<!--7th section  -->
<?php
$heading = get_field('abw_heading');
$content = get_field('abw_content');
?>

<!-- Automate Brewery Work SEction Start -->
<section class="section automate-brewery-work powerful-integrations-work bg-white pt-0">
    <div class="container">
        <div class="text-cont">
            <?php if (!empty($heading)) : ?>
                <h2 class="section-title text-center"><?php echo wp_kses_post($heading); ?></h2>
            <?php endif; ?>

            <?php if (!empty($content)) : ?>
                <p class="section-content text-center"><?php echo wp_kses_post($content); ?></p>
            <?php endif; ?>
        </div>

        <div class="brewery-integrations-logos-wrapper">
            <?php if (have_rows('abw_logos')) : ?>
                <?php while (have_rows('abw_logos')) : the_row();
                    $img = get_sub_field('abw_logo_image'); // array
                    $alt_override = get_sub_field('abw_logo_alt');

                    $img_url = !empty($img['url']) ? $img['url'] : '';
                    $img_alt = !empty($alt_override) ? $alt_override : (!empty($img['alt']) ? $img['alt'] : 'automate-brewery-work');
                ?>
                    <?php if (!empty($img_url)) : ?>
                        <div class="img-wrapper">
                            <img src="<?php echo esc_url($img_url); ?>"
                                 alt="<?php echo esc_attr($img_alt); ?>"
                                 class="img-fluid">
                        </div>
                    <?php endif; ?>
                <?php endwhile; ?>
            <?php endif; ?>
        </div>

    </div>
</section>
<!-- Automate Brewery Work SEction End -->


<!--7th section end  -->

<!--8th section   -->
<?php
$heading = get_field('cft_heading');
$content = get_field('cft_content');

// Collect tabs in array (so we can print nav + content)
$tabs = [];
if (have_rows('cft_tabs')) {
    while (have_rows('cft_tabs')) { the_row();
        $tabs[] = [
            'nav'    => get_sub_field('cft_nav_label'),
            'header' => get_sub_field('cft_card_header'),
            'title'  => get_sub_field('cft_title'),
            'desc'   => get_sub_field('cft_desc'),
            'img'    => get_sub_field('cft_image'),
            'btn_t'  => get_sub_field('cft_btn_text'),
            'btn_l'  => get_sub_field('cft_btn_link'),
        ];
    }
}

// 0->A, 1->B, 2->C...
function wgo_letter($index){
    return chr(65 + (int)$index);
}

// unique content id (avoid clash if same layout repeats)
$content_id = 'content-' . wp_unique_id();
?>

<section class="section comprehensive-features manufacturing-warehouse-features bill-materials-features pt-4">
    <div class="container">
        <div class="text-cont text-center">
            <?php if (!empty($heading)) : ?>
                <h2 class="section-title mb-5"><?php echo wp_kses_post($heading); ?></h2>
            <?php endif; ?>

            <?php if (!empty($content)) : ?>
                <p class="section-content"><?php echo wp_kses_post($content); ?></p>
            <?php endif; ?>
        </div>

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

            <?php if (!empty($tabs)) : ?>
                <ul class="nav nav-tabs" role="tablist">
                    <?php foreach ($tabs as $i => $t) :
                        $L = wgo_letter($i);
                        $active = ($i === 0) ? 'active' : '';
                    ?>
                        <li class="nav-item">
                            <a id="tab-<?php echo esc_attr($L); ?>"
                               href="#pos-<?php echo esc_attr($L); ?>"
                               class="nav-link <?php echo esc_attr($active); ?>"
                               data-bs-toggle="tab"
                               role="tab">
                                <?php echo esc_html($t['nav']); ?>
                            </a>
                        </li>
                    <?php endforeach; ?>
                </ul>
            <?php endif; ?>

            <div id="<?php echo esc_attr($content_id); ?>" class="mt-4 tab-content" role="tablist">

                <?php if (!empty($tabs)) : ?>
                    <?php foreach ($tabs as $i => $t) :
                        $L = wgo_letter($i);
                        $pane_active   = ($i === 0) ? 'show active' : '';
                        $collapsed     = ($i === 0) ? '' : 'collapsed';
                        $collapse_show = ($i === 0) ? 'show' : '';

                        $img_url = !empty($t['img']['url']) ? $t['img']['url'] : '';
                        $img_alt = !empty($t['img']['alt']) ? $t['img']['alt'] : 'tab';

                        $btn_url    = !empty($t['btn_l']['url']) ? $t['btn_l']['url'] : 'javascript:;';
                        $btn_target = !empty($t['btn_l']['target']) ? $t['btn_l']['target'] : '_self';
                    ?>
                        <div id="pos-<?php echo esc_attr($L); ?>"
                             class="card tab-pane fade <?php echo esc_attr($pane_active); ?>"
                             role="tabpanel"
                             aria-labelledby="tab-<?php echo esc_attr($L); ?>">

                            <div class="card-header" role="tab" id="heading-<?php echo esc_attr($L); ?>">
                                <h5 class="mb-0">
                                    <a class="<?php echo esc_attr($collapsed); ?>"
                                       data-bs-toggle="collapse"
                                       href="#pos-collapse-<?php echo esc_attr($L); ?>"
                                       aria-expanded="<?php echo ($i === 0) ? 'true' : 'false'; ?>"
                                       aria-controls="collapse-<?php echo esc_attr($L); ?>">
                                        <?php echo esc_html($t['header']); ?>
                                    </a>
                                </h5>
                            </div>

                            <div id="pos-collapse-<?php echo esc_attr($L); ?>"
                                 class="collapse <?php echo esc_attr($collapse_show); ?>"
                                 data-bs-parent="#<?php echo esc_attr($content_id); ?>"
                                 role="tabpanel"
                                 aria-labelledby="heading-<?php echo esc_attr($L); ?>">

                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-lg-6">
                                            <div class="img-cont">
                                                <?php if (!empty($img_url)) : ?>
                                                    <img src="<?php echo esc_url($img_url); ?>"
                                                         alt="<?php echo esc_attr($img_alt); ?>"
                                                         class="img-fluid">
                                                <?php endif; ?>
                                            </div>
                                        </div>

                                        <div class="col-lg-6">
                                            <div class="text-cont">
                                                <?php if (!empty($t['title'])) : ?>
                                                    <h3><?php echo esc_html($t['title']); ?></h3>
                                                <?php endif; ?>

                                                <?php if (!empty($t['desc'])) : ?>
                                                    <p><?php echo wp_kses_post($t['desc']); ?></p>
                                                <?php endif; ?>

                                                <?php if (!empty($t['btn_t'])) : ?>
                                                    <a href="<?php echo esc_url($btn_url); ?>"
                                                       target="<?php echo esc_attr($btn_target); ?>"
                                                       class="primary animated-cta-btn">
                                                        <?php echo esc_html($t['btn_t']); ?>
                                                    </a>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>

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

<!--8th section end  -->
<!--9th section  -->

<!-- why leading section start -->
<section class="section why-leading">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title mb-5"><?php echo get_field('why_warego_wms_heading'); ?></h2>
            <p class="section-content"><?php echo get_field('why_warego_wms_description'); ?></p>
        </div>
        <?php if( have_rows('why_warego_wms_features') ): ?>
        <ul>
            <?php while( have_rows('why_warego_wms_features') ): the_row(); ?>
                <li>
                    <div class="left">
                        <?php $image = get_sub_field('image'); ?>
                        <?php if ($image) : ?>
                            <img src="<?php echo esc_url($image); ?>" alt="<?php echo get_sub_field('heading'); ?>" class="img-fluid">
                        <?php endif; ?>
                    </div>
                    <div class="right">
                        <h3><?php echo get_sub_field('heading'); ?></h3>
                        <p><?php echo get_sub_field('description'); ?></p>
                    </div>
                </li>
            <?php endwhile; ?>
        </ul>
        <?php else: ?>
        <p>No features available.</p>
        <?php endif; ?>

        <div class="text-center mt-5">
            <a href="<?php echo esc_url(get_field('why_warego_wms_cta_link')); ?>" class="primary animated-cta-btn" <?php echo is_modal_link(get_field('why_warego_wms_cta_link')); ?>><?php echo get_field('why_warego_wms_cta_label'); ?></a>
        </div>
    </div>
</section>
<!-- why leading section end -->

<!-- 9th section end -->

<!-- pricing section start -->
<?php 
$pricing = [
    'class' => 'supply-chain-pricing-cards pt-5',
//     'category' => 'salon-inventory-management-system',
    'headingcon' => 'h2',
];
get_template_part('templates-parts/pages/pricing',null,$pricing)?>
<!-- pricing section end -->
<div class="space">
	
</div>
<!--11th section  -->
<!-- case studies start -->
<?php 
$portfolio = ['class' => 'bg-white pt-lg-0'];
get_template_part('templates-parts/pages/case-studies',null,$portfolio);?>
<!-- case studies end -->



<!--11th section end  -->



<!--  -->
<!-- testimonials start -->
<section class="section say-about-warego client-say-about-warego">
    <div class="container">
        <div class="text-center text-cont">
            <h2 class="section-title mb-5"><?php echo get_field('reviews_heading'); ?></h2>
            <p class="section-content"><?php echo get_field('reviews_description'); ?></p>
        </div>

        <?php if( have_rows('reviews') ): ?>
        <div class="row gy-4">
        <?php while( have_rows('reviews') ): the_row();?>
            <div class="col-lg-6 right-sight">
                <div class="card">
                    <p><?php echo get_sub_field('quote');?></p>
                    <ul>
                        <li>
                            <img src="<?php echo get_sub_field('image');?>" alt="Sarah Johnson" class="img-fluid">
                        </li>
                        <li>
                            <h3><?php echo get_sub_field('name');?></h3>
                            <p><?php echo get_sub_field('position');?></p>
                        </li>
                    </ul>
                </div>
            </div>
            <?php endwhile; ?>
        </div>
        <?php endif; ?>
    </div>
</section>
<!-- testimonials end -->


<div class="space">
	
</div>

<?php
/* ============================
 *  FAQS
 * ============================ */
?>
<section class="section faqs pt-5 bg-white">
    <div class="container">
        <div class="text-cont slide-down">
            <?php
            $faq_title      = get_field('faq_section_title');
            $faq_highlight  = get_field('faq_section_title_highlight');
            ?>
            <?php if ( $faq_title ) : ?>
                <h2 class="section-title">
                    <?php echo esc_html( $faq_title ); ?>
                    <?php if ( $faq_highlight ) : ?>
                        <span><?php echo esc_html( $faq_highlight ); ?></span>
                    <?php endif; ?>
                </h2>
            <?php endif; ?>
        </div>

        <?php if ( have_rows('faq_items') ) : ?>
            <div class="accordion" id="faqs-accordion">
                <?php
                $i = 1;
                while ( have_rows('faq_items') ) :
                    the_row();
                    $question   = get_sub_field('faq_question');
                    $answer     = get_sub_field('faq_answer');

                    // Unique IDs for accordion items
                    $heading_id  = 'headingFaq' . $i;
                    $collapse_id = 'collapseFaq' . $i;

                    // First item open by default
                    $is_first    = ( $i === 1 );
                    $show_class  = $is_first ? 'show' : '';
                    $expanded    = $is_first ? 'true' : 'false';
                    $btn_class   = $is_first ? '' : 'collapsed';
                ?>
                    <div class="accordion-item slide-down">
                        <h2 class="accordion-header" id="<?php echo esc_attr( $heading_id ); ?>">
                            <button
                                class="accordion-button <?php echo esc_attr( $btn_class ); ?>"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#<?php echo esc_attr( $collapse_id ); ?>"
                                aria-expanded="<?php echo esc_attr( $expanded ); ?>"
                                aria-controls="<?php echo esc_attr( $collapse_id ); ?>">
                                <?php echo esc_html( $i . '. ' . $question ); ?>
                            </button>
                        </h2>
                        <div
                            id="<?php echo esc_attr( $collapse_id ); ?>"
                            class="accordion-collapse collapse <?php echo esc_attr( $show_class ); ?>"
                            aria-labelledby="<?php echo esc_attr( $heading_id ); ?>"
                            data-bs-parent="#faqs-accordion">
                            <div class="accordion-body">
                                <?php
                              
                                echo $answer;
                                ?>
                            </div>
                        </div>
                    </div>
                <?php
                    $i++;
                endwhile;
                ?>
            </div>
        <?php endif; ?>
    </div>
</section>

  <?php
$heading   = get_field('heading');
$text      = get_field('text');
$btn_text  = get_field('button_text');
$btn_link  = get_field('button_link');

// fallback
$heading  = $heading ?: 'Have questions about our Pick and Pack software?';
$btn_text = $btn_text ?: 'Talk with Experts!';
$btn_link = $btn_link ?: 'javascript:;';
?>

<section class="section invemtory-management-software-cta pick-pack-software-cta bg-white pt-3">
    <div class="container">
        <div class="box">
            <h2><?php echo $heading; ?></h2>

            <?php if (!empty($text)) : ?>
                <p><?php echo wp_kses_post($text); ?></p>
            <?php endif; ?>

            <a href="<?php echo esc_url($btn_link); ?>" class="primary animated-cta-btn">
                <?php echo esc_html($btn_text); ?>
            </a>
        </div>
    </div>
</section>


<?php get_footer(); ?>



<script>
    $('.banner-logos-slider').owlCarousel({
        loop: false,
        margin: 10,
        nav: false,
        autoplay: true,
        dots: false,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 2
            },
            1000: {
                items: 4
            }
        }
    });
    $('.portfolio-slider').owlCarousel({
        loop:false,
        margin:40,
        nav:false,
        dots:false,
        dotsData:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:2,
                margin:20
            },
            1000:{
                items:2
            }
        }
    });
    $('.more-industries-slider').owlCarousel({
    loop: false, 
    margin: 20,
    nav: true,
    navText: ["<img src='assets/img/left-arrow.webp'>", "<img src='assets/img/right-arrow.webp'>"],
    dots: false,
    // stagePadding: 90, 
    responsive: {
        0: {
            items: 1, 
            stagePadding: 1, 
        },
        480: {
            items: 1, 
            stagePadding: 5, 
        },
        600: {
            items: 2, 
            stagePadding: 0, 

        },
        1200: {
            items : 3 ,
            // stagePadding: 35,
        },
    }
});
$('.real-feedback-slider').owlCarousel({
        loop:false,
        margin:40,
        nav:false,
        dots:false,
        dotsData:true,
        responsive:{
            0:{
                items:1
            },
            768:{
                items:2,
                margin:20
            },
            1000:{
                items:2
            }
        }
    });


</script>
<script>
    var more_industries_slider = $('.industry-specific-slider');

    $('.slide-next-button').click(function() {
        more_industries_slider.trigger('next.owl.carousel');
    });

    $('.slide-prev-button').click(function() {
        more_industries_slider.trigger('prev.owl.carousel');
    });
    $('.industry-specific-slider').owlCarousel({
        loop: true,
        autoplay:false,
        margin: 20,
        nav: false,
        stagePadding: 50,
        dots: false,
        responsive: {
            0: {
                items: 1,
                stagePadding: 1,
            },
            480: {
                items: 1
            },
            600: {
                items: 2

            },
            1400: {
                items : 2
            },
        }
    });
</script>

<script>
    $('.about-our-product-slider').owlCarousel({
        loop:false,
        margin:10,
        nav:false,
        dots: false,
        responsive:{
            0:{
                items:1,
                autoplay:true
            },
            600:{
                loop:true,
                items:3,
                autoplay:true
            },
            1000:{
                items:5
            }
        }
    });
    $('.real-feedback-slider').owlCarousel({
        loop:false,
        margin:40,
        nav:false,
        dots:false,
        dotsData:true,
        responsive:{
            0:{
                items:1
            },
            768:{
                items:2,
                margin:20
            },
            1000:{
                items:2
            }
        }
    });
</script>


<script>
document.addEventListener("DOMContentLoaded", function () {
  const section = document.querySelector(".construction-inventory-management-process");
  if (!section) return;

  const processImg = section.querySelector("#process-img");
  const stepCards  = section.querySelectorAll(".inventory-steps-card-wrapper");

  if (processImg && stepCards.length) {
    const firstCard = stepCards[0];
    firstCard.classList.add("active");
    const firstImg = firstCard.getAttribute("data-image");
    if (firstImg) processImg.src = firstImg;

    stepCards.forEach(card => {
      card.addEventListener("click", () => {
        stepCards.forEach(c => c.classList.remove("active"));
        card.classList.add("active");

        const imgPath = card.getAttribute("data-image");
        if (imgPath) {
          processImg.src = imgPath;
        }
      });
    });
  }

  const scrollList  = section.querySelector(".inventory-process-steps-wrapper");  
  const scrollTrack = section.querySelector(".scroll-height-control");            
  const trackDiv    = scrollTrack ? scrollTrack.querySelector(".track-div") : null;

  function updateScrollIndicator() {
    if (!scrollList || !scrollTrack || !trackDiv) return;

    const contentHeight = scrollList.scrollHeight;
    const visibleHeight = scrollList.clientHeight;
    const scrollTop     = scrollList.scrollTop;
    const trackHeight   = scrollTrack.offsetHeight;

    if (contentHeight <= visibleHeight) {
      trackDiv.style.display = "none";
      return;
    } else {
      trackDiv.style.display = "block";
    }

    const thumbHeight = Math.max((visibleHeight / contentHeight) * trackHeight, 30);
    trackDiv.style.height = thumbHeight + "px";

    const maxThumbTop = trackHeight - thumbHeight;
    const thumbTop = (scrollTop / (contentHeight - visibleHeight)) * maxThumbTop;

    trackDiv.style.top = thumbTop + "px";
  }

  updateScrollIndicator();

  if (scrollList) {
    scrollList.addEventListener("scroll", updateScrollIndicator);
  }

  window.addEventListener("resize", updateScrollIndicator);
});
</script>




<script>
    $(document).ready(function () {
        $('.warehouse-slotting-optimization').each(function () {
            
            var $section = $(this);
            var $slider = $section.find('.banner-main-slider');
            var $navBox = $section.find('.owl-nav-links');

            if (!$slider.length) return;

            var slideCount = $slider.find('.slottting-card').length;

            $navBox.empty();
            for (var i = 0; i < slideCount; i++) {
                $navBox.append(
                    '<a href="#" aria-label="Go to slide ' + (i + 1) + '"></a>'
                );
            }

            var $navLinks = $navBox.find('a');

            $navLinks.eq(0).addClass('active');

            $slider.owlCarousel({
                items: 3,
                loop: true,
                autoplay: true,
                autoplayTimeout: 4000,
                autoplayHoverPause: true,
                margin: 23,
                nav: false,
                dots: false,
                smartSpeed: 600,
                mouseDrag: true,
                touchDrag: true,
                pullDrag: true,
                slideBy: 1, 
                responsive: {
                    0: { items: 1 },
                    768: { items: 2 },
                    1200: { items: 3 }
                }
            });

            $navLinks.on('click', function (e) {
                e.preventDefault();

                var index = $(this).index();

                $slider.trigger('to.owl.carousel', [index, 500, true]);

                $navLinks.removeClass('active');
                $(this).addClass('active');
            });

            $slider.on('changed.owl.carousel', function (event) {
                var carousel = event.relatedTarget;

                var relIndex = carousel.relative(carousel.current());

                $navLinks.removeClass('active')
                    .eq(relIndex).addClass('active');
            });

        });

    });
</script>
<script>
    var more_industries_slider = $('.industry-specific-slider');

    $('.slide-next-button').click(function() {
        more_industries_slider.trigger('next.owl.carousel');
    });

    $('.slide-prev-button').click(function() {
        more_industries_slider.trigger('prev.owl.carousel');
    });
    $('.industry-specific-slider').owlCarousel({
        loop: true,
        autoplay:false,
        margin: 20,
        nav: false,
        stagePadding: 50,
        dots: false,
        responsive: {
            0: {
                items: 1,
                stagePadding: 1,
            },
            480: {
                items: 1
            },
            600: {
                items: 2

            },
            1400: {
                items : 2
            },
        }
    });
</script>
<script>
    $('.about-our-product-slider').owlCarousel({
        loop:false,
        margin:10,
        nav:false,
        dots: false,
        responsive:{
            0:{
                items:1,
                autoplay:true
            },
            600:{
                loop:true,
                items:3,
                autoplay:true
            },
            1000:{
                items:5
            }
        }
    });
</script>
<script>
    $('.salon-inventory-services-slider').owlCarousel({
        loop:true,
        items: 1,
        margin:10,
        nav:true,
        mouseDrag: false,
        navText: ["< Prev","Next >"],
        dots: false
    });
</script>
<script>
    $('.bill-software-key-features-slider').owlCarousel({
        loop:true,
        margin:10,
        nav:true,
        dots:false,
        items:1,
        navText: ["<svg width=\"15\" height=\"13\" viewBox=\"0 0 15 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
        "<path d=\"M14.0938 6.09375C14.0938 6.65625 13.6562 7.09375 13.125 7.09375H3.53125L6.8125 10.4062C7.21875 10.7812 7.21875 11.4375 6.8125 11.8125C6.625 12 6.375 12.0938 6.125 12.0938C5.84375 12.0938 5.59375 12 5.40625 11.8125L0.40625 6.8125C0 6.4375 0 5.78125 0.40625 5.40625L5.40625 0.40625C5.78125 0 6.4375 0 6.8125 0.40625C7.21875 0.78125 7.21875 1.4375 6.8125 1.8125L3.53125 5.09375H13.125C13.6562 5.09375 14.0938 5.5625 14.0938 6.09375Z\" fill=\"white\"/>\n" +
        "</svg>\n","<svg width=\"15\" height=\"13\" viewBox=\"0 0 15 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
        "<path d=\"M13.6875 6.8125L8.6875 11.8125C8.5 12 8.25 12.0938 8 12.0938C7.71875 12.0938 7.46875 12 7.28125 11.8125C6.875 11.4375 6.875 10.7812 7.28125 10.4062L10.5625 7.09375H1C0.4375 7.09375 0 6.65625 0 6.09375C0 5.5625 0.4375 5.09375 1 5.09375H10.5625L7.28125 1.8125C6.875 1.4375 6.875 0.78125 7.28125 0.40625C7.65625 0 8.3125 0 8.6875 0.40625L13.6875 5.40625C14.0938 5.78125 14.0938 6.4375 13.6875 6.8125Z\" fill=\"white\"/>\n" +
        "</svg>\n"]

    });
     $('.portfolio-slider').owlCarousel({
        loop:false,
        margin:40,
        nav:false,
        dots:false,
        dotsData:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:2,
                margin:20
            },
            1000:{
                items:2
            }
        }
    });
</script>