<?php
    $rand = rand(0, 9999);
?>
<div class="feh-solution-3-wrap">

    <div class="feh-solution-3-left">
        <?php if(!empty($settings['img_1']['url'])):?>
        <div class="img-wrap wow fadeInLeft">
            <img src="<?php echo esc_url($settings['img_1']['url']);?>" alt="<?php if(!empty($settings['img_1']['alt'])){ echo esc_url($settings['img_1']['alt']);}?>">
        </div>
        <?php endif;?>
        <?php if(!empty($settings['img_2']['url'])):?>
            <div class="img-wrap wow fadeInLeft" data-wow-delay="0.3s">
                <img src="<?php echo esc_url($settings['img_2']['url']);?>" alt="<?php if(!empty($settings['img_2']['alt'])){ echo esc_url($settings['img_2']['alt']);}?>">
            </div>
        <?php endif;?>
    </div>

    <!-- tab -->
    <div class="d-flex align-items-start feh-solution-3-tab">

        <div class="feh-solution-3-tab-btn-wrap" id="v-pills-tab__<?php echo esc_attr($rand); ?>" role="tablist" aria-orientation="vertical">
            <?php
                foreach( $settings['tabs'] as $id => $item ) :

                $active = ($id == 0) ? 'active' : '';
                $aria_selected = ($id == 0) ? 'true' : 'false';

            ?>
            <button class="feh-solution-3-tab-btn <?php echo esc_attr($active); ?> ftc-heading-1" id="all-tab<?php echo esc_attr($id.$rand); ?>" data-bs-toggle="pill" data-bs-target="#all<?php echo esc_attr($id.$rand); ?>" type="button" role="tab" aria-controls="all<?php echo esc_attr($id.$rand); ?>" aria-selected="true"><?php echo esc_html($item['tab_title']);?></button>
            <?php endforeach;?>
        </div>

        <div class="tab-content feh-solution-3-tab-content" id="v-pills-tabContent__<?php echo esc_attr($rand); ?>">

            <?php
                foreach( $settings['tabs'] as $id => $item ) :
                $active = ($id == 0) ? 'show active' : '';
            ?>
                <div class="tab-pane fade <?php echo esc_attr($active); ?> tab-content-item" id="all<?php echo esc_attr($id.$rand); ?>" role="tabpanel" aria-labelledby="all-tab<?php echo esc_attr($id.$rand); ?>" tabindex="0">
                <?php if(!empty($item['img_1']['url'])):?>
                    <div class="img-wrap">
                        <img src="<?php echo esc_url($item['img_1']['url']);?>" alt="<?php if(!empty($item['img_1']['alt'])){ echo esc_url($item['img_1']['alt']);}?>">
                    </div>
                <?php endif;?>
                <h5 class="ftc-heading-1"><?php echo ftech_wp_kses($item['title']);?></h5>
                <?php if(!empty($item['description'])):?>
                    <p class="ftc-para-1"><?php echo ftech_wp_kses($item['description']);?></p>
                <?php endif;?>
                <?php if(!empty($item['btn_label'])):?>
                    <a href="<?php echo esc_url($item['btn_link']['url']);?>" aria-label="name" class="ftc-btn-1 ftc-pr-font text-capitalize ftc-font-700 has-icon">
                        <?php echo esc_html($item['btn_label']);?>
                        <i class="fa-regular fa-arrow-up-right"></i>
                    </a>
                <?php endif;?>
                </div>

            <?php endforeach;?>

        </div>
    </div>

</div>