<?php
/*
Template Name: shopify Integration
*/

get_header('new');
?>
<section class="section banner supply-chain-banner no-lazy">
    <div class="container">
        <div class="row mt-xl-5 mt-lg-0">
            <div class="col-lg-6">
                <div class="text-cont slide-right 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" style="min-height:300px;">
                <div class="img-cont slide-left">
					<?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="480" 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>


<section class="section amazon-warehouse-management shopify-warehouse-management">
    <div class="container">
        <div class="amazon-warehouse-content-wrapper">
            <div class="row gy-3 gy-lg-4 flex-column-reverse flex-lg-row">
                <div class="col-lg-6">
                    <div class="text-cont">
                        <h2 class="section-title"><?php echo get_field('features_understanding_section_heading'); ?></h2>
                        <p class="section-content">
                            <?php echo get_field('features_understanding_section_text'); ?>
                        </p>
                        <a href="<?php echo get_field('features_understanding_section_button_link'); ?>" class="primary animated-cta-btn"><?php echo get_field('features_understanding_section_button_text'); ?></a>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="img-cont">
                        <?php 
                        $awm_img = get_field('features_understanding_section_image'); 
                        if ($awm_img): ?>
                            <img src="<?php echo $awm_img; ?>" 
                                 alt="<?php echo $awm_img; ?>" 
                                 loading="lazy" class="img-fluid" width="636" height="445">
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section shopify-integration-cta">
    <div class="container">
        <div class="box">
            <p>
                <?php echo get_field('shopify_cta_text'); ?>
            </p>
            <?php if (get_field('shopify_cta_btn_label') && get_field('shopify_cta_btn_link')) : ?>
                <a href="<?php echo get_field('shopify_cta_btn_link'); ?>" class="primary animated-cta-btn">
                    <?php echo get_field('shopify_cta_btn_label'); ?>
                </a>
            <?php endif; ?>
        </div>
    </div>
</section>

<section class="section supply-chain-software-features shopify-software-features">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title mb-4">
                <?php echo get_field('shopify_features_heading'); ?>
            </h2>
            <p class="section-content">
                <?php echo get_field('shopify_features_description'); ?>
            </p>
        </div>

        <?php if (have_rows('shopify_features_repeater')) : ?>
            <div class="row justify-content-center">
                <?php while (have_rows('shopify_features_repeater')) : the_row(); ?>
                    <div class="col-lg-4 col-md-6">
                        <div class="card">
                            <div class="svg-cont">
                                <?php echo get_sub_field('feature_icon'); ?>
                            </div>
                            <div class="text-content">
                                <h3><?php echo get_sub_field('feature_title'); ?></h3>
                            </div>
                        </div>
                    </div>
                <?php endwhile; ?>
            </div>
        <?php endif; ?>

        <div class="text-center">
            <?php if (get_field('shopify_features_btn_text') && get_field('shopify_features_btn_link')) : ?>
                <a href="<?php echo get_field('shopify_features_btn_link'); ?>" class="primary animated-cta-btn">
                    <?php echo get_field('shopify_features_btn_text'); ?>
                </a>
            <?php endif; ?>
        </div>
    </div>
</section>

<section class="section wms-integration-for-shopify">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title mb-4">
                <?php echo get_field('wms_shopify_section_heading'); ?>
            </h2>
            <p class="section-content">
                <?php echo get_field('wms_shopify_section_description'); ?>
            </p>
        </div>

        <?php if (have_rows('wms_shopify_steps')) : ?>
            <ul>
                <?php while (have_rows('wms_shopify_steps')) : the_row(); ?>
                    <li>
                        <div class="number-cont">
                            <span><?php echo get_sub_field('wms_shopify_step_number'); ?></span>
                        </div>
                        <div class="text-content">
                            <h3><?php echo get_sub_field('wms_shopify_step_title'); ?></h3>
                            <p><?php echo get_sub_field('wms_shopify_step_description'); ?></p>
                        </div>
                    </li>
                <?php endwhile; ?>
            </ul>
        <?php endif; ?>
    </div>
</section>

