lazy_load_group.push(
          {
              id: 'js-bottom-product-box',
              target: '#js-bottom-product-box',
              loadFn: function () {
                  getRelativeProduct();
              },
          },
      
           {
              id: 'js-review-holder',
              target: '#js-review-holder',
              loadFn: function () {
                 getRatingComment();
              },
          },
    )
  

 


  // GET PRODUCT RELATIVE
  function getRelativeProduct() {
    var categoryID = parseInt($('.section-details').attr('data-item_category-id'));
    var params = {
      action_type: "product-list",
      category: categoryID,
    };

    var target = "#js-bottom-product-box";

    Hura.Ajax.get("product", params).then(function (data) {
      //console.log(data.list)
      var currentProductID = parseInt($('.section-details').attr('data-item_id'));
      var newDataList = data.list.filter(item => item.id !== currentProductID);

      if (data.list.length > 0) {
        var html = Hura.Template.parse(listRelativeProduct, newDataList);
        Hura.Template.render(target, html);
      } else {
        $("#js-bottom-product-box").html(`<p class="alert-mess">Sản phẩm đang cập nhập</p>`)
      }
    });
  }
 
  
   // SWIPER BOTTOM PRODUCT BOX
  function productBottomBoxSwiper() {
    new Swiper(".bottom-product-box-swiper", {
      slidesPerView: 4,
      spaceBetween: 12,
      rewind: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      breakpoints: {
        // when window width is >= 1600px
        1600: {
          slidesPerView: 5,
        },
      },
    });
  }
 



   const galleryTop = new Swiper(".gallery-top", {
      spaceBetween: 16,
      slidesPerView: 1,
      thumbs: {
            swiper: galleryThumbs,
       },
      // AUTO SILDED AT FISRT AND END
      on: {
        slideChange: function () {
          let activeIndex = this.activeIndex + 1;

          let activeSlide = document.querySelector(
            `.gallery-thumbs .swiper-slide:nth-child(${activeIndex})`
          );
          let nextSlide = document.querySelector(
            `.gallery-thumbs .swiper-slide:nth-child(${activeIndex + 1})`
          );
          let prevSlide = document.querySelector(
            `.gallery-thumbs .swiper-slide:nth-child(${activeIndex - 1})`
          );

          if (
            nextSlide &&
            !nextSlide.classList.contains("swiper-slide-visible")
          ) {
            this.thumbs.swiper.slideNext();
          } else if (
            prevSlide &&
            !prevSlide.classList.contains("swiper-slide-visible")
          ) {
            this.thumbs.swiper.slidePrev();
          }
        },
      },
    });
  
  // FANCY-BOX
  function fancyBox() {
    Fancybox.bind('[data-fancybox="gallery"]', {
      Toolbar: {
        display: [
          {
            id: "counter",
            position: "center",
          },
          "zoom",
          "slideshow",
          "fullscreen",
          "thumbs",
          "close",
        ],
      },
      //click: "unset",
      on: {
        initLayout: (fancybox) => {
          // Create left column
          const $leftCol = document.createElement("div");
          $leftCol.classList.add("fancybox__leftCol");

          while (fancybox.$container.firstChild) {
            $leftCol.appendChild(fancybox.$container.firstChild);
          }

          // Add elements to DOM
          fancybox.$container.appendChild(fancybox.$backdrop);
          fancybox.$container.appendChild($leftCol);
          fancybox.$leftCol = $leftCol;
        },
        "Carousel.ready Carousel.change": (fancybox, carousel, slideIndex) => {
          // Get index of the current gallery item
          slideIndex =
            slideIndex === undefined
              ? carousel.options.initialPage
              : slideIndex;

          // console.log(slideIndex);
          // Get link related to current item
          const $trigger = fancybox.items[slideIndex].$trigger;

          // Get data from `data-info` attribute
          const data = $trigger.dataset.info || "";
        },
      },
    });
  }
  fancyBox();





   // ADD PRODUCT TO CART - PRODUCT DETAILS
  function addProductToCart(product_id, variant_id_fake, props) {
    const props_quantity = parseInt($(".js-buy-quantity-temp").attr("value"));
  	const stockQuantity = parseInt($(".bk-check-out-of-stock").attr("value"));
    //console.log(stockQuantity);
  	
  	var variant_id  = 0;
  	var data = $('.js-variant-option-container input[type="hidden"]').val();
      if (data) {
        var newData = JSON.parse(data)
        variant_id  = newData.variant_id;
    }
  	
  	if (stockQuantity) {
      var product_props = {
        quantity: props_quantity,
        buyer_note: "",
      };

      Hura.Cart.Product.add(product_id, variant_id, product_props).then(function (
        response
      ) {
        // Error response
        if (response.status === "error") {
          if (response.error_type == "item-in-cart") {
            alert("Sản phẩm đã trong giỏ hàng");
          } else if (response.error_type == "invalid-item-id")
            alert("ID sản phẩm không đúng");
          else alert(response.message);
        }
        // Success response
        else {
         modalSuccess();
         change_cart_amount();
        }
      });
  	} else {
  		alert("Sản phẩm không có sẵn. Vui lòng chọn sản phẩm khác hoặc liên hệ. Xin cảm ơn!")
  	}
  }
  
  
   // BUY NOW
  function buyNow(product_id, variant_id_fake, props) {
    addProductToCart(product_id, variant_id_fake, props);
  	const stockQuantityCheck = parseInt($(".bk-check-out-of-stock").attr("value"));
  	if (stockQuantityCheck) {
      setTimeout(function () {
        window.location.href = "./cart";
      }, 1500);
  	}
  }
  
  // LANG NGHE THAY DOI SO LUONG SP
  function listenQuantityBuy() {
    const $track_change = $(".js-quantity-change");

    //thay doi so luong sp mua, neu nhap so luong
    $track_change.on("change", function (e) {
      if($(this).val() < 1 && 1<2) $(this).val(1);
      $(".js-buy-quantity-temp").attr("value", e.target.value);
    });

    //thay doi so luong sp theo - hoac +
    $track_change.on("click", function (e) {
      if (e.target.nodeName === "INPUT") return;

      let quantity_change = parseInt(this.getAttribute("data-value"));
      let $row = $(this).closest(".cart-quantity-select");
      let current_quantity = parseInt($row.find(".js-buy-quantity").val());

     //loai bo so luong vo ly
      if(current_quantity + quantity_change < 1 && 1 < 2) {
                $(".js-buy-quantity").val(1);
                return ;
      } 

      let totalQuantity = current_quantity + quantity_change;

      $row.find(".js-buy-quantity").val(totalQuantity);
      $(".js-buy-quantity-temp").attr("value", totalQuantity);
    });
  }




  function renReplyReview(new_replies){
  var html = '';

  new_replies.forEach(function(value,item){
  var check_user = `<span class="avatar">
  <b class="avatar-user">`+value.user_name+`</b>
  </span>
  <b class="name">`+value.user_name+`</b>`;
  if (value.is_user_admin == 1) {
  check_user = `<i class="cmt-logo"></i>
  <b class="name">`+value.user_name+`</b>
  <i class="qtv">QTV</i>`
  }

  if(value.is_user_admin == 1 || value.approved == 1){
  html += `
  <div class="item_reply">
    <div class="comment_right">
      <div class="comment-name">
        `+check_user+`
      </div>

      <div class="reply-content">`+value.content+`</div>
    </div>
  </div>
  `;
  }
  })

  return html;
  }
  
  
 // COMMENT KHÁCH HÀNG
  
