<?php
/*
Template Name: Walmart WMS
*/

get_header('new');
?>
<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="636" height="490" class="img-fluid no-lazy" alt="<?php echo strip_tags(get_field('banner_heading')); ?>">
    </picture>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section about-our-product">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title"><?php echo get_field('certificates_title'); ?></h2>
        </div>
        <div class="logos-wrapper">
            <div class="owl-carousel owl-theme about-our-product-slider">
                <?php if (have_rows('certificates')): ?>
                    <?php while (have_rows('certificates')): the_row(); 
                        $image = get_sub_field('image');
                        if ($image): ?>
                            <div class="item">
                                <img src="<?php echo $image; ?>" alt="certificate" width="120" height="150" loading="lazy" class="img-fluid">
                            </div>
                        <?php endif; ?>
                    <?php endwhile; ?>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>


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

<?php
$section_title = get_field('walmart_benefits_section_title');
$highlight_text = get_field('walmart_benefits_highlight_text');
$description = get_field('walmart_benefits_description');
$benefits = get_field('walmart_benefits_list');
$cta_text = get_field('walmart_benefits_cta_text');
$cta_link = get_field('walmart_benefits_cta_link');
$image = get_field('walmart_benefits_image');
?>

<?php if ($section_title || $benefits): ?>
<section class="section benefits-of-walmart bg-white pt-0">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="text-cont">
                    <?php if ($section_title): ?>
                        <h2 class="section-title mb-4">
                            <?php echo $section_title; ?>
                            <?php if ($highlight_text): ?>
                                <span><?php echo esc_html($highlight_text); ?></span>
                            <?php endif; ?>
                        </h2>
                    <?php endif; ?>

                    <?php if ($description): ?>
                        <p class="section-content"><?php echo esc_html($description); ?></p>
                    <?php endif; ?>

                    <?php if ($benefits): ?>
                        <ul>
                            <?php foreach ($benefits as $item): ?>
                                <li>
                                    <div class="left"><?php echo esc_html($item['benefit_number']); ?></div>
                                    <div class="right">
                                        <h3><?php echo esc_html($item['benefit_title']); ?></h3>
                                        <p><?php echo esc_html($item['benefit_description']); ?></p>
                                    </div>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    <?php endif; ?>

                    <?php if ($cta_text && $cta_link): ?>
                        <a href="<?php echo esc_url($cta_link); ?>" class="primary animated-cta-btn">
                            <?php echo esc_html($cta_text); ?>
                        </a>
                    <?php endif; ?>
                </div>
            </div>

            <?php if ($image): ?>
            <div class="col-lg-6">
                <div class="img-cont">
                    <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" class="img-fluid" loading="lazy" width="636" height="638">
                </div>
            </div>
            <?php endif; ?>
        </div>
    </div>
</section>
<?php endif; ?>


<?php
$section_title = get_field('walmart_integration_section_title');
$highlight_text = get_field('walmart_integration_highlight_text');
$description = get_field('walmart_integration_description');
$table_headings = get_field('walmart_integration_table_headings');
$table_rows = get_field('walmart_integration_table_rows');
$cta_text = get_field('walmart_integration_cta_text');
$cta_link = get_field('walmart_integration_cta_link');
?>

<?php if ($section_title || $table_rows): ?>
<section class="section walmart-integration light-grey">
    <div class="container">
        <div class="text-cont text-center">
            <?php if ($section_title): ?>
                <h2 class="section-title mb-4">
                    <?php echo $section_title; ?>
                    <?php if ($highlight_text): ?>
                        <span><?php echo esc_html($highlight_text); ?></span>
                    <?php endif; ?>
                </h2>
            <?php endif; ?>

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

        <?php if ($table_rows): ?>
        <div class="table-responsive">
            <table class="table table-bordered">
                <?php if ($table_headings): ?>
                <thead>
                    <tr>
                        <?php foreach ($table_headings as $heading): ?>
                            <th><?php echo wp_kses_post(nl2br($heading['table_heading_text'])); ?></th>
                        <?php endforeach; ?>
                    </tr>
                </thead>
                <?php endif; ?>

                <tbody>
                    <?php foreach ($table_rows as $row): ?>
                        <tr>
                            <td><?php echo wp_kses_post(nl2br($row['table_feature_title'])); ?></td>
                            <td><?php echo wp_kses_post(nl2br($row['table_walmart_text'])); ?></td>
                            <td><?php echo wp_kses_post(nl2br($row['table_amazon_text'])); ?></td>
                            <td><?php echo wp_kses_post(nl2br($row['table_ebay_text'])); ?></td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
        <?php endif; ?>

        <?php if ($cta_text && $cta_link): ?>
            <div class="demo-btn-wrapper text-center">
                <a href="<?php echo esc_url($cta_link); ?>" class="primary animated-cta-btn mt-4">
                    <?php echo esc_html($cta_text); ?>
                </a>
            </div>
        <?php endif; ?>
    </div>
