<?php if ('layout_one' == $settings['layout_type']) : ?>
    <section class="package-page">
        <div class="container">
            <div class="sec-title text-center wow fadeInUp" data-wow-duration='1500ms' data-wow-delay='000ms'>
                <div class="d-flex align-items-center justify-content-center">
                    <?php ostech_elementor_rendered_image($settings, 'layout_one_title_image', 'sec-title__img'); ?>
                    <?php
                    if (!empty($settings['sec_sub_title'])) :
                        $this->add_inline_editing_attributes('sec_sub_title', 'none');
                        ostech_elementor_rendered_content($this, 'sec_sub_title', 'sec-title__tagline', $settings['section_sub_title_tag_layout_one']);
                    endif; ?>
                </div>
                <?php if (!empty($settings['sec_title'])) :
                    $this->add_inline_editing_attributes('sec_title', 'none');
                    ostech_elementor_rendered_content($this, 'sec_title', 'sec-title__title', $settings['section_title_tag_layout_one']);
                endif;
                ?>
            </div>
            <div class="tabs-box">
                <div class="price-page wow fadeInUp" data-wow-delay='500ms'>
                    <div class="price-page__inner__filter text-center">
                        <button data-tab="#monthly" class="price-page__inner__btn ostech-btn tab-btn active-btn"><?php echo wp_kses($settings['monthly_heading'], 'ostech_allowed_tags'); ?></button>
                        <button data-tab="#yearly" class="price-page__inner__btn ostech-btn tab-btn"><?php echo wp_kses($settings['yearly_heading'], 'ostech_allowed_tags'); ?></button>
                    </div>
                </div>
                <div class="tabs-content">
                    <div class="price-page__inner__item fadeInUp animated tab active-tab" id="monthly">
                        <div class="row gutter-y-30">
                            <?php foreach ($settings['pricing_monthly_list'] as $index => $item) :  ?>
                                <div class="col-md-6 col-lg-4">
                                    <div class="package-card price wow fadeInUp" data-wow-duration='700ms'>
                                        <div class="package-card__head">
                                            <?php if (!empty($item['package_status'])) : ?>
                                                <p class="package-card__head__top"><?php echo esc_html($item['package_status']) ?></p>
                                            <?php endif; ?>
                                            <div class="package-card__head__box">
                                                <h2 class="package-card__head__title"><?php echo wp_kses($item['plan_title'], 'ostech_allowed_tags'); ?></h2>
                                            </div>
                                            <div class="package-card__head__content">
                                                <p class="package-card__head__price"> <span class="sup"><?php echo esc_html($item['price_sign']) ?></span> <?php echo wp_kses($item['price'], 'ostech_allowed_tags'); ?><span class="sub"><?php echo esc_html($item['price_decimal']) ?></span></p>
                                                <p class="package-card__head__month"><?php echo wp_kses($item['service_title_text'], 'ostech_allowed_tags'); ?></p>
                                            </div>
                                        </div>
                                        <div class="package-card__content">
                                            <ul class="package-card__content__list list-unstyled ml-0">
                                                <?php echo wp_kses($item['service_list'], 'ostech_allowed_tags'); ?>
                                            </ul>
                                            <?php if (!empty($item['button_label'])) : ?>
                                                <div class="package-card__content__link">
                                                    <a href="<?php echo esc_url($item['url']['url']); ?>" <?php esc_attr(!empty($item['url']['is_external']) ? "target=_blank" : ' '); ?> class="package-card__content__link__btn ostech-btn ostech-btn--secondary">
                                                        <?php echo esc_html($item['button_label']); ?>
                                                    </a>
                                                </div>
                                            <?php endif; ?>
                                        </div>
                                        <div class="package-card__shape">
                                            <?php ostech_elementor_rendered_image($item, 'shape'); ?>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div><!-- /.row -->
                    </div><!-- / -->
                    <div class="price-page__inner__item fadeInUp animated tab" id="yearly">
                        <div class="row gutter-y-30">
                            <?php foreach ($settings['pricing_yearly_list'] as $index => $item) :  ?>
                                <div class="col-md-6 col-lg-4">
                                    <div class="package-card price wow fadeInUp" data-wow-duration='700ms'>
                                        <div class="package-card__head">
                                            <?php if (!empty($item['package_status'])) : ?>
                                                <p class="package-card__head__top"><?php echo esc_html($item['package_status']) ?></p>
                                            <?php endif; ?>
                                            <div class="package-card__head__box">
                                                <h2 class="package-card__head__title"><?php echo wp_kses($item['plan_title'], 'ostech_allowed_tags'); ?></h2>
                                            </div>
                                            <div class="package-card__head__content">
                                                <p class="package-card__head__price"> <span class="sup"><?php echo esc_html($item['price_sign']) ?></span> <?php echo wp_kses($item['price'], 'ostech_allowed_tags'); ?><span class="sub"><?php echo esc_html($item['price_decimal']) ?></span></p>
                                                <p class="package-card__head__month"><?php echo wp_kses($item['service_title_text'], 'ostech_allowed_tags'); ?></p>
                                            </div>
                                        </div>
                                        <div class="package-card__content">
                                            <ul class="package-card__content__list list-unstyled ml-0">
                                                <?php echo wp_kses($item['service_list'], 'ostech_allowed_tags'); ?>
                                            </ul>
                                            <?php if (!empty($item['button_label'])) : ?>
                                                <div class="package-card__content__link">
                                                    <a href="<?php echo esc_url($item['url']['url']); ?>" <?php esc_attr(!empty($item['url']['is_external']) ? "target=_blank" : ' '); ?> class="package-card__content__link__btn ostech-btn ostech-btn--secondary">
                                                        <?php echo esc_html($item['button_label']); ?>
                                                    </a>
                                                </div>
                                            <?php endif; ?>
                                        </div>
                                        <div class="package-card__shape">
                                            <?php ostech_elementor_rendered_image($item, 'shape'); ?>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div><!-- /.row -->
                    </div><!-- / -->
                </div><!-- / -->
            </div><!-- /.tabs-box -->
        </div>
    </section>
<?php endif; ?>