@extends('webview.master')

@section('maincontent')
@section('title')
    {{ env('APP_NAME') }}-{{ $productdetails->ProductName }}
@endsection

@section('meta')
    <meta name="description" content="Online shopping in Bangladesh for beauty products, men, women, kids, fashion items, clothes, electronics, home appliances, gadgets, watch, many more.">
    <meta name="keywords" content="{{env('APP_NAME')}}, online store bd, online shop bd, Organic fruits, Thai, UK, Korea, China, cosmetics, Jewellery, bags, dress, mobile, accessories, automation Products,">
    <meta itemprop="name" content="{{ $productdetails->ProductName }}">
    <meta itemprop="description" content="Best online shopping in Bangladesh for beauty products, men, women, kids, fashion items, clothes, electronics, home appliances, gadgets, watch, many more.">
    <meta itemprop="image" content="{{env('APP_URL')}}{{ $productdetails->ProductImage }}">

    <meta property="og:url" content="{{env('APP_URL')}}product/{{ $productdetails->ProductSlug }}">
    <meta property="og:type" content="website">
    <meta property="og:title" content="{{ $productdetails->ProductName }}">
    <meta property="og:description" content="Online shopping in BD for beauty products, men, women, kids, fashion items, clothes, electronics, home appliances, gadgets, watch, many more.">
    <meta property="og:image" content="{{env('APP_URL')}}{{ $productdetails->ProductImage }}">
    <meta property="image" content="{{env('APP_URL')}}{{ $productdetails->ProductImage }}" />
    <meta property="url" content="{{env('APP_URL')}}product/{{ $productdetails->ProductSlug }}">
    <meta itemprop="image" content="{{env('APP_URL')}}{{ $productdetails->ProductImage }}">
    <meta property="twitter:card" content="{{env('APP_URL')}}{{ $productdetails->ProductImage }}" />
    <meta property="twitter:title" content="{{ $productdetails->ProductName }}" />
    <meta property="twitter:url" content="{{env('APP_URL')}}product/{{ $productdetails->ProductSlug }}">
    <meta name="twitter:image" content="{{env('APP_URL')}}{{ $productdetails->ProductImage }}">
@endsection
<style>

@media only screen and (max-width: 600px) {

.description img{
        width: 260px !important;
}
}

.star {
    font-size: 12px !important;
}

    #formTextBtn {
        color:#fff;
        width: 100%;
        font-size: 18px;
        padding: 4px;
        border-radius: 0;
        background:#0991FF;
        border-radius: 5px;
        border:1px solid #0991FF;
    }

    #formText {
        width: 95%;
        font-size: 18px;
        padding: 4px;
        border-radius: 0;
        border-image: linear-gradient(to right, #2d2dff, #ff2601) 1;
    }

    .stss {
        font-size: 14px;
        padding: 2px 5px;
        background: green;
        border-radius: 50%;
        margin-right: 2px;
        color: white;
        font-weight: bold;
    }

    .sizetext {
        color: 000;
        background: #fff;
    }

    .colortext {
        color: #000;
        background: #fff;
    }

  #buttonplus {
        font-size: 18px;
        font-weight:700;
        padding: 7px 14px;
        height: 34px;
        margin: 0;
        line-height: 4px;
        color: black;
    }

    #buttonminus {
        font-size: 18px;
        font-weight:700;
        padding: 7px 14px;
        height: 34px;
        margin: 0;
        line-height: 4px;
        color: black;
        border: 1px;
    }

    #checked {
        color: orange;
    }


    .details-imgs {
        height: 450px;
        width:100%;
        position: relative;
        overflow: hidden;
        padding: 12px 0px 0px;
    }
    
    .details-imgs img{
        height: 100%;
        width: 100%;
        object-fit: contain;
        transition: 0.35s all;
    }

  @media (max-width: 768px) {
  .details-imgs {
      height: 200px;
    }
 }

  
  .asdkfnksdfise{
      float:right
  }
   