const is_admin_login = "no";
const customer_info = 0;
  
$(document).ready(function () {
  
 
  
  $(".comment-form textarea").focus(function(){
  	$(this).parent().find(".form-input").show();
  });
  
  layComment({{ page.product_info.productId }}, "product", "", "", "new");
  $("#js-show-comment").click(function(){
  	$("#js-box-review").toggle();
  });
  
  $("#comment_keyword").keydown(function(e){
    if(e.keyCode==13){
    var search_field = $(".search-comment select").val();
    var keyword = $("#comment_keyword").val();
    //console.log(search_field +"---"+keyword);
    layComment({{ page.product_info.productId }},keyword,search_field,'new');
    }
  });
  
  $(".comment-action-list .sort a").click(function(){
    $(".comment-action-list .sort a").removeClass("current");
    $(this).addClass("current");
  });
  
});



function checkReply(is_admin_login, customer_info, replyTo) {
  var formReply = "";
  if (is_admin_login == "yes") {
    formReply =`
  <div class="input-text" style="margin-bottom: 20px;align-items: center;display: flex;">
    <p style="margin: 0 10px 0 0;color: #f15a22;">Bạn đang đăng nhập là Admin</p>
    <input type=hidden id="name`+replyTo+`" value='Admin'/>
    <input type=hidden id="email`+replyTo+`" value='admin@gmail.com'/>

    <a href="javascript:;" class="send_form" onclick="postComment(`+replyTo+`,'reply')"> Gửi bình luận </a>
  </div>
  `;
  } else if (is_admin_login == "no" && customer_info.length > 0) {
    formReply =
      `
            <div class="input-text">
                <input type=hidden id="name`+replyTo+`" value=''/>
                <input type=hidden id="email`+replyTo+`" value=''/>

                <a href="javascript:;" class="send_form" onclick="postComment(`+replyTo+`,'reply')"> Gửi bình luận </a> 
            </div>
            `;
  } else
    formReply =
      `
                <div class="comment-form-input" id="comment-form-input-0" style="display: block;">
                    <div class="form-group input-text">
                        <input type="text" id="name`+replyTo+`" placeholder="Họ và tên" name='user_post[user_name]' class="inputText" value=""/>

                        <input type="text" id="email`+replyTo+`" placeholder="Email" name='user_post[user_email]' class="inputText" value=""/>

                        <a href="javascript:;" class="btn-send-comment send_form" onclick="postComment(`+replyTo+`,'reply')"> Gửi bình luận </a>
                    </div>
                    
                </div>`;

  return formReply;
}
  
