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

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 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']; ?></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>

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


<section class="section premier-ebay-management bg-white">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title mb-4"><?php echo get_field('peom__section_title'); ?></h2>
            <p class="section-content"><?php echo get_field('peom__section_text'); ?></p>
        </div>

        <div class="premier-ebay-card-wrapper">
            <?php if( have_rows('peom__cards_repeater') ): ?>
            <div class="row gy-4">
                <?php $a = 1; while( have_rows('peom__cards_repeater') ): the_row(); ?>
                <div class="col-lg-4">
                    <div class="premier-ebay-card" data-index="<?php echo $a;?>">
                        <div class="premier-card-header">
                            <div class="card-number"><?php echo $a < 10 ? '0' . $a : $a; ?></div>

                            <div class="svg-wrapper">
                                <?php echo get_sub_field('peom__cards_icon'); ?>
                            </div>
                        </div>

                        <h2 class="ebay-card-title">
                            <?php echo get_sub_field('peom__cards_title'); ?>
                        </h2>

                        <p class="ebay-card-content">
                            <?php echo get_sub_field('peom__cards_text'); ?>
                        </p>
                    </div>

                    <div class="img-wrapper d-block d-lg-none">
                        <img src="<?php echo get_sub_field('peom__cards_image'); ?>" alt="<?php echo wp_strip_all_tags(get_sub_field('peom__cards_title')); ?>" class="img-fluid" loading="lazy">
                    </div>
                </div>
                <?php $a++; endwhile; ?>
            </div>
            <?php endif; ?>

            <?php if( have_rows('peom__cards_repeater') ): ?>
            <div class="ebay-images-wrapper d-lg-block">
                <?php $b = 1; while( have_rows('peom__cards_repeater') ): the_row(); ?>
                <img src="<?php echo get_sub_field('peom__cards_image'); ?>" alt="<?php echo wp_strip_all_tags(get_sub_field('peom__cards_title')); ?>" class="img-fluid" data-img="<?php echo $b;?>" loading="lazy">
                <?php $b++; endwhile; ?>
            </div>
            <?php endif; ?>
        </div>
        <?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>


<!-- How Ebay integrations Works Section Start -->
<section  class="section how-ebay-integration-works bg-white">
    <div class="container">
        <div class="text-cont">
            <h2 class="section-title text-center"><?php echo get_field('ebay_integration_process_section_title');?></h2>
            <p class="section-content text-center"><?php echo get_field('ebay_integration_process_section_text');?></p>
        </div>

        <?php if( have_rows('ebay_integration_process') ): ?>
        <div class="ebay-integration-steps-wrapper">
        <?php $c=1; while( have_rows('ebay_integration_process') ): the_row(); ?>
            <div class="row step-item gy-2 align-items-center mb-4 mb-lg-5 <?php echo ($c % 2 == 0) ? 'flex-column-reverse flex-lg-row-reverse' : 'flex-column-reverse flex-lg-row';?>">
                <div class="col-lg-5">
                    <div class="ebay-card-content">
                        <h2 class="how-ebay-card-title"><?php echo get_sub_field('ebay_integration_process_title');?></h2>
                        <p class="how-ebay-card-content"><?php echo get_sub_field('ebay_integration_process_text');?></p>
                    </div>
                </div>
                <div class="col-lg-2">
                    <div class="numbering">
                        <?php echo $c < 10 ? '0' . $c : $c;?>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="img-wrapper">
                        <img src="<?php echo get_sub_field('ebay_integration_process_image');?>" alt="<?php echo wp_strip_all_tags(get_sub_field('ebay_integration_process_title'));?>" class="img-fluid" loading="lazy">
                    </div>
                </div>
            </div>
        <?php $c++; endwhile; ?>
        </div>
        <?php endif; ?>
    </div>
</section>
<!-- How Ebay integrations Works Section End -->


<section class="section warego-right-choice-cta">
    <div class="container">
        <div class="col-lg-12">
            <h2 class="section-title text-white text-center"><?php echo get_field('free_demo_cta_heading');?></h2>

            <p class="section-subtitle text-center"><?php echo get_field('free_demo_cta_text');?></p>

            <div class="text-center">
                <a href="<?php echo esc_url(get_field('free_demo_cta_link'));?>" class="primary animated-cta-btn"><?php echo get_field('free_demo_cta_button_text');?></a>
            </div>
        </div>
    </div>
</section>


