<?php 
    $is_items = (isset($settings['items']) && !empty($settings['items']) && count($settings['items'])) || false;
    $is_features = (isset($settings['features']) && !empty($settings['features']) && count($settings['features'])) || false;
    $is_tab_btns = (isset($settings['tab_btns']) && !empty($settings['tab_btns']) && count($settings['tab_btns'])) || false;
    $active = !empty($settings['tab_active']) ? $settings['tab_active'] : 0;

    $col_xxl = ($settings['col_xxl'] == '5') ? 'pxl5' : intval(12/$widget->get_setting('col_xxl', 4));
    $col_xl = ($settings['col_xl'] == '5') ? 'pxl5' : 12 / intval($widget->get_setting('col_xl', 4));
    $col_lg = 12 / intval($widget->get_setting('col_lg', 4));
    $col_md = 12 / intval($widget->get_setting('col_md', 3));
    $col_sm = 12 / intval($widget->get_setting('col_sm', 2));
    $col_xs = 12 / intval($widget->get_setting('col_xs', 1));
    $grid_item = "col-xxl-{$col_xxl} col-xl-{$col_xl} col-lg-{$col_lg} col-md-{$col_md} col-sm-{$col_sm} col-{$col_xs}";
?>

<?php if($is_items) : ?>
    <div class="pxl-pricing pxl-pricing1 pxl-tabs">
        <div class="pxl-item--container">
            <div class="pxl-item--inner">
                <?php if($is_tab_btns) : ?>
                    <ul class="pxl-list--btn">
                        <?php foreach($settings['tab_btns'] as $key=> $button) : ?>
                            <?php 
                                $data_tab = 'tab'.(string)($key);    
                                $tab_active = ($active === $key) ? 'active' : '';
                            ?>
                            <li class="pxl-tab--btn">
                                <button type="button" class="btn <?php echo esc_attr($tab_active); ?>" data-tab="<?php echo esc_attr($data_tab); ?>">
                                    <?php echo esc_attr($button['tab_btn']); ?>
                                </button>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                <?php endif; ?>
                <div class="pxl-list--content">
                    <?php foreach($settings['tab_btns'] as $key=> $button) : ?>
                        <?php       
                            $tab_index = $key + 1;    
                            $data_tab = 'tab'.(string)($key); 
                            $content_active = ($active === $key) ? 'active' : '';
                        ?>
                        <div class="pxl-tab--content <?php echo esc_attr($data_tab.' '.$content_active); ?>">
                            <div class="pxl-list--cards row">
                                <?php foreach($settings['items'] as $key => $item) : ?>
                                    <?php 
                                        $is_popular = !empty($item['is_popular']) || false;  
                                        $id = $key + 1;  
                                        $card_active = ($is_popular) ? 'active' : '';
                                        $show_in_tab = !empty($item['show_in_tab']) ? explode('-', $item['show_in_tab']) : ''; 
                                        $link = solarva_get_link($item['link']);
                                    ?>
                                    <?php if(empty($show_in_tab) || in_array($tab_index, $show_in_tab) ) : ?>
                                        <div class="pxl-item--card <?php echo esc_attr($grid_item.' '.$item['content_animate']); ?> " data-wow-delay="<?php echo esc_attr($item['content_animate_delay']); ?>">
                                            <div class="pxl-card--inner <?php echo esc_attr($card_active); ?>">
                                                <?php if($is_popular) : ?>
                                                    <span class="pxl-item--popular">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                                            <path d="M13.25 5.61406H9.80782L12.9031 1.70312C12.9672 1.62031 12.9094 1.5 12.8047 1.5H6.81251C6.76876 1.5 6.72657 1.52344 6.7047 1.5625L2.65626 8.55469C2.60782 8.6375 2.6672 8.74219 2.76407 8.74219H5.48907L4.0922 14.3297C4.06251 14.4516 4.20938 14.5375 4.30001 14.45L13.3359 5.82812C13.4172 5.75156 13.3625 5.61406 13.25 5.61406Z" fill="#FEC51B"/>
                                                        </svg>
                                                        <?php echo esc_attr($item['popular_text']); ?>
                                                    </span>
                                                <?php endif; ?>
                                                <div class="pxl-content-top">
                                                    <div class="pxl-item--title el-empty">
                                                        <?php echo esc_attr($item['title']); ?>
                                                    </div>
                                                    <div class="pxl-item--subtitle el-empty">
                                                        <?php echo esc_attr($item['subtitle']); ?>
                                                    </div>
                                                </div>
                                                <div class="pxl-content-center">
                                                    <div class="pxl-item--price el-empty">
                                                        <span class="pxl-price--text">
                                                            <?php echo esc_attr($item['price']); ?>
                                                        </span>
                                                        <span class="pxl-item--billing_cycle el-empty">
                                                            <?php echo esc_attr($item['billing_cycle']); ?>
                                                        </span>
                                                    </div>
                                                    <div class="pxl-item--desc el-empty">
                                                        <?php echo esc_attr($item['desc']); ?>
                                                    </div>
                                                </div>
                                                <?php if($is_features) : ?>
                                                    <ul class="pxl-list--features">
                                                        <?php foreach($settings['features'] as $key=>$feature) : ?>
                                                            <?php 
                                                                $show_in = !empty($feature['show_in']) ? explode('-', $feature['show_in']) : ''; 
                                                                $active = 'active';
                                                            ?>
                                                            <li class="pxl-item--feature">
                                                                <?php if(empty($show_in) || in_array($id, $show_in)) : ?>
                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="12" viewBox="0 0 15 12" fill="none">
                                                                        <path d="M1 6.5L5 10.5L13.5 1" stroke="#4AAB3D" stroke-width="1.3" stroke-linecap="round"/>
                                                                    </svg>
                                                                <?php endif; ?>
                                                                <span class="pxl-feature--text el-empty <?php if(empty($show_in) || in_array($id, $show_in)) echo esc_attr($active); ?>">
                                                                    <?php echo esc_attr($feature['feature']); ?>
                                                                </span>
                                                            </li>
                                                        <?php endforeach; ?>
                                                    </ul>
                                                <?php endif; ?>
                                                <div class="pxl-btn-wrap">
                                                    <a <?php pxl_print_html($link); ?> class="btn pxl-btn-basic pxl-btn-basic6 pxl-item--btn">
                                                        <?php echo esc_attr($settings['button_text']); ?>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    <?php endif; ?>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>
<?php endif; ?>
