<%
' (SS,25/02/10) Added Magic Zoom Plus
' (SS,25/06/10) Change to ShowProductDetail
' (SS,06/07/10) replaced GetProductLink with GetProductLinkWithName for SEO in Sub ShowProductRelatedItem
' (SS,07/11/11) changes to work with Magic Zoom Plus 4.04
' (SS,20/5/13) added per section price for radiators to Sub ShowProductDetail
' (SS,21/02/14) replaced facebook like with iframe version because the script version was causing problems in Chrome when going back to previous
'               page using browser back button, i.e. related product "add" buttons would stop working for 45secs and "like" might disappear
' (SS,11/09/14) New Bootstrap version, many changes
' (SS,23/10/14) Write Review was removed in Bootstrap viewed, added back in and improved to work in Bootstrap
' (SS,28/11/14) Added call to CustomShowHolidayNotice
' (SS,01/03/15) Added alt attribute to "img src" to remove W3C validation error
' (SS,08/04/19) removed google plus sharing due to it being shutdown by Google on 7/3/2019
' (SS,01/10/19) added meta itemprop tags: sku, image to get rid of Google seach console warning message, (Sub ShowProductDetail)
'               added meta itemprop tags: url and priceValidUntil in Sub ShowProductDetailPriceAndOptions, (priceValidUntil set to 30 days from today)
' (SS,12/12/19) Removed facebook and twitter sharing links, added text "Add to basket to see shipping cost"
' (SS,14/06/24) Change to Sub ShowProductDetailReviews to add "" options parameter to ShowReviewRatingStars
' (SS,09/09/24) Change to Sub ShowProductDetailPriceAndOptions to show PickID locally, also added GetPickID function
' (SS,08/11/25) For PCI compliance, replaced http://schema.org with https://schema.org (3 occurrences)
' (SS,13/05/26) Added added parameters ANumInStock, AIsNew to Sub ShowProductRelatedItem
' (SS,17/07/26) Made Pick ID visible (local only)

' (SS,13/9/14) added following class to store temporary values used by this unit/module, currently just dimensions
Class ProductDetail
  Private FDimensions
  
  Private Sub Class_Initialize()
  End Sub
  
  Private Sub Class_Terminate()
  End Sub  
  
  Public Property Get Dimensions()
    Dimensions = FDimensions
  End Property
  
  Public Property Let Dimensions(AValue)
    FDimensions = Trim(AValue)
  End Property
  
End Class

Dim oProductDetail


' --- START OF PRODUCT DETAIL TEMPLATES --- '

Sub ShowProductDetailYouAreHere(AGroup, ACategory, ASubcategory)
  ' (SS,4/6/26) add "" first parameter (for APage)
  Response.Write GetBreadcrumb("", AGroup, ACategory, ASubcategory, "")
End Sub

' (SS,1/9/14) now showing Bootstrap style alert
' (SS,24/8/17) replaced <b> with <strong>, also AProductCode is now encoded using HTMLEncode to prevent XSS injection
Sub ShowProductDetailNotFound(AProductCode)
  ShowAlertMesssage "warning", "Could not find Product Code: <strong>" & AProductCode & "</strong>"
End Sub

' (SS,15/6/09) added AShowDescription which is used to print main description or not
' (SS,25/6/10) added Or IsStockAvailable to allow ordering if not in stock but available
' (SS,30/6/11) added AProductID, used by ShowProductOptions, which was also added
' (SS,7/11/11) changes to work with Magic Zoom Plus 4.04
' (SS,17/1/13) added ending / to an img src
' (SS,20/5/13) added per section price for radiators
' (SS,1/03/15) added alt attribute to "img src" to remove W3C validation error
' (SS,29/7/15) added product code as requested by Paul
' (SS,16/9/15) added Yard Sale Only attribute to only show out of stock stuff if product has "Yard Sale Only" attribute
' (SS,4/10/17) Changed tag for product name from h2 to h1
' (SS,1/10/19) added meta itemprop sku, image to get rid of Google seach console warning message
' (SS,8/11/25) for PCI compliance, replaced http://schema.org with https://schema.org
' (SS,8/06/26) Modified for Bootstrap 5
Sub ShowProductDetail(AProductID, AProductCode, AProductName, AProductDesc, ADimensions, ASalePrice, AStdPrice, ANumInStock, ANew, ACategory, ASubcategory, AShowLarge, ALargePicWidth, ALargePicHeight, AShowDescription)

  ' (SS,13/9/14) create the private object used to store some values, for convenience, to pass onto other functions in this module
  Set oProductDetail = New ProductDetail
  oProductDetail.Dimensions = ADimensions
  
  ' (SS,26/9/17)
  Dim LBrandFound, LBrand, LMPN
  LBrandFound = GetBrandAndMPN(AProductID, AProductCode, LBrand, LMPN)        
  