<section class="section apparel-inventory-management-system ebay-wms-integration">
    <div class="container">
        <div class="text-center text-cont">
            <h2 class="section-title mb-5"><?php echo get_field('system_heading'); ?></h2>
            <p class="section-content"><?php echo get_field('system_description'); ?></p>
        </div>
        <div class="row gy-4">
            <?php $highlights = get_field('system_highlights'); ?>
            <?php if ($highlights && is_array($highlights)) : ?>
                <?php foreach ($highlights as $highlight) : ?>
                    <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 echo $highlight['icon']; ?>
                                    </div>
                                    <div class="text-content">
                                        <h3><?php echo $highlight['heading']; ?></h3>
                                        <a href="<?php echo $highlight['link']; ?>" <?php echo is_modal_link($highlight['link']); ?>>
                                            <svg width="21" height="19" viewBox="0 0 21 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M0.736653 10.0039C0.720373 9.45187 1.1547 8.99115 1.70674 8.97487L17.2858 8.51543L10.8101 2.41077C10.4082 2.03193 10.3896 1.39904 10.7684 0.997176C11.1472 0.59531 11.7801 0.576645 12.182 0.955488L20.4144 8.71619C20.8162 9.09503 20.8349 9.72792 20.456 10.1298L12.6953 18.3621C12.3165 18.764 11.6836 18.7827 11.2817 18.4038C10.8799 18.025 10.8612 17.3921 11.2401 16.9902L17.3447 10.5146L1.7657 10.974C1.21365 10.9903 0.752933 10.556 0.736653 10.0039Z" fill="black"></path>
                                            </svg>
                                        </a>
                                    </div>
                                </div>
                                <div class="flip-card-back">
                                    <p><?php echo $highlight['description']; ?></p>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
        <?php $cta = get_field('system_cta'); ?>
        <?php if (!is_null($cta)) : ?>
            <div class="text-center mt-5">
                <a href="<?php echo esc_url($cta['url']); ?>" class="primary animated-cta-btn"><?php echo esc_html($cta['title']); ?></a>
            </div>
        <?php endif; ?>
    </div>
</section>


<!-- Construction Inventory Management Process Section Start -->
<section class="section construction-inventory-management-process pale-blue">
    <div class="container">
        <div class="row gx-lg-5 gy-4 align-items-center">
            <div class="col-lg-6">
                <div class="img-wrapper">
                    <img src="<?php echo get_field('features_understanding_section_image');?>" alt="<?php echo wp_strip_all_tags(get_field('features_understanding_section_heading'));?>" class="img-fluid" loading="lazy">
                </div>
            </div>

            <div class="col-lg-6">
                <div class="left-wrapper">
                    <h2 class="section-title text-center text-lg-start"><?php echo get_field('features_understanding_section_heading');?></h2>

                    <p class="section-content text-center text-lg-start"><?php echo get_field('features_understanding_section_text');?></p>

                    <div class="text-center text-lg-start mt-4">
                        <a href="<?php echo esc_url(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>
        </div>
    </div>
</section>
<!-- Construction Inventory Management Process 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-4"><?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 -->


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

<section class="section dashboard-access-cta ebay-access-cta mb-5 mb-lg-0">
    <div class="container">
        <div class="box">
            <div class="row align-items-center">
                <div class="col-lg-6 col-xl-5">
                    <div class="img-cont slide-right">
                        <?php $cta_image = get_field('dashboard_access_cta_image');?>
                        <img src="<?php echo $cta_image?>" alt="cta image" class="img-fluid" loading="lazy">
                    </div>
                </div>
                <div class="col-lg-6 col-xl-6">
                    <div class="text-cont slide-left">
                        <?php echo get_field('dashboard_access_cta_text');?>
                        <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>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<?php
get_footer();
?>