<!-- 100% Optimized WMS With 50+ Integrations Starts -->
<?php  get_template_part('templates-parts/pages/optimized-integrations');?>
<!-- 100% Optimized WMS With 50+ Integrations Ends -->
<section class="section real-feedbacks">
    <div class="container">
        <div class="text-cont slide-down mb-3">
            <h2 class="section-title text-center"><?php echo get_field('real_feedbacks_section_heading');?></h2>
        </div>

        <?php if( have_rows('real_feedbacks_carousel') ): 
        $i=1;    
        ?>
        <div class="owl-carousel owl-theme real-feedback-slider slide-up mt-5">
        <?php while( have_rows('real_feedbacks_carousel') ): the_row(); ?>
            <div class="item <?php echo $i == 2 ? 'mt-md-5' : '';?>">
                <div class="feebacks-wrapper">
                    <div class="card">
                        <div class="card-header">
                            <div class="img-content">
                                <img src="<?php echo get_sub_field('real_feedbacks_logo'); ?>" class="img-fluid" alt="oaks-img" loading="lazy" >
                            </div>
                        </div>
                        <div class="card-body">
                            <h2 class="feedback-title"><?php echo get_sub_field('real_feedbacks_title'); ?></h2>

                            <a href="<?php echo get_sub_field('real_feedbacks_link'); ?>" class="read-case">Read the Case Study
                                <svg class="ms-1" width="15" height="18" viewBox="0 0 15 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m11.078 0 .832.485c.019.045.047.09.07.134.174.344.25.738.346 1.113l.41 1.588 1.08 4.171.56 2.163c.182.707.524 1.443-.045 2.06-.22.236-.525.374-.847.385-1.196.053-1.31-1.202-1.534-2.066l-.79-3.065c-.13-.5-.252-1.014-.398-1.504a.457.457 0 0 0-.834-.117c-.21.33-.406.668-.604 1.003L8.1 8.413l-4.042 6.825-.777 1.31c-.16.27-.313.58-.52.816a1.2 1.2 0 0 1-.835.412c-.333.018-.685-.143-.93-.364a1.15 1.15 0 0 1-.336-1.047c.098-.433 1.22-2.203 1.524-2.715l3.767-6.356L7.18 5.22c.198-.336.407-.665.597-1.007.162-.29.154-.566-.163-.73a.4.4 0 0 0-.185-.044c-.42.057-.844.186-1.257.293l-3.307.857c-.301.078-1.293.356-1.565.375a1.2 1.2 0 0 1-.887-.3A1.2 1.2 0 0 1 0 3.816c-.026-.51.334-1.049.833-1.197.525-.155 1.07-.287 1.6-.426l3.192-.836 3.27-.86C9.501.338 10.501.029 11.077 0" fill="#000"/></svg>                              
                            </a>

                            <div class="divider"></div>

                            <div class="brand-feedback">
                                <p><?php echo get_sub_field('real_feedbacks_text'); ?></p>
                                <div class="owner-name">
                                    <h3><?php echo get_sub_field('real_feedbacks_owner_name'); ?></h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <?php $i++;?>
            <?php endwhile; ?>
        </div>
        <?php endif; ?>
</section>

<?php
$cta_text = get_field('dashboard_access_cta_text');
$btn_text = get_field('dashboard_access_cta_button_text');
$btn_url  = get_field('dashboard_access_cta_button_url');
$cta_img  = get_field('dashboard_access_cta_image');

$img_url = '';
$img_alt = '';

if (is_array($cta_img)) {
  $img_url = $cta_img['url'] ?? '';
  $img_alt = $cta_img['alt'] ?? '';
} elseif (is_numeric($cta_img)) {
  // IMPORTANT: handle numeric-string like "4505" too
  $img_id  = (int) $cta_img;
  $img_url = wp_get_attachment_url($img_id);
  $img_alt = get_post_meta($img_id, '_wp_attachment_image_alt', true);
} elseif (is_string($cta_img)) {
  // real URL string
  $img_url = $cta_img;
}

if (!empty(trim((string)$cta_text))) : ?>
<section class="section dashboard-access-cta wms-business-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 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-cont slide-left">
            <p><?php echo wp_kses_post($cta_text); ?></p>

            <?php if (!empty($btn_text) && !empty($btn_url)): ?>
              <a href="<?php echo esc_url($btn_url); ?>" class="primary animated-cta-btn">
                <?php echo esc_html($btn_text); ?>
              </a>
            <?php endif; ?>

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

