@foreach($products as $product)
    <div class="col-6 col-lg-4 mt-4">
        <div class="ProductcContainerBox">
            <div class="ProductcContainer">
                <div>
                    <a href="{{ "/product/{$product->product_id}" }}">
                        <img src="{{'https://changshun.nouveau0713.com/uploadimages/products/'.$product->product_id.'/'.str_replace('.', '_t.', $product->productAlbum[0]->album_photo)}}" alt="">
                    </a>
                </div>
            </div>
            <div class="p-3 p-lg-4">
                <h2><a class="ProductName" href="{{ "/product/{$product->product_id}" }}">{{$product->product_name}}</a></h2>
                <div class="d-flex align-items-center mt-2 mt-lg-3">
                    <p class="price"><span class="color_959595">NT$</span> <span class="ms-2">{{number_format($product->product_sale_price)}}</span></p>
                    <a data-product_id="{{$product->product_id}}" class="btn_add_to_cart ms-auto" href="javascript:"><img src="{{asset('images/icons_shoppin.svg')}}" alt=""></a>
                </div>
                <a data-product_id="{{$product->product_id}}" class="CompareBtn CompareBtnPc" href="javascript:"><img class="pe-2" src="{{asset('images/icons_puch.svg')}}" alt="">比較</a>
            </div>
        </div>
    </div>
@endforeach

<script>
    function updateElementId() {
        const $el = $(".CompareBtnPc, .CompareBtnMb");
        if (window.innerWidth >= 992) {
            $el.attr("class", "CompareBtn CompareBtnPc");
        } else {
            $el.attr("class", "CompareBtn CompareBtnMb");
        }
    }

    updateElementId();
    $(window).on("resize", updateElementId);
</script>