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

get_header('new');
?>

<style>
section.optimized-integrations .company-logos-slide-wrapper ul li {
    background-color: #F4F9FF !important;
	border:none !important;
	box-shadow:none !important;
}
</style>

<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']; ?></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 -->
<?php get_template_part('templates-parts/pages/certificates');?>
<!-- end Certificates section -->

<!-- How Brighpearl integration benefits start -->
<section class="section how-brightpearl-integration light-grey">
    <div class="container">
        <div class="row">
            <div class="col-xl-4 col-lg-12">
                <div class="text-cont">
                    <?php if (get_field('how_brightpearl_section_title')) : ?>
                        <h2 class="section-title"><?php echo get_field('how_brightpearl_section_title'); ?></h2>
                    <?php endif; ?>

                    <?php if (get_field('how_brightpearl_section_content')) : ?>
                        <p class="section-content my-4">
                            <?php echo get_field('how_brightpearl_section_content'); ?>
                        </p>
                    <?php endif; ?>

                    <?php
                    $how_brightpearl_button = get_field('how_brightpearl_button');
                    if ($how_brightpearl_button) :
                    ?>
                        <a href="<?php echo $how_brightpearl_button['url']; ?>"
                           class="primary animated-cta-btn"
                           target="<?php echo $how_brightpearl_button['target'] ?: '_self'; ?>">
                            <?php echo $how_brightpearl_button['title']; ?>
                        </a>
                    <?php endif; ?>
                </div>
            </div>

            <?php
            $how_brightpearl_image = get_field('how_brightpearl_image');
            if ($how_brightpearl_image) :
            ?>
                <div class="col-xl-4 col-lg-6 col-md-6">
                    <div class="img-cont">
                        <img src="<?php echo $how_brightpearl_image['url']; ?>" alt="<?php echo $how_brightpearl_image['alt'] ? $how_brightpearl_image['alt'] : wp_strip_all_tags(get_field('how_brightpearl_section_title')) ?>" class="img-fluid" loading="lazy" width="416" height="556">
                    </div>
                </div>
            <?php endif; ?>

            <?php if (have_rows('how_brightpearl_accordion')) : ?>
                <div class="col-xl-4 col-lg-6 col-md-6">
                    <div class="accordion" id="howBrightpearlAccordion">
                        <?php
                        $i = 0;
                        while (have_rows('how_brightpearl_accordion')) : the_row();
                            $title = get_sub_field('title');
                            $content = get_sub_field('content');

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

                                <div id="<?php echo $collapse_id; ?>"
                                     class="accordion-collapse collapse <?php echo $i === 0 ? 'show' : ''; ?>"
                                     aria-labelledby="<?php echo $heading_id; ?>"
                                     data-bs-parent="#howBrightpearlAccordion">
                                    <?php if ($content) : ?>
                                        <div class="accordion-body">
                                            <p><?php echo $content; ?></p>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        <?php
                            $i++;
                        endwhile;
                        ?>
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>
</section>
<!-- How Brighpearl integration benefits end -->


<!-- CTA ONE START -->
<?php 
$cta = [
    'class' => 'ready-to-upscale-cta',
    'main_box' => 'py-5',
    'row_class' => 'flex-lg-row-reverse flex-column-reverse',
    'col_left_class' => 'col-lg-6 col-xl-5',
    'col_right_class' => 'col-lg-6',
    'image_box_class' => 'd-block',
    'button_class' => 'accent-btn'
];
get_template_part('templates-parts/pages/3pl-client-portal-cta',null,$cta)
?>
<!-- CTA ONE END -->

<!-- supply chain feature start -->
<section class="section supply-chain-software-features brightpearl-integration-features bg-white">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title">
               <?php echo get_field('shopify_features_heading'); ?>
            </h2>
             <p class="section-content">
                <?php echo get_field('shopify_features_description'); ?>
            </p>
        </div>
        <div class="row gy-4 justify-content-center">
		 <?php if (have_rows('shopify_features_repeater')) : ?>
		 <?php while (have_rows('shopify_features_repeater')) : the_row(); ?>
            <div class="col-lg-4 col-md-6">
                <div class="card h-100">
                    <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>
                        <p><?php echo get_sub_field('feature_description'); ?></p>
                    </div>
                </div>
            </div>
            
            <?php endwhile; ?>
             <?php endif; ?>
            
            
        </div>
		<div class="text-center mt-4 mt-xl-5">
            <a href="<?php echo get_field('shopify_features_btn_link'); ?>" class="primary animated-cta-btn"><?php echo get_field('shopify_features_btn_text'); ?></a>
        </div>
    </div>
</section>
<!-- End -->

<!-- industry benefits section start -->
<?php 
$industry = [
    'category' => 'brightpearl-wms',
];
get_template_part('templates-parts/pages/industry-benefits',null,$industry)?>
<!-- industry benefits section end -->


<!-- 100% Optimized WMS With 50+ Integrations Starts -->
<?php 
$integration = [
    'class' => 'bg-white',
    'row_class' => 'flex-lg-row-reverse flex-column-reverse',
	'button_class' => 'primary'
];
get_template_part('templates-parts/pages/optimized-integrations',null,$integration);?>
<!-- 100% Optimized WMS With 50+ Integrations Ends -->



<?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 brightpearl-integration-table 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 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">
                <?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; ?>


<section class="section invemtory-management-software-cta brightpearl-automate-cta bg-white pt-3">
    <div class="container">
        <div class="box">
            <h2><?php echo get_field('heading')?></h2>
            <p><?php echo get_field('text'); ?></p>
            <?php
            $cta_btn_text = get_field('button_text');
            $cta_btn_link = get_field('button_link') ?? 'javascript:;';
            ?>
            <a href="<?php echo esc_url( $cta_btn_link ); ?>" class="primary animated-cta-btn">
                <?php echo $cta_btn_text; ?>
            </a>
        </div>
    </div>
</section>

<!-- testimonials start -->
<section class="section say-about-warego client-say-about-warego light-grey">
    <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' => 'brightpearl-wms',
        'class'    => 'bg-white pt-5'
    ];
    get_template_part('templates-parts/pages/faqs-new', null, $args);
?>

<?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
            }
        }
    });
    // 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>
    // *********************** 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>