<?php
/*
Template Name: Integration
*/

get_header('new');
?>

<!-- Integration Banner -->
<?php
    // $args['style'] = 'integration-banner integration-banner-new';
    $args['style'] = 'integration-banner-new';
    get_template_part('templates-parts/pages/integration-banner', null, $args);
?>
<!-- Integration Banner End -->

<!-- Popular Integration System -->
<?php
    $args['style'] = 'popular-integration';
    get_template_part('templates-parts/pages/popular-integration-system', null, $args);
?>
<!-- Popular Integration System End -->

<!-- Our Integrations -->
<?php
    $args['style'] = 'our-integration';
    get_template_part('templates-parts/pages/our-integrations', null, $args);
?>
<!-- Our Integrations End -->

<!-- faqs section -->
<?php
    $args = [
        'category'  => 'integrations'
    ];
    get_template_part('templates-parts/pages/faqs-new', null, $args);
?>
<!-- faqs section end -->

<style>
    ul#menu-primary-menu {
    display: flex !important;
}
</style>

<?php
    get_footer();
?>
<style>
.our-integration a {
    text-decoration: none;
    color: #000000;
}
    </style>
<script>
jQuery(document).ready(function ($) {
    // Attach a keyup event to the search input
    $('.input-group input[type="text"]').on('keyup', function () {
        var searchValue = $(this).val().toLowerCase(); // Get the search value in lowercase

        // Iterate through each section with a list of logos
        $('div.heading').each(function () {
            var section = $(this); // Current heading section
            var sectionVisible = false; // Flag to check if any logo in this section matches

            // Check each list item (logo name) in the current section
            section.next('ul').find('li').each(function () {
                var listItem = $(this);
                var logoName = listItem.text().toLowerCase(); // Get the text of the logo in lowercase

                // Check if the search value matches any logo name
                if (logoName.indexOf(searchValue) > -1) {
                    listItem.show(); // Show matching logos
                    sectionVisible = true; // Mark the section as visible if a match is found
                } else {
                    listItem.hide(); // Hide non-matching logos
                }
            });

            // Show or hide the entire section including heading and description
            if (sectionVisible || searchValue === "") {
                section.show(); // Show the heading and description
                section.next('ul').show(); // Show the entire list
            } else {
                section.hide(); // Hide the heading and description if no logos match
                section.next('ul').hide(); // Hide the list if no logos are visible
            }
        });
    });
});
</script>