</section>
<?php endif; ?>


<?php
$section_title = get_field('walmart_warehouse_section_title');
$highlight_text = get_field('walmart_warehouse_highlight_text');
$description = get_field('walmart_warehouse_description');
$steps = get_field('walmart_warehouse_steps');
?>

<?php if ($section_title || $steps): ?>
<section class="section walmart-warehouse-management bg-white">
    <div class="container">
        <div class="text-cont text-center">
            <?php if ($section_title): ?>
                <h2 class="section-title mb-4">
                    <?php echo $section_title; ?>
                    <?php if ($highlight_text): ?>
                        <span><?php echo $highlight_text; ?></span>
                    <?php endif; ?>
                </h2>
            <?php endif; ?>

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

        <?php if ($steps): ?>
        <div class="responsive-tabs">
            <ul class="nav nav-tabs" role="tablist">
                <?php $i = 1; foreach ($steps as $index => $step): ?>
                    <li class="nav-item">
                        <a id="tab-<?php echo $i; ?>" href="#pos-<?php echo $i; ?>"
                           class="nav-link <?php echo $i === 1 ? 'active' : ''; ?>"
                           data-bs-toggle="tab" role="tab">
                            <span>Step</span> <?php echo esc_html($step['walmart_warehouse_step_number']); ?>
                        </a>
                    </li>
                <?php $i++; endforeach; ?>
            </ul>

            <div id="content" class="tab-content" role="tablist">
                <?php $i = 1; foreach ($steps as $step): ?>
                <div id="pos-<?php echo $i; ?>" class="card tab-pane fade <?php echo $i === 1 ? 'show active' : ''; ?>" role="tabpanel" aria-labelledby="tab-<?php echo $i; ?>">
                    <div class="card-header" role="tab" id="heading-<?php echo $i; ?>">
                        <h5 class="mb-0">
                            <a data-bs-toggle="collapse" href="#pos-collapse-<?php echo $i; ?>" aria-expanded="<?php echo $i === 1 ? 'true' : 'false'; ?>" aria-controls="collapse-<?php echo $i; ?>">
                                <span>Step</span> <?php echo esc_html($step['walmart_warehouse_step_number']); ?>
                            </a>
                        </h5>
                    </div>

                    <div id="pos-collapse-<?php echo $i; ?>" class="collapse <?php echo $i === 1 ? 'show' : ''; ?>" data-bs-parent="#content" role="tabpanel" aria-labelledby="heading-<?php echo $i; ?>">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-6">
                                    <?php if (!empty($step['walmart_warehouse_step_image'])): ?>
                                        <div class="img-content">
                                            <img src="<?php echo esc_url($step['walmart_warehouse_step_image']['url']); ?>"
                                                 alt="<?php echo esc_attr($step['walmart_warehouse_step_image']['alt']); ?>"
                                                 class="img-fluid">
                                        </div>
                                    <?php endif; ?>
                                </div>
                                <div class="col-lg-6">
                                    <div class="text-content">
                                        <div class="top-wrapper">
                                            <h3>
                                                <?php if (!empty($step['walmart_warehouse_step_icon'])): ?>
                                                    <?php echo $step['walmart_warehouse_step_icon']; ?>
                                                <?php endif; ?>
                                                <?php echo esc_html($step['walmart_warehouse_step_title']); ?>
                                            </h3>
                                        </div>
                                        <div class="bottom-wrapper">
                                            <p><?php echo esc_html($step['walmart_warehouse_step_description']); ?></p>
                                            <?php if ($step['walmart_warehouse_step_cta_text'] && $step['walmart_warehouse_step_cta_link']): ?>
                                                <a href="<?php echo esc_url($step['walmart_warehouse_step_cta_link']); ?>" class="primary animated-cta-btn">
                                                    <?php echo esc_html($step['walmart_warehouse_step_cta_text']); ?>
                                                </a>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <?php $i++; endforeach; ?>
            </div>
        </div>
        <?php endif; ?>
    </div>
