<?php

$style = isset($_GET['style']) ? sanitize_text_field($_GET['style']) : 'default';


$side_position = glowify_wp_option('side_position') ?? 'default';
$sidebar = isset($_GET['sidebar']) ? sanitize_text_field($_GET['sidebar']) : $side_position;
$side_st = isset($_GET['side_st']) ? sanitize_text_field($_GET['side_st']) : 'default';
$dtab = isset($_GET['dtab']) ? sanitize_text_field($_GET['dtab']) : 'grid';
$columns = isset($_GET['columns']) ? sanitize_text_field($_GET['columns']) : '3';
$hcat = isset($_GET['hcat']) ? sanitize_text_field($_GET['hcat']) : 'hide';

$grid_active = ($dtab === 'grid') ? 'active' : '';
$list_active = ($dtab === 'list') ? 'active' : '';

$enable_default_sidebar = glowify_wp_option('enable_default_sidebar');
$enable_shop_logo = glowify_wp_option('enable_shop_logo');
$image_logo = glowify_wp_option('shop_side_logo');


$shop_banner = glowify_wp_option('shop_banner') ?? [];
// Get Codester value (default, show, hide)
$banner_param_default = glowify_wp_option('enable_shop_banner') ?? 'default';
// Use URL param if set, otherwise fallback to Codester
$sbanner = isset($_GET['sbanner']) ? sanitize_text_field($_GET['sbanner']) : $banner_param_default;


get_header(); ?>



    <?php get_template_part( 'woocommerce/theme-part/woo-breadcrumb' ); ?>



    <!-- Start All Products  -->
    <?php if ( $sidebar === 'default' ) : ?>
        <div class="cs_overlay_filter_widgets">
            <div class="cs_overlay_filter"></div>
            <div class="cs_filter_widgets">
                <?php if($enable_shop_logo == true && !empty($image_logo['id'])) : $image_logo_src = wp_get_attachment_image_src($image_logo['id'], 'large', false); ?>
                    <div class="cs_drower_logo">
                        <a class="cs_site_branding" href="<?php echo esc_url(home_url('/')); ?>"><img src="<?php echo esc_url($image_logo_src[0]); ?>" alt="<?php echo bloginfo('name'); ?>"></a>
                    </div>
                <?php endif; ?>
                
                <?php if($enable_default_sidebar == true ) : ?>
                    <?php get_template_part( 'woocommerce/theme-part/woo-side-custom' ); ?>
                <?php else :?>
                    <?php if(is_active_sidebar('glowify-shop-sidebar') && ! (is_product()) ) : ?>
                        <div class="cs_shop_sidebar">
                            <?php dynamic_sidebar( 'glowify-shop-sidebar' ); ?>
                        </div>
                    <?php endif; ?>	
                <?php endif; ?>	
            </div>
        </div>
        <button class="cs_drawer_btn cs_accent_bg">
            <svg width="17" height="32" viewBox="0 0 17 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 15.5833C17 15.221 16.8615 14.8584 16.5849 14.5818L2.41833 0.41517C1.86477 -0.13839 0.968375 -0.13839 0.41517 0.41517C-0.138036 0.968729 -0.13839 1.86512 0.41517 2.41833L13.5802 15.5833L0.41517 28.7484C-0.13839 29.3019 -0.13839 30.1983 0.41517 30.7515C0.968729 31.3047 1.86512 31.3051 2.41833 30.7515L16.5849 16.5849C16.8615 16.3083 17 15.9457 17 15.5833Z"
                    fill="white"></path>
            </svg>
        </button>
    <?php endif;?>


<div class="cs_height_80 cs_height_lg_70"></div>