%>
<!-- START OF PRODUCT DETAIL -->
<div id="product-detail" class="product-detail" itemscope itemtype="https://schema.org/Product">

  <div class="product-detail-title">
    <h1 itemprop="name"><%=AProductName%></h1>
  </div>

  <div class="row gx-4 gy-md-4 align-items-start product-detail-main">

    <div class="col-12 col-md-7 product-detail-left">

      <div class="product-detail-images">
        <div class="product-detail-main-image">
          <a data-gallery="gallery"
             id="Zoom-1"
             href="<%=GetProductImageLink(AProductCode, "o")%>"
             class="MagicZoom"
             data-options="selectorTrigger: hover; transitionEffect: false;cssClass: dark-bg;"
             title="<%=ToNamedHTML(AProductName)%>">
            <img class="img-fluid"
                 src="<%=GetProductImageLink(AProductCode, "l")%>"
                 alt="<%=AProductCode%>">
          </a>
        </div>            

        <div id="magic-zoom-thumbs" class="product-detail-thumbnails">
          <%ShowProductMoreImages AProductCode, 0, ""%>
        </div>
      </div>

      <div class="product-detail-section product-detail-description-section">
        <%ShowProductDescriptionSections(AProductDesc)%>
        <%ShowProductDetailReviews(AProductCode)%>
      </div>

    </div><!-- product-detail-left -->


    <div class="col-12 col-md-5 product-detail-right">

      <div class="product-detail-buy-box">
        <%ShowProductDetailPriceAndOptions AProductID, AProductCode, AProductName, ASalePrice, AStdPrice, ANumInStock%>
      </div>

      <div class="product-detail-related">
        <%ShowProductDetailRelated AProductCode%>
      </div>

    </div><!-- product-detail-right -->

  </div><!-- product-detail-main -->

</div>
<!-- END OF PRODUCT DETAIL -->   

<%
' (SS,24/10/14) if in write review i.e. cmd=writereview then move to this section
' (SS,29/6/26) Bootstrap 5 version, jQuery-free, scroll directly to review form
If InWriteReview Then%>
<script>
(function () {
  function scrollToWriteReview() {
    var target = document.getElementById("write-review");

    if (!target) {
      return;
    }

    window.scrollTo({
      top: target.getBoundingClientRect().top + window.pageYOffset - 20,
      behavior: "auto"
    });
  }

  if (document.readyState === "complete") {
    scrollToWriteReview();
  }
  else {
    window.addEventListener("load", function () {
      setTimeout(scrollToWriteReview, 50);
    });
  }
})();
</script>
<%End If%>

<%
  
  ' (SS,13/9/14) destroy the object created at the start
  Set oProductDetail = Nothing
End Sub

' (SS,8/6/17) separated here from ShowProductDetail above
' (SS,20/7/17) replaced h3 tag with span for stock info to make much smaller
' (SS,25/7/17) removed ShowStockNotificationLink because GetStockInfo now has it
' (SS,1/10/19) added url and priceValidUntil to get rid of warning shown in Google Search Console. priceValidUntil is set to 30 days from today.
' (SS,12/12/19) removed Facebook and Twitter like links, added text "Add to basket to see shipping cost"
' (SS,9/9/24) added PickID after Product Code for local IP only (not customers)
' (SS,9/6/26) modified for Bootstrap 5, removed "Price:" label (<span class="product-detail-price-label">Price:</span>)
' (SS,17/7/26) Made pick ID always visible (instead of hint) for CustomIsLocalPC
' (SS,20/7/26) removed Pick ID label
Sub ShowProductDetailPriceAndOptions(AProductID, AProductCode, AProductName, ASalePrice, AStdPrice, ANumInStock)
%> 
  <div class="product-detail-code">
    Product Code:
    <strong><%=AProductCode%></strong>

