<?php

    namespace Pixebuilder\Element;
    
    // prevent direct file access
	if( !defined( 'ABSPATH' ) ) exit;

    class Accordion extends Item{

        static function get_name(){
            return 'accordion';
        }

        static function get_title(){
            return esc_html__('Accordion', 'pixebuilder');
        }

        static function get_icon(){
            return 'accordion';
        }

        static function item_data($atts, $settings){
            $atts['accordion'] = $settings['_id'];
            if( !empty($settings['tab-action']) ){
                $atts['action'] = $settings['tab-action'];
            }
            return $atts;
        }
        
        static function render_content($settings){
            $ret = '';

            if( !empty($settings['_tab']) ){
                $title_tag = empty($settings['title-tag'])? 'span': $settings['title-tag'];
                $plus_icon = '';
                $minus_icon = '';
                if( !empty($settings['icon']['plus']) && $settings['icon']['plus'] != 'none' ){
                    $plus_icon = pixe_get_icon($settings['icon']['plus'], array('class' => 'pixe-plus'));
                }else{
                    $plus_icon = pixe_icon_preset('acc-plus', array('class' => 'pixe-plus'));
                }
                if( !empty($settings['icon']['minus']) && $settings['icon']['minus'] != 'none' ){
                    $minus_icon = pixe_get_icon($settings['icon']['minus'], array('class' => 'pixe-minus'));
                }else{
                    $minus_icon = pixe_icon_preset('acc-minus', array('class' => 'pixe-minus'));
                }

                $title_atts = array();
                $side_text_atts = array();
                if( !empty($settings['title-typo']['preset']) ){
                    $title_atts['typo-preset'] = $settings['title-typo']['preset'];
                }
                if( !empty($settings['typo']['title']['preset']) ){
                    $title_atts['typo-preset'] = $settings['typo']['title']['preset'];
                }
                if( !empty($settings['typo']['side-text']['preset']) ){
                    $side_text_atts['typo-preset'] = $settings['typo']['side-text']['preset'];
                }
                
                $type = 'accordion';
                if( !empty($settings['tab-action']) ){
                    if( $settings['tab-action'] == 'toggle-hover' || $settings['tab-action'] == 'toggle-click' ){
                        $type = 'toggle';
                    }
                }
                
                foreach( $settings['_tab'] as $index => $tab ){

                    // active class
                    $active_class = '';
                    if( $type == 'accordion' && $index == 0 ){
                        $active_class = ' pixe-active';
                    }else if( $type == 'toggle' && !empty($tab['data']['toggle']['open']) ){
                        $active_class = ' pixe-active';
                    }

                    // side text
                    $side_text = '';
                    if( !empty($tab['data']['toggle']['side-text']) ){
                        $side_text = '<div class="pixe-accordion-side-text" ' . pixe_get_data_atts($side_text_atts) . ' >' . esc_html($tab['data']['toggle']['side-text']) . '</div>';
                    }
                    
                    $ret .= '<div class="pixe-accordion' . esc_attr($active_class) . '" >';
                    $ret .= '<div class="pixe-accordion-title" ' . pixe_get_data_atts($title_atts) . ' >';
                    $ret .= $plus_icon . $minus_icon;
                    if( !empty($side_text) ){
                        $ret .= '<span class="pixe-text-wrap" >';
                    }
                    if( !empty($side_text) && empty($tab['data']['toggle']['side-text-position']) ){
                        $ret .= $side_text;
                    }
                    $ret .= '<' . $title_tag . ' class="pixe-text" > ' . $tab['title'] . '</' . $title_tag . '>';
                    if( !empty($side_text) && !empty($tab['data']['toggle']['side-text-position']) ){
                        $ret .= $side_text;
                    }
                    if( !empty($side_text) ){
                        $ret .= '</span>';
                    }
                    $ret .= '</div>';
                    $ret .= '<div class="pixe-accordion-content" >';
                    if( !empty($tab['content']) ){
                        $ret .= pixe_get_builder_content($tab['content']);
                    }
                    $ret .= '</div>';
                    $ret .= '</div>';
                }
            }

            return $ret;
        }
    }

    \Pixe_Builder::register_element('Pixebuilder\Element\Accordion');

    // register tab style
    function accordion_style(){
?>
.pixe-accordion-title{ position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 0px; font-weight: 500; cursor: pointer;
    background-position: center; background-size: cover; transition: color 300ms, background 300ms; }
.pixe-accordion-title .pixe-icon{ align-items: center; justify-content: center; flex-shrink: 0; color: var(--pixe--color--primary); fill: var(--pixe--color--primary); }
.pixe-accordion-title .pixe-minus{ display: none; }
.pixe-accordion-title .pixe-plus{ display: flex; }
.pixe-accordion-title .pixe-text-wrap{ display: flex; align-items: center; gap: 5px; }
.pixe-accordion-title .pixe-text{ margin: 0; color: var(--pixe--color--heading); }
.pixe-accordion-content{ display: none; background-position: center; background-size: cover; transition: background 300ms; }
.pixe-accordion.pixe-active > .pixe-accordion-title .pixe-plus{ display: none; }
.pixe-accordion.pixe-active > .pixe-accordion-title .pixe-minus{ display: flex; }
.pixe-accordion.pixe-active > .pixe-accordion-content{ display: flex; }
<?php
    }
    \Pixe_Dependency::get()->register_style('accordion', 'Pixebuilder\Element\accordion_style');

    // register tab script
    function accordion_core_script(){
?>
$.fn.pixeItemAccordion = function(refreshAction = false){
    var item = $(this);
    var event = 'click';
    var action = item.attr('data-action');
    if( action == 'hover' || action == 'toggle-hover' ){
        event = 'mouseenter';
    }

    function open(accordion){
        accordion.children('.pixe-accordion-content').css('display', 'flex').hide().slideDown(300);
        accordion.addClass('pixe-active');
    }
    function close(accordion){
        accordion.children('.pixe-accordion-content').css('display', 'flex').slideUp(300);
        accordion.removeClass('pixe-active');
    }

    item.on(event, '.pixe-accordion-title', function(e){
        if( !$(this).parent().parent().is(item) ) return; // prevent nested accordion items
        if( $(e.target).is('[data-tab-type]') ) return; // prevent action when clicking at settings

        var accordion = $(this).parent('.pixe-accordion');
        if( accordion.hasClass('pixe-active') ){
            close(accordion);
        }else{
            open(accordion);
        }

        // refresh action for builder
        if( refreshAction ){
            action = item.attr('data-action');
        }

        // close other active accordion
        if( !action || action == 'hover' ){
            accordion.siblings('.pixe-active').each(function(){
                close($(this));
            });
        }
    });
}
<?php
    }
    function accordion_script(){
?>
$(document).ready(function(){ $('.pixe-item-accordion').each(function(){ $(this).pixeItemAccordion(); }); });
<?php
    }
    \Pixe_Dependency::get()->register_core_script('accordion', 'Pixebuilder\Element\accordion_core_script');
    \Pixe_Dependency::get()->register_script('accordion', 'Pixebuilder\Element\accordion_script');