function checkReplyReview(is_admin_login, customer_info , replyTo) {
  var formReply = '';
  if( is_admin_login == 'yes') {
  formReply = `
  <p class="note">Bạn đang đăng nhập là Admin</p>
  <input type=hidden id="review-name`+replyTo+`" value='Admin'/>
  <input type=hidden id="review-email`+replyTo+`" value='admin@gmail.com'/>
  <input type="button" onclick="postReview(`+replyTo+`,'reply')" value="Gửi" class="btn-send-comment" />
  `;
  } else if ( is_admin_login == 'no' && customer_info.length > 0 ) {
  formReply = `
  <input type=hidden id="review-name`+replyTo+`" value=''/>
  <input type=hidden id="review-email`+replyTo+`" value=''/>
  <input type="button" onclick="postReview(`+replyTo+`,'reply')" value="Gửi" class="btn-send-comment" />
  `;
  } else 
  formReply = `
  <div class="comment-form-input" id="comment-form-input-0" style="display: block;">                  
    <div class="form-group clearfix">
      <input type="text" id="review-name`+replyTo+`" name='user_post[user_name]' class="inputText" placeholder="Họ tên*" value=""/>
      <input type="text" id="review-email`+replyTo+`" name='user_post[user_email]' class="inputText" placeholder="Email*" value=""/>
      <input type="button" onclick="postReview(`+replyTo+`,'reply')" value="Gửi" class="btn-send-comment" />
    </div>
  </div>`;

  return formReply ;
}

function layComment(productId, item_type, searchText, searchField, sort) {
  var params = {
    action_type: "get",
    item_type: "product",
    item_id: productId,
    search: searchText,
    search_field: searchField,
    order_by: "new",
  };

  Hura.Ajax.get("comment", params).then(function (data) {
    //console.log("comment - ", data);
    var html = Hura.Template.parse(commentTpl, data);
    Hura.Template.render("#comment-list", html);
      
    $(".js-avatar-user").each(function () {
      var name = $(this).html().substring(0, 1);
      $(this).html(name);
    });
  });
}

function getReply(commentId) {
  var replyParams = {
    action_type: "get-reply",
    item_id: commentId,
  };

  var target = "#reply_list_" + commentId;
  Hura.Ajax.get("comment", replyParams).then(function (data) {
    // console.log("getReply - ", data);
    var html = Hura.Template.parse(replyTpl, data);
    Hura.Template.render(target, html);
    $(".js-avatar-user").each(function () {
      var name = $(this).html().substring(0, 1);
      $(this).html(name);
    });
  });
}