<% If CustomIsLocalPC Then %>
    <span class="badge text-bg-secondary product-pick-id">
      <span class="product-pick-id-value"><%=GetPickID(AProductID)%></span>
    </span> 
<% End If %>
  </div>  

  <%ShowReviewRatingV2 AProductCode, True, True, "left"%>  
  
  <div class="product-detail-price">    
    <span class="price-std"><% ShowProductPriceV2 ASalePrice, AStdPrice, False, False, "savepc" %></span>
    <%ShowProductPriceExcVAT ASalePrice, AStdPrice%>
    <span itemprop="offers" itemscope itemtype="https://schema.org/Offer">
        <meta itemprop="priceCurrency" content="<%=GetCurrencyCode%>">
        <meta itemprop="price" content="<%=GetProductPriceForMicrodata(False)%>">
        <meta itemprop="priceValidUntil" content="<%=ISODate(DateAdd("d", 30, Date))%>">
        <meta itemprop="itemCondition" content="<%=GetProductConditionForMicrodata(AProductID)%>">
        <%=GetStockAvailabilityMicrodata(AProductCode, AProductName, ANumInStock)%>
        <meta itemprop="url" content="<%=GetFullProductLinkWithName(AProductCode, AProductName)%>">
    </span>   
  </div>  
  
  <!-- REVIEW RATING *** to be improved -->
  <%'ShowReviewRatingV2 AProductCode, True, True, "left"%>
  <!-- END OF REVIEW RATING *** to be improved -->

<%If Not ProductDiscontinued(AProductCode, AProductName) Then%>
  <%If InStock(ANumInStock) Or IsStockAvailable Then%>
    <form name="frmBasket" class="form-inline" role="form" action="<%=GetProductLink(AProductCode)%>" method="post" style="margin-bottom: 10px">             
      <span class="text-success"><strong><%=GetStockInfo%></strong></span>
      <span><small><br>Add to basket to see shipping cost</small></span>
      <%ShowProductOptions AProductID%>                            
      <div id="ajax-info" class="price-total" style="margin-top: 5px; margin-bottom: 10px">
      </div>

      <div class="form-group">      
        Quantity<br>
        <select class="form-select product-detail-qty" name="qty">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>        
        </select>
       </div>
       
    </form>
    <button class="btn btn-success btn-lg text-decoration-none" onclick="<%=GetBuyOLink(AProductID)%>">
      <i class="fa-regular fa-cart-shopping"></i> Add to Basket
    </button>
  <%Else%>
    <span><%=GetStockInfo%></span>
  <%End If%>
<%End If%>


  <%CustomShowHolidayNotice "P", AProductID%>  
  
<%  
End Sub

' (SS,22/8/14)
' (SS,23/10/14) added InWriteReview
' (SS,30/6/15) improved so breaks are not added when section ends in </ul> which was creating extra space
' (SS,18/7/15) changed to not open first panel by default 
' (SS,16/9/15) change to open first panel
' (SS,8/6/17) for HF removed the accordian feature
' (SS,29/6/17) added ShowProductFiles
' (SS,8/6/26) modified for Bootstrap 5
Sub ShowProductDetailDescriptionSection(ASectionDesc, ASectionName, AFirstSection)
  Dim LBreaksBeforeDimension

  If Right(ASectionDesc, 5) = "</ul>" Then
    LBreaksBeforeDimension = ""
  Else
    LBreaksBeforeDimension = BR & BR
  End If

  If AFirstSection Then
    ' (SS,9/7/26) added class="product-description-html"
    ASectionDesc = "<div itemprop=""description"" class=""product-description-html"">" & ASectionDesc & "</div>"
  End If