<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
            }
        }
    });
    $('.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
            }
        }
    });
    // industries benefits carousel
   $('.bigcommerce-industries-slider').owlCarousel({
        loop: true,
        margin: 20,
        nav: true,
        dots: false,
        navText: [
            `<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.8516 5.18826C18.5419 5.18826 19.1016 5.7479 19.1016 6.43826C19.1016 7.12861 18.5419 7.68825 17.8516 7.68825L17.8516 6.43825L17.8516 5.18826ZM1.24915 7.68825C0.558798 7.68825 -0.000846863 7.12861 -0.000846863 6.43825C-0.000846863 5.7479 0.558798 5.18825 1.24915 5.18825V6.43825V7.68825ZM4.51982 0.362182C5.01015 -0.123791 5.8016 -0.12026 6.28757 0.370069C6.77355 0.860397 6.77001 1.65185 6.27969 2.13782L5.39976 1.25L4.51982 0.362182ZM3.57041 3.06309L4.45034 3.95091L3.57041 3.06309ZM3.57041 9.81341L2.69048 10.7012L3.57041 9.81341ZM6.27969 10.7387C6.77001 11.2247 6.77355 12.0161 6.28757 12.5064C5.8016 12.9968 5.01015 13.0003 4.51982 12.5143L5.39976 11.6265L6.27969 10.7387ZM1.26979 6.11312L0.0298233 5.95508V5.95507L1.26979 6.11312ZM1.26979 6.76338L0.0298233 6.92143V6.92143L1.26979 6.76338ZM17.8516 6.43825L17.8516 7.68825L1.24915 7.68825V6.43825V5.18825L17.8516 5.18826L17.8516 6.43825ZM5.39976 1.25L6.27969 2.13782L4.45034 3.95091L3.57041 3.06309L2.69048 2.17528L4.51982 0.362182L5.39976 1.25ZM3.57041 9.81341L4.45034 8.92559L6.27969 10.7387L5.39976 11.6265L4.51982 12.5143L2.69048 10.7012L3.57041 9.81341ZM3.57041 3.06309L4.45034 3.95091C3.70003 4.69456 3.21366 5.17927 2.88976 5.58259C2.58169 5.96619 2.52481 6.15312 2.50976 6.27117L1.26979 6.11312L0.0298233 5.95507C0.12709 5.19196 0.491079 4.57683 0.940529 4.01718C1.37414 3.47726 1.98192 2.87754 2.69048 2.17528L3.57041 3.06309ZM3.57041 9.81341L2.69048 10.7012C1.98192 9.99897 1.37414 9.39925 0.940529 8.85932C0.491079 8.29968 0.12709 7.68454 0.0298233 6.92143L1.26979 6.76338L2.50976 6.60534C2.52481 6.72339 2.58169 6.91032 2.88976 7.29391C3.21366 7.69723 3.70003 8.18195 4.45034 8.92559L3.57041 9.81341ZM1.26979 6.11312L2.50976 6.27117C2.49562 6.38213 2.49562 6.49438 2.50976 6.60534L1.26979 6.76338L0.0298233 6.92143C-0.0110703 6.6006 -0.0110703 6.27591 0.0298233 5.95508L1.26979 6.11312Z" fill="black"/>
            </svg>`,
            `<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.25 5.18826C0.559644 5.18826 -6.17226e-08 5.7479 0 6.43826C6.17226e-08 7.12861 0.559644 7.68826 1.25 7.68826L1.25 6.43826L1.25 5.18826ZM17.8524 7.68825C18.5428 7.68825 19.1024 7.12861 19.1024 6.43825C19.1024 5.7479 18.5428 5.18825 17.8524 5.18825L17.8524 6.43825L17.8524 7.68825ZM14.5817 0.362182C14.0914 -0.123791 13.3 -0.12026 12.814 0.370069C12.328 0.860397 12.3315 1.65185 12.8219 2.13782L13.7018 1.25L14.5817 0.362182ZM15.5312 3.0631L14.6512 3.95091L14.6512 3.95091L15.5312 3.0631ZM15.5312 9.81341L16.4111 10.7012L16.4111 10.7012L15.5312 9.81341ZM12.8219 10.7387C12.3315 11.2247 12.328 12.0161 12.814 12.5064C13.3 12.9968 14.0914 13.0003 14.5817 12.5143L13.7018 11.6265L12.8219 10.7387ZM17.8318 6.11312L19.0717 5.95508L19.0717 5.95507L17.8318 6.11312ZM17.8318 6.76338L19.0717 6.92143L19.0717 6.92143L17.8318 6.76338ZM1.25 6.43826L1.25 7.68826L17.8524 7.68825L17.8524 6.43825L17.8524 5.18825L1.25 5.18826L1.25 6.43826ZM13.7018 1.25L12.8219 2.13782L14.6512 3.95091L15.5312 3.0631L16.4111 2.17528L14.5817 0.362182L13.7018 1.25ZM15.5312 9.81341L14.6512 8.92559L12.8219 10.7387L13.7018 11.6265L14.5817 12.5143L16.4111 10.7012L15.5312 9.81341ZM15.5312 3.0631L14.6512 3.95091C15.4015 4.69456 15.8879 5.17927 16.2118 5.58259C16.5199 5.96619 16.5768 6.15312 16.5918 6.27117L17.8318 6.11312L19.0717 5.95507C18.9745 5.19196 18.6105 4.57683 18.161 4.01718C17.7274 3.47726 17.1196 2.87754 16.4111 2.17528L15.5312 3.0631ZM15.5312 9.81341L16.4111 10.7012C17.1196 9.99897 17.7274 9.39925 18.161 8.85932C18.6105 8.29968 18.9745 7.68454 19.0717 6.92143L17.8318 6.76338L16.5918 6.60534C16.5768 6.72339 16.5199 6.91032 16.2118 7.29391C15.8879 7.69723 15.4015 8.18195 14.6512 8.92559L15.5312 9.81341ZM17.8318 6.11312L16.5918 6.27117C16.6059 6.38213 16.6059 6.49438 16.5918 6.60534L17.8318 6.76338L19.0717 6.92143C19.1126 6.6006 19.1126 6.27591 19.0717 5.95508L17.8318 6.11312Z" fill="black"/>
            </svg>`
        ],
        responsive: {
            0: { items: 1 },
            600: { items: 2.5 },
            1000: { items: 2.5 }
        }
    });
</script>

<script>
$(document).ready(function () {

    if (window.innerWidth >= 992) {

        $('.premier-ebay-management .ebay-images-wrapper img[data-img="1"]').addClass('active');

        $('.premier-ebay-management .premier-ebay-card').on('click', function () {

            let index = $(this).data('index');

            $('.premier-ebay-management .ebay-images-wrapper img').removeClass('active');

            $('.premier-ebay-management .ebay-images-wrapper img[data-img="' + index + '"]').addClass('active');
        });
    }

});
</script>