function send_vote(){
  var error = "";
  var number_regex1 = /^[0]\d{9}$/i;
  var number_regex2 = /^[0]\d{10}$/i;
  var idUpload = $('#js-file-upload-id').val();
  
  var check_message = document.getElementById('rating-content').value;
  if(check_message.length < 4) error += "- Bạn chưa nhập nội dung\n";
    else if(check_message.indexOf('<script') > -1) { 
  error += "- Nội dung chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại\n";
  } 
  
  var check_name = document.getElementById('rating-name').value;
  if(check_name.length < 4) error += "- Tên quá ngắn\n";
    else if(check_name.indexOf('<script') > -1) { 
  error += "- Họ tên chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại\n";
  } 
 
  var check_email = document.getElementById('rating-email').value;
    if(check_email.length < 4) {
      error += "- Bạn chưa nhập email\n";
     }   
     if(check_email.length > 4){
       if(validateEmail(check_email)==false) error += "- Email không hợp lệ\n";
     }

  if(error!=''){
  alert(error);
  return false;
  }

  var reviewParams = {
  action_type: "review",
  info : {
  item_type   : 'product',
  item_id     : {{ page.product_info.productId }},
  item_title  : `{{ page.product_info.productName }}`,
  user_name   : $("#rating-name").val(),
  user_email  : $("#rating-email").val(),
  user_avatar : '',
  user_note   : '',
  rate        : $("#select-rate-pro input:checked").val(),
  title       : `Đánh giá sản phẩm {{ page.product_info.productName }}`,
  content     : $("#rating-content").val(),
  files       : idUpload
  }
  }

  Hura.Ajax.post('customer', reviewParams).then(function (data) {
  //console.log("data",data);
  alert('Bạn đã gửi thành công!'); location.reload();
  })
}
  
function getRatingComment() {
  var params = {
  action_type: "list",
  item_id    :{{ page.product_info.productId }},
  search : '',
  search_field :'',
  order_by :'new',
  numPerPage :20,
  item_type   : 'product'
  };


  Hura.Ajax.get("review", params).then(function (data) {
  //console.log(data);
  var html = Hura.Template.parse(rating_tpl, data);
  Hura.Template.render("#js-review-holder", html);
    $(".js-avatar-user").each(function(){
      var name = $(this).html().substring(0, 1);
      $(this).html(name);
    });
  })
}  

function postComment(id, reply) {
  if (check_field(id) == false) return false;
  if (reply == "") {
    var item_type = $(".form-post [name='user_post[item_type]']").val();
    var item_id = $(".form-post [name='user_post[item_id]']").val();
    var item_title = $(".form-post [name='user_post[item_title]']").val();
    var title = $(".form-post [name='user_post[title]']").val();
    var avatar = $(".form-post [name='user_post[user_avatar]']").val();
    var user_name = $("#name" + id).val();
    var user_email = $("#email" + id).val();
    var content = $("#content" + id).val();
    var rate = $("#rating-review0 input:checked").val();
    var idUpload = $('#js-file-upload-id').val(); 

    var params = {
      action_type: "comment",
      type    :"ajax",
      info: {
          item_type   : 'product',
          item_id     : '{{ page.product_info.productId }}',
          item_title  : `{{ page.product_info.productName }}`,
          reply_to    : reply_to,
          user_email  : user_email,
          user_name   : user_name,
          user_avatar : '',
          user_note   : '',
          rate        : 5,
          title       : `{{ page.product_info.productName }}`,
          content     : content,
          files       : ''
      },
    };

    // console.log(params);

    Hura.Ajax.post("customer", params).then(function (data) {
      alert("Bạn đã gửi thành công");
      location.reload();
    });
  } else {
    var reply_to = id;
    var item_type = $(".form-reply" + id + "[name='user_post[item_type]']").val();
    var item_id = $(".form-reply" + id + "[name='user_post[item_id]']").val();
    var item_title = $(".form-reply" + id + "[name='user_post[item_title]']").val();
    var title = $(".form-reply" + id + "[name='user_post[title]']").val();
    var avatar = $(".form-reply" + id + "[name='user_post[user_avatar]']").val();
    var user_name = $("#name" + id).val();
    var user_email = $("#email" + id).val();
    var content = $("#content" + id).val();

    var params = {
      action_type: "comment-reply",
      info: {
        item_type: item_type,
        item_id: item_id,
        item_title: item_title,
        reply_to: reply_to,
        user_email: user_email,
        user_name: user_name,
        user_avatar: "",
        user_note: "",
        rate: 5,
        title: title,
        content: content,
        files: "",
      },
    };

    Hura.Ajax.post("customer", params).then(function (data) {
      alert("Bạn đã gửi thành công");
      location.reload();
    });
  }
}