%>
  <div class="product-detail-section">
    <%ShowSectionHeading ASectionName, ""%>

    <div class="product-detail-section-body">
      <%=ASectionDesc%>

      <%If AFirstSection And oProductDetail.Dimensions <> "" Then%>
        <%=LBreaksBeforeDimension%><b>Dimensions:</b>&nbsp;&nbsp;<%=oProductDetail.Dimensions%>
      <%End If%>

      <%If AFirstSection Then%>
        <%ShowProductFiles(GetProductCode)%>
      <%End If%>
    </div>
  </div>
<%
End Sub

' (SS,8/6/17) separated reviews into a sub
' (SS,19/7/17) added reviews anchor
' (SS,14/6/24) added "" options parameter to ShowReviewRatingStars
' (SS,8/6/26) modified for Bootstrap 5
Sub ShowProductDetailReviews(AProductCode)
  Dim LReviewRating, LReviewCount
  LReviewRating = GetReviewRatingAndCount(AProductCode, LReviewCount)
%>
  <a id="reviews"></a>

  <div class="product-detail-section">
    <%ShowSectionHeading "Reviews <span class=""badge bg-secondary"">" & LReviewCount & "</span>&nbsp;&nbsp;" & GetReviewRatingStarsHTML(LReviewRating, ""), ""%>

    <div class="product-detail-section-body">
      <%If LReviewCount > 0 Then%>
        <span itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
          <meta itemprop="reviewCount" content="<%=LReviewCount%>" />
          <meta itemprop="ratingValue" content="<%=LReviewRating%>" />
        </span>
      <%End If%>

      <%WriteReview(AProductCode)%>
      <%ShowReviews(AProductCode)%>
    </div>
  </div>
<%
End Sub

' (SS,8/6/17) separated into this sub
' (SS,30/6/17) swapped ShowRelatedProducts and ShowViewOtherProducts to put other products first
' (SS,8/6/26) removed panel for Bootstrap 5 version
Sub ShowProductDetailRelated(AProductCode)
%>
  <%ShowViewOtherProducts(AProductCode)%>

  <div class="product-detail-section">
    <%ShowSectionHeading "Related Products <span id=""related-product-count"" class=""badge bg-secondary"">0</span>", ""%>

    <div class="product-detail-section-body">
      <%ShowRelatedProducts(AProductCode)%>
    </div>
  </div>
<%
End Sub

' (SS,30/6/17) added panel
' (SS,8/6/26) removed panel for Bootstrap 5 version
Sub ShowProductDetailViewOtherProductsHeader
%>
  <div class="product-detail-section">
    <%ShowSectionHeading "Related Categories", ""%>

    <div class="product-detail-section-body">
<%
End Sub

Sub ShowProductDetailViewOtherProductsItem(AGroup, ACategory, ASubcategory)
%>
        <div class="product-detail-other-products-single">
          <%ShowCategoryAndSubcategoryWithLink AGroup, ACategory, ASubcategory%>
        </div>
<%            
End Sub

' (SS,8/6/26) modified for Bootstrap 5
Sub ShowProductDetailViewOtherProductsFooter
%>
    </div>
  </div>
<%
End Sub

Sub ShowProductMoreImagesHeader
%>

<%
End Sub

