<?php
$active = intval($settings['active']);
$accordion = $widget->get_settings('accordion');
$wg_id = pxl_get_element_id($settings);
if(!empty($accordion)) : ?>
    <div class="pxl-accordion pxl-accordion1 <?php echo esc_attr($settings['style'].' '.$settings['pxl_animate']); ?>" data-wow-delay="<?php echo esc_attr($settings['pxl_animate_delay']); ?>ms">
        <?php foreach ($accordion as $key => $value):
            $is_active = ($key + 1) == $active;
            $pxl_id = isset($value['_id']) ? $value['_id'] : '';
            $title = isset($value['title']) ? $value['title'] : '';
            $desc = isset($value['desc']) ? $value['desc'] : '';
            $title_list1 = isset($value['title_list1']) ? $value['title_list1'] : '';
            $title_list2 = isset($value['title_list2']) ? $value['title_list2'] : '';
            $title_list3 = isset($value['title_list3']) ? $value['title_list3'] : '';
            ?>
            <div class="pxl--item <?php echo esc_attr($is_active ? 'active' : ''); ?>">
                <<?php pxl_print_html($settings['title_tag']); ?> class="pxl-accordion--title" data-target="<?php echo esc_attr('#'.$wg_id.'-'.$pxl_id); ?>">
                    <span class="pxl-title--text"><?php echo wp_kses_post($title); ?></span>
                    <?php if($settings['style'] == 'style-default') : ?>
                        <span class="pxl-icon--action">
                            <svg id="Layer_1" enable-background="new 0 0 128 128" height="512" viewBox="0 0 128 128" width="512" xmlns="http://www.w3.org/2000/svg"><path id="Down_Arrow_3_" d="m64 88c-1.023 0-2.047-.391-2.828-1.172l-40-40c-1.563-1.563-1.563-4.094 0-5.656s4.094-1.563 5.656 0l37.172 37.172 37.172-37.172c1.563-1.563 4.094-1.563 5.656 0s1.563 4.094 0 5.656l-40 40c-.781.781-1.805 1.172-2.828 1.172z"/></svg>
                        </span>
                    <?php endif; ?>
                    <?php if($settings['style'] == 'style2' || $settings['style'] == 'style3' || $settings['style'] == 'style4') : ?>
                        <span class="pxl-icon--action">
                            
                        </span>
                    <?php endif; ?>
                </<?php pxl_print_html($settings['title_tag']); ?>>
                <div id="<?php echo esc_attr($wg_id.'-'.$pxl_id); ?>" class="pxl-accordion--content" <?php if($is_active){ ?>style="display: block;"<?php } ?>>
                    <?php echo wp_kses_post(nl2br($desc)); ?>
                    <?php if($settings['style'] == 'style4') : ?>
                        <ul class="pxl-item-list">
                            <?php if (!empty($title_list1)) : ?>
                                <li class="pxl-title-list"><?php echo wp_kses_post($title_list1); ?></li>
                            <?php endif; ?>
                            <?php if (!empty($title_list2)) : ?>
                                <li class="pxl-title-list"><?php echo wp_kses_post($title_list2); ?></li>
                            <?php endif; ?>
                            <?php if (!empty($title_list3)) : ?>
                                <li class="pxl-title-list"><?php echo wp_kses_post($title_list3); ?></li>
                            <?php endif; ?>
                        </ul>
                    <?php endif; ?>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
<?php endif; ?>