<?php
/*
Template Name: Inventory Page
*/

get_header('new');
?>

<!-- Banner Section -->
<section class="section banner warehouse-management-soft-banner inventory-management-software-banner no-lazy">
    <div class="container">
        <div class="row mt-xl-5 mt-lg-0">
            <div class="col-lg-12">
                <div class="text-cont text-center mt-0">
                    <h1 class="banner-heading mb-4"><?php echo get_field('inv_new_banner_title');?></h1>
                    <p class="banner-content"><?php echo get_field('inv_new_banner_text');?></p>
                    <div class="banner-btns justify-content-center">
                        <a href="<?php echo esc_url(get_field('inv_new_banner_left_button')['url']);?>" class="primary animated-cta-btn"><?php echo get_field('inv_new_banner_left_button')['title'];?></a>
                        <a href="<?php echo esc_url(get_field('inv_new_banner_right_button')['url']);?>" class="border-gradient-btn animated-btn"><?php echo get_field('inv_new_banner_right_button')['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>
                    </div>
                </div>
            </div>
        </div>

        <div class="analytics-feature-wrapper">
            <div class="row gy-4 align-items-end">
                <div class="col-lg-6 col-xl-3 col-md-12">
                    <div class="realtime-analytics-wrapper">
                        <div class="client-worldwide">
                            <span class="d-block h3"><?php echo get_field('inv_banner_reviews_heading');?></span>
                            <p><?php echo get_field('inv_banner_reviews_text');?></p>
                            <ul>
                                <li>
                                    <img src="<?php echo get_field('inv_banner_reviews_image');?>" alt="Clients Worldwide" class="img-fluid no-lazy" loading="eager" width="164" height="56">
                                </li>
                            </ul>
                        </div>
                        <div class="inventory-management-bar">
                            <?php echo get_field('inv_banner_new_plus_title');?>
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <rect width="24" height="24" rx="12" fill="#5558A6"/>
                                <path d="M12.25 11.75V8H11.75V11.75H8V12.25H11.75V16H12.25V12.25H16V11.75H12.25Z"
                                      fill="white"/>
                            </svg>
                        </div>
                        <div class="stock-accuracy">
                            <div class="top-wrapper">
                                <span class="left">
                                    <?php echo get_field('inv_banner_stock_accuracy_icon');?>
                                </span>
                                <span class="right">
                                    <img src="<?php echo get_field('inv_banner_stock_accuracy_stars');?>" alt="stars" class="img-fluid no-lazy" loading="eager" width="144" height="49">
                                </span>
                            </div>
                            <div class="bottom-wrapper">
                                <span class="d-block h3"><?php echo get_field('inv_banner_stock_accuracy_heading');?></span>
                                <p><?php echo get_field('inv_banner_stock_accuracy_text');?></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 col-xl-6 col-md-12">
                    <div class="img-wrapper">
						<?php
	$desktop_img_url = get_field('inv_banner_center_image');
	$mobile_img_url  = get_field('inv_center_mobile_image');
?>
    <picture class="no-lazy">
        <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="636" height="358" class="img-fluid no-lazy">
    </picture>
                    </div>
                </div>
                <div class="col-lg-6 col-xl-3 col-md-12">
                    <div class="trusted-by-startups">
                        <div class="accurate-stock">
                            <?php echo get_field('inv_banner_accurate_stock_icon');?>
                            <span class="d-block h3"><?php echo get_field('inv_banner_accurate_stock_heading');?></span>
                            <p><?php echo get_field('inv_banner_accurate_stock_text');?></p>
                            <a href="<?php echo esc_url(get_field('inv_banner_accurate_button')['url']);?>"><?php echo get_field('inv_banner_accurate_button')['title'];?></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Banner Section End -->



<!-- Certificates Section Start -->
<?php get_template_part('templates-parts/pages/certificates'); ?>
<!-- Certificates Section End -->

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


<section class="section inventory-management-features bg-white pt-lg-5">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title"><?php echo get_field('peom__section_title');?></h2>
            <p class="section-content"><?php echo get_field('peom__section_text');?></p>
        </div>
        <?php if( have_rows('peom__cards_repeater') ): ?>
        <div class="row gy-4">
            <?php while( have_rows('peom__cards_repeater') ): the_row(); ?>
            <div class="col-lg-4 col-md-6">
                <div class="card">
                    <div class="svg-content">
                        <?php echo get_sub_field('peom__cards_icon');?>
                    </div>
                    <div class="text-content">
                        <h3><?php echo get_sub_field('peom__cards_title');?></h3>
                        <p><?php echo get_sub_field('peom__cards_text');?></p>
                    </div>
                </div>
            </div>
            <?php endwhile; ?>
        </div>
        <?php endif; ?>
        <?php if( get_field('peom__section_button') ): ?>
        <div class="text-center mt-5">
            <a href="<?php echo esc_url(get_field('peom__section_button')['url'])?>" class="primary animated-cta-btn"><?php echo get_field('peom__section_button')['title']?></a>
        </div>
        <?php endif; ?>
    </div>
</section>


<?php $indust = [
    'category' => 'inventory-management',
    'class' => 'bg-white pt-lg-5'
]; 
get_template_part('templates-parts/pages/industry-tracking',null,$indust); ?>


<section class="section top-inventory-management-system light-grey">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title"><?php echo get_field('web_bim_section_title');?></h2>
            <p class="section-content"><?php echo get_field('web_bim_section_text');?></p>
        </div>

        <!-- Tabs Start Here -->
        <div class=" responsive-tabs">
            <div class="row align-items-center">
                <?php if( have_rows('web_bim_accordions_repeater') ): ?>
                <div class="col-lg-2">
                    <ul class="nav nav-tabs" role="tablist">
                    <?php $acc = 1; while( have_rows('web_bim_accordions_repeater') ): the_row(); ?>
                        <li class="nav-item" role="presentation">
                            <a id="tab-AA-<?php echo $acc;?>" href="#pos-AA-<?php echo $acc;?>" class="nav-link <?php echo $acc == 1 ? 'active' : ''?>" data-bs-toggle="tab" role="tab">
                                <?php echo $acc < 10 ? '0' . $acc : $acc;?>
                            </a>
                        </li>
                        <?php $acc++; endwhile; ?>
                    </ul>
                </div>
                <?php endif; ?>

                <?php if( have_rows('web_bim_accordions_repeater') ): ?>
                <div class="col-lg-10">
                    <div id="content" class="tab-content">
                    <?php $accc = 1; while( have_rows('web_bim_accordions_repeater') ): the_row(); ?>
                        <div id="pos-AA-<?php echo $accc;?>" class="card tab-pane fade <?php echo $accc == 1 ? 'show active' : ''?>" role="tabpanel" aria-labelledby="tab-AA-<?php echo $accc;?>">
                            <div class="card-header" role="tab" id="heading-AA-<?php echo $accc;?>">
                                <div class="mb-0">
                                    <a data-bs-toggle="collapse" href="#pos-collapse-AA-<?php echo $accc;?>" aria-expanded="<?php echo $accc == 1 ? 'true' : 'false'?>" aria-controls="collapse-AA-<?php echo $accc;?>">
                                        <?php echo $accc < 10 ? '0' . $accc : $accc;?>
                                    </a>
                                </div>
                            </div>
                            <div id="pos-collapse-AA-<?php echo $accc;?>" class="collapse <?php echo $accc == 1 ? 'show' : ''?>" data-bs-parent="#content" role="tabpanel"
                                 aria-labelledby="heading-AA-<?php echo $accc;?>">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-lg-6">
                                            <div class="text-content">
                                                <h3><?php echo get_sub_field('web_bim_accordions_title');?></h3>
                                                <p>
                                                    <?php echo get_sub_field('web_bim_accordions_text');?>
                                                </p>
                                                <a href="<?php echo esc_url(get_sub_field('web_bim_accordions_button')['url']);?>" class="primary animated-cta-btn"><?php echo get_sub_field('web_bim_accordions_button')['title'];?></a>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="img-content">
                                                <img src="<?php echo get_sub_field('web_bim_accordions_image');?>" alt="tab" class="img-fluid">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php $accc++; endwhile; ?>

                    </div>
                </div>
                <?php endif; ?>
            </div>
        </div>
        <!-- Tabs END Here -->
    </div>
</section>

<section class="section cloud-based-inventory-management bg-white">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title"><?php echo get_field('stacks_inven_table_section_title');?></h2>
            <p class="section-content"><?php echo get_field('stacks_inven_table_section_text');?></p>
        </div>
        <?php if (have_rows('stacks_inven_table')): ?>
            <div class="table-responsive">
                <table class="table">
                    <?php $rowIndex = 0; ?>

                    <?php while (have_rows('stacks_inven_table')): the_row(); ?>

                        <?php
                            $col1 = get_sub_field('stacks_inven_table_col1');
                            $col2 = get_sub_field('stacks_inven_table_col2');
                            $col3 = get_sub_field('stacks_inven_table_col3');
                            $col4 = get_sub_field('stacks_inven_table_col4');
                        ?>

                        <?php if ($rowIndex === 0): ?>
                            <!-- TABLE HEAD -->
                            <thead>
                                <tr>
                                    <th><?php echo $col1; ?></th>
                                    <th><?php echo $col2; ?></th>
                                    <th><?php echo $col3; ?></th>
                                    <th><?php echo $col4; ?></th>
                                </tr>
                            </thead>
                            <tbody>

                        <?php else: ?>
                            <!-- TABLE BODY -->
                            <tr>
                                <td><?php echo $col1; ?></td>
                                <td><?php echo $col2; ?></td>
                                <td><?php echo $col3; ?></td>
                                <td><?php echo $col4; ?></td>
                            </tr>
                        <?php endif; ?>

                        <?php $rowIndex++; endwhile; ?>

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

        <?php if( get_field('stacks_inven_table_section_button') ): ?>
        <div class="req-demo-btn-wrapper mt-3 mt-xl-5 text-center">
            <a href="<?php echo esc_url(get_field('stacks_inven_table_button')['url']);?>" class="primary animated-cta-btn"><?php echo get_field('stacks_inven_table_section_button')['title'];?></a>
        </div>
        <?php endif; ?>
    </div>
</section>


<!-- CASE STUDIES SECTION -->
<section class="section case-section py-5 light-grey">
    <div class="container">
        <!-- Heading -->
        <div class="text-center mb-lg-5 mb-3">
            <h2 class="section-title mb-3">
                <?php echo get_field('case_studies_new__section_title');?>
            </h2>
            <p class="section-content">
            <?php echo get_field('case_studies_new__section_text');?>
            </p>
        </div>
    </div>

    <?php if( have_rows('case_studies_slider__new') ): ?>
    <div class="owl-carousel case-slilder">
    <?php while( have_rows('case_studies_slider__new') ): the_row();?>
        <div class="item">
            <div class="inner">
                <img src="<?php echo get_sub_field('case_studies_new__client_company_image');?>" alt="">
                <div class="text-box">
                    <h3 class="client-comp hidden-text"><?php echo get_sub_field('case_studies_new__client_quote_heading');?></h3>
                    <p class="client-quote hidden-text"><?php echo get_sub_field('case_studies_new__client_quote');?></p>
                    <h4 class="client-name hidden-text"><?php echo get_sub_field('case_studies_new__client_name');?></h4>
                    <h5 class="client-designation hidden-text"><?php echo get_sub_field('case_studies_new__client_designation');?></h5>
                    <h6 class="comp-name"><?php echo get_sub_field('case_studies_new__client_company_name');?></h6>
                </div>
            </div>
        </div>
        <?php endwhile; ?>
    </div>
    <?php endif; ?>
    <?php if( get_field('case_studies_new__section_button') ): ?>
    <div class="req-demo-btn-wrapper mt-3 text-center">
        <a href="<?php echo esc_url(get_field('case_studies_new__section_button')['url']);?>" class="primary animated-cta-btn"><?php echo get_field('case_studies_new__section_button')['title'];?></a>
    </div>
    <?php endif; ?>
</section>
<!-- CASE STUDIES SECTION -->


<!-- pricing section start -->
<?php 
$pricing = [
    'class' => 'supply-chain-pricing-cards pt-5',
    'headingcon' => 'h2',
];
get_template_part('templates-parts/pages/pricing',null,$pricing)?>
<!-- pricing section end -->



<section class="section invemtory-management-software-cta bg-white pb-4">
    <div class="container">
        <div class="box">
            <h2><?php echo get_field('free_demo_cta_heading');?></h2>
            <p>
                <?php echo get_field('free_demo_cta_text');?>
            </p>
            <a href="<?php echo get_field('free_demo_cta_link');?>" class="primary animated-cta-btn"><?php echo get_field('free_demo_cta_button_text');?></a>
        </div>
    </div>
</section>

<?php
    $args = [
        'category'  => 'inventory-management',
        'class'  => 'pt-5',
    ];
    get_template_part('templates-parts/pages/faqs-new', null, $args);
?>


<?php get_footer(); ?>

<!-- <script src="<?php // echo get_template_directory_uri();?>/assets/js/food-beverage-section.js"></script> -->

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


<script>
    // industries slider with merge option
    $(function () {
    var $owl = $('.tracking-serves-industries-slider');

    function applyMergeAttrs() {

        if (window.innerWidth < 1200) {
            $owl.find('.owl-item .item').removeAttr('data-merge');
            return;
        }

        var $allItems = $owl.find('.owl-item .item');
        $allItems.attr('data-merge', '1');

        var $centerItem = $owl.find('.owl-item.center .item');
        if ($centerItem.length) {
            $centerItem.attr('data-merge', '3');
        }
    }

    $owl.on('initialized.owl.carousel translated.owl.carousel', applyMergeAttrs);

    $owl.owlCarousel({
        loop: false,
        // autoplay:true,
        center: true,
        margin: 20,
        nav: true,
        dots: false,
        items: 3,
        startPosition:1,
        navText: ['<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg"><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"/></svg>', '<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m13.688 6.813-5 5a.97.97 0 0 1-.688.28 1 1 0 0 1-.719-.28.964.964 0 0 1 0-1.407l3.282-3.312H1c-.562 0-1-.438-1-1 0-.532.438-1 1-1h9.563L7.28 1.812a.964.964 0 0 1 0-1.406.964.964 0 0 1 1.407 0l5 5a.964.964 0 0 1 0 1.407" fill="#fff"/></svg>'],

        responsive: {
            0: {
                items: 1,
                merge: false,
            },
            600: {
                items: 1,
                merge: false
            },
            1200: {
                items: 3,
                merge: true,  
                mergeFit: false
            }
        }
    });
});
</script>

<script>
    // case study slider with merge option
    $(function () {
    var $owl = $('.case-slilder');

    function applyMergeAttrs() {

        if (window.innerWidth < 1200) {
            $owl.find('.owl-item .item').removeAttr('data-merge');
            return;
        }

        var $allItems = $owl.find('.owl-item .item');
        $allItems.attr('data-merge', '1');

        var $centerItem = $owl.find('.owl-item.center .item');
        if ($centerItem.length) {
            $centerItem.attr('data-merge', '3');
        }
    }

    $owl.on('initialized.owl.carousel translated.owl.carousel', applyMergeAttrs);

    $owl.owlCarousel({
        loop: true,
        center: true,
        margin: 20,
        nav: true,
        dots: false,
        items: 3,
        navText: ['<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg"><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"/></svg>', '<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m13.688 6.813-5 5a.97.97 0 0 1-.688.28 1 1 0 0 1-.719-.28.964.964 0 0 1 0-1.407l3.282-3.312H1c-.562 0-1-.438-1-1 0-.532.438-1 1-1h9.563L7.28 1.812a.964.964 0 0 1 0-1.406.964.964 0 0 1 1.407 0l5 5a.964.964 0 0 1 0 1.407" fill="#fff"/></svg>'],

        responsive: {
            0: {
                items: 1,
                merge: false
            },
            600: {
                items: 1,
                merge: false
            },
            1200: {
                items: 3,
                merge: true,  
                mergeFit: false
            }
        }
    });
});
</script>