.container_vignette_promotion {
    text-align: center;
    border-radius: 6px;
    border: 1px solid #FF7000;
    background: #fff;
    max-width: 220px;
    margin: 15px auto;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

/* Top Offer Section */
.vignette_promotion {
    border-bottom: 1px solid #FF7000;
    background: #FEF5F0;
    color: #FF7000;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vignette_promotion_titre {
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.vignette_promotion_pourcentage {
    font-size: 12px;
    font-weight: 600;
}

.remise_off {
    font-weight: 700;
    margin-left: 2px;
}

/* Countdown Timer */
.txt_compl_vignette {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    width: 100%;
    text-align: center;
    padding: 6px 8px;
    box-sizing: border-box;
    color: #333;
}

.compte_rebours_digit {
    background: #FF7000;
    color: #fff;
    padding: 2px 5px;
    border-radius: 3px;
    margin: 0 1px;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    min-width: 16px;
    text-align: center;
}

.compte_rebours_letter {
    margin: 0 2px;
    font-size: 11px;
    font-weight: 600;
}
#countdown_timer {
  font-size: 14px;
  font-weight: 700;
  color: #222;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
  min-width: 80px;
  text-align: center;
  letter-spacing: 1px;
}

/* Progress Bar */
.vignette_progress_bar {
    background-color: #E6E7E9;
    width: 70%;
    margin: 0 auto 10px;
    border-radius: 5px;
    height: 8px;
    overflow: hidden;
}

.vignette_progress_bar > div {
    background: linear-gradient(90deg, #FF7000, #FF9540);
    height: 100%;
    border-radius: 5px 0 0 5px;
    transition: width 0.3s ease;
}



 .cnt_liv_fid {
    display: flex;
    gap: 15px;
    margin: 20px 0;
    flex-wrap: wrap;
  }

  /* Delivery block */
  .bloc_mode_livraison {
    flex: 1;
    background: #f5fafa;
    border-radius: 8px;
    padding: 15px 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    font-family: Arial, sans-serif;
  }

  .bloc_mode_livraison > div:first-child {
    margin-bottom: 10px;
    font-size: 14px;
    color: #333;
  }

  .bloc_mode_livraison .date_liv_fiche {
    font-weight: bold;
    color: #222;
  }

  .bloc_depliable_zone_click {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
  }

  .bloc_depliable_zone_click:hover {
    background: #f0f0f0;
  }
.div_arrow_desc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #f0f0f0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

.div_arrow_desc:hover {
  background: #e0e0e0;
}

/* arrow style */
.arrow_desc {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: solid #333;
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

/* when active (example: open) */
.div_arrow_desc.open .arrow_desc {
  transform: rotate(45deg);
}
  .arrow_desc {
    display: inline-block;
    border: solid #555;
    border-width: 0 2px 2px 0;
    padding: 3px;
    transform: rotate(-45deg);
  }

  .bloc_depliable_cnt {
    margin-top: 10px;
    font-size: 13px;
    color: #444;
  }

  .bloc_depliable_cnt table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
  }

  .bloc_depliable_cnt td {
    padding: 6px 5px;
    font-size: 13px;
    vertical-align: middle;
  }

  .bloc_depliable_cnt img {
    max-height: 28px;
  }

  /* Loyalty block */
  .bloc_paqcad_fidcum {
    flex: 1;
    background: #fff7f5;
    border-radius: 8px;
    padding: 15px 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    font-family: Arial, sans-serif;
  }

  #new_bloc_fidelite_cumulee {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  #fidelite_image_bloc_produit img {
    width: 35px;
    height: 35px;
  }

  .texte_fidelite {
    line-height: 1.4;
  }

  .texte_nb_fidelite {
    font-weight: bold;
    color: #222;
    font-size: 14px;
  }

  .texte_small_fidelite {
    font-size: 13px;
    color: #666;
  }
  
  @media (max-width: 768px) {
  .cnt_liv_fid {
    display: block;
  }

  .cnt_liv_fid > div {
    margin-bottom: 15px;
  }
}
</style>
<!-- Body -->

<div class="body-content" id="top-banner-and-menu">
    <div class='container'>
        <div class='row single-product'>
            <div class='p-0 col-md-12'>
                <div class="detail-block">
                    <div class="row wow fadeInUp">

                        <div class="col-xs-12 col-sm-12 col-md-6 gallery-holder">
                            <div class="product-item-holder size-big single-product-gallery small-gallery">

                                @if(json_decode($productdetails->PostImage))
                                    <div id="sync1" class="owl-carousel owl-theme">
                                        <div class="items">
                                           <div class="details-imgs">
                                            <img src="{{ asset($productdetails->ProductImage) }}" alt="" style="border-radius: 4px;">
                                        </div>
                                         </div>
                                        @forelse (json_decode($productdetails->PostImage) as $image)
                                            <div class="items">
                                             <div class="details-imgs">
                                                <img  src="{{asset('public/images/product/slider')}}/{{$image}}" alt="" style="border-radius: 4px;">
                                            </div>
                                            </div>
                                        @empty
                                        @endforelse
                                    </div>
                                    <div id="sync2" class="owl-carousel owl-theme" style="padding-top: 10px;">
                                        <div class="items">
                                            <img class="w-100 h-100"  style="padding:6px;border:1px solid;border-radius: 4px;"  src="{{ asset($productdetails->ProductImage) }}" alt="">
                                        </div>
                                        @forelse (json_decode($productdetails->PostImage) as $image)
                                            <div class="items">
                                                <img class="w-100 h-100"  style="padding:6px;border:1px solid;border-radius: 4px;" src="{{asset('public/images/product/slider')}}/{{$image}}" alt="">
                                            </div>
                                        @empty
                                        @endforelse
                                    </div>
                                @else
                                    <div class="items">
                                        <div class="details-imgs">
                                            <img  src="{{ asset($productdetails->ProductImage) }}" alt="" style="border-radius: 4px;">
                                        </div>
                                    </div>
                                @endif

                            </div>
                            <!-- /.single-product-gallery -->
                        </div>
                        <!-- /.gallery-holder -->
                        <div class="col-sm-12 col-md-6 product-info-block" id="paddingnone">
                            <div class="product-info px-2" id="productinfo">
                                <h1 class="name" style="margin-top:16px !important;padding-bottom: 6px;font-size: 20px !important; line-height: 25px;"> {{ $productdetails->ProductName }}</h1>
                                <p>{{ $productdetails->ProductBreaf }}</p>
                                   @if($productdetails->brand_id)
                                        <div class="my-2" >
                                            <P style="font-size: 20px;">by {{ $productdetails->brand->brand_name }}</P>
                                        </div>
                                    @endif

                                 <div class="stock-container info-container m-t-10" style="margin-top:5px;">
                                    <div class="row" style="margin-bottom:5px;">
                                        <div class="col-12">
                                          <div class="asdkfnksdfise my-3">
                                              <div class="container_vignette_promotion">
                                                  <div class="vignette_promotion">
                                                    <span class="vignette_promotion_titre">Special offer</span>
                                                    <span class="vignette_promotion_pourcentage back_to_line">
                                                      1 = 20% <span class="remise_off">off</span>, 
                                                      2 = 25% <span class="remise_off">off</span>
                                                    </span>
                                                  </div>
                                                
                                                  <div class="txt_compl_vignette fiche_comreb_vignette">
                                                      <span>Ends in </span>
                                                      <span id="countdown_timer">24:00:00</span>
                                                    </div>
                                                    
                                                                                                    
                                                  <div class="vignette_progress_bar">
                                                    <div style="width:13%;"></div>
                                                  </div>
                                                </div>
 
                                            @if (App\Models\Size::where('product_id', $productdetails->id)->first())
                                            <div class="" style="color:black;padding-top: 6px;text-align: right; font-family: "Outfit", sans-serif;" id="productPriceAmount;">
                                                 @if(App\Models\Size::where('product_id', $productdetails->id)->first()->Discount>0) <del class="old-product-price" style="font-size: 20px;text-align: right;">৳{{ round(App\Models\Size::where('product_id',$productdetails->id)->first()->RegularPrice) }}</del>@endif
                                            </div>
                                            <div class="product-price strong-700" style="color:black;font-weight:bold;padding-top: 6px;text-align: right; font-family: "Outfit", sans-serif;" id="productPriceAmount;"> ৳
                                                <span id="salePrice" style="font-size: 30px; font-family: "Outfit", sans-serif;">{{ App\Models\Size::where('product_id', $productdetails->id)->first()->SalePrice }}</span>
                                            </div>
                                            @else
                                                <div class="product-price strong-700"  style="color:black;font-weight:bold;padding-top: 6px; text-align: right; font-family: "Outfit", sans-serif;" id="productPriceAmount">
                                                    <span id="salePrice" style="color:black;font-weight:bold;font-size: larger; font-family: "Outfit", sans-serif;">{{ App\Models\Weight::where('product_id', $productdetails->id)->first()->SalePrice }}</span> TK
                                                </div>
                                            @endif
                                            
                                            <div style="text-align: right;">
                                                <span >In Stock</span>
                                            </div>
                                            
                                            <div class="pr-2 d-flex mt-1" style="text-align: right;">
                                               <div class="me-4">
                                                    <label class="control-label" for="input-quantity" style="font-weight: 600;font-size: 18px;">Qty</label>
                                               </div>
                                                <button class="btn btn-sm border" id="buttonminus" onclick="minus()">-</button>
                                                <div class="cart-quantity" style="height: 33px;">
                                                    <div class="quant-input">
                                                        <input type="text" class="form-control" style="font-size: 20px;height: fit-content;height: 34px;padding:0px;width: 80px;text-align: center;" value="1" id="qtyval">
                                                    </div>
                                                </div>
                                                <button class="btn btn-sm border" id="buttonplus" onclick="plus()">+</button>
                                            </div>
                                           
                                          </div>
                                        </div>
                                    </div>
                                    <!-- /.row -->
                                </div>
                                <!-- /.stock-container -->
                            
                                <div class="text-end quantity-container info-container"  style="width: 100%;border-bottom: 1px solid #dfd6d6; float: left;">
                                     <form name="form" action="{{ url('add-to-cart') }}" id="submitaddtocart" method="POST" enctype="multipart/form-data" style="text-align: right;">
                                        @method('POST')
                                        @csrf
                                        <input type="hidden" name="color" id="product_colororder" value="{{$varients[0]->color}}">
                                        <input type="hidden" name="size" id="product_sizeorder" value="">
                                        <input type="hidden" name="sigment" id="product_sigmentorder" value="">
                                        <input type="hidden" name="price" id="product_priceorder" value="">

                                        <input type="hidden" name="product_id" value=" {{ $productdetails->id }}" hidden>
                                        <input type="hidden" name="qty" value="1" id="qtyoror">
                                        <div class="d-flex justify-content-end">
                                             <button type="submit" class="mb-0 ml-2 btn btn-styled btn-base-1 btn-icon-left strong-700 hov-bounce hov-shaddow buy-now mx-2"
                                                style="background:#F79AC0;color:white;font-size: 17px;width:45%;">
                                                  Add to Cart
                                            </button>
                                            
                                            <button type="submit" class="mb-0 ml-2 btn btn-styled btn-base-1 btn-icon-left strong-700 hov-bounce hov-shaddow buy-now mx-2"
                                                style="background:#F79AC0;color:white;font-size: 17px;width:45%;">
                                                Order Now
                                            </button>
                                        </div>
                                    </form>
                                </div>
                                
                                <div class="row">
                                <div class="cnt_liv_fid">
                                  <!-- Delivery Block -->
                                  <div id="bloc_mode_livraison_41288" class="bloc_mode_livraison">
                                    <div>
                                      <div>Home delivery</div>
                                      <div>From <span class="date_liv_fiche">25th August 2025</span></div>
                                    </div>
                                
                                    <div class="bloc_depliable">
                                      <div class="bloc_depliable_zone_click">
                                        <div>See all delivery methods</div>
                                        <div class="div_arrow_desc">
                                          <span class="arrow_desc"></span>
                                        </div>

                                      </div>
                                    </div>
                                  </div>
                                
                                  <!-- Loyalty Block -->
                                  <div id="bloc_paqcad_fidcum_41288" class="bloc_paqcad_fidcum">
                                    <div id="new_bloc_fidelite_cumulee">
                                      <div id="fidelite_image_bloc_produit">
                                        <img src="//cdn1.costatic.com/assets/img/fidelite/picto_fidelite_noir_new.svg" alt="loyalty">
                                      </div>
                                      <div class="texte_fidelite">
                                        <div class="texte_nb_fidelite"><span class="bold">+290 points</span></div>
                                        <div class="texte_small_fidelite">of loyalty thanks to this product</div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                </div>

                                

                            </div>
                            <!-- /.product-info -->
                        </div>
                        <!-- /.col-sm-7 -->
                    </div>
                    <!-- /.row -->
                </div>
            </div>
            <!-- /.col -->
            <div class="clearfix"></div>
        </div>
        <div class="row single-product">
            <div class="p-0 col-md-12">
                <div class="product-tabs inner-bottom-xs wow fadeInUp">
                    <div class="row">
                        <div class="col-sm-12">
                            <ul id="product-tabs" class="nav nav-tabs nav-tab-cell" style="display: inline-flex;">
                                <li class="active"><a data-bs-toggle="tab" id="istteb"
                                        href="#description">DESCRIPTION</a></li>
                            </ul>
                            <!-- /.nav-tabs #product-tabs -->
                        </div>
                        <div class="col-sm-12">

                            <div class="tab-content">

                                <div id="description" class="tab-pane active">
                                    <div class="product-tab">
                                        <p class="text">{!! $productdetails->ProductDetails !!}</p>
                                        @if (isset($productdetails->youtube_embade))
                                            <br>
                                            <div class="card">
                                                <div class="card-body">
                                                    <iframe width="100%" height="315"
                                                        src="https://www.youtube.com/embed/{{ $productdetails->youtube_embade }}">
                                                    </iframe>
                                                </div>
                                            </div>
                                        @else
                                        @endif
                                    </div>
                                </div>
                                <!-- /.tab-pane -->



                            </div>
                            <!-- /.tab-content -->
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>


            </div>
        </div>

        <script>
            $(document).ready( function(){

                var sync1 = $("#sync1");
                var sync2 = $("#sync2");
                var slidesPerPage = 4; //globaly define number of elements per page
                var syncedSecondary = true;

                sync1.owlCarousel({
                    items: 1,
                    slideSpeed: 2000,
                    autoplay: false,
                    dots: false,
                    loop: true,
                    responsiveRefreshRate: 200,
                    navText: [
                        '<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>',
                        '<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'
                    ],
                }).on('changed.owl.carousel', syncPosition);

                sync2
                    .on('initialized.owl.carousel', function() {
                        sync2.find(".owl-item").eq(0).addClass("current");
                    })
                    .owlCarousel({
                        margin: 6,
                        items: slidesPerPage,
                        dots: false,
                        nav: true,
                        smartSpeed: 200,
                        slideSpeed: 500,
                        slideBy: slidesPerPage, //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
                        responsiveRefreshRate: 100
                    }).on('changed.owl.carousel', syncPosition2);

                function syncPosition(el) {
                    //if you set loop to false, you have to restore this next line
                    //var current = el.item.index;

                    //if you disable loop you have to comment this block
                    var count = el.item.count - 1;
                    var current = Math.round(el.item.index - (el.item.count / 2) - .5);

                    if (current < 0) {
                        current = count;
                    }
                    if (current > count) {
                        current = 0;
                    }

                    //end block

                    sync2
                        .find(".owl-item")
                        .removeClass("current")
                        .eq(current)
                        .addClass("current");
                    var onscreen = sync2.find('.owl-item.active').length - 1;
                    var start = sync2.find('.owl-item.active').first().index();
                    var end = sync2.find('.owl-item.active').last().index();

                    if (current > end) {
                        sync2.data('owl.carousel').to(current, 100, true);
                    }
                    if (current < start) {
                        sync2.data('owl.carousel').to(current - onscreen, 100, true);
                    }
                }

                function syncPosition2(el) {
                    if (syncedSecondary) {
                        var number = el.item.index;
                        sync1.data('owl.carousel').to(number, 100, true);
                    }
                }

                sync2.on("click", ".owl-item", function(e) {
                    e.preventDefault();
                    var number = $(this).index();
                    sync1.data('owl.carousel').to(number, 300, true);
                });


                $('#AddToCartForm').submit(function(e) {
                    e.preventDefault();
                    $('#processing').css({
                        'display': 'flex',
                        'justify-content': 'center',
                        'align-items': 'center'
                    })
                    $('#processing').modal('show');
                    $.ajax({
                        type: 'POST',
                        url: '{{ url('add-to-cart') }}',
                        processData: false,
                        contentType: false,
                        data: new FormData(this),

                        success: function(data) {
                            updatecart();
                            $.ajax({
                                type: 'GET',
                                url: '{{ url('get-cart-content') }}',

                                success: function(response) {
                                    $('#cartViewModal .modal-body').empty().append(
                                        response);
                                },
                                error: function(error) {
                                    console.log('error');
                                }
                            });
                            $('#processing').modal('hide');
                            $('#cartViewModal').modal('show');
                        },
                        error: function(error) {
                            console.log('error');
                        }
                    });
                });

                // document.getElementById("istteb").click();
                $('#owl-single-product').owlCarousel({
                    items: 1,
                    itemsTablet: [768, 1],
                    itemsDesktop: [1199, 1],
                    autoplay: true,
                    loop: true,
                    autoplayTimeout: 1000,
                    autoplayHoverPause: true,
                    responsiveClass: true,
                    dots: true,

                });
            });


        </script>


    </div>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <!-- ============================================== UPSELL PRODUCTS ============================================== -->
                <section class="pb-2 section  wow fadeInUp" id="cateoryPro" style="margin-bottom:0px !important">
                    <h3 class="section-title" style="padding: 8px;margin-bottom: 0;">Related products</h3>
                    <div class="owl-carousel related-owl-carousel featured-carousel owl-theme outer-top-xs" id="relatedCarousel">
                        @forelse ($relatedproducts as $firstpro)
                          @php
                                $regularPrice = $firstpro->sizes[0]->RegularPrice ?? 0;
                                $salePrice = $firstpro->sizes[0]->SalePrice ?? 0;
                                $discount = 0;
                                if ($regularPrice > 0 && $salePrice > 0 && $salePrice < $regularPrice) {
                                    $discount = round((($regularPrice - $salePrice) / $regularPrice) * 100);
                                }
                            @endphp
                            <div class="item" id="featuredproduct">
                                 <div class="product-micro-row">
                                   <div class="product_item_inner">
                                      <div class="product-image">
                                         <div class="sale-badge">
                                         <div class="sale-badge-inner">
                                            <div class="sale-badge-box">
                                              <span class="sale-badge-text">
                                                  {{ $discount }}% <span style="font-size:9pt;vertical-align: top;">off</span>
                                                 </span>
                                                </div>
                                            </div>
                                           </div>
                                          <div class="watermark-img">
                                              <img src="{{asset(App\Models\Basicinfo::first()->logo)}}">
                                           </div>
                                          <a href="{{ url('view-product/' . $firstpro->ProductSlug) }}">
                                          <img src="{{ asset($firstpro->ProductImage) }}">
                                          </a>
                                        </div>
                                        <!-- /.product-image -->
                                        <div class="product-text" style="padding-bottom: 4px !important;background: white;">
                                            <div class="pro_name">
                                              <a href="{{ url('view-product/' . $firstpro->ProductSlug) }}" id="f_pro_name">{{ \Illuminate\Support\Str::limit($firstpro->ProductName, 20) }}</a>
                                              <p class="my-1" style="font-size: 15px;line-height: 17px;">{!! \Illuminate\Support\Str::limit($firstpro->ProductBreaf, 40) !!}</p>
                                             </div>
                                             
                                            <div class="product-footer d-flex justify-content-center align-items-center px-3 pb-3 pt-2">
                                                <div class="price-box text-start">
                                                    <div class="old-price mb-1">৳ {{ round($firstpro->sizes[0]->RegularPrice) }}</div>
                                                    <div class="new-price">৳ {{ round($firstpro->sizes[0]->SalePrice) }}</div>
                                                </div>
                                            
                                                <a href="{{ url('view-product/' . $firstpro->ProductSlug) }}"><button class="cart-btn rounded-circle d-flex justify-content-center align-items-center mx-2">
                                                        <i class="fas fa-shopping-bag"></i>
                                                    </button></a>
                                            </div>
                                        </div>
                                   </div>
                                </div>
                           </div>
                        @empty
                        @endforelse
                    </div>
                    <!-- /.home-owl-carousel -->
                </section>
                <!-- ============================================== UPSELL PRODUCTS : END ============================================== -->

            </div>
        </div>
    </div>
    <!-- /.container -->
</div>



{{-- csrf --}}
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
@if (Auth::id())
    <input type="hidden" name="user_id" id="user_id" value="{{ Auth::id() }}">
@else
    <input type="hidden" name="user_id" id="user_id" >
@endif

@if (App\Models\Size::where('product_id', $productdetails->id)->first())
            <input type="hidden" id="gtmprice" value="{{ App\Models\Size::where('product_id', $productdetails->id)->first()->SalePrice }}">
            <input type="hidden" id="gtmdiscount" value="{{App\Models\Size::where('product_id', $productdetails->id)->first()->RegularPrice-App\Models\Size::where('product_id', $productdetails->id)->first()->SalePrice}}">
        @else
            <input type="hidden" id="gtmprice" value="{{ App\Models\Weight::where('product_id', $productdetails->id)->first()->SalePrice }}">
            <input type="hidden" id="gtmdiscount" value="{{App\Models\Weight::where('product_id', $productdetails->id)->first()->RegularPrice-App\Models\Weight::where('product_id', $productdetails->id)->first()->SalePrice}}">
        @endif

        <input type="hidden" id="gtmproductname" value="{{$productdetails->ProductName}}">
        <input type="hidden" id="gtmcategory" value="{{App\Models\Category::where('id',$productdetails->category_id)->first()->category_name}}">
        <input type="hidden" id="gtmproductid" value="{{$productdetails->id}}">
        <input type="hidden" id="gtmproductsku" value="{{$productdetails->ProductSku}}">

        <script>
        
     
            var gtmprice=$('#gtmprice').val();
            var gtmqty=$('#proQuantity').val();
            var gtmid=$('#gtmproductid').val();
            var gtmsku=$('#gtmproductsku').val();
            var gtmproductname=$('#gtmproductname').val();
            var gtmcategory=$('#gtmcategory').val();
            var gtmdiscount=$('#gtmdiscount').val();

            window.dataLayer = window.dataLayer || [];
            dataLayer.push({
                ecommerce: null
            });
            dataLayer.push({
                event: "view_item",
                ecommerce: {
                    currency: "BDT",
                    value: gtmprice,
                    items: [{
                        item_id: gtmid,
                        item_name: gtmproductname,
                        index: 0,
                        price: gtmprice,
                        discount: gtmdiscount,
                        item_brand: 'Trimeit.com',
                        item_category: gtmcategory,
                        currency: "BDT",
                        quantity: 1,
                    }]

                }
            });
         
      
            $(document).ready(function() {
                document.getElementById('submitaddtocart').addEventListener('submit', function(event) {
                    window.dataLayer = window.dataLayer || [];
                    dataLayer.push({
                        ecommerce: null
                    });
                    dataLayer.push({
                        event: "add_to_cart",
                        ecommerce: {
                            currency: "BDT",
                            value: gtmprice,
                            items: [{
                                item_id: gtmid,
                                item_name: gtmproductname,
                                index: 0,
                                price: gtmprice,
                                discount: gtmdiscount,
                                item_brand: 'Rashibd.com',
                                item_category: gtmcategory,
                                currency: "BDT",
                                quantity: $('#qtyoror').val()
                            }]
                        }
                    });
                });
            });
        </script>
        
<script>

    function givereactlike(id) {
        $.ajax({
            type: 'GET',
            url: '{{ url('give/react/') }}'+'/like',
            data: {
                'user_id': $('#user_id').val(),
                'product_id': id,
            },

            success: function(data) {
                if (data.sigment == 'like') {
                    $('#relatedCarousel #likereactof' + id).text(data.total);
                    $('#relatedCarousel #likereactdone' + id).css('color', 'green');
                }else if (data.sigment == 'unlike') {
                    $('#relatedCarousel #likereactof' + id).text(data.total);
                    $('#relatedCarousel #likereactdone' + id).css('color', 'black');
                }else {

                }

                if (data.sigment == 'like') {
                    $('#productinfo #likereactof' + id).text(data.total);
                    $('#productinfo #likereactdone' + id).css('color', 'green');
                }else if (data.sigment == 'unlike') {
                    $('#productinfo #likereactof' + id).text(data.total);
                    $('#productinfo #likereactdone' + id).css('color', 'black');
                }else {

                }

            },
            error: function(error) {
                console.log('error');
            }
        });
    }

    function givereactlove(id) {
        $.ajax({
            type: 'GET',
            url: '{{ url('give/react/') }}'+'/love',
            data: {
                'user_id': $('#user_id').val(),
                'product_id': id,
            },

            success: function(data) {
                if (data.sigment == 'love') {
                    $('#relatedCarousel #lovereactof' + id).text(data.total);
                    $('#relatedCarousel #lovereactdone' + id).css('color', 'red');
                } else {
                    $('#relatedCarousel #lovereactof' + id).text(data.total);
                    $('#relatedCarousel #lovereactdone' + id).css('color', 'black');
                }
                if (data.sigment == 'love') {
                    $('#productinfo #lovereactof' + id).text(data.total);
                    $('#productinfo #lovereactdone' + id).css('color', 'red');
                } else {
                    $('#productinfo #lovereactof' + id).text(data.total);
                    $('#productinfo #lovereactdone' + id).css('color', 'black');
                }
            },
            error: function(error) {
                console.log('error');
            }
        });
    }

</script>

<script>
    function getrelproduct(product_id, mainpro_id) {
        $('#processing').css({
            'display': 'flex',
            'justify-content': 'center',
            'align-items': 'center'
        })
        $('#processing').modal('show');
        $.ajax({
            type: 'GET',
            url: '{{ url('load/related-product') }}',
            data:{
                'product_id':product_id,
                'mainproduct_id':mainpro_id
            },
            success: function(response) {
                $('#processing').modal('hide');
                $('#loadproduct').empty().append(response);
            },
            error: function(error) {
                console.log('error');
            }
        });
    }

    function givelike(id) {
        $.ajax({
            type: 'GET',
            url: '{{ url('give/like') }}',
            data: {
                'user_id': $('#user_id').val(),
                'product_id': $('#product_id').val(),
                'review_id': id,
            },

            success: function(data) {
                if (data.status == 'like') {
                    $('#likeof' + data.review_id).text(data.total);
                    $('#likedone' + data.review_id).css('color', 'green');
                } else {
                    $('#likeof' + data.review_id).text(data.total);
                    $('#likedone' + data.review_id).css('color', 'black');
                }
            },
            error: function(error) {
                console.log('error');
            }
        });
    }

    function giveshare(id) {
        $.ajax({
            type: 'GET',
            url: '{{ url('give/share') }}',
            data: {
                'user_id': $('#user_id').val(),
                'product_id': $('#product_id').val(),
                'review_id': id,
            },

            success: function(data) {
                if (data.status == 'share') {
                    $('#shareof' + data.review_id).text(data.total);
                    $('#sharedone' + data.review_id).css('color', 'red');
                } else {
                    $('#shareof' + data.review_id).text(data.total);
                    $('#sharedone' + data.review_id).css('color', 'black');
                }
            },
            error: function(error) {
                console.log('error');
            }
        });
    }


    function checked(id) {
        if (id == 1) {
            $('#checked' + id).css('color', 'orange');
            $('#checked2').css('color', 'black');
            $('#checked3').css('color', 'black');
            $('#checked4').css('color', 'black');
            $('#checked5').css('color', 'black');
        } else if (id == 2) {
            $('#checked1').css('color', 'orange');
            $('#checked' + id).css('color', 'orange');
            $('#checked3').css('color', 'black');
            $('#checked4').css('color', 'black');
            $('#checked5').css('color', 'black');
        } else if (id == 3) {
            $('#checked1').css('color', 'orange');
            $('#checked2').css('color', 'orange');
            $('#checked' + id).css('color', 'orange');
            $('#checked4').css('color', 'black');
            $('#checked5').css('color', 'black');
        } else if (id == 4) {
            $('#checked1').css('color', 'orange');
            $('#checked2').css('color', 'orange');
            $('#checked3').css('color', 'orange');
            $('#checked' + id).css('color', 'orange');
            $('#checked5').css('color', 'black');
        } else if (id == 5) {
            $('#checked1').css('color', 'orange');
            $('#checked2').css('color', 'orange');
            $('#checked3').css('color', 'orange');
            $('#checked4').css('color', 'orange');
            $('#checked' + id).css('color', 'orange');
        } else {

        }

        $('#rating').val(id);
    }

    function loadreview() {
        $.ajax({
            type: 'GET',
            url: '{{ url('load/review') }}',

            success: function(response) {
                $('#reviewload').empty().append(response);
            },
            error: function(error) {
                console.log('error');
            }
        });
    }

    $(document).ready(function() {

        loadreview();

        $('#AddReview').submit(function(e) {
            e.preventDefault();

            $.ajax({
                type: 'POST',
                url: '{{ url('review/store') }}',
                processData: false,
                contentType: false,
                data: new FormData(this),

                success: function(data) {
                    swal({
                        title: "Success!",
                        icon: "success",
                    });
                },
                error: function(error) {
                    console.log('error');
                }
            });
        });

        $('#relatedCarousel').owlCarousel({
            loop: true,
            margin: 10,
            autoplay: true,
            autoplayTimeout: 6000,
            autoplayHoverPause: true,
            responsiveClass: true,
            nav: false,
            dots: false,
            responsive: {
                0: {
                    items: 2,
                },
                600: {
                    items: 2,
                },
                1000: {
                    items: 5,
                }
            }
        });

    });


    function minus() {
        var avqty = $('#qtyval').val();
        if (avqty == 1) {

        } else {
            qty = Number(avqty) - 1;
            $('#qtyval').val(qty);
            $('#qtyor').val(qty);
            $('#qtyoror').val(qty);
            $('#qtyad').val(qty);
        }
    }

    function plus() {
        var avqty = $('#qtyval').val();
        if (avqty == 10) {

        } else {
            qty = Number(avqty) + 1;
            $('#qtyval').val(qty);
            $('#qtyor').val(qty);
            $('#qtyoror').val(qty);
            $('#qtyad').val(qty);
        }
    }



    function getcolor(color, key) {
        $("#sync1").data('owl.carousel').to(key, 300, true);
        $('#product_color').val(color);
        $('#product_colororder').val(color);
        $('.colortext').css('color','#000');
        $('.colortext').css('border','1px solid');
        $('#colortext'+color).css('border','2px solid');
        $('.sizetext').css('color', '#000');
        $('.sizetext').css('background', '#fff');
    }

    function getsize(size) {
        $('#product_sizeorder').val(size);
        var reg = $('#regularpriceofsize' + size).val();
        var sale = $('#salepriceofsize' + size).val();
        $('#product_price').val(sale);
        $('#product_priceorder').val(sale);
        $('#salePrice').html(sale);

        $('.sizetext').css('color', '#000');
        $('.sizetext').css('background', '#fff');
        $('#sizetext' + size).css('color', '#fff');
        $('#sizetext' + size).css('background', '#613EEA');
        $('#product_sigmentorder').val('');
    }

    function getweight(weight) {
        var sig=$('#weightsigmrnt' + weight).val();
        $('#product_sigmentorder').val(sig);
        var reg = $('#regularpriceofsize' + weight).val();
        var sale = $('#salepriceofsize' + weight).val();
        $('#product_price').val(sale);
        $('#product_priceorder').val(sale);
        $('#salePrice').html(sale);

        $('.weighttext').css('color', '#000');
        $('.weighttext').css('background', '#fff');
        $('#weighttext' + weight).css('color', '#fff');
        $('#weighttext' + weight).css('background', '#613EEA');
    }
</script>


<script>
  // Countdown শেষ হওয়ার সময় সেট করো (Year, Month-1, Day, Hour, Min, Sec)
  const endDate = new Date(2025, 7, 19, 8, 0, 0); // 19 Aug 2025, 08:00:00

  function updateCountdown() {
    const now = new Date();
    let diff = endDate - now;

    if (diff < 0) {
      document.getElementById("countdown_timer").innerHTML = "Expired";
      return;
    }

    let hours = Math.floor(diff / (1000 * 60 * 60));
    let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((diff % (1000 * 60)) / 1000);

    // Format with leading zeros
    hours = hours.toString().padStart(2, "0");
    minutes = minutes.toString().padStart(2, "0");
    seconds = seconds.toString().padStart(2, "0");

    document.getElementById("countdown_timer").innerHTML =
      `${hours}:${minutes}:${seconds}`;
  }

  setInterval(updateCountdown, 1000);
  updateCountdown(); // First call immediately
</script>

@endsection
