<?php 
$view_mode = $view_mode ?? 'grid';

if($view_mode == 'grid') { 
?>
    <div class="one-product card border bg-transparent grid-view p-2 incentive-product"
        data-prod-id="<?= $product->prod_id ?>"
        data-prod-code="<?= $product->prod_code ?>"
        data-prod-desc="<?= $product->prod_desc ?>"
        data-prod-price="<?= $product->price ?>"
        data-current-cart-quantity="<?= $current_cart_quantity ?>"

    >
        <?php if(isset($product->pfp) && $product->pfp == "1") { ?>
            <div class="profit d-none">
                <img src="<?=$img_host?>/images/icons/top-selling-line.png" title="top-selling-line" />
            </div>
            <div class="profit">
                <img src="/images/icons/ribbon/top-selling-line.png" title="top-selling-line" />
            </div>
        <?php } ?>

        <?php if(!empty($product->p_label) && $product->p_label != 'CC' && $product->p_label != '') { 
            echo "<div class='prod-label show-in-desktop'><span style='background-color:" . $product->ribbon_background."' >" . $product->p_label . "</span></div>";
            echo "<div class='prod-label show-in-mobile'><span style='background-color:" . $product->ribbon_background."' >" . $product->p_label . "</span></div>";
        } ?>

        <?php if($product->available['icon_name']) { ?>
            <?php if ($product->available['icon_name'] == 'out-of-stock' || 
                      $product->available['icon_name'] == 'new-item' || 
                      $product->available['icon_name'] == 'low-stock' || 
                      $product->available['icon_name'] == 'coming-soon') { ?>
                <div class="stock-avail" style="right: 6px; top:45px">
                    <img src="/images/icons/ribbon/<?=$product->available['icon_name']?>.png" title="<?=$product->available['icon_title']?>" />
                </div>
            <?php } else { ?>
                <div class="stock-avail">
                    <img src="<?=$img_host?>/images/icons/<?=$product->available['icon_name']?>.png" title="<?=$product->available['icon_title']?>" />
                </div>
            <?php } ?>
        <?php } ?>
       
        <?php if(!empty($user_info)) { ?>
            <i class="favorite bi bi-heart <?= $product->favorite ?>"></i>
        <?php } ?>

        <div class="card-header bg-light rounded text-center p-2">
            <?php if(!empty($product->image_url)) { ?>
                <img class="prod-image" src="<?= $img_host . '/product_images/' . $product->image_url . '?v=' . $product->image_version  ?>" alt="" loading="lazy">
            <?php } else { ?>
                <img class="prod-image" src="/images/icons/ribbon/no-product.png" alt="" loading="lazy">
            <?php } ?>
        </div>

        <!-- Card body -->
        <div class="card-body px-2 pt-2 card-body-padding-bottom">
            <!-- Title -->
            <h6 class="card-title prod-desc prod-desc-hover"><?= $product->prod_desc ?></h6>

            <div class="prod-other-props">
                <?php if(!empty($product->brand)) { ?>
                    <div>
                        <label>Brand: </label>
                        <span class="ms-2 prop-value"><?= $product->brand ?? '' ?></span>
                    </div>
                <?php } else { ?>
                    <div>&nbsp;</div>
                <?php } ?>
                
                <div>
                    <label>Pack: </label>
                    <span class="ms-2" style="color:black;">
                        <span class="prop-value"><?= $product->prod_pack_desc ?></span>
                        <label class="mx-1">x</label>
                        <span class="prop-value"><?= $product->prod_uos?></span>
                        <span class="ms-1 fw-bold prop-value"><?= $product->case ?? '' ?></span>
                    </span>
                </div>

                <div>
                    <label>Code: </label>
                    <span class="ms-2 prop-value prod_code_2do" 
                          data-trolley-type="<?= !empty($product->type) ? $product->type : 'not-sure' ?>"
                          data-can-reorder="yes"><?= $product->prod_code ?></span>
                </div>

                <div>
                    <label>RRP: </label>
                    <span class="ms-2 prop-value">£<?= number_format($product->prod_rrp,2,'.','') ?></span>
                    <label class="mx-1">|</label>

                    <label>POR: </label>
                    <span class="ms-2 prop-value"><?= $product->por ?>%</span>
                </div>

                <?php if(!empty($product->shelf_life)) { ?>
                    <div>
                        <label>Shelf Life:</label>
                        <span class="ms-2 prop-value"><?= $product->shelf_life ?? '&nbsp;' ?></span>
                    </div>
                <?php } else { ?>
                    <div>&nbsp;</div>
                <?php } ?>
            </div>

            <?php if(!empty($user_info)) { 
                if($product->price >= 0) {
            ?>
                <div class="d-flex align-items-center mt-1" style="min-height: 40px;">
                    <div class="prod-price flex-fill">
                        <?php if($product->price == 0) { ?>
                            <div class="current-price call-for-price">Call for Price</div>
                        <?php } else { ?>
                            <div class="d-flex align-items-center">
                                <span class="current-price">£<?= $product->price ?></span>
                                <?php if($product->is_show_non_promo_price) { ?>
                                  <span class="deprecated ms-2">£<?= $product->non_promo_price ?></span>
                                <?php } ?>
                            </div>
                        <?php } ?>
                            
                        <?php if(!empty($product->promo_end_text) && $product->promo_end_text) { ?>
                            <div class="promo-end-text" style="font-size: 70%"><?= $product->promo_end_text ?></div>
                        <?php } ?>
                    </div>

                    <?php if($product->available['avail']) { ?>
                      <div class="purchase-action d-flex align-items-center px-1">
                          <i class="bi bi-dash incentive-minus"></i>
                          <input class="form-control incentive-quantity" value="<?= $current_cart_quantity ?>" />
                          <i class="bi bi-plus-lg incentive-add"></i>
                      </div>
                    <?php } else { ?>
                      <div class="purchase-action d-flex align-items-center px-1 must-hide">
                          <i class="bi bi-dash incentive-minus"></i>
                          <input class="form-control incentive-quantity" value="<?= $current_cart_quantity ?>" />
                          <i class="bi bi-plus-lg incentive-add"></i>
                      </div>
                    <?php } ?>
                   
                </div>
            <?php 
                } 
            } else { 
            ?>
                <div class="d-flex justify-content-center p-1">
                    <a class='text-red login-to-see-price' href='/login'>Log in to see price</a>
                </div>
            <?php } ?>
        </div>
    </div>
<?php } ?>

<script>
(function() {
    // Handle incentive product quantity buttons (no AJAX)
    // Only attach listener once using a flag
    if (!window.incentiveProductListenerAttached) {
        window.incentiveProductListenerAttached = true;
        document.addEventListener('click', function(e) {
            if (e.target && e.target.classList.contains('incentive-add')) {
                e.stopPropagation();
                const productEl = e.target.closest('.incentive-product');
                if (productEl) {
                    const quantityInput = productEl.querySelector('.incentive-quantity');
                    if (quantityInput) {
                        const currentQty = parseInt(quantityInput.value) || 0;
                        quantityInput.value = currentQty + 1;
                    }
                }
            } else if (e.target && e.target.classList.contains('incentive-minus')) {
                e.stopPropagation();
                const productEl = e.target.closest('.incentive-product');
                if (productEl) {
                    const quantityInput = productEl.querySelector('.incentive-quantity');
                    if (quantityInput) {
                        const currentQty = parseInt(quantityInput.value) || 0;
                        if (currentQty > 0) {
                            quantityInput.value = currentQty - 1;
                        }
                    }
                }
            }
        });
    }
})();
</script>
