<?php
/**
 * Single Product tabs
 *
 * Template aligned with WooCommerce 9.8.0
 * @see https://woocommerce.com/document/template-structure/
 * @package Pawfect
 * @version 10.9.1
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

/**
 * Filter tabs and allow third parties to add their own.
 *
 * Each tab is an array containing title, callback and priority.
 *
 * @see woocommerce_default_product_tabs()
 */
$product_tabs = apply_filters( 'woocommerce_product_tabs', array() );
 
if ( ! empty( $product_tabs ) ) : ?>

    <div class="woocommerce-tabs wc-tabs-wrapper">
        <div class="pawfect-border-b pawfect-border-border-color">
            <ul class="tabs wc-tabs pawfect-flex pawfect-gap-4 pawfect-space-x-8" role="tablist">
                <?php $i = 0; foreach ( $product_tabs as $key => $product_tab ) : ?>
                    <li class="<?php echo esc_attr( $key ); ?>_tab" id="tab-title-<?php echo esc_attr( $key ); ?>" role="tab" aria-controls="tab-<?php echo esc_attr( $key ); ?>">
                        <a href="#tab-<?php echo esc_attr( $key ); ?>" class="pawfect-tab-button  pawfect-px-1  pawfect-text-xl pawfect-border-b-2 <?php echo esc_attr( $i === 0 ? 'pawfect-tab-active pawfect-border-accent pawfect-text-text-dark' : 'pawfect-border-transparent pawfect-text-text-light hover:pawfect-text-text-dark' ); ?> pawfect-transition-colors">
                            <?php echo wp_kses_post( apply_filters( 'woocommerce_product_' . $key . '_tab_title', $product_tab['title'], $key ) ); ?>
                        </a>
                    </li>
                <?php $i++; endforeach; ?>
            </ul>
        </div>
        <?php $i = 0; foreach ( $product_tabs as $key => $product_tab ) : ?>
                    <div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--<?php echo esc_attr( $key ); ?> panel entry-content wc-tab pawfect-tab-content pawfect-py-8 pawfect-leading-relaxed" id="tab-<?php echo esc_attr( $key ); ?>" role="tabpanel" aria-labelledby="tab-title-<?php echo esc_attr( $key ); ?>">
                <?php
                if ( isset( $product_tab['callback'] ) ) {
                    call_user_func( $product_tab['callback'], $key, $product_tab );
                }
                ?>
            </div>
        <?php endforeach; ?>

        <?php do_action( 'woocommerce_product_after_tabs' ); ?>
    </div>

    <script>
    // Product tabs functionality
    document.addEventListener('DOMContentLoaded', function() {
        const tabButtons = document.querySelectorAll('.pawfect-tab-button');
        const tabContents = document.querySelectorAll('.pawfect-tab-content');
        
        tabButtons.forEach(function(button) {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                
                // Remove active class from all buttons
                tabButtons.forEach(function(btn) {
                    btn.classList.remove('pawfect-tab-active', 'pawfect-border-accent', 'pawfect-text-text-dark');
                    btn.classList.add('pawfect-border-transparent', 'pawfect-text-text-light');
                });
                
                // Add active class to clicked button
                this.classList.add('pawfect-tab-active', 'pawfect-border-accent', 'pawfect-text-text-dark');
                this.classList.remove('pawfect-border-transparent', 'pawfect-text-text-light');
                
                // Hide all tab contents
                tabContents.forEach(function(content) {
                    content.classList.add('pawfect-hidden');
                });
                
                // Show target tab content
                const targetId = this.getAttribute('href');
                const targetContent = document.querySelector(targetId);
                if (targetContent) {
                    targetContent.classList.remove('pawfect-hidden');
                }
            });
        });
    });
    </script>

<?php endif; ?>