' (SS,25/02/10) modified to work with Magic Zoom Plus
' (SS,24/5/11) changed class="MagicThumb" rel="zoom-id:Zoomer;" 
' to class="MagicThumb" rel="zoom-id:Zoomer; group:Zoomer;"
' fix first thumbnail not having previous/next arrows
' (SS,7/11/11) changes to work with Magic Zoom Plus 4.04
' (SS,18/8/14) new Bootstrap RWD version, this is version 2 which has ACaption as a parameter, and APictureID instead of AProductCode, also AMaxImageCount, calls GetProductImageLinkForPictureID instead of GetProductImageLinkWithImageNo
' (SS,01/03/15) added alt attribute to "img src" to get rid of W3C validation error
' (SS,12/6/17) optimised for latest magiczoomplus (5.2.3)
' (SS,28/7/17) first image was appearing twice in expanded view, discovered that was due to the URLs being different for both images, large and small
' the URL used in main section for original size is GetProductImageLink(AProductCode, "o")
' for the large thumbnail it's GetProductImageLink(AProductCode, "l")
' fixed by using this for the first image here i.e. AImageNo = 1
Sub ShowProductMoreImagesItem(APictureID, AImageNo, AMaxImageCount, ACaption)
  ' (SS,28/7/17) added following to get ensure exact same URL for first image as main image to prevent it appearing twice in expanded view
  Dim LOriginalImageURL, LLargeThumbnailURL
  If AImageNo = 1 Then
    LOriginalImageURL = GetProductImageLink(GetProductCode, "o")
    LLargeThumbnailURL = GetProductImageLink(GetProductCode, "l")
  Else
    LOriginalImageURL = GetProductImageLinkForPictureID(APictureID, "o")
    LLargeThumbnailURL = GetProductImageLinkForPictureID(APictureID, "l")
  End If
%>
<a class="product-detail-thumbnail MagicZoom" 
  data-gallery="gallery" data-options="hint:off;zoomMode:off;lazyZoom: true;cssClass: dark-bg;zoomWidth:300%; zoomHeight:300%"
  data-zoom-id="Zoom-1"
  href="<%=LOriginalImageURL%>" 
  data-image="<%=LLargeThumbnailURL%>" 
  title="<%=ACaption%>"
>
  <img class="img-responsive" src="<%=GetProductImageLinkForPictureID(APictureID, "s")%>" alt="<%=ACaption%>" />
</a>              
<%		
End Sub

Sub ShowProductMoreImagesFooter
%>

<%
End Sub

' (SS,9/7/26) modified for Bootstrap 5, renamed "More details" to "Downloads"
Sub ShowProductFilesHeader
%>
<div class="product-downloads">
  <div class="product-downloads-title">
    Downloads
  </div>

  <ul class="product-downloads-list">
<%
End Sub

' (SS,9/7/26) new Bootstrap 5 version
Sub ShowProductFilesItem(AProductCode, AFileName, LFileNameNoExt, AFileNo, AFileType, AFileSize)

  Dim LExt, LIconClass

  LExt = ""

  If InStrRev(AFileName, ".") > 0 Then
    LExt = LCase(Mid(AFileName, InStrRev(AFileName, ".") + 1))
  End If

  Select Case LExt
    Case "pdf"
      LIconClass = "fa-solid fa-file-pdf"

    Case "jpg", "jpeg"
      LIconClass = "fa-solid fa-file-image"

    Case "txt"
      LIconClass = "fa-solid fa-file-lines"

    Case Else
      LIconClass = "fa-solid fa-file"
  End Select
%>
  <li class="product-downloads-item">
    <a href="<%=GetProductFileLink(AProductCode, AFileNo)%>"
       target="_blank"
       rel="noopener">
      <i class="<%=LIconClass%> fa-fw" aria-hidden="true"></i>

      <span class="product-download-text">
        <span class="product-download-name"><%=HTMLEncode(LFileNameNoExt)%></span>
        <span class="product-download-size"><%=HTMLEncode(AFileSize)%></span>
      </span>
    </a>
  </li>
<%
End Sub

' (SS,9/7/26) modified for Bootstrap 5
Sub ShowProductFilesFooter
%>
  </ul>
</div>
<%
End Sub

' (SS,12/9/14) removed "<h3>You may also be interested in</h3>"
' (SS,10/6/26) Bootstrap 5 related products layout
' (SS,10/6/26) renamed classes to related-product-* for cleaner CSS
Sub ShowProductRelatedHeader
  ClearCounter ' (SS,13/9/14)
%>
  <div class="related-products">
<%
End Sub

' (SS,6/7/10) replaced GetProductLink with GetProductLinkWithName for SEO
' (SS,12/9/14) changes for Bootstrap
' (SS,17/7/15) removed style="height: 3em" from <div class="product-detail-related-item-name"> to allow flexible lines
' (SS,20/7/17) made Add button grey was blue (i.e. class change from btn-primary to btn-success)
' (SS,13/5/25) added ANumInStock, AIsNew
' (SS,10/6/26) Bootstrap 5 compact related product item
' (SS,10/6/26) renamed classes to related-product-* for cleaner CSS
Sub ShowProductRelatedItem(AProductCode, AProductName, AProductDescription, ANumInStock, AIsNew)
  IncCounter ' (SS,13/9/14)