function check_field(id) {
  var error = "";
  var name = document.getElementById("name"+id).value;
  var email = document.getElementById("email"+id).value;
  var content = document.getElementById("content"+id).value;

  if(email.length < 4) {
      error += "- Bạn chưa nhập email\n";
  }   
  if(email.length > 4){
       if(validateEmail(email)==false) error += "- Email không hợp lệ\n";
  }
  
   if(name.length < 4) error += "- Tên quá ngắn\n";
      else if(name.indexOf('<script') > -1) { 
      error += "- Họ tên chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại\n";
   }
  
  
   if(content.length < 4) error += "- Nội dung quá ngắn\n";
      else if(content.indexOf('<script') > -1) { 
      error += "- Nội dung chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại\n";
   } 
  
  

  if(error==''){
  return true;
  }
  else {
  alert(error);
  return false;
  }
};

function check_field_review(id) {
  var error = "";
  var name = document.getElementById("review-name"+id).value;
  var email = document.getElementById("review-email"+id).value;
  var content = document.getElementById("review-content"+id).value;

  if(name.length < 4) error += "- Tên quá ngắn\n";
    else if(name.indexOf('<script') > -1) { 
     error += "- Họ tên chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại\n";
  }
      
  if(content.length < 4) error += "- Bạn chưa nhập nội dung\n";
      else if(content.indexOf('<script') > -1) { 
         error += "- Nội dung chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại\n";
   }
  
  
   if(email.length < 4) {
      error += "- Bạn chưa nhập email\n";
   }   
   if(email.length > 4){
       if(validateEmail(email)==false) error += "- Email không hợp lệ\n";
   }

  if(error==''){
  return true;
  }
  else {
  alert(error);
  return false;
  }
};                                 
                                 
function postReview(id,reply) {
        if(check_field_review(id)==false) return false;
        var reply_to = id;
        var user_name = $("#review-name"+id).val();
        var user_email = $("#review-email"+id).val();
        var content = $("#review-content"+id).val(); 

        var params = {
            action_type: "review-reply",
            type    :"ajax",
            info : {
                item_type   : 'product',
                item_id     : '{{ page.product_info.productId }}',
                item_title  : `{{ page.product_info.productName }}`,
                reply_to    : reply_to,
                user_email  : user_email,
                user_name   : user_name,
                user_avatar : '',
                user_note   : '',
                rate        : 5,
                title       : `{{ page.product_info.productName }}`,
                content     : content,
                files       : ''
            }
        } 

        Hura.Ajax.post('customer', params).then(function (data) {
            alert("Bạn đã gửi thành công");
            location.reload();
        })
};
                                 
function formatDate(a) {
  var a = new Date(parseInt(a) * 1000);

  var year = a.getFullYear();
  var month = a.getMonth() + 1;
  var date = a.getDate();
  var hour = a.getHours();
  var min = a.getMinutes();
  var sec = a.getSeconds();
  // var time = date + '/' + month + '/' + year + ' ' + hour + ':' + min + ':' + sec ;
  var time = date + "/" + month + "/" + year;
  return time;
}

function closeFormCommentInput() {
  $(".form-input").hide();
}

function showFormReply(a) {
  $("#" + a).show();
}  
  
  function showReplyForm(id){
    var element = $("#reply-comment-"+id);
    $("#reply-comment-"+id).toggle();
  }

  function closeCommentFormInput(a){
    $(a).hide();  
  }
  
  
  
  

   // GET TIME NOW
  function getTimeDealLeftProduct() {
    const timeDealEndProduct = parseInt($('.section-details').attr("data-item_time-deal-end"));
    const timeNow = (new Date().getTime()) / 1000;
    const timeDealLeftProduct = timeDealEndProduct - timeNow;

    $(".bk-data-product-hidden .p-item").attr("data-time", timeDealLeftProduct);
  }
  
  
  // GET HOT-DEAL PRODUCT
  function getDetailDealInfo(id) {
    let params = {
      action_type: "info",
      type: "active",
      id: id,
    }

    let target = "#deal-line-detail";

    Hura.Ajax.get("deal", params).then(function (data) {     
     if (data.quantity > data.sale_quantity) {
  		let html = Hura.Template.parse(dealLineDetail, data);
         Hura.Template.render(target, html);
      } else {
        $('.box-add-number-sp').remove();
        $('.product-buy').remove();
      }
  
    
      saleTimeDown();
      dealLineWidth();
  
  	  resetImagePageDeal();
    });
  }

  {% if page.product_info.sale_rules.type == 'deal' %}
  getDetailDealInfo({{ page.product_info.sale_rules.type_id }});
  {% endif %}