<!--start----->


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

<script src="<?php echo get_template_directory_uri(); ?>/assets/js/owl.carousel.min.js"></script>
<?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
            }
        }
    });


    // Inventory accuracy rate Card animation Script Start ************
    const card = document.querySelector('.improve-warehouse-card');

    card.addEventListener('mouseenter', () => {
        gsap.to('.order-picking-wrapper ul', {
            bottom: '85px',
            duration: 0.7,
            ease: 'power2.out',
        });
    });

    card.addEventListener('mouseleave', () => {
        gsap.to('.order-picking-wrapper ul', {
            bottom: '0px',
            duration: 0.7,
            ease: 'power2.out',
        });
    });
    // Inventory accuracy rate Card animation Script End ************


    // data accuracy Card animation Script Start ************
    const uniqueness_wrapper = document.querySelector('.data-accuracy-integrity');

    uniqueness_wrapper.addEventListener('mouseenter', () => {

        gsap.to('.timeliness', {
            top: '80px',
            right: '45px',
            rotation: -12,
            duration: 0.5,
            ease: 'power2.out',
        });

        gsap.to('.consistency', {
            top: '60px',
            left: '20px',
            rotation: 5,
            duration: 0.5,
            ease: 'power2.out',
        });

        gsap.to('.validity', {
            top: '40px',
            right: '20px',
            rotation: -8,
            duration: 0.5,
            ease: 'power2.out',
        });

        gsap.to('.uniqueness', {
            scale: 1.3,
            rotation: 3,
            duration: 0.5,
            ease: 'power2.out',
        });

        gsap.to('.completeness', {
            top: '25px',
            left: '35px',
            rotation: 15,
            duration: 0.5,
            ease: 'power2.out',
        });
    });

    uniqueness_wrapper.addEventListener('mouseleave', () => {
        gsap.to('.timeliness', {
            top: '70px',
            right: '35px',
            rotation: -7.41,
            duration: 0.5,
            ease: 'power2.out',
        });

        gsap.to('.consistency', {
            top: '68px',
            left: '12px',
            rotation: -7.41,
            duration: 0.5,
            ease: 'power2.out',
        });

        gsap.to('.validity', {
            top: '35px',
            right: '12px',
            rotation: 10.37,
            duration: 0.5,
            ease: 'power2.out',
        });

        gsap.to('.uniqueness', {
            scale: 1,
            rotation: -0.17,
            duration: 0.5,
            ease: 'power2.out',
        });

        gsap.to('.completeness', {
            top: '28px',
            left: '30px',
            rotation: 10.37,
            duration: 0.5,
            ease: 'power2.out',
        });
    });
    // data accuracy Card animation Script End ************


    // message card animation Script Start ************
    const cardWrapper = document.querySelector('.multiwarehouse-card');

    cardWrapper.addEventListener('mouseenter', () => {
        gsap.to('.message', {
            top: '20px',
            left: '25%',
            opacity: 1,
            duration: 0.5,
            scale: 1.8,
            ease: 'power2.out',
        });

        gsap.to('.message-two', {
            top: '30px',
            left: '25%',
            opacity: 1,
            duration: 0.5,
            scale: 1.8,
            ease: 'power2.out',
            delay: 0.5,
        });
    });

    cardWrapper.addEventListener('mouseleave', () => {
        gsap.to('.message', {
            top: '-100px',
            opacity: 0,
            duration: 0.5,
            ease: 'power2.in',
        });

        gsap.to('.message-two', {
            top: '-120px',
            opacity: 0,
            duration: 0.5,
            ease: 'power2.in',
            delay: 0.2,
        });
    });
    // message card animation Script End ************


    // Elipse Chart Image card animation Script Start ************
    const handLineImg = document.querySelector('.hand-line-img');

    document.querySelector('.advanced-reporting').addEventListener('mouseenter', () => {
        gsap.to(handLineImg, {
            left : "73%",
            bottom : "53%" ,
            scale: 1,
            duration: 0.6,
            ease: 'power2.out'
        });
    });

    document.querySelector('.advanced-reporting').addEventListener('mouseleave', () => {
        gsap.to(handLineImg, {
            bottom: "40%",
            left: "34%",
            scale: 1,
            duration: 0.5,
            ease: 'power2.in'
        });
    });
    // Elipse Chart Image card animation Script Start ************


    // Order Pick Accuracy Card Aniation Start ************
    const parentCard = document.querySelector('.order-picking-parent');

    parentCard.addEventListener('mouseenter', () => {
        gsap.timeline()
            .to('.order-picking-cards li:nth-child(1)', {
                x: 10,
                y: -5,
                left : 0 ,
                rotation: 0,
                duration: 0.3,
                ease: 'power2.out',
            })
            .to('.order-picking-cards li:nth-child(2)', {
                x: 20,
                y: -20,
                left : 20 ,
                rotation: 0,
                duration: 0.3,
                ease: 'power2.out',
            }, "-=0.2")
            .to('.order-picking-cards li:nth-child(3)', {
                x: 30,
                y: -30,
                left : 40 ,
                rotation: 0,
                duration: 0.3,
                ease: 'power2.out',
            }, "-=0.2");
    });

    parentCard.addEventListener('mouseleave', () => {
        gsap.timeline()
            .to('.order-picking-cards li:nth-child(1)', {
                x: 0,
                y: 0,
                left: 75 ,
                rotation: -12.42,
                duration: 0.3,
                ease: 'power2.in',
            })
            .to('.order-picking-cards li:nth-child(2)', {
                x: 0,
                y: 0,
                left: 116 ,
                rotation: -12.42,
                duration: 0.3,
                ease: 'power2.in',
            }, "-=0.2")
            .to('.order-picking-cards li:nth-child(3)', {
                x: 0,
                y: 0,
                left: 182 ,
                rotation: -12.42,
                duration: 0.3,
                ease: 'power2.in',
            }, "-=0.2");
    });
    // Order Pick Accuracy Card Aniation End ************


    // Real time visibility card ainimation start ************
    const visibilityCard = document.querySelector('.real-time-visibility-wrapper');

    visibilityCard.addEventListener('mouseenter', () => {
        gsap.to('.hand-line', {
            left : "76%" ,
            duration: 0.8,
            ease: 'power2.out',
        });
    });

    visibilityCard.addEventListener('mouseleave', () => {

        gsap.to('.hand-line', {
            left : "12%" ,
            duration: 0.8,
            ease: 'power2.out',
        });
    });
    // Real time visibility card ainimation End ************