%>
  <div class="related-product-item">

    <div class="related-product-image">
      <a href="<%=GetProductLinkWithName(AProductCode, AProductName)%>">
        <%=GetProductImgSrcThumbnailSmall(AProductCode, AProductName)%>
      </a>
    </div>

    <div class="related-product-info">

      <div class="related-product-name">
        <a href="<%=GetProductLinkWithName(AProductCode, AProductName)%>"><%=AProductName%></a>
      </div>

      <div class="related-product-buy-row">

        <div class="related-product-price">
          <% ShowProductPriceV2 CorrectCurrencyNV(GetSalePrice), CorrectCurrencyNV(GetStdPrice), True, False, "" %>
        </div>

<%If InStock(GetNumInStock) Or IsStockAvailable Then%>
        <a href="<%=GetBuyLink(AProductCode)%>" class="btn btn-success btn-sm related-product-add-button" role="button">Add</a>
<%End If%>

      </div>

      <div class="related-product-stock">
        <%=GetStockInfo%>
      </div>

    </div>

  </div>
<%
End Sub

' (SS,13/9/14) set the count in the header
Sub ShowProductRelatedFooter
%>
  </div><!-- related-products -->

<script>
  document.getElementById("related-product-count").innerHTML = '<%=GetCounter%>';
</script>

<!-- (SS,13/6/17) disable the hint when hovering over thumbnail image, need to move to a different section e.g. footer of this page -->
<script>
mzOptions = {
    onZoomReady: function() {
        $('a[data-zoom-id]').removeAttr('title')
    }
};
</script>
<%
End Sub


' (SS,28/7/17) returns the HTML for rendering the option image (called from Function GetProductOptionComboBox in apputils.asp)
' prior to this, this code was in apputils, which I now realise wasn't a good idea
' replaced cssClass: white-bg with dark-bg
' (SS,10/6/26) Bootstrap 5 version - removed old BS3 grid classes
Function GetProductDetailOptionImageHTML(AOptionValue, AOptionValueID)
  Dim Result, LMagicZoom

  Result = ""

  LMagicZoom = " data-image=""" & GetProductOptionValueImageLink(AOptionValueID, "l") & """"

  Result = Result & "<div class=""product-option-image-inner"">"

  Result = Result & "<a class=""MagicZoom product-option-image-link"""
  Result = Result & " data-gallery=""gallery"""
  Result = Result & " data-options=""hint:off;zoomMode:off;lazyZoom:true;cssClass:dark-bg;zoomWidth:300%;zoomHeight:300"""
  Result = Result & " data-zoom-id=""Zoom-1"""
  Result = Result & " href=""" & GetProductOptionValueImageLink(AOptionValueID, "o") & """"
  Result = Result & " title=""" & AOptionValue & """"
  Result = Result & LMagicZoom
  Result = Result & ">"

  Result = Result & "<img class=""product-option-image"" src=""" & GetProductOptionValueImageLink(AOptionValueID, "s") & """ alt=""" & AOptionValue & """>"

  Result = Result & "</a>"
  Result = Result & "</div>"

  GetProductDetailOptionImageHTML = Result
End Function

' (SS,9/9/24) returns calculated PickID (to be shown locally only)
' based to MySQL statement used in Shopping Admin: REVERSE(LPAD(CAST(ProductID AS CHAR), GREATEST(LENGTH(ProductID), 4), "0"))
Function GetPickID(AProductID)
  Dim LProductIDPadded, LPickID, i  
  LProductIDPadded = Right("0000" & AProductID, 4)
  
  LPickID = ""
  For i = 4 To 1 Step -1
    LPickID = LPickID & Mid(LProductIDPadded, i, 1)
  Next
  
  GetPickID = LPickID
End Function


' --- END OF PRODUCT DETAIL TEMPLATES --- '


%>