<?php
/**
 * The Template for displaying product archives, including the main shop page
 *
 * Template aligned with WooCommerce 8.6.0
 * @see https://woocommerce.com/document/template-structure/
 * @package Pawfect
 * @version 10.9.1
 */

defined( 'ABSPATH' ) || exit;

get_header('shop'); ?>

<main class="pawfect-main-content pawfect-bg-background pawfect-min-h-screen">

    <?php
    // Optional theme header stays, then follow core structure and hooks
    if (!get_theme_mod('pawfect_page_header_disabled', false)) {
        get_template_part('template-parts/page-header');
    }
    ?>

    <?php
    /**
     * Hook: woocommerce_before_main_content.
     * @hooked woocommerce_output_content_wrapper - 10
     * @hooked woocommerce_breadcrumb - 20
     * @hooked WC_Structured_Data::generate_website_data() - 30
     */
    do_action( 'woocommerce_before_main_content' );
    ?>

    <?php
    /**
     * Hook: woocommerce_shop_loop_header.
     * @since 8.6.0
     * @hooked woocommerce_product_taxonomy_archive_header - 10
     */
    // Remove default Woo header (title/description) to avoid duplicate page header
    remove_action( 'woocommerce_shop_loop_header', 'woocommerce_product_taxonomy_archive_header', 10 );
    do_action( 'woocommerce_shop_loop_header' );
    ?>

    <main class="pawfect-main-content">
    <div class="pawfect-container pawfect-mx-auto pawfect-px-6 pawfect-py-12 md:pawfect-py-16">

        <?php if ( woocommerce_product_loop() ) : ?>

            <?php
            /**
             * Hook: woocommerce_before_shop_loop.
             * @hooked woocommerce_output_all_notices - 10
             * @hooked woocommerce_result_count - 20
             * @hooked woocommerce_catalog_ordering - 30
             */
            do_action( 'woocommerce_before_shop_loop' );
            ?>

            <?php
            // Get customizer settings
            $shop_layout = get_theme_mod('pawfect_shop_layout', 'sidebar-left');
            $shop_columns = get_theme_mod('pawfect_shop_columns', 3);
            $products_per_page = get_theme_mod('pawfect_shop_products_per_page', 12);
            $show_result_count = get_theme_mod('pawfect_shop_show_result_count', true);
            $show_sorting = get_theme_mod('pawfect_shop_show_sorting', true);
            $show_sale_badge = get_theme_mod('pawfect_shop_show_sale_badge', true);
            $show_quick_view = get_theme_mod('pawfect_shop_show_quick_view', true);
            $show_view_toggle = get_theme_mod('pawfect_shop_show_view_toggle', true);
            $show_excerpt_list = get_theme_mod('pawfect_shop_show_excerpt_list', true);
            $sidebar_sticky = get_theme_mod('pawfect_shop_sidebar_sticky', true);

            // Set grid classes based on layout and columns
            $grid_classes = 'pawfect-grid pawfect-grid-cols-1';
            $sidebar_classes = '';
            $content_classes = '';

            if ($shop_layout === 'no-sidebar') {
                $grid_classes = 'pawfect-grid pawfect-grid-cols-1';
                $content_classes = 'pawfect-col-span-1';
            } else {
                // Match blog sidebar width (300px) instead of using grid-cols-4
                if ($shop_layout === 'sidebar-right') {
                    $grid_classes = 'pawfect-grid pawfect-grid-cols-1 lg:pawfect-grid-cols-[1fr_300px]';
                    $sidebar_classes = 'pawfect-order-2 lg:pawfect-order-2';
                    $content_classes = 'pawfect-order-1 lg:pawfect-order-1';
                } else {
                    $grid_classes = 'pawfect-grid pawfect-grid-cols-1 lg:pawfect-grid-cols-[300px_1fr]';
                    $sidebar_classes = 'pawfect-order-2 lg:pawfect-order-1';
                    $content_classes = 'pawfect-order-1 lg:pawfect-order-2';
                }
            }

            // Product grid columns
            $product_grid_classes = 'pawfect-products-grid pawfect-grid pawfect-gap-4 md:pawfect-gap-6';
            switch ($shop_columns) {
                case 2:
                    $product_grid_classes .= ' pawfect-grid-cols-1 md:pawfect-grid-cols-2 ';
                    break;
                case 4:
                    $product_grid_classes .= ' pawfect-grid-cols-1 sm:pawfect-grid-cols-2 lg:pawfect-grid-cols-3 xl:pawfect-grid-cols-4';
                    break;
                case 5:
                    $product_grid_classes .= ' pawfect-grid-cols-1 sm:pawfect-grid-cols-2 lg:pawfect-grid-cols-3 xl:pawfect-grid-cols-5';
                    break;
                case 6:
                    $product_grid_classes .= ' pawfect-grid-cols-1 sm:pawfect-grid-cols-2 lg:pawfect-grid-cols-4 xl:pawfect-grid-cols-6';
                    break;
                default: // 3 columns
                    $product_grid_classes .= ' pawfect-grid-cols-1  xl:pawfect-grid-cols-3';
            }
            ?>

            <div class="<?php echo esc_attr($grid_classes); ?> pawfect-gap-4 md:pawfect-gap-6">

                <?php if ($shop_layout !== 'no-sidebar'): ?>
                <!-- Sidebar -->
                <div class="<?php echo esc_attr($sidebar_classes); ?>">
                    <div class="<?php echo esc_attr( $sidebar_sticky ? 'pawfect-sticky-sidebar' : '' ); ?>">

                        <?php if (is_active_sidebar('shop-sidebar')): ?>
                            <!-- WooCommerce Sidebar Widget Area -->
                            <div id="secondary" class="pawfect-shop-sidebar pawfect-space-y-6">
                                <?php dynamic_sidebar('shop-sidebar'); ?>
                            </div>
                        <?php endif; ?>

                    </div>
                </div>
                <?php endif; ?>

                <!-- Products Grid -->
                <div class="<?php echo esc_attr($content_classes); ?>"><?php if ($shop_layout === 'no-sidebar') echo esc_html( ' pawfect-w-full' ); ?>

                    <!-- Enhanced Shop Toolbar -->
                    <div class="pawfect-shop-toolbar pawfect-bg-white pawfect-p-4 pawfect-rounded-lg pawfect-shadow-sm pawfect-mb-6 pawfect-border pawfect-border-gray-100">
                        <div class="pawfect-flex pawfect-flex-col lg:pawfect-flex-row pawfect-justify-between  lg:pawfect-items-center pawfect-gap-4">

                            <!-- Left Side: Results Count & View Toggle -->
                            <div class="pawfect-flex pawfect-flex-col sm:pawfect-flex-row pawfect-items-start pawfect-items-center pawfect-gap-4">
                                <?php if ($show_result_count): ?>
                                <!-- Results Count -->
                                <div class="pawfect-text-sm pawfect-text-gray-600">
                                    <?php
                                    global $wp_query;
                                    $total = $wp_query->found_posts;
                                    $current_page = max(1, get_query_var('paged'));
                                    $per_page = $products_per_page;
                                    $start = ($current_page - 1) * $per_page + 1;
                                    $end = min($current_page * $per_page, $total);

                                    printf(
                                        esc_html__('Showing %1$s-%2$s of %3$s results', 'pawfect'),
                                        '<strong>' . $start . '</strong>',
                                        '<strong>' . $end . '</strong>',
                                        '<strong>' . $total . '</strong>'
                                    );
                                    ?>
                                </div>
                                <?php endif; ?>

                                <?php if ($show_view_toggle): ?>
                                <!-- View Toggle -->
                                <div class="pawfect-flex pawfect-items-center pawfect-gap-2">
                                    <span class="pawfect-text-sm pawfect-text-gray-600"><?php esc_html_e('View:', 'pawfect'); ?></span>
                                    <div class="pawfect-flex  pawfect-rounded-md pawfect-overflow-hidden">
                                        <button class="pawfect-view-toggle pawfect-px-3 pawfect-py-2 pawfect-text-sm pawfect-bg-accent pawfect-text-white" data-view="grid" data-columns="3">
                                            <svg class="pawfect-w-4 pawfect-h-4" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
                                            </svg>
                                        </button>
                                        <button class="pawfect-view-toggle pawfect-px-3 pawfect-py-2 pawfect-text-sm pawfect-bg-gray-100 pawfect-text-gray-600 hover:pawfect-bg-gray-200" data-view="grid" data-columns="2">
                                            <svg class="pawfect-w-4 pawfect-h-4" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M2 4a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H3a1 1 0 01-1-1V4zM8 4a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H9a1 1 0 01-1-1V4zM14 4a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1V4zM2 10a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H3a1 1 0 01-1-1v-2zM8 10a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H9a1 1 0 01-1-1v-2zM14 10a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1v-2z"></path>
                                            </svg>
                                        </button>
                                        <button class="pawfect-view-toggle pawfect-px-3 pawfect-py-2 pawfect-text-sm pawfect-bg-gray-100 pawfect-text-gray-600 hover:pawfect-bg-gray-200" data-view="list">
                                            <svg class="pawfect-w-4 pawfect-h-4" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                                <?php endif; ?>
                            </div>

                            <!-- Right Side: Sort & Per Page -->
                            <div class="pawfect-flex pawfect-flex-col sm:pawfect-flex-row pawfect-items-start sm:pawfect-items-center pawfect-gap-4">


                                <?php if ($show_sorting): ?>
                                <!-- Sort Dropdown -->
                                <div class="pawfect-flex pawfect-items-center pawfect-gap-2">
                                    <label class="pawfect-text-sm pawfect-text-gray-600"><?php esc_html_e('Sort by:', 'pawfect'); ?></label>
                                    <select class="pawfect-sort-select pawfect-px-3 pawfect-py-2 pawfect-text-sm pawfect-border pawfect-border-gray-200 pawfect-rounded-md focus:pawfect-outline-none focus:pawfect-ring-2 focus:pawfect-ring-accent">
                                        <option value="menu_order" <?php selected(isset($_GET['orderby']) ? sanitize_text_field( wp_unslash( $_GET['orderby'] ) ) : get_theme_mod('pawfect_shop_default_sorting', 'menu_order'), 'menu_order'); // phpcs:ignore WordPress.Security.NonceVerification.Recommended ?>>
                                            <?php esc_html_e('Default sorting', 'pawfect'); ?>
                                        </option>
                                        <option value="popularity" <?php selected(isset($_GET['orderby']) ? sanitize_text_field( wp_unslash( $_GET['orderby'] ) ) : '', 'popularity'); // phpcs:ignore WordPress.Security.NonceVerification.Recommended ?>>
                                            <?php esc_html_e('Sort by popularity', 'pawfect'); ?>
                                        </option>
                                        <option value="rating" <?php selected(isset($_GET['orderby']) ? sanitize_text_field( wp_unslash( $_GET['orderby'] ) ) : '', 'rating'); // phpcs:ignore WordPress.Security.NonceVerification.Recommended ?>>
                                            <?php esc_html_e('Sort by average rating', 'pawfect'); ?>
                                        </option>
                                        <option value="date" <?php selected(isset($_GET['orderby']) ? sanitize_text_field( wp_unslash( $_GET['orderby'] ) ) : '', 'date'); // phpcs:ignore WordPress.Security.NonceVerification.Recommended ?>>
                                            <?php esc_html_e('Sort by latest', 'pawfect'); ?>
                                        </option>
                                        <option value="price" <?php selected(isset($_GET['orderby']) ? sanitize_text_field( wp_unslash( $_GET['orderby'] ) ) : '', 'price'); // phpcs:ignore WordPress.Security.NonceVerification.Recommended ?>>
                                            <?php esc_html_e('Sort by price: low to high', 'pawfect'); ?>
                                        </option>
                                        <option value="price-desc" <?php selected(isset($_GET['orderby']) ? sanitize_text_field( wp_unslash( $_GET['orderby'] ) ) : '', 'price-desc'); // phpcs:ignore WordPress.Security.NonceVerification.Recommended ?>>
                                            <?php esc_html_e('Sort by price: high to low', 'pawfect'); ?>
                                        </option>
                                    </select>
                                </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>

                    <?php
                    woocommerce_product_loop_start();
                    if ( wc_get_loop_prop( 'total' ) ) {
                        while ( have_posts() ) {
                            the_post();
                            /**
                             * Hook: woocommerce_shop_loop.
                             */
                            do_action( 'woocommerce_shop_loop' );
                            wc_get_template_part( 'content', 'product' );
                        }
                    }
                    woocommerce_product_loop_end();
                    ?>

                    <?php
                    // Use core pagination hook
                    do_action( 'woocommerce_after_shop_loop' );

                    ?>
                </div>
            </div>

        <?php else : ?>

            <?php
            /**
             * Hook: woocommerce_no_products_found.
             *
             * @hooked wc_no_products_found - 10
             */
            do_action( 'woocommerce_no_products_found' );
            ?>

        <?php endif; ?>
    </div>
    </main>
