<?php
/*
Template Name: Multi Channel Inventory Software
*/

get_header('new');
?>
<section class="section banner warego-enhanced-banner multichanel-banner pb-5 no-lazy">
    <div class="home-banner-content">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="text-cont">
                        <h1 class="banner-heading text-center">
                            <?php echo get_field('banner_heading_multichannel'); ?>
                        </h1>
                        
                            <?php echo get_field('banner_description_multichannel'); ?>
                        <div class="banner-btns text-center mt-4 pb-3 justify-content-center">
                            <a href="<?php echo get_field('banner_primary_btn_link'); ?>" class="primary animated-btn px-5">
                                <?php echo get_field('banner_primary_btn_text'); ?>
                            </a>
                            <a href="<?php echo get_field('banner_secondary_btn_link'); ?>" class="border-gradient-btn animated-btn px-5">
                                <?php echo get_field('banner_secondary_btn_text'); ?>
                                <?php echo get_field('banner_secondary_btn_icon'); ?>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="banner-bottom-images-wrapper mt-4">
                <div class="row align-items-center gx-0">
                    <div class="col-md-12">
                        <div class="img-cont-scale text-center">
                            <?php 
                            $image = get_field('banner_bottom_image_multichannel');
                            if ($image): ?>
                                <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" class="img-fluid" loading="lazy" />
                            <?php endif; ?>
                        </div>
                    </div>
                </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">
                            </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 -->

<!-- understanding section start -->
<section class="section your-client what-is-order-management bg-white pt-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="text-content slide-right">
                    <h3 class="section-innertitle mb-4"><?php echo get_field('features_understanding_section_heading'); ?> </h3>
                    <p class="mb-0">
                        <?php echo get_field('features_understanding_section_text'); ?>
                    </p>
                    <div class="buttons-wrapper mt-4">
                        <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'); ?>
                            <svg class="ms-2" width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M9.00391 5.44716L12.0039 8.16591C12.1602 8.29091 12.2227 8.47841 12.2539 8.72841C12.2539 8.91591 12.1602 9.13466 12.0039 9.22841L9.00391 12.0097C8.78516 12.2284 8.47266 12.2597 8.19141 12.1659C7.91016 12.0409 7.75391 11.7597 7.75391 11.4784V9.72841H5.00391C4.56641 9.72841 4.25391 9.41591 4.25391 8.97841V8.47841C4.25391 8.07216 4.56641 7.72841 5.00391 7.72841H7.72266V5.97841C7.72266 5.69716 7.94141 5.41591 8.19141 5.32216C8.44141 5.19716 8.78516 5.22841 9.00391 5.44716ZM8.25391 0.728409C12.6602 0.728409 16.2539 4.32216 16.2539 8.72841C16.2539 13.1659 12.6602 16.7284 8.25391 16.7284C3.81641 16.7284 0.253906 13.1659 0.253906 8.72841C0.253906 4.32216 3.81641 0.728409 8.25391 0.728409ZM8.25391 15.2284C11.8164 15.2284 14.7539 12.3222 14.7539 8.72841C14.7539 5.16591 11.8164 2.22841 8.25391 2.22841C4.66016 2.22841 1.75391 5.16591 1.75391 8.72841C1.75391 12.3222 4.66016 15.2284 8.25391 15.2284Z" fill="white"/>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="img-content slide-left">
                    <?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">
                        <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- understanding section end -->


<!-- Construction Inventory Management Process Section Start -->
<?php $timelineSec = ['class' => 'light-grey']; 
get_template_part('templates-parts/pages/inventory-process-timeline',null,$timelineSec)?>
<!-- Construction Inventory Management Process Section End -->
<div class="spacer"></div>
<!-- integration tabs start -->
<?php get_template_part('templates-parts/pages/integration-post-tabs')?>
<!-- integration tabs end -->


<section class="section omnichanel-software-features bg-white">
    <div class="container">
        <div class="text-center text-cont">
            <h2 class="section-title mb-4"><?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="card">
                        <div class="card-header">
                            <div class="svg-cont">
                                <?php echo $highlight['icon']; ?>
                            </div>
                            </div>
                            <div class="card-body">
                                <h3><?php echo $highlight['heading']; ?></h3>
                                <p><?php echo $highlight['description']; ?></p>
                            </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>
 

<?php 
$benefits =[
    'class' => 'benefits-omnichanel-industry',
    'row_class' => 'g-3',
    'col_class' => 'col-xl-9 col-lg-8',
    'inner_col_class' => 'col-md-6 col-xl-4',
    'col_stake' => true, 
];
get_template_part('templates-parts/pages/supply-chain-benefits',null,$benefits)?>

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


