<style>
    
</style>

<?php if( !defined('ABSPATH') ) exit; ?>
<?php global $product; ?>

<?php $attributes = wplus_group_attr::get_group_attr($product); ?>

<div class="attr__custom_gp-container">
    <div class="attr__custom_gp-product-title">
        <div class="attr__custom_gp-product-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                <polyline points="14 2 14 8 20 8"></polyline>
                <line x1="16" y1="13" x2="8" y2="13"></line>
                <line x1="16" y1="17" x2="8" y2="17"></line>
                <polyline points="10 9 9 9 8 9"></polyline>
            </svg>
        </div>
        <div>
            <h1><?php esc_html_e('مشخصات کلی', 'woodmartplus'); ?></h1>
            <p class="attr__custom_gp-product-subtitle"><?php echo $product->get_name(); ?></p>
        </div>
    </div>
    
     <?php foreach( $attributes as $key => $attr ):  ?>
        <?php if( is_numeric($key) ): ?>
            <div class="attr__custom_gp-section regular-attr">
                <?php foreach( [$attr] as $child ):  ?>
                    <div class="attr__custom_gp-item">
                        <div class="attr__custom_gp-label"><?php echo wc_attribute_label($child->get_name());?></div>
                        <div class="attr__custom_gp-value"><?php echo wplus_group_attr::get_group_attr_link($product, $child); ?></div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php else: ?>
            <div class="attr__custom_gp-section accordion-attr">
            <div class="attr__custom_gp-header">
                <div class="attr__custom_gp-title">
                    <div class="attr__custom_gp-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="6 9 12 15 18 9"></polyline>
                        </svg>
                    </div>
                    <?php echo esc_html($key); ?>
                </div>
            </div>
            <?php foreach( $attr as $child ): ?>
            <div class="attr__custom_gp-content">
                <div class="attr__custom_gp-item">
                    <div class="attr__custom_gp-label"><?php echo wc_attribute_label($child->get_name());?></div>
                    <div class="attr__custom_gp-value"><?php echo wplus_group_attr::get_group_attr_link($product, $child); ?></div>
                </div>
            </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    <?php endforeach; ?>
</div>

<script>
    jQuery(document).ready(function($) {
        $('.attr__custom_gp-header').on('click', function() {
            $(this).toggleClass('active');
            
            var $contents = $(this).nextUntil('.attr__custom_gp-header', '.attr__custom_gp-content');
            
            $contents.toggleClass('show');
        });
        
        if ($('.attr__custom_gp-header').length > 0) {
            $('.attr__custom_gp-header').first().addClass('active');
            var $firstContents = $('.attr__custom_gp-header').first().nextUntil('.attr__custom_gp-header', '.attr__custom_gp-content');
            $firstContents.addClass('show');
        }
    });
</script>