<div class="container">
    
    <?php if ( $hcat === 'show' ) : ?>
    <div class="row">
        <div class="col-12">
            <div class="cs_highlight_categories">
                <?php
                $product_categories = get_terms(array(
                    'taxonomy'   => 'product_cat',
                    'hide_empty' => true, // Set to true if you only want categories that have products
                ));

                if (!empty($product_categories) && !is_wp_error($product_categories)) {
                    foreach ($product_categories as $category) {
                    $thumbnail_id = get_term_meta($category->term_id, 'thumbnail_id', true);
                    $image_url = wp_get_attachment_url($thumbnail_id);
                    $image_url = $image_url ? $image_url : 'path/to/default.png'; // Fallback image
                    $category_link = get_term_link($category);
                    ?>
                    <a href="<?php echo esc_url($category_link); ?>" class="cs_highlight_category">
                        <div class="cs_highlight_category_thumb cs_accent_light_bg">
                        <img src="<?php echo esc_url($image_url); ?>" alt="<?php echo esc_attr($category->name); ?>">
                        </div>
                        <span class="cs_primary_font cs_primary_color cs_fs_18"><?php echo esc_html($category->name); ?></span>
                    </a>
                    <?php
                    }
                }
                ?>
            </div>
        </div>
    </div>       
    <div class="cs_height_70 cs_height_lg_60"></div>    
    <?php endif;?>      



    <div class="cs_products_with_sidebar">


        <?php if ( $sidebar === 'left' ) : ?>
        <div class="cs_filter_widgets <?php if ( $side_st === 'v2' ) : ?> cs_accent_light_bg <?php endif;?>">
            
            <?php if($enable_default_sidebar == true ) : ?>
                    <?php get_template_part( 'woocommerce/theme-part/woo-side-custom-v2' ); ?>
            <?php else :?>
                <?php if(is_active_sidebar('glowify-shop-sidebar') && ! (is_product()) ) : ?>
                    <div class="cs_shop_sidebar">
                        <?php dynamic_sidebar( 'glowify-shop-sidebar' ); ?>
                    </div>
                <?php endif; ?>	
            <?php endif; ?>	

        </div>
        <?php endif; ?>

        <div class="cs_products_wrap">
       
        <?php if ( $sbanner == 'show' && !empty($shop_banner) ) : ?>
            <div class="cs_banner_list_1"> 
                <?php foreach ( $shop_banner as $sbanner ) : 
                    $image_url = isset($sbanner['banner']) ? $sbanner['banner'] : '';
                    $link_data = isset($sbanner['link']) ? $sbanner['link'] : array();
                    $link_url  = isset($link_data['url']) ? $link_data['url'] : '#';
                ?>
                    <?php if ( !empty($image_url) ) : ?>
                        <a href="<?php echo esc_url($link_url); ?>">
                            <img src="<?php echo esc_url($image_url); ?>" alt="Banner">
                        </a>
                    <?php endif; ?>
                <?php endforeach; ?>
            </div>
            <div class="cs_height_50 cs_height_lg_50"></div>
        <?php endif; ?>

            
            <div class="cs_filter_heading cs_style_1">
                
                <?php if ( $sidebar !== 'top-filter' ) : ?>
                <div class="cs_filter_heading_left">
                    <?php woocommerce_catalog_ordering(); ?>
                </div>
                <?php endif;?>

                <?php
                /**
                 * Dynamic WooCommerce Archive Filters
                 * 
                 * This template handles category, brand, price range, review, and skin type filtering
                 * for WooCommerce archive pages.
                 */

                if ($sidebar === 'top-filter') : 
                    // Get current query parameters to maintain state
                    $current_min_price = isset($_GET['min_price']) ? intval($_GET['min_price']) : 20;
                    $current_max_price = isset($_GET['max_price']) ? intval($_GET['max_price']) : 100;
                    
                    // Get product categories
                    $product_categories = get_terms([
                        'taxonomy' => 'product_cat',
                        'hide_empty' => true,
                    ]);

                    // Get product categories
                    $product_tags = get_terms([
                        'taxonomy' => 'product_tag',
                        'hide_empty' => true,
                    ]);
                    
                    // Get product brands (assuming you have a 'brand' taxonomy)
                    $product_brands = get_terms([
                        'taxonomy' => 'product_brand',
                        'hide_empty' => true,
                    ]);
                    
                    // Get active filters
                    $active_categories = isset($_GET['product_cat']) ? explode(',', $_GET['product_cat']) : [];
                    $active_brands = isset($_GET['product_brand']) ? explode(',', $_GET['product_brand']) : [];
                    $active_rating = isset($_GET['rating_filter']) ? explode(',', $_GET['rating_filter']) : [];
                    $active_tags = isset($_GET['product_tag']) ? explode(',', $_GET['product_tag']) : [];
                ?>
                <div class="cs_filter_heading_left">
                    <h3><?php esc_html_e('Sort by', 'glowify-wp');?></h3>
                    
                    <!-- Category Filter -->
                    <div class="cs_dropdown cs_filter_dropdown">
                        <button type="button" class="cs_filter_dropdown_btn cs_dropdown_btn">
                            <?php esc_html_e('Category', 'glowify-wp');?>
                            <svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0.434142 0.5H8.56588C8.95069 0.5 9.14672 0.971108 8.87082 1.25083L4.80495 5.37302C4.63796 5.54233 4.36206 5.54233 4.195 5.37302L0.129129 1.25083C-0.146696 0.971108 0.0493364 0.5 0.434142 0.5Z" fill="#636363" />
                            </svg>
                        </button>
                        <ul class="cs_dropdown_content cs_filter_dropdown_body cs_mp_0">
                            <?php foreach ($product_categories as $category) : ?>
                            <li>
                                <div class="cs_custom_checkbox">
                                    <input type="checkbox" name="product_cat[]" value="<?php echo esc_attr($category->slug); ?>" id="cat-<?php echo esc_attr($category->term_id); ?>" <?php checked(in_array($category->slug, $active_categories)); ?> class="category-filter">
                                    <span><?php echo esc_html($category->name); ?></span>
                                </div>
                            </li>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                    
                    <?php
                    // Only display the brand filter if brands exist
                    if (!is_wp_error($product_brands) && !empty($product_brands)) : ?>
                    <div class="cs_dropdown cs_filter_dropdown">
                        <button type="button" class="cs_filter_dropdown_btn cs_dropdown_btn">
                            <?php esc_html_e('Brands', 'glowify-wp');?>
                            <svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0.434142 0.5H8.56588C8.95069 0.5 9.14672 0.971108 8.87082 1.25083L4.80495 5.37302C4.63796 5.54233 4.36206 5.54233 4.195 5.37302L0.129129 1.25083C-0.146696 0.971108 0.0493364 0.5 0.434142 0.5Z" fill="#636363" />
                            </svg>
                        </button>
                        <ul class="cs_dropdown_content cs_filter_dropdown_body cs_mp_0">
                            <?php foreach ($product_brands as $brand) : ?>
                            <li>
                                <div class="cs_custom_checkbox">
                                <input type="checkbox" name="product_brand[]" value="<?php echo esc_attr($brand->slug); ?>" id="cat-<?php echo esc_attr($brand->term_id); ?>" <?php checked(in_array($brand->slug, $active_brands)); ?> class="brand-filter">
                                    <span><?php echo esc_html($brand->name); ?></span>
                                </div>
                            </li>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                    <?php endif; ?>
                    
                    <!-- Price Range Filter -->
                    <div class="cs_dropdown cs_filter_dropdown">
                        <button type="button" class="cs_filter_dropdown_btn cs_dropdown_btn">
                            <?php esc_html_e('Price Range', 'glowify-wp');?>
                            <svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0.434142 0.5H8.56588C8.95069 0.5 9.14672 0.971108 8.87082 1.25083L4.80495 5.37302C4.63796 5.54233 4.36206 5.54233 4.195 5.37302L0.129129 1.25083C-0.146696 0.971108 0.0493364 0.5 0.434142 0.5Z" fill="#636363" />
                            </svg>
                        </button>
                        <div class="cs_dropdown_content cs_filter_dropdown_body cs_price_range cs_light">
                            <form method="get" action="<?php echo esc_url(wc_get_page_permalink('shop')); ?>" class="price-filter-form">
                                <!-- Preserve existing query parameters -->
                                <?php
                                foreach ($_GET as $key => $value) {
                                    if ($key !== 'min_price' && $key !== 'max_price' && $key !== 'apply_price') {
                                        echo '<input type="hidden" name="' . esc_attr($key) . '" value="' . esc_attr($value) . '">';
                                    }
                                }
                                ?>
                                <div class="cs_price_range_in">
                                    <div class="cs_price_range_left">
                                        <span><?php esc_html_e('Min Price', 'glowify-wp');?></span>
                                        <input type="text" name="min_price" placeholder="$20" value="<?php echo esc_attr($current_min_price); ?>">
                                    </div>
                                    <div class="cs_price_range_right">
                                        <span><?php esc_html_e('Max Price', 'glowify-wp');?></span>
                                        <input type="text" name="max_price" placeholder="$100" value="<?php echo esc_attr($current_max_price); ?>">
                                    </div>
                                </div>
                                <button type="submit" name="apply_price" value="1" class="cs_btn cs_style_1 cs_medium cs_size_md w-100"><span>APPLY</span></button>
                            </form>
                        </div>
                    </div>
                    
                    <!-- Review Filter -->
                    <div class="cs_dropdown cs_filter_dropdown">
                        <button type="button" class="cs_filter_dropdown_btn cs_dropdown_btn">
                            <?php esc_html_e('Review', 'glowify-wp');?>
                            <svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0.434142 0.5H8.56588C8.95069 0.5 9.14672 0.971108 8.87082 1.25083L4.80495 5.37302C4.63796 5.54233 4.36206 5.54233 4.195 5.37302L0.129129 1.25083C-0.146696 0.971108 0.0493364 0.5 0.434142 0.5Z" fill="#636363" />
                            </svg>
                        </button>
                        <ul class="cs_dropdown_content cs_filter_dropdown_body cs_mp_0">
                            <?php for ($i = 5; $i >= 1; $i--) : ?>
                            <li>
                                <div class="cs_custom_checkbox">
                                    <input type="checkbox" name="rating_filter[]" value="<?php echo esc_attr($i); ?>" id="rating-<?php echo esc_attr($i); ?>" <?php checked(in_array($i, $active_rating)); ?> class="rating-filter">
                                    <span>
                                    <span class="cs_rating" data-rating="<?php echo esc_attr($i); ?>">
                                    <span class="cs_rating_percentage"></span>
                                    </span>
                                    </span>
                                </div>
                            </li>
                            <?php endfor; ?>
                        </ul>
                    </div>

                    <!-- Tags Filter -->
                    <div class="cs_dropdown cs_filter_dropdown">
                        <button type="button" class="cs_filter_dropdown_btn cs_dropdown_btn">
                            <?php esc_html_e('Skin Type', 'glowify-wp');?>
                            <svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0.434142 0.5H8.56588C8.95069 0.5 9.14672 0.971108 8.87082 1.25083L4.80495 5.37302C4.63796 5.54233 4.36206 5.54233 4.195 5.37302L0.129129 1.25083C-0.146696 0.971108 0.0493364 0.5 0.434142 0.5Z" fill="#636363" />
                            </svg>
                        </button>
                        <ul class="cs_dropdown_content cs_filter_dropdown_body cs_mp_0">
                            <?php foreach ($product_tags as $tag) : ?>
                            <li>
                                <div class="cs_custom_checkbox">
                                    <input type="checkbox" name="product_tag[]" value="<?php echo esc_attr($tag->slug); ?>" id="cat-<?php echo esc_attr($tag->term_id); ?>" <?php checked(in_array($tag->slug, $active_tags)); ?> class="tag-filter">
                                    <span><?php echo esc_html($tag->name); ?></span>
                                </div>
                            </li>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                    
                    
                    
                </div>

                <!-- Add JavaScript to handle dynamic filtering -->
                <script type="text/javascript">
                jQuery(document).ready(function($) {
                    // Handle checkbox filters (category, brand, rating, skin type)
                    $('.category-filter, .brand-filter, .rating-filter, .tag-filter').on('change', function() {
                        var filterType = $(this).attr('name').replace('[]', '');
                        var selectedValues = [];
                        
                        // Collect all checked values for this filter type
                        $('input[name="' + $(this).attr('name') + '"]:checked').each(function() {
                            selectedValues.push($(this).val());
                        });
                        
                        // Current URL and parameters
                        var url = new URL(window.location.href);
                        var params = new URLSearchParams(url.search);
                        
                        // Update or remove the parameter
                        if (selectedValues.length > 0) {
                            params.set(filterType, selectedValues.join(','));
                        } else {
                            params.delete(filterType);
                        }
                        
                        // Redirect to filtered URL
                        window.location.href = url.pathname + '?' + params.toString();
                    });
                    
                    // Initialize star ratings display
                    $('.cs_rating').each(function() {
                        var rating = $(this).data('rating');
                        var percentage = (rating / 5) * 100;
                        $(this).find('.cs_rating_percentage').css('width', percentage + '%');
                    });
                });
                </script>

                <?php endif; ?>
                <div class="cs_filter_heading_right cs_light">
                    <div class="cs_view_box">
                    <?php woocommerce_result_count(); 
                    
                    ?>
                        <div class="cs_view_box_in">
                            <button type="button" class="cs_list_view <?php echo esc_attr($list_active);?>">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_57_2940)">
                                        <path d="M22.5 21H1.50001C0.671548 21 0 20.3284 0 19.5C0 18.6716 0.671548 18 1.50001 18H22.5C23.3285 18 24.0001 18.6716 24.0001 19.5C24 20.3284 23.3285 21 22.5 21Z" fill="currentColor" />
                                        <path d="M22.5 13.5H1.50001C0.671548 13.5 0 12.8284 0 12C0 11.1716 0.671548 10.5 1.50001 10.5H22.5C23.3285 10.5 24.0001 11.1715 24.0001 12C24.0001 12.8285 23.3285 13.5 22.5 13.5Z" fill="currentColor" />
                                        <path d="M22.5 5.99996H1.50001C0.671548 5.99996 0 5.32841 0 4.49995C0 3.67149 0.671548 2.99994 1.50001 2.99994H22.5C23.3285 2.99994 24.0001 3.67149 24.0001 4.49995C24.0001 5.32841 23.3285 5.99996 22.5 5.99996Z" fill="currentColor" />
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_57_2940">
                                            <rect width="24" height="24" fill="white" />
                                        </clipPath>
                                    </defs>
                                </svg>
                            </button>
                            <button type="button" class="cs_grid_view <?php echo esc_attr($grid_active);?>">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M21.1875 12.9375H15.75C14.1992 12.9375 12.9375 14.1992 12.9375 15.75V21.1875C12.9375 22.7383 14.1992 24 15.75 24H21.1875C22.7383 24 24 22.7383 24 21.1875V15.75C24 14.1992 22.7383 12.9375 21.1875 12.9375ZM22.125 21.1875C22.125 21.7044 21.7044 22.125 21.1875 22.125H15.75C15.2331 22.125 14.8125 21.7044 14.8125 21.1875V15.75C14.8125 15.2331 15.2331 14.8125 15.75 14.8125H21.1875C21.7044 14.8125 22.125 15.2331 22.125 15.75V21.1875ZM8.25 12.9375H2.8125C1.26169 12.9375 0 14.1992 0 15.75V21.1875C0 22.7383 1.26169 24 2.8125 24H8.25C9.80081 24 11.0625 22.7383 11.0625 21.1875V15.75C11.0625 14.1992 9.80081 12.9375 8.25 12.9375ZM9.1875 21.1875C9.1875 21.7044 8.76694 22.125 8.25 22.125H2.8125C2.29556 22.125 1.875 21.7044 1.875 21.1875V15.75C1.875 15.2331 2.29556 14.8125 2.8125 14.8125H8.25C8.76694 14.8125 9.1875 15.2331 9.1875 15.75V21.1875ZM8.25 0H2.8125C1.26169 0 0 1.26169 0 2.8125V8.25C0 9.80081 1.26169 11.0625 2.8125 11.0625H8.25C9.80081 11.0625 11.0625 9.80081 11.0625 8.25V2.8125C11.0625 1.26169 9.80081 0 8.25 0ZM9.1875 8.25C9.1875 8.76694 8.76694 9.1875 8.25 9.1875H2.8125C2.29556 9.1875 1.875 8.76694 1.875 8.25V2.8125C1.875 2.29556 2.29556 1.875 2.8125 1.875H8.25C8.76694 1.875 9.1875 2.29556 9.1875 2.8125V8.25ZM21.1875 0H15.75C14.1992 0 12.9375 1.26169 12.9375 2.8125V8.25C12.9375 9.80081 14.1992 11.0625 15.75 11.0625H21.1875C22.7383 11.0625 24 9.80081 24 8.25V2.8125C24 1.26169 22.7383 0 21.1875 0ZM22.125 8.25C22.125 8.76694 21.7044 9.1875 21.1875 9.1875H15.75C15.2331 9.1875 14.8125 8.76694 14.8125 8.25V2.8125C14.8125 2.29556 15.2331 1.875 15.75 1.875H21.1875C21.7044 1.875 22.125 2.29556 22.125 2.8125V8.25Z"
                                        fill="currentColor" />
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cs_height_50 cs_height_lg_50"></div>
                <?php
                if ( have_posts() ) {

                    woocommerce_product_loop_start();

                    while ( have_posts() ) {
                        the_post();

                        // Display each product in the grid
                        wc_get_template_part( 'content', 'product' );
                    }

                    woocommerce_product_loop_end();

                    echo'
                    <div class="pagination-main">';
                    // Show pagination
                    glowify_wp_pagination();
                    echo'
                    </div>';

                } else {
                    do_action( 'woocommerce_no_products_found' );
                }
                ?>
           
        </div>

        <?php if ( $sidebar === 'right' ) : ?>
        <div class="cs_filter_widgets <?php if ( $side_st === 'v2' ) : ?> cs_accent_light_bg <?php endif;?>">
            <?php if($enable_default_sidebar == true ) : ?>
                    <?php get_template_part( 'woocommerce/theme-part/woo-side-custom-v2' ); ?>
            <?php else :?>
                <?php if(is_active_sidebar('glowify-shop-sidebar') && ! (is_product()) ) : ?>
                    <div class="cs_shop_sidebar">
                        <?php dynamic_sidebar( 'glowify-shop-sidebar' ); ?>
                    </div>
                <?php endif; ?>	
            <?php endif; ?>	
        </div>
        <?php endif; ?>       


    </div>
</div>
<div class="cs_height_150 cs_height_lg_80"></div>
<!-- End All Products  -->

<?php 
get_footer();