<!-- industry  section start -->
<?php 
$industry = [
    'class' => 'pale-blue',
    'category' => 'return-management',
];
get_template_part('templates-parts/pages/industry-solutions',null,$industry)?>
<!-- industry 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-5"><?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 -->


<!-- why leading section start -->
<section class="section why-leading">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title mb-5"><?php echo get_field('why_warego_wms_heading'); ?></h2>
            <p class="section-content"><?php echo get_field('why_warego_wms_description'); ?></p>
        </div>
        <?php if( have_rows('why_warego_wms_features') ): ?>
        <ul>
            <?php while( have_rows('why_warego_wms_features') ): the_row(); ?>
                <li>
                    <div class="left">
                        <?php $image = get_sub_field('image'); ?>
                        <?php if ($image) : ?>
                            <img src="<?php echo esc_url($image); ?>" alt="<?php echo get_sub_field('heading'); ?>" class="img-fluid">
                        <?php endif; ?>
                    </div>
                    <div class="right">
                        <h3><?php echo get_sub_field('heading'); ?></h3>
                        <p><?php echo get_sub_field('description'); ?></p>
                    </div>
                </li>
            <?php endwhile; ?>
        </ul>
        <?php else: ?>
        <p>No features available.</p>
        <?php endif; ?>

        <div class="text-center mt-5">
            <a href="<?php echo esc_url(get_field('why_warego_wms_cta_link')); ?>" class="primary animated-cta-btn" <?php echo is_modal_link(get_field('why_warego_wms_cta_link')); ?>><?php echo get_field('why_warego_wms_cta_label'); ?></a>
        </div>
    </div>
</section>
<!-- why leading section end -->


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

<section class="section bg-white pt-0">
    <div class="container">
        <div class="complete-comparison-cta right-fit-business-cta">
            <div class="row align-items-center">
                <div class="col-md-3">
                    <img src="<?php echo get_field('affiliate_cta_image'); ?>" alt="<?php echo get_field('affiliate_cta_heading'); ?>" class="img-fluid">
                </div>
                <div class="col-md-6">
                    <h3 class="mb-3"><?php echo get_field('affiliate_cta_heading'); ?></h3>
                    <p><?php echo get_field('affiliate_cta_text'); ?></p>
                </div>
                <div class="col-md-3">
                    <?php $aff_cta = get_field('affiliate_cta_button');?>
                    <a href="<?php echo esc_url($aff_cta['url']); ?>" class="border-gradient-btn animated-btn" <?php echo is_modal_link(get_field('cta_button_links')); ?>><?php echo $aff_cta['title']; ?></a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Faqs Start -->
<?php
    $args = [
        'category'  => 'multichannel-software',
        'heading'   => 'Frequently Asked <span>Questions</span>',
		'class'     => 'bg-white mt-5',
    ];
    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();
?>

<style>
.purple-dot-lists{
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:10px 0px;
}
.purple-dot-lists li{
    position:relative;
    display:flex;
    gap:10px;
	width: 100%;
}
.purple-dot-lists li:before{
    content:'';
    width:100%;
    max-width:14px;
    height:14px;
    border-radius:50%;
    background-color:#5558A6;
    margin-top:5px;
}
.purple-dot-lists.first-lists li{
	max-width: 26.5%;
}
.purple-dot-lists.second-lists li{
	max-width: 30%;
}
@media(max-width:1199px){
.purple-dot-lists.first-lists li{
	max-width: 32%;
}
	
.purple-dot-lists.second-lists li{
	max-width: 30%;
}
}
@media(max-width:767px){
    .purple-dot-lists li{
        width:100%;
		max-width: 100%;
    }
    .purple-dot-lists li:before{
        max-width:12px;
        height:12px;
    }
	.purple-dot-lists.first-lists li{
		max-width: 100%;
	}
	.purple-dot-lists.second-lists li{
		max-width: 100%;
	}
}

</style>

<script>
    //   Construction Inventory Management Process Image Change on click Script Start
    const processImg = document.querySelector("#process-img");

    const imgSources = {
        account: "assets/img/return-management/step1.webp",
        transfer: "assets/img/return-management/step2.webp",
        start: "assets/img/return-management/step3.webp",
    };


    document.querySelector("#account-signin")?.addEventListener("click", () => {
        processImg.src = imgSources.account;
    });

    document.querySelector("#transfer-data")?.addEventListener("click", () => {
        processImg.src = imgSources.transfer;
    });

    document.querySelector("#start-operating")?.addEventListener("click", () => {
        processImg.src = imgSources.start;
    });
    //   Construction Inventory Management Process Image Change on click Script End

    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
            },
        }
    });
    $('.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>