<?php
/**
 * The Template for displaying all single products
 *
 * Template aligned with WooCommerce 1.6.4
 * @see https://woocommerce.com/document/template-structure/
 * @package Pawfect
 * @version 1.6.4
 */

defined('ABSPATH') || exit;

get_header(); ?>

<main id="primary-content" class="pawfect-main-content pawfect-bg-background pawfect-min-h-screen" tabindex="-1">
    
    <?php while (have_posts()): ?>
        <?php the_post(); ?>
        
        <?php
    global $product;

    // Page Header for single product
    if (!get_theme_mod('pawfect_page_header_disabled', false)) {
        get_template_part('template-parts/page-header');
    }
?>

        <div class="pawfect-container pawfect-mx-auto pawfect-px-6 pawfect-py-12 md:pawfect-py-16">
            
            <!-- Breadcrumbs -->
            <nav class="pawfect-text-sm pawfect-text-text-light pawfect-mb-8">
                <?php woocommerce_breadcrumb(); ?>
            </nav>

            <div class="pawfect-grid pawfect-grid-cols-1 lg:pawfect-grid-cols-2 pawfect-gap-8 lg:pawfect-gap-12">
                
                <!-- Product Gallery -->
                <div class="pawfect-product-gallery">
                    <div class="pawfect-relative pawfect-bg-white pawfect-rounded-lg pawfect-shadow-md pawfect-overflow-hidden">
                        
                        <?php if ($product->is_on_sale()): ?>
                            <div class="pawfect-absolute pawfect-top-4 pawfect-left-4 pawfect-bg-red-500 pawfect-text-white pawfect-text-xs pawfect-font-bold pawfect-px-3 pawfect-py-1 pawfect-rounded-full pawfect-shadow-lg pawfect-z-20">
                                <?php esc_html_e('Sale!', 'pawfect'); ?>
                            </div>
                        <?php
    endif; ?>
                        
                        <div class="pawfect-main-product-image">
                            <?php
    if (has_post_thumbnail()) {
        echo '<img id="mainProductImage" src="' . esc_url(get_the_post_thumbnail_url(get_the_ID(), 'large')) . '" alt="' . esc_attr(get_the_title()) . '" class="pawfect-w-full pawfect-h-auto pawfect-object-cover">';
    }
    else {
        echo '<div class="pawfect-w-full pawfect-h-96 pawfect-bg-gray-200 pawfect-flex pawfect-items-center pawfect-justify-center"><span class="pawfect-text-gray-500">' . esc_html__('No Image', 'pawfect') . '</span></div>';
    }
?>
                        </div>
                    </div>
                    
                    <!-- Product Gallery Thumbnails -->
                    <?php
    $attachment_ids = $product->get_gallery_image_ids();
    if ($attachment_ids): ?>
                        <div class="pawfect-grid pawfect-grid-cols-4 pawfect-gap-4 pawfect-mt-4">
                            <!-- Main image thumbnail -->
                            <?php if (has_post_thumbnail()): ?>
                                <img src="<?php echo esc_url(get_the_post_thumbnail_url(get_the_ID(), 'thumbnail')); ?>" 
                                     alt="<?php echo esc_attr(get_the_title()); ?>" 
                                     class="pawfect-cursor-pointer pawfect-rounded-md pawfect-border-2 pawfect-border-accent pawfect-thumbnail-image" 
                                     data-large="<?php echo esc_url(get_the_post_thumbnail_url(get_the_ID(), 'large')); ?>">
                            <?php
        endif; ?>
                            
                            <!-- Gallery thumbnails -->
                            <?php foreach ($attachment_ids as $attachment_id): ?>
                                <img src="<?php echo esc_url(wp_get_attachment_image_url($attachment_id, 'thumbnail')); ?>" 
                                     alt="<?php echo esc_attr(get_post_meta($attachment_id, '_wp_attachment_image_alt', true)); ?>" 
                                     class="pawfect-cursor-pointer pawfect-rounded-md pawfect-border-2 pawfect-border-transparent hover:pawfect-border-accent pawfect-thumbnail-image" 
                                     data-large="<?php echo esc_url(wp_get_attachment_image_url($attachment_id, 'large')); ?>">
                            <?php
        endforeach; ?>
                        </div>
                    <?php
    endif; ?>
                </div>

                <!-- Product Details -->
                <div class="pawfect-product-summary">
                    <h1 class="pawfect-font-serif pawfect-text-4xl md:pawfect-text-5xl pawfect-mb-4">
                        <?php the_title(); ?>
                    </h1>
                    
                    <!-- Product Rating -->
                    <?php if (wc_review_ratings_enabled()): ?>
                        <div class="pawfect-flex pawfect-items-center pawfect-mt-4">
                            <?php woocommerce_template_single_rating(); ?>
                        </div>
                    <?php
    endif; ?>
                    
                    <!-- Product Price -->
                    <div class="pawfect-product-price pawfect-font-serif pawfect-text-3xl pawfect-text-accent pawfect-my-4">
                        <?php woocommerce_template_single_price(); ?>
                    </div>
                    
                    <!-- Product Description -->
                    <div class="pawfect-product-description pawfect-text-text-light pawfect-leading-relaxed pawfect-mb-8">
                        <?php woocommerce_template_single_excerpt(); ?>
                    </div>

                    <!-- Add to Cart Form -->
                    <div class="pawfect-product-form">
                        <?php woocommerce_template_single_add_to_cart(); ?>
                    </div>

                    <!-- Product Meta -->
                    <div class="pawfect-product-meta pawfect-mt-6 pawfect-text-sm pawfect-text-text-light">
                        <?php woocommerce_template_single_meta(); ?>
                    </div>
                </div>
            </div>

            <!-- Product Tabs (Description & Reviews) -->
            <div class="pawfect-product-tabs pawfect-mt-16 md:pawfect-mt-24">
                <?php
    /**
     * Hook: woocommerce_after_single_product_summary.
     *
     * @hooked woocommerce_output_product_data_tabs - 10
     * @hooked woocommerce_upsell_display - 15
     * @hooked woocommerce_output_related_products - 20
     */
    do_action('woocommerce_after_single_product_summary');
?>
            </div>
        </div>

    <?php
endwhile; ?>

</main>

<script>
// Product gallery functionality
document.addEventListener('DOMContentLoaded', function() {
    const thumbnails = document.querySelectorAll('.pawfect-thumbnail-image');
    const mainImage = document.getElementById('mainProductImage');
    
    if (thumbnails && mainImage) {
        thumbnails.forEach(function(thumbnail) {
            thumbnail.addEventListener('click', function() {
                // Remove active class from all thumbnails
                thumbnails.forEach(function(thumb) {
                    thumb.classList.remove('pawfect-border-accent');
                    thumb.classList.add('pawfect-border-transparent');
                });
                
                // Add active class to clicked thumbnail
                this.classList.add('pawfect-border-accent');
                this.classList.remove('pawfect-border-transparent');
                
                // Change main image
                const largeImageUrl = this.getAttribute('data-large');
                if (largeImageUrl) {
                    mainImage.src = largeImageUrl;
                }
            });
        });
    }
});
</script>

<?php get_footer(); ?>
