<?php
$class = isset($args['class']) ? $args['class'] : '';
?>

<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 $integration_tabs = get_field('segments'); ?>
        <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['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['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['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="true" aria-controls="collapse-<?php echo $slug; ?>">
                                            <?php echo $tab['name']; ?>
                                        </a>
                                    </h5>
                                </div>
                                <div id="pos-collapse-<?php echo $slug; ?>" class="collapse" data-bs-parent="#integrations-tabs-content" role="tabpanel"
                                     aria-labelledby="heading-<?php echo $slug; ?>">
                                    <div class="card-body">
                                        <h3><?php echo $tab['name']; ?></h3>
                                        <ul class="<?php echo $tab['class']; ?>">
                                            <?php foreach ($tab['logos'] as $logo) : ?>
                                                <li>
                                                    <span><img src="<?php echo $logo['logo']['url']; ?>" alt="<?php echo $logo['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>
        <!-- Tabs END Here -->
    </div>
</section>