<?php
    $category = isset($args['category']) ? $args['category'] : '';
    $class    = isset($args['class']) ? $args['class'] : '';
    $query_args = array(
        'post_type'           => 'integrations',
        'post_status'         => 'publish',
        'ignore_sticky_posts' => 1,
        'posts_per_page'      => -1,
        'orderby'             => 'menu_order',
        'order'               => 'ASC',
        'tax_query'           => array(array(
            'taxonomy' => 'integrations_categories',
            'field'    => 'slug',
            'terms'    => $category ? $category : 'home',
            'operator' => 'IN'
        ))
    );
    
    $integration = new WP_Query($query_args);
?>

<?php if ($integration->have_posts()) : ?>

<section class="section seamless-integrations <?php echo $class;?>">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title mb-4"><?php echo get_field('integration_tabs_heading'); ?></h2>
            <p class="section-content"><?php echo get_field('integration_tabs_description'); ?></p>
        </div>

        <!-- Tabs Start Here -->
        <?php $i = 0; ?>
        <?php while ($integration->have_posts()) : $integration->the_post(); ?>
        <?php $integration_tabs = get_field('segments_integrations'); ?>
        <div class="responsive-tabs">
            <div class="row">
                <div class="col-lg-3">
                    <ul class="nav nav-tabs" role="tablist">
                        <?php foreach ($integration_tabs as $index => $tab) : ?>
                            <?php $slug = sanitize_title($tab['segments_integrations_name']); ?>
                            <li class="nav-item">
                                <a id="tab-<?php echo $slug; ?>" href="#pos-<?php echo $slug; ?>" class="nav-link <?php echo $index === 0 ? 'active' : ''; ?>" data-bs-toggle="tab" role="tab">
                                    <?php echo $tab['segments_integrations_name']; ?>
                                </a>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
                <div class="col-lg-9">
                    <div id="integrations-tabs-content" class="tab-content" role="tablist">
                        <?php foreach ($integration_tabs as $index => $tab) : ?>
                            <?php $slug = sanitize_title($tab['segments_integrations_name']); ?>

                            <div id="pos-<?php echo $slug; ?>" class="card tab-pane fade <?php echo $index === 0 ? 'show active' : ''; ?>" role="tabpanel" aria-labelledby="tab-<?php echo $slug; ?>">
                                <div class="card-header" role="tab" id="heading-<?php echo $slug; ?>">
                                    <h5 class="mb-0">
                                        <a data-bs-toggle="collapse" href="#pos-collapse-<?php echo $slug; ?>" aria-expanded="<?php echo $index === 0 ? 'true' : 'false';?>" aria-controls="collapse-<?php echo $slug; ?>">
                                            <?php echo $tab['segments_integrations_name']; ?>
                                        </a>
                                    </h5>
                                </div>
                                <div id="pos-collapse-<?php echo $slug; ?>" class="collapse <?php echo $index === 0 ? 'show' : '';?>" data-bs-parent="#integrations-tabs-content" role="tabpanel"
                                     aria-labelledby="heading-<?php echo $slug; ?>">
                                    <div class="card-body">
                                        <h3><?php echo $tab['segments_integrations_name']; ?></h3>
                                        <ul class="<?php // echo $tab['class']; ?>">
                                            <?php foreach ($tab['segments_integrations_logos'] as $logo) : ?>
                                                <li>
                                                    <span><img src="<?php echo $logo['segments_integrations_logo']['url']; ?>" alt="<?php echo $logo['segments_integrations_logo']['alt']; ?>" class="img-fluid"></span>
                                                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/apparel-inventory-management/img-border.webp" alt="..." class="img-fluid img-border">
                                                </li>
                                            <?php endforeach; ?>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>

                    </div>
                </div>
            </div>
        </div>
        <?php $i++; ?>
        <?php endwhile; ?>
        <?php wp_reset_postdata(); ?>
        <!-- Tabs END Here -->
    </div>
</section>

<?php endif; ?>