<?php
/*
Template Name: Industry Main Page
*/

get_header('new');
?>

<!-- Banner Section Start -->
<?php
$banner_heading     = get_field('banner_heading');
$banner_description = get_field('banner_description');
$banner_cta_1       = get_field('banner_cta_1'); 
$banner_cta_2       = get_field('banner_cta_2');
?>

<section class="section banner industry-banner pb-5 no-lazy">
    <div class="container">
        <div class="row mt-xl-5 mt-lg-0">
            <div class="col-lg-12 col-xl-10 mx-auto">
                <div class="text-cont text-center mt-lg-0">

                    <?php if ($banner_heading) : ?>
                        <h1 class="banner-heading">
                            <?php echo wp_kses_post($banner_heading); ?>
                        </h1>
                    <?php endif; ?>

                    <?php if ($banner_description) : ?>
                        <p class="banner-content">
                            <?php echo wp_kses_post($banner_description); ?>
                        </p>
                    <?php endif; ?>

                    <?php if ($banner_cta_1 || $banner_cta_2) : ?>
                        <div class="banner-btns justify-content-center">

                            <?php if (!empty($banner_cta_1['url']) && !empty($banner_cta_1['title'])) : ?>
                                <a
                                    href="<?php echo esc_url($banner_cta_1['url']); ?>"
                                    class="primary animated-cta-btn"
                                    target="<?php echo !empty($banner_cta_1['target']) ? esc_attr($banner_cta_1['target']) : '_self'; ?>"
                                >
                                    <?php echo wp_kses_post($banner_cta_1['title']); ?>
                                </a>
                            <?php endif; ?>

                            <?php if (!empty($banner_cta_2['url']) && !empty($banner_cta_2['title'])) : ?>
                                <a
                                    href="<?php echo esc_url($banner_cta_2['url']); ?>"
                                    class="border-gradient-btn animated-btn"
                                    target="<?php echo !empty($banner_cta_2['target']) ? esc_attr($banner_cta_2['target']) : '_self'; ?>"
                                >
                                    <?php echo wp_kses_post($banner_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>
                    <?php endif; ?>

                </div>
            </div>
        </div>
    </div>
</section>
<!-- Banner Section End -->


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


<?php
$section_title = get_field('industry_listings_section_title');
$section_text  = get_field('industry_listings_section_text');
$rows          = get_field('industry_listings__row');
$first_row_cards = [];
$second_row_cards = [];

if (!empty($rows) && is_array($rows)) {
    $first_row_cards = !empty($rows[0]['industry_listings__card']) && is_array($rows[0]['industry_listings__card'])
        ? $rows[0]['industry_listings__card']
        : [];

    $second_row_cards = !empty($rows[1]['industry_listings__card']) && is_array($rows[1]['industry_listings__card'])
        ? $rows[1]['industry_listings__card']
        : [];
}
?>

<!-- industries section start -->
<section class="industries-section py-lg-0">
    <div class="container">

        <?php if ($section_title || $section_text) : ?>
            <div class="text-cont text-center mb-5">

                <?php if ($section_title) : ?>
                    <h2 class="section-title mb-4">
                        <?php echo wp_kses_post($section_title); ?>
                    </h2>
                <?php endif; ?>

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

            </div>
        <?php endif; ?>

        <?php if (!empty($first_row_cards)) : ?>
            <div class="row g-4 gy-lg-5 industry-row-first">

                <?php foreach ($first_row_cards as $card) : ?>
                    <?php
                    $card_title = $card['industry_listings_card_title'] ?? '';
                    $card_icon  = $card['industry_listings_card_icon'] ?? '';
                    $card_image = $card['industry_listings_card_feature_image'] ?? '';
                    $card_link  = $card['industry_listings_card_link'] ?? '';

                    $card_url    = !empty($card_link['url']) ? $card_link['url'] : '#';
                    $card_target = !empty($card_link['target']) ? $card_link['target'] : '_self';
                    $card_label  = !empty($card_link['title']) ? $card_link['title'] : $card_title;
                    ?>

                    <?php if ($card_title || !empty($card_image['url']) || !empty($card_icon['url'])) : ?>
                        <div class="col-md-4 col-sm-6">
                            <div class="industry-card">

                                <?php if (!empty($card_image['url'])) : ?>
                                    <img
                                        src="<?php echo esc_url($card_image['url']); ?>"
                                        alt="<?php echo esc_attr(trim(preg_replace('/\s+/', ' ', str_replace(['"', "'"], '', wp_strip_all_tags(!empty($card_image['alt']) ? $card_image['alt'] : $card_title))))); ?>"
                                        width="<?php echo !empty($card_image['width']) ? esc_attr($card_image['width']) : ''; ?>"
                                        height="<?php echo !empty($card_image['height']) ? esc_attr($card_image['height']) : ''; ?>"
                                        loading="lazy"
                                        decoding="async"
                                        class="img-fluid"
                                    >
                                <?php endif; ?>

                                <div class="industry-overlay"></div>

                                <div class="industry-content">

                                    <?php if ($card_label) : ?>
                                        <a
                                            href="<?php echo esc_url($card_url); ?>"
                                            class="industry-title"
                                            target="<?php echo esc_attr($card_target); ?>"
                                        >
                                            <?php echo $card_label; ?>
                                        </a>
                                    <?php endif; ?>

                                    <?php if (!empty($card_icon['url'])) : ?>
                                        <span class="industry-icon">
                                            <img
                                                src="<?php echo esc_url($card_icon['url']); ?>"
                                                alt="<?php echo esc_attr(trim(preg_replace('/\s+/', ' ', str_replace(['"', "'"], '', wp_strip_all_tags(!empty($card_icon['alt']) ? $card_icon['alt'] : $card_title . ' icon'))))); ?>"
                                                width="<?php echo !empty($card_icon['width']) ? esc_attr($card_icon['width']) : ''; ?>"
                                                height="<?php echo !empty($card_icon['height']) ? esc_attr($card_icon['height']) : ''; ?>"
                                                class="img-fluid"
                                                loading="lazy"
                                                decoding="async"
                                            >
                                        </span>
                                    <?php endif; ?>

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

                <?php endforeach; ?>

            </div>
        <?php endif; ?>

    </div>
</section>
<!-- industries section end -->


<!-- Insudstry Listed CTA Start -->
<section class="section cloud-base-chemical-cta industry-listed-cta bg-white">
    <div class="container">
        <div class="box rounded-0" style="background-image: url(<?php echo get_field('cloud_chem_cta_background_image'); ?>);">
            <div class="row">
                <div class="col-lg-6">
                    <div class="text-cont">

                        <?php if (get_field('cloud_chem_cta_title')) : ?>
                            <h2>
                                <?php the_field('cloud_chem_cta_title'); ?>
                            </h2>
                        <?php endif; ?>

                        <?php if (get_field('cloud_chem_cta_content')) : ?>
                            <p>
                                <?php the_field('cloud_chem_cta_content'); ?>
                            </p>
                        <?php endif; ?>

                        <?php 
                        $cloud_chem_cta_button_text = get_field('cloud_chem_cta_button_text');
                        $cloud_chem_cta_button_link = get_field('cloud_chem_cta_button_link');
                        ?>

                        <?php if ($cloud_chem_cta_button_text) : ?>
                            <a href="<?php echo $cloud_chem_cta_button_link ? $cloud_chem_cta_button_link : 'javascript:;'; ?>" 
                               class="accent-btn animated-cta-btn">
                                <?php the_field('cloud_chem_cta_button_text'); ?>
                            </a>
                        <?php endif; ?>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Insudstry Listed CTA End -->

<?php if (!empty($second_row_cards)) : ?>
<!-- industries second row start -->
<section class="industries-section industries-section-second pt-lg-0">
    <div class="container">
            <div class="row g-4 gy-lg-5 industry-row-second">
                <?php foreach ($second_row_cards as $card) : ?>
                    <?php
                    $card_title = $card['industry_listings_card_title'] ?? '';
                    $card_icon  = $card['industry_listings_card_icon'] ?? '';
                    $card_image = $card['industry_listings_card_feature_image'] ?? '';
                    $card_link  = $card['industry_listings_card_link'] ?? '';

                    $card_url    = !empty($card_link['url']) ? $card_link['url'] : '#';
                    $card_target = !empty($card_link['target']) ? $card_link['target'] : '_self';
                    $card_label  = !empty($card_link['title']) ? $card_link['title'] : $card_title;
                    ?>

                    <?php if ($card_title || !empty($card_image['url']) || !empty($card_icon['url'])) : ?>
                        <div class="col-md-4 col-sm-6">
                            <div class="industry-card">

                                <?php if (!empty($card_image['url'])) : ?>
                                    <img
                                        src="<?php echo esc_url($card_image['url']); ?>"
                                        alt="<?php echo esc_attr(trim(preg_replace('/\s+/', ' ', str_replace(['"', "'"], '', wp_strip_all_tags(!empty($card_image['alt']) ? $card_image['alt'] : $card_title))))); ?>"
                                        width="<?php echo !empty($card_image['width']) ? esc_attr($card_image['width']) : ''; ?>"
                                        height="<?php echo !empty($card_image['height']) ? esc_attr($card_image['height']) : ''; ?>"
                                        loading="lazy"
                                        decoding="async"
                                        class="img-fluid"
                                    >
                                <?php endif; ?>

                                <div class="industry-overlay"></div>

                                <div class="industry-content">

                                    <?php if ($card_label) : ?>
                                        <a
                                            href="<?php echo esc_url($card_url); ?>"
                                            class="industry-title"
                                            target="<?php echo esc_attr($card_target); ?>"
                                        >
                                            <?php echo $card_label; ?>
                                        </a>
                                    <?php endif; ?>

                                    <?php if (!empty($card_icon['url'])) : ?>
                                        <span class="industry-icon">
                                            <img
                                                src="<?php echo esc_url($card_icon['url']); ?>"
                                                alt="<?php echo esc_attr(trim(preg_replace('/\s+/', ' ', str_replace(['"', "'"], '', wp_strip_all_tags(!empty($card_icon['alt']) ? $card_icon['alt'] : $card_title . ' icon'))))); ?>"
                                                width="<?php echo !empty($card_icon['width']) ? esc_attr($card_icon['width']) : ''; ?>"
                                                height="<?php echo !empty($card_icon['height']) ? esc_attr($card_icon['height']) : ''; ?>"
                                                class="img-fluid"
                                                loading="lazy"
                                                decoding="async"
                                            >
                                        </span>
                                    <?php endif; ?>

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

                <?php endforeach; ?>

            </div>
            
        </div>
</section>
<!-- industries second row end -->
<?php endif; ?>


<!-- Industry warehouse process section start -->
<?php
$process_image       = get_field('Industries_warehouse_process_image');
$process_title       = get_field('Industries_warehouse_process_title');
$process_description = get_field('Industries_warehouse_process_description');
$process_items       = get_field('Industries_warehouse_process_items');
?>

<section class="warehouse-process-section">
    <div class="container">
        <div class="row align-items-center g-4">

            <?php if (!empty($process_image['url'])) : ?>
                <div class="col-lg-5 col-xxl-6 pe-xxl-4">
                    <div class="warehouse-process-img">
                        <img
                            src="<?php echo esc_url($process_image['url']); ?>"
                            alt="<?php echo esc_attr(trim(preg_replace('/\s+/', ' ', str_replace(['"', "'"], '', wp_strip_all_tags(!empty($process_image['alt']) ? $process_image['alt'] : $process_title))))); ?>"
                            width="<?php echo !empty($process_image['width']) ? esc_attr($process_image['width']) : ''; ?>"
                            height="<?php echo !empty($process_image['height']) ? esc_attr($process_image['height']) : ''; ?>"
                            class="img-fluid"
                            loading="lazy"
                            decoding="async"
                        >
                    </div>
                </div>
            <?php endif; ?>

            <div class="<?php echo !empty($process_image['url']) ? 'col-lg-7 col-xxl-6' : 'col-12'; ?>">
                <div class="warehouse-process-content">

                    <?php if ($process_title) : ?>
                        <h2 class="section-title">
                            <?php echo wp_kses_post($process_title); ?>
                        </h2>
                    <?php endif; ?>

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

                    <?php if (!empty($process_items) && is_array($process_items)) : ?>
                        <div class="process-list">

                            <?php foreach ($process_items as $item) : ?>
                                <?php
                                $item_title       = $item['Industries_warehouse_process_item_title'] ?? '';
                                $item_description = $item['Industries_warehouse_process_item_description'] ?? '';
                                ?>

                                <?php if ($item_title || $item_description) : ?>
                                    <div class="process-item">
                                        <span class="process-icon">
                                            <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="17" cy="17" r="17" fill="#02d983"/>
                                                <path d="m11.094 17.844 3.937 3.937 7.875-8.437" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                        </span>

                                        <div class="process-info">
                                            <?php if ($item_title) : ?>
                                                <h3><?php echo wp_kses_post($item_title); ?></h3>
                                            <?php endif; ?>

                                            <?php if ($item_description) : ?>
                                                <p><?php echo wp_kses_post($item_description); ?></p>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                <?php endif; ?>

                            <?php endforeach; ?>

                        </div>
                    <?php endif; ?>

                </div>
            </div>

        </div>
    </div>
</section>
<!-- Industry warehouse process section end -->



<!-- Insudstry Solution CTA Start -->
<section class="section invemtory-management-software-cta industry-solution-cta bg-white pt-lg-4 pt-0">
    <div class="container">
        <div class="box">
            <?php if (get_field('npinv_cta5_title')) : ?>
                <h2><?php the_field('npinv_cta5_title'); ?></h2>
            <?php endif; ?>

            <?php if (get_field('npinv_cta5_description')) : ?>
                <p>
                    <?php the_field('npinv_cta5_description'); ?>
                </p>
            <?php endif; ?>

            <?php
            $npinv_cta5_button_text = get_field('npinv_cta5_button_text');
            $npinv_cta5_button_url  = get_field('npinv_cta5_button_url');
            ?>

            <?php if ($npinv_cta5_button_text) : ?>
                <a href="<?php echo $npinv_cta5_button_url ?: 'javascript:;'; ?>" class="primary animated-cta-btn">
                    <?php echo $npinv_cta5_button_text; ?>
                </a>
            <?php endif; ?>
        </div>
    </div>
</section>
<!-- Insudstry Solution CTA End -->


<?php
get_footer('new');
?>

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