@{section header}
<link rel="stylesheet" href="../../../css/slider.css" /><!--Css Cod-->
<style>
        body{background-color: #fff !important;}
        .Hfooter{background: #fff !important;}
        .Hfooter *{color: #212121 !important;}
</style>
@{end}
<!-- --------------------------header--------------- -->



<div class="Hrow HpaddT-20">
        <div class="Hcontainer Hcontainer-1300  HpaddLR-10" style="display: block;">
                <p class="HpaddB-5 Hrow Htxt-center catSmallRes HpaddL-3per HpaddR-3per" data-color="var(--blue-v3)">@{resource(repository.lang,model.category)}</p>
                <p class="Hrow HpaddB-5 Htxt-center titleSmallRes HpaddL-3per HpaddR-3per" >@{model.title[repository.lang]}</p>
                <div class="Hcol-xlg-6 Hcol-lg-6 Hcol-xmd-6 Hcol-md-12 Hcol-xsm-12 Hcol-sm-12 Hcol-xs-12 Hcol-xss-12 HpaddL-5per HpaddR-5per" id="scd" >
                        <div class="Hrow">
                                @{if model.ax && model.ax.length>1}
                                <div class="" style="display:block;">
                                        <div class="min" style="display:none;">
                                                <a class="fas fa-arrow-circle-right dblock Hcursor-poi"  data-color="#fff"  style="font-size:30px;"></a>
                                        </div>
                                        <div class="Hcol-xlg-12 Hcol-lg-12 Hcol-xmd-12 Hcol-md-12 Hcol-xsm-12 Hcol-sm-12 Hcol-xs-12 Hcol-xss-12 " id="SLboxshow">
                                                <div class="img">
                
                                                </div>
                                                <div class="img360 ">
                                                        <div class="scrollHide">
                                                                <img src=""/>
                                                        </div>
                                                        <span class="fas fa-angle-right prev" data-bgcolor="#2c4295" data-color="#fff"></span>
                                                        <span class="fas fa-angle-left next" data-bgcolor="#2c4295" data-color="#fff"></span>
                                                </div>
                                                <div class="video">
                                                        
                                                </div>
                                        </div>
                                        <div class="Hcol-xlg-12 Hcol-lg-12 Hcol-xmd-12 Hcol-md-12 Hcol-xsm-12 Hcol-sm-12 Hcol-xs-12 Hcol-xss-12"></div>
                                        <div class="Hcol-xlg-12 Hcol-lg-12 Hcol-xmd-12 Hcol-md-12 Hcol-xsm-12 Hcol-sm-12 Hcol-xs-12 Hcol-xss-12" id="slleft">
                                                        <div class="Hrow Hscroll-slider1401" id="sldetail" btnoverDATA="true" scrolltype="x" currentScoll="1" activeNODEclick="true" scrollToNodeClick="true" activeNODEclass="active" nodesLength="@{!model.ax.length}" jump="1" time="">
                                                                <div class="fixbox scrollHide">
                                                                        <div class="scroll">
                                                                                @{foreach x in model.ax}
                                                                                <div class="node img" style="background-image: url('/images/products/product@{model._id}_@{!x}.webp');" ></div>
                                                                                @{end}
                                                                        </div>
                                                                </div>
                                                                <div class="btnbox">
                                                                        <span class="fas fa-angle-right prev active" data-bgcolor="#bbb8" data-color="#fff"></span>
                                                                        <span class="fas fa-angle-left next active" data-bgcolor="#bbb8" data-color="#fff"></span>
                                                                </div>
                                                        </div>
                                        </div>
                                </div>
                                @{else}
                                        <div class="Hrow constSingleIMG" style="background:url('/images/products/product@{model._id}_@{model.ax}.webp') center/cover no-repeat , url('/images/products/default.webp') center/contain no-repeat;background-color:#ddd;" ></div>
                                @{fi}
                        </div>
                </div>
                <div class="Hcol-xlg-6 Hcol-lg-6 Hcol-xmd-6 Hcol-md-12 Hcol-xsm-12 Hcol-sm-12 Hcol-xs-12 Hcol-xss-12 HpaddT-40 HpaddL-5per HpaddR-5per" id="priceBox">
                        <a class="HpaddB-5 Hfloat-L" data-color="var(--blue-v3)">@{resource(repository.lang,model.category)}</a>
                        <p class="Hrow HpaddB-5 Htxt-left title" >@{model.title[repository.lang]}</p>
                        
                        <p class="Hrow Htxt-left price font-vazirDigit HpaddB-20" style="font-size: 20px;" data-color="var(--green-v3)"> @{!model.price[1].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')} تومان</p>
                        <p class="Hrow line-limitor des font-vazirDigit">
                                @{!model.description[repository.lang]}
                        </p>
                        <div class="Hrow   normalSlider HpaddTB-20" style="display: block;">
                                
                                <div class="Hrow HpaddT-40">
                                        <div class="Hfloat-R productCount HmarL-15">
                                                <button class="fas fa-plus" data-color="#838383"></button>
                                                <input class="adad" style="font-family: VazirmatnDigit !important;" id="amountOfProduct" type="text" disabled="true" value="1" />
                                                <button class="fas fa-minus" data-color="#838383"></button>
                                        </div>
                                        <!-- <span class="Hfloat-L Hltr HpaddLR-10" style="position: relative;top:7px;" data-color="var(--gray-v3)"> | موجودی @{model.stock}</span> -->
                                        <button class="Hfloat-R HpaddLR-30 HpaddTB-7 Hcursor-poi Hround-10" style="border:0;" data-bgcolor="var(--green-v3)" data-color="#fff" id="addToBasket">در انبار موجود نمیباشد </button>
                                </div>
                        </div>
                </div>
                
        </div>
</div>

<div class="Hrow HmarT-50" style="padding:80px 20px" data-bgcolor="#E8EDDE">
        <div class="Hcontainer Hcontainer-1300">
                <div class="detailOptions HpaddB-10" >
                                <span class="HpaddLR-15 HpaddTB-5 Hcursor-poi active trans0_5" data-color="var(--gray-v3)">مشخصات</span>
                                <span class="HpaddLR-15 HpaddTB-5 Hcursor-poi trans0_25" data-color="var(--gray-v3)">روش مصرف</span>
                                <span class="HpaddLR-15 HpaddTB-5 Hcursor-poi trans0_25" data-color="var(--gray-v3)">هشدار مصرف</span>
                                <span class="HpaddLR-15 HpaddTB-5 Hcursor-poi trans0_25" data-color="var(--gray-v3)">شرایط نگهداری</span>
                                <span class="HpaddLR-15 HpaddTB-5 Hcursor-poi trans0_25" data-color="var(--gray-v3)">توضیحات</span>
                </div>
                <div class="dataBox Hrow HpaddTB-20">
                                 <div class="HpaddTB-30 active">
                                        <div class="Hcol-xlg-3 Hcol-lg-6 Hcol-xmd-6 Hcol-md-6 Hcol-xsm-6 Hcol-sm-6 Hcol-xs-12 Hcol-xss-12 Hpadd-10">
                                                <span data-color="var(--gray-v3)" >نام : </span><span  class="line-limitor Hfloat-L" style="max-height:30px;height:30px;line-height:25px;-webkit-line-clamp: 1;font-weight:550;font-family: Inter-Regular;width:calc(100% - 50px);font-size:11px;padding-top:2px;direction:ltr;" data-color="var(--navy-v3)"> @{model.name[repository.lang]}</span>
                                        </div>
                                        <div class="Hcol-xlg-3 Hcol-lg-6 Hcol-xmd-6 Hcol-md-6 Hcol-xsm-6 Hcol-sm-6 Hcol-xs-12 Hcol-xss-12 Hpadd-10">
                                                <span data-color="var(--gray-v3)">کشور سازنده : </span><span class="Hfloat-L" data-color="var(--navy-v3)"> @{resource(repository.lang,model.country)}</span>
                                        </div>
                                        <div class="Hcol-xlg-3 Hcol-lg-6 Hcol-xmd-6 Hcol-md-6 Hcol-xsm-6 Hcol-sm-6 Hcol-xs-12 Hcol-xss-12 Hpadd-10">
                                                <span data-color="var(--gray-v3)"> تحت لیسانس : </span><span class="Hfloat-L" data-color="var(--navy-v3)"> @{model.mul[repository.lang]}</span>
                                        </div>
                                        <div class="Hcol-xlg-3 Hcol-lg-6 Hcol-xmd-6 Hcol-md-6 Hcol-xsm-6 Hcol-sm-6 Hcol-xs-12 Hcol-xss-12 Hpadd-10">
                                                <span data-color="var(--gray-v3)">شرکت : </span><span class="Hfloat-L" data-color="var(--navy-v3)"> @{model.company[repository.lang]}</span>
                                        </div>
                                        <div class="Hcol-xlg-3 Hcol-lg-6 Hcol-xmd-6 Hcol-md-6 Hcol-xsm-6 Hcol-sm-6 Hcol-xs-12 Hcol-xss-12 Hpadd-10">
                                                <span data-color="var(--gray-v3)"> نوع محفظه : </span><span class="Hfloat-L" data-color="var(--navy-v3)"> @{resource(repository.lang,model.packageType)}</span>
                                        </div>
                                        <div class="Hcol-xlg-3 Hcol-lg-6 Hcol-xmd-6 Hcol-md-6 Hcol-xsm-6 Hcol-sm-6 Hcol-xs-12 Hcol-xss-12 Hpadd-10">
                                                <span data-color="var(--gray-v3)"> تعداد : </span><span class="Hfloat-L font-vazirDigit" data-color="var(--navy-v3)"> @{model.capacity}</span>
                                        </div>
                                        <div class="Hcol-xlg-3 Hcol-lg-6 Hcol-xmd-6 Hcol-md-6 Hcol-xsm-6 Hcol-sm-6 Hcol-xs-12 Hcol-xss-12 Hpadd-10">
                                                <span data-color="var(--gray-v3)"> رده سنی : </span><span class="Hfloat-L Hltr font-vazirDigit" data-color="var(--navy-v3)"> @{model.ageGroup}</span>
                                        </div>
                                        <div class="Hcol-xlg-3 Hcol-lg-6 Hcol-xmd-6 Hcol-md-6 Hcol-xsm-6 Hcol-sm-6 Hcol-xs-12 Hcol-xss-12 Hpadd-10">
                                                <span data-color="var(--gray-v3)"> عصاره : </span><span class="Hfloat-L" data-color="var(--navy-v3)"> @{model.extract[repository.lang]}</span>
                                        </div>
                                       
                                 </div>
                                 <div class="HpaddTB-30" data-color="var(--navy-v3)">
                                        @{!model.methodOfUse[repository.lang].replaceAll('\n', '</br></br>')}
                                 </div>
                                 <div class="HpaddLR-10 HpaddTB-30">
                                        <ul data-color="var(--navy-v3)">
                                                @{foreach x in model.warningOfUsage[repository.lang]}
                                                <li class="HpaddTB-10">@{!x}</li>
                                                @{end}
                                        </ul>
                                 </div>
                                 <div class="HpaddLR-10 HpaddTB-30">
                                        <ul data-color="var(--navy-v3)">
                                                @{foreach x in model.maintenance[repository.lang]}
                                                <li class="HpaddTB-10">@{!x}</li>
                                                @{end}
                                        </ul>
                                 </div>
                                 <div class="HpaddTB-30" data-color="var(--navy-v3)" style="line-height:30px;text-align: justify;font-family:VazirmatnDigit;">
                                        @{!model.description[repository.lang].replaceAll('\n', '</br>')}
                                 </div>
                </div>
        </div>
</div>



<!-- --------------------------footer--------------- -->
@{section footer}

<script src="../script/slider.js"></script>
<script src="../../../js/slider-1401.js"></script>


<script>
    let date=`@{repository.currentDate}`;
    var price=@{json(model.price)};
    var priceMain=@{json(model.price)};
    var offer=`@{model.offer}`;
    offer=(Number(offer))?Number(offer):0;

    $(document).ready(function(){
        const keys = Object.keys(price);


        $("#addToBasket").click(function(){
                if(localStorage.exTime){
                        localStorage.removeItem("@{model._id}");
                        var obj={"name":`@{json(model.name)}`,"priceBox":JSON.stringify(price),"mainPriceBox":JSON.stringify(priceMain),"price":`${$("#finalPrice").text()*1}`,"discount":$("#finalPrice").attr("discount")*1,"amount":`${(Number($("#amountOfProduct").val())>0)?$("#amountOfProduct").val():0}`,"ax":`@{model.ax[0]}`};
                        localStorage.setItem("@{model._id}",JSON.stringify(obj));
                }else{
                        var obj={"name":`@{json(model.name)}`,"priceBox":JSON.stringify(price),"mainPriceBox":JSON.stringify(priceMain),"price":`${$("#finalPrice").text()*1}`,"discount":$("#finalPrice").attr("discount")*1,"amount":`${(Number($("#amountOfProduct").val())>0)?$("#amountOfProduct").val():0}`,"ax":`@{model.ax[0]}`};
                        localStorage.setItem("exTime",date);
                        localStorage.setItem("@{model._id}",JSON.stringify(obj));
                }
                miniBasketProductSeter();
                getTotalPrice();
                checkBasketNum();
        });
        
        for(p in price){
                price[p]=price[p] - price[p]*offer/100;
        }
        

       
       
        $("#amountOfProduct").change(function(){
                let amounts=$("#amountOfProduct").val()*1;
                let x1=findNearestNumber(amounts,keys);
                let x2=amounts - x1;
                let final = price[x1]+(price[1]*x2);
                $("#finalPrice").text(final);
                let discount=priceMain[x1]+(priceMain[1]*x2) - final;
                $("#finalPrice").attr("discount",discount);
        });

        $(".productCount button").click(function(){
                if($(this).hasClass("fa-plus")){
                        $(this).next().val(($(this).next().val()*1)+1);
                }else{
                        ($(this).prev().val()*1>1)?$(this).prev().val(($(this).prev().val()*1)-1):"";
                }
                $("#amountOfProduct").trigger("change");
        });
        $(".priceSuggestion").click(function(){
                $(".productCount input").val($(this).children().eq(0).children().filter(".num").eq(0).attr("amount")*1);
                $("#amountOfProduct").trigger("change");
        });

        $(".detailOptions span").click(function(){
                let index=$(this).index();
                $(this).siblings().removeClass("active");
                $(this).addClass("active");
                $(this).parent().next().children().removeClass("active");
                $(this).parent().next().children().eq(index).addClass("active");
        });

                $("#SLboxshow").click(function(){
                        $(this).parent().addClass("fixslid");
                        //$(this).siblings().css("display")
                });

                $(".min > a").click(function(){
                        $(this).parent().parent().removeClass("fixslid");
                });

                function controllsStatus(left,max){
                        (left<=max)?$("#SLboxshow .img360 .next").css('display','none'):$("#SLboxshow .img360 .next").css('display','block');
                        (left==0)?$("#SLboxshow .img360 .prev").css('display','none'):$("#SLboxshow .img360 .prev").css('display','block');
                }


                function showSlide(val,obj){
                   
                        switch(val){
                                case "img":
                                       
                                        $("#SLboxshow > div").css("display","none");
                                        $("#SLboxshow .video").html("");
                                        $("#SLboxshow .img").css('display','block');
                                        $("#SLboxshow .img").css("background-image",obj.css("background-image"));
                                break;
                                case "video":
                                        $("#SLboxshow > div").css("display","none");
                                        $("#SLboxshow .video").css('display','block');
                                        $("#SLboxshow .video").html("<video controls> <source src='"+obj.attr("src")+"'/></video>");

                                break;
                                case "img360":
                                       
                                        $("#SLboxshow > div").css("display","none");
                                        $("#SLboxshow .video").html("");
                                        $("#SLboxshow .img360").css('display','block');
                                        $("#SLboxshow .img360 img").attr("src",obj.attr("src"));

                                        var imgw=$("#SLboxshow .img360 > div > img").outerWidth(true);
                                        var boxw=$("#SLboxshow .img360 > div").outerWidth(true);
                                        $("#SLboxshow .img360 > div").scrollLeft((imgw/-2)+(boxw/2));
                                        controllsStatus($("#SLboxshow .img360 > div").scrollLeft(),boxw-imgw);
                                break;
                        }
                }
                
                $("#sldetail .fixbox .scroll .active").each(function(){
                                ($(this).hasClass("img"))?showSlide('img',$(this)):($(this).hasClass("video"))?showSlide('video',$(this)):($(this).hasClass("img360"))?showSlide('img360',$(this)):"";
                });

                $("#sldetail .fixbox .scroll .node").click(function(){
                        ($(this).hasClass("img"))?showSlide('img',$(this)):($(this).hasClass("video"))?showSlide('video',$(this)):($(this).hasClass("img360"))?showSlide('img360',$(this)):"";
                });


                $("#sldetail .btnbox").children().click(function(){
                        var x=$("#sldetail").attr("currentScoll")*1;
                        var obj=$("#sldetail .fixbox .scroll").children().eq(x-1);
                        (obj.hasClass("img"))?showSlide('img',obj):(obj.hasClass("video"))?showSlide('video',obj):(obj.hasClass("img360"))?showSlide('img360',obj):"";

                });



                $("#amountOfProduct").trigger("change");
               
    });
    
</script>

@{end}