</main>

<?php
/**
 * Archive-product view toggle / sort inline script.
 */
$shop_columns = get_theme_mod( 'pawfect_shop_columns', 3 );
?>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var viewToggles = document.querySelectorAll(".pawfect-view-toggle");
    var productsGrid = document.querySelector(".pawfect-products-grid");

    if (viewToggles.length > 0) {
        var firstToggle = viewToggles[0];
        firstToggle.classList.add("active");
        firstToggle.classList.remove("pawfect-bg-gray-100", "pawfect-text-gray-600");
        firstToggle.classList.add("pawfect-bg-accent", "pawfect-text-white");
    }

    viewToggles.forEach(function(toggle) {
        toggle.addEventListener("click", function() {
            viewToggles.forEach(function(t) {
                t.classList.remove("active", "pawfect-bg-accent", "pawfect-text-white");
                t.classList.add("pawfect-bg-gray-100", "pawfect-text-gray-600");
            });
            this.classList.add("active");
            this.classList.remove("pawfect-bg-gray-100", "pawfect-text-gray-600");
            this.classList.add("pawfect-bg-accent", "pawfect-text-white");

            var view = this.dataset.view;
            var columns = this.dataset.columns;

                        if (productsGrid) {
                productsGrid.setAttribute("data-view", view);
                productsGrid.className = productsGrid.className.replace(/pawfect-grid-cols-\d+|md:pawfect-grid-cols-\d+|lg:pawfect-grid-cols-\d+|xl:pawfect-grid-cols-\d+|sm:pawfect-grid-cols-\d+/g, '').trim();

                if (view === 'grid') {
                    if (columns == "2") {
                        productsGrid.classList.add('pawfect-grid-cols-1', 'md:pawfect-grid-cols-2');
                    } else if (columns == "3") {
                        productsGrid.classList.add('pawfect-grid-cols-1', 'md:pawfect-grid-cols-2', 'xl:pawfect-grid-cols-3');
                    } else if (columns == "4") {
                        productsGrid.classList.add('pawfect-grid-cols-1', 'sm:pawfect-grid-cols-2', 'lg:pawfect-grid-cols-3', 'xl:pawfect-grid-cols-4');
                    } else {
                        productsGrid.classList.add('pawfect-grid-cols-1', 'md:pawfect-grid-cols-2', 'xl:pawfect-grid-cols-3');
                    }
                } else if (view === 'list') {
                    productsGrid.classList.add('pawfect-grid-cols-1');
                }

                if (columns) {
                    productsGrid.setAttribute("data-columns", columns);
                } else {
                    productsGrid.removeAttribute("data-columns");
                }
                productsGrid.style.transition = "opacity 0.3s ease";
                productsGrid.style.opacity = "0.7";
                setTimeout(function() { productsGrid.style.opacity = "1"; }, 200);
            }
        });
    });

    var sortSelect = document.querySelector(".pawfect-sort-select");
    if (sortSelect) {
        sortSelect.addEventListener("change", function() {
            var url = new URL(window.location);
            url.searchParams.set("orderby", this.value);
            window.location.href = url.toString();
        });
    }

    if (viewToggles.length > 0) {
        var activeToggle = document.querySelector(".pawfect-view-toggle[data-view=grid][data-columns=<?php echo absint( $shop_columns ); ?>]");
        if (activeToggle) {
            activeToggle.classList.add("active");
        }
    }
});
</script>

<?php
/**
 * Hook: woocommerce_after_main_content.
 * @hooked woocommerce_output_content_wrapper_end - 10
 */
 do_action( 'woocommerce_after_main_content' );

/**
 * Hook: woocommerce_sidebar.
 * @hooked woocommerce_get_sidebar - 10
 *
 * DISABLED: We have inline sidebar in the layout above, no need for additional sidebar
 */
 // do_action( 'woocommerce_sidebar' );

get_footer('shop');
?>