</section>
<?php endif; ?>


<?php
$section_title = get_field('walmart_features_section_title');
$section_content = get_field('walmart_features_section_content');
$left_image = get_field('walmart_features_left_image');
$cards = get_field('walmart_features_cards');
$cta_text = get_field('walmart_features_cta_text');
$cta_link = get_field('walmart_features_cta_link');
?>

<?php if ($section_title || $cards): ?>
<section class="section walmart-features">
    <div class="container-fluid p-0">
        <div class="row">
            <?php if ($left_image): ?>
                <div class="col-xl-4 col-lg-12 order-xl-1 order-lg-2 order-md-2 order-sm-2 order-2">
                    <div class="img-cont">
                        <img src="<?php echo esc_url($left_image['url']); ?>" alt="<?php echo esc_attr($left_image['alt']); ?>" class="img-fluid">
                    </div>
                </div>
            <?php endif; ?>

            <div class="col-xl-8 col-lg-12 order-xl-2 order-lg-1 order-md-1 order-sm-1 order-1">
                <div class="container">
                    <div class="text-cont">
                        <?php if ($section_title): ?>
                            <h2 class="section-title mb-4"><?php echo wp_kses_post($section_title); ?></h2>
                        <?php endif; ?>

                        <?php if ($section_content): ?>
                            <p class="section-content"><?php echo esc_html($section_content); ?></p>
                        <?php endif; ?>

                        <?php if ($cards): ?>
                        <div class="row gy-4">
                            <?php foreach ($cards as $card): ?>
                                <div class="col-lg-6 col-md-6">
                                    <div class="flip-card">
                                        <div class="flip-card-inner">
                                            <div class="flip-card-front">
                                                <div class="svg-content">
                                                    <?php echo $card['walmart_features_card_icon']; ?>
                                                </div>
                                                <div class="text-content">
                                                    <h3><?php echo esc_html($card['walmart_features_card_title']); ?></h3>
                                                </div>
                                            </div>
                                            <div class="flip-card-back">
                                                <p><?php echo esc_html($card['walmart_features_card_description']); ?></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>

        <?php if ($cta_text): ?>
        <div class="demo-btn-wrapper text-center">
            <a href="<?php echo esc_url($cta_link ?: 'javascript:;'); ?>" class="primary animated-cta-btn mt-5">
                <?php echo esc_html($cta_text); ?>
            </a>
        </div>
        <?php endif; ?>
    </div>
</section>
<?php endif; ?>

<?php
$section_title = get_field('walmart_partnerships_section_title');
$section_content = get_field('walmart_partnerships_section_content');
$logo_rows = get_field('walmart_partnerships_logo_rows');
$cta_text = get_field('walmart_partnerships_cta_text');
$cta_link = get_field('walmart_partnerships_cta_link');
?>

<?php if ($section_title || $logo_rows): ?>
<section class="section powerful-partnerships walmart-wms-powerful-partnerships light-grey">
    <div class="container">
        <div class="text-cont text-center">
            <?php if ($section_title): ?>
                <h2 class="section-title mb-4"><?php echo wp_kses_post($section_title); ?></h2>
            <?php endif; ?>

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

    <?php if ($logo_rows): ?>
    <div class="container-fluid px-0">
        <div class="row">
            <div class="col-lg-12">
                <div class="logos-parent-wrapper">
                    <?php foreach ($logo_rows as $row_index => $row): ?>
                        <div class="logo-marquee">
                            <div class="marquee-content owl-partners <?php echo $row_index === 1 ? 'owl-partners-2' : ''; ?>">
                                <?php if (!empty($row['walmart_partnerships_logos'])): ?>
                                    <?php foreach ($row['walmart_partnerships_logos'] as $logo): ?>
                                        <?php $image = $logo['walmart_partnerships_logo_image']; ?>
                                        <?php if ($image): ?>
                                        <div class="item">
                                            <?php if (!empty($logo['walmart_partnerships_logo_link'])): ?>
                                                <a href="<?php echo esc_url($logo['walmart_partnerships_logo_link']); ?>">
                                                    <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" class="img-fluid" loading="lazy">
                                                </a>
                                            <?php else: ?>
                                                <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" class="img-fluid" loading="lazy">
                                            <?php endif; ?>
                                        </div>
                                        <?php endif; ?>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>

        <?php if ($cta_text): ?>
        <div class="demo-btn-wrapper text-center mt-4">
            <a href="<?php echo esc_url($cta_link ?: 'javascript:;'); ?>" class="primary animated-cta-btn">
                <?php echo esc_html($cta_text); ?>
            </a>
        </div>
        <?php endif; ?>
    </div>
    <?php endif; ?>