</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>
    // *********************** Optimized Warehouse Gsap Animation Start ***********************
    gsap.registerPlugin();

    function startCircularScroll(wrapper, scrollSpeed) {
        const originalContent = wrapper.innerHTML;
        wrapper.innerHTML += originalContent;

        const totalHeight = wrapper.scrollHeight / 2;

        const duration = totalHeight / scrollSpeed;

        gsap.to(wrapper, {
            y: `-${totalHeight}px`,
            duration: duration,
            ease: "linear",
            repeat: -1,
        });
    }

    const firstSlideWrapper = document.querySelector('.first-slide-wrapper');
    const thirdSlideWrapper = document.querySelector('.third-slide-wrapper');

    if (firstSlideWrapper) {
        startCircularScroll(firstSlideWrapper, 30);
    }
    if (thirdSlideWrapper) {
        startCircularScroll(thirdSlideWrapper, 30);
    }


    const secondSlideWrapper = document.querySelector('.second-slide-wrapper');

    function startSeamlessTopToBottomScroll(wrapper, scrollSpeed) {

        const duplicate = wrapper.innerHTML;
        wrapper.innerHTML += duplicate;

        const totalHeight = wrapper.scrollHeight / 2;

        const duration = totalHeight / scrollSpeed;

        gsap.fromTo(
            wrapper,
            { y: `-${totalHeight}px` },
            {
                y: 0,
                duration: duration,
                ease: "linear",
                repeat: -1,
            }
        );
    }

    if (secondSlideWrapper) {
        startSeamlessTopToBottomScroll(secondSlideWrapper, 30);
    }
    // *********************** Optimized Warehouse Gsap Animation End ***********************
</script>