</section>
<?php endif; ?>



<!-- case studies start -->
<?php 
$portfolio = ['class' => 'bg-white pt-5'];
get_template_part('templates-parts/pages/case-studies',null,$portfolio);?>
<!-- case studies end -->

<!-- Faqs Start -->
<?php
    $args = [
        'category'  => 'walmart-wms',
        'heading'   => 'Frequently Asked <span>Questions</span>',
		'class'     => 'pt-0 bg-white',
    ];
    get_template_part('templates-parts/pages/faqs-new', null, $args);
?>
<!-- Faqs End -->


<section class="section dashboard-access-cta walmart-access-cta">
    <div class="container">
        <div class="box">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="img-cont slide-right">
                        <?php $cta_img = get_field('dashboard_access_cta_image'); ?>
                       <?php if ($cta_img): ?>
                            <img src="<?php echo $cta_img; ?>" 
                                 alt="CTA" 
                                 class="img-fluid" loading="lazy">
                        <?php endif; ?>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="text-cont slide-left">
                        <?php echo get_field('dashboard_access_cta_text'); ?>
                       <?php if (get_field('dashboard_access_cta_button_text') && get_field('dashboard_access_cta_button_url')): ?>
                        <a href="<?php echo get_field('dashboard_access_cta_button_url'); ?>" class="primary animated-cta-btn" ><?php echo get_field('dashboard_access_cta_button_text'); ?></a>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>



<script src="<?php echo get_template_directory_uri(); ?>/assets/js/owl.carousel.min.js"></script>
<?php
    get_footer();
?>
<script>
    $('.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
            }
        }
    });
    $('.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>
    // *********************************** Powerful Partnerships Logos Continious motion Animation Script Start ***********************************
    function createInfiniteScroll(containerSelector, speed, direction = "left") {
        const container = document.querySelector(containerSelector);
        const items = [...container.children];
        let animationFrameId = null;

        // Clone items to ensure infinite scroll
        items.forEach(item => {
            const clone = item.cloneNode(true);
            container.appendChild(clone);
        });

        // Calculate total width of items (including clones)
        let totalWidth = 0;
        [...container.children].forEach(item => {
            const style = window.getComputedStyle(item);
            const margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
            totalWidth += item.offsetWidth + margin;
        });

        container.style.width = `${totalWidth}px`;

        let offset = 0;
        const step = speed / 60;

        function scroll() {
            offset += direction === "left" ? -step : step;

            // Reset offset to loop seamlessly
            if (direction === "left" && Math.abs(offset) >= totalWidth / 2) {
                offset = 0;
            } else if (direction === "right" && offset >= 0) {
                offset = -totalWidth / 2;
            }

            container.style.transform = `translateX(${offset}px)`;
            animationFrameId = requestAnimationFrame(scroll);
        }

        scroll();

        // Pause on hover
        container.addEventListener("mouseenter", () => {
            if (animationFrameId) cancelAnimationFrame(animationFrameId);
        });

        container.addEventListener("mouseleave", () => {
            scroll();
        });
    }

    document.addEventListener("DOMContentLoaded", () => {
        createInfiniteScroll('.owl-partners', 50, "left");  // Scroll left
        createInfiniteScroll('.owl-partners-2', 50, "right"); // Scroll right
    });
    // *********************************** Powerful Partnerships Logos Continious motion Animation Script End ***********************************
</script>