@extends('app')
@push('css')
<link rel="stylesheet" href="{{ asset('assets/css/single.css')}}">
<style>
    .rating-component .stars-box .star.selected {
        color: #ff5a49;
    }
    
    .rating-component .stars-box .star.hover {
        color: #ff5a49;
    }
    .feedback-tags .tags-container {
        display: none;
    }
    .submited-box .loader {
        border: 5px solid transparent;
        border-top: 5px solid #4dc7b7;
        border-bottom: 5px solid #ff5a49;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        -webkit-animation: spin 0.8s linear infinite;
        animation: spin 0.8s linear infinite;
    }
    
    .submited-box .loader, .submited-box .success-message {
        display: none;
    }
    .submited-box .loader, .submited-box .success-message {
        display: none;
    }
    a.axil-btn, button.axil-btn {
        border-radius: 6px;
        font-size: var(--font-size-b1);
        line-height: var(--line-height-b1);
        font-weight: 700;
        display: inline-block;
        padding: 10px 38px;
        position: relative;
        transition: all .3s ease-in-out;
        z-index: 1;
    }
    .comment-inner {
        margin-left: 15px;
        margin-top: 6px;
    }
    .single-comment{
        display: flex;
    }
    ul.comment-list {
        margin: 0;
        padding: 0;
    }
    
    li.comment {
        list-style: none;
        margin-bottom: 15px;
    }
    .comment-text {
        margin-bottom: 10px;
    }

    .pro-desc-commnet-area .comment-list .comment .commenter .hover-flip-item-wrapper a i:not(.empty-rating), .pro-desc-commnet-area .comment-list .comment .commenter .commenter-rating a i:not(.empty-rating) {
        color: #ffca0f;
    }
    p.noticText {
        background: #b2eeb8;
        padding: 5px 14px;
        width: 67%;
        margin-top: 12px;
        border-radius: 5px;
    }
    
    @media(max-width: 992px){
        .container, .container-lg, .container-md, .container-sm, .container-xl {
            padding: .5rem;
        }
    }
    
    @media only screen and (max-width: 1199px) {
        p.noticText {
            background: #b2eeb8;
            padding: 5px 17px;
            width: 100%;
        }
    }
</style>
@php
use App\Models\HomeFooter;
$ecom_setting = DB::table('ecommerce_settings')->first();
$termCondition=HomeFooter::select('page_three_text')->first();
    $home_footers = DB::table('home_footers')->first();
    $generalSetting = DB::table('general_settings')->first();
@endphp

<style>
    .quantity_box{
        display: inline-flex;
        vertical-align: top;
        white-space: nowrap;
        font-size: 0;
    }
    div.quantity_box button[type="button"] {
        padding: 0 5px;
        min-width: 25px;
        min-height: unset;
        height: 42px;
        border: 2px solid rgb(211, 211, 211);
        background: white;
        box-shadow: none;
        color: black;
        border-radius: 0;
    }
    div.quantity_box button[type="button"]:hover {
        color: #fff;
        background-color: orange;
        border-color: orange;
    }
    div.quantity_box input[type="text"] {
        width: 40px;
        color: black;
        border-radius: 0;
        border: 2px solid rgb(211, 211, 211);
        border-right: none;
        border-left: none;
    }
    div.quantity_box button[type="button"].minus {
        border-radius: 10px 0 0 10px;
    }
    div.quantity_box button[type="button"].plus {
        border-radius: 0 10px 10px 0;
    }
    
   .burmanRadio {
        margin-bottom: 10px;
      }
      .burmanRadio__input {
        display: none;
      }
      .burmanRadio__input:checked ~ .burmanRadio__label::after {
        opacity: 1;
        transform: scale(1);
      }
      .burmanRadio__label {
        cursor: pointer;
        line-height: 30px;
        position: relative;
        margin-left: 35px;
      }
      .burmanRadio__label::before, .burmanRadio__label::after {
        border-radius: 50%;
        position: absolute;
        top: 5px;
        left: -30px;
        transition: all 0.3s ease-out;
        z-index: 2;
      }
      .burmanRadio__label::before {
        content: "";
        border: 1.5px solid #9d9d9d;
        width: 20px;
        height: 20px;
      }
      .burmanRadio__label::after {
        font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f00c";
        background: #ffc107;
        border: 1.5px solid #ffc107;
        color: #FFF;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        width: 20px;
        height: 20px;
        transform: scale(0);
      }
      .burmanRadio__label:hover::before {
        border-color: #7BC4CA;
      }
     .main-wrapper{
         background: #f8f9fa;
     }
           
    .carousel-inner {
        position: relative;
        width: 100%;
        overflow: hidden;
        box-shadow: 0px 0px 7px 0px gray;
        border-radius: 10px;
    }     
    .slider-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
        padding: 10px 0px; /* Leave room for arrows */
    }
    
    .nav_images {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 10px;
    }
    
    .nav_images::-webkit-scrollbar {
        display: none;
    }
    
    .nav_images img {
        flex: 0 0 auto;
        cursor: pointer;
        border: 2px solid transparent;
        border-radius: 6px;
        transition: border 0.3s;
    }
    .nav_images img.active {
        border-color: #007bff;
    }
    
    .arrow {
        position: absolute;
        top: 40%;
        transform: translateY(-50%);
        background: rgb(244 67 54);
        color: white;
        border: none;
        padding: 7px;
        height: 31px;
        font-size: 10px;
        border-radius: 53%;
        cursor: pointer;
        z-index: 10;
    }
    .left-arrow {
        left: 5px;
    }
    .right-arrow {
        right: 5px;
    }

    .nav_images [data-bs-target] {
        height: 100px;
        width: 81px;
        box-shadow: 0px 0px 3px 0px gray;
        padding: 5px;
    }
    
    .nav_images img {
        margin-bottom: 5px;
    }
    
    .nav_images .active {
        height: 100px;
        width: 81px;
    }
    .carousel-indicators [data-bs-target]{
        border: 0;
    }
    
    .wc-tab-inner iframe{
        width: 100%;
        height: 600px;
    }
    
    .ord_btn{
        font-size: 21px;
    }
    
    .orderBtnDesign{
        width: 73%;
    }
    
    .quantityBtnDesign{
         width: 25%;
    }
    
    @media screen and (min-width: 320px) and (max-width: 340px) {
        .nav_images [data-bs-target] {
            height: 100px;
            width: 26.5%;
        }
            
       
        .nav_images .active {
            height: 100px;
            width: 26.5%;
        }
    }
    @media screen and (min-width: 320px) and (max-width: 390px) {
        #product_des li button {
            font-size: 16px;
        }
         .orderBtnDesign{
            width: 66%;
            font-size: 17px;
        }
        
        .nav_images [data-bs-target] {
            height: 100px;
            width: 27%;
        }
            
       
        .nav_images .active {
            height: 100px;
            width: 27%;
        }
        
        .quantityBtnDesign{
             width: 32%;
        }
    }
    @media screen and (min-width: 391px) and (max-width: 449px) {
        #product_des li button {
            font-size: 20px;
        }
        
        .nav_images [data-bs-target] {
            height: 85px;
            width: 19.7%;
        }
            
       
        .nav_images .active {
            height: 85px;
            width: 19.7%;
        }
    }
    
    @media screen and (min-width: 450px) and (max-width: 500px) {
      #product_des li button {
            font-size: 20px;
        }
        
        .nav_images [data-bs-target] {
            height: 85px;
            width: 20.4% !important;
        }
            
       
        .nav_images .active {
            height: 85px;
            width: 20.4% !important;
        }  
    }
    
    @media screen and (min-width: 501px) and (max-width: 575px) {
        .nav_images [data-bs-target] {
            height: 85px;
            width: 15.9%;
        }
            
       
        .nav_images .active {
            height: 85px;
            width: 15.9%;
        }
    }
    @media screen and (min-width: 576px) and (max-width: 604px) {
        .nav_images [data-bs-target] {
            height: 85px;
            width: 19.5%;
        }
            
       
        .nav_images .active {
            height: 85px;
            width: 19.5%;
        }
    }
    
    @media screen and (min-width: 605px) and (max-width: 767px) {
        .nav_images [data-bs-target] {
            height: 85px;
            width: 19.9%;
        }
            
       
        .nav_images .active {
            height: 85px;
            width: 19.9%;
        }
    }
    

    
    @media screen and (min-width: 1400px) and (max-width: 1700px) {
        .nav_images [data-bs-target] {
            height: 100px;
            width: 16.6%;
        }
            
       
        .nav_images .active {
            height: 100px;
            width: 16.6%;
        }
    }
    


   @media screen and (min-width: 320px) and (max-width: 767px) {
       .btn_submit {
           display: inline !important;
       }
        .wc-tab-inner img {
            width: 100%;
        }
        .ord_btn{
            font-size: 20px;
            padding: 8px;
        }
   }
   
   .call_now button {
       width: 100%;
   }
   
   .call_now {
       margin-top: 10px;
   }
   
   @media (min-width: 992px) {
       .img_section {
            flex: 0 0 auto;
            width: 46.666667% !important;
        }
   }

 
    
    .add_to_cart {
        font-size: 19px;
    }
    .nav-tabs{
        border: 2px solid #dbdbdb !important;
        padding: 0px;
        border-radius: 10px; 
    }
    
    .nav-tabs .nav-link.active {
        background: #00276c;
        border-radius: 5px;
        color: white !important;
    }
    
    
    .burmanRadio.disabled {
        position: relative;
        background: #e1dede8a;
        border-radius: 5px;
        cursor: no-drop;
        border: 1px solid #d9d7d7;
        padding: 0 5px;
    }
    
    .burmanRadio.disabled::after {
        content: '';
        border-bottom: 1px solid #d1d1d1;
        width: 100%;
        position: absolute;
        left: 4px;
        right: 0;
        top: -13px;
        z-index: 9;
        height: 30px;
        transform: rotate(15deg);
    }
    
    .burmanRadio.disabled::before {
        content: '';
        border-top: 1px solid #d5d5d5;
        width: 100%;
        position: absolute;
        left: 6px;
        right: 0;
        bottom: -15px;
        z-index: 9;
        height: 30px;
        transform: rotate(344deg);
    }
    
</style>
            
@endpush
@section('meta')
    @php
        $productImage = $single_product->main_image ?  getImage('images/product/large', $single_product->main_image) : url('posadmin/logo', $generalSetting->site_logo);
        $productDescription = $single_product->meta_description ?? Str::limit(strip_tags($single_product->product_details), 160);
        $productTitle = $single_product->meta_title ?? $single_product->name;

        $pdata=getProductInfo($single_product);
        $currentDate = now();
        $startDate = $single_product['start_date'];
        $lastDate = $single_product['last_date'];
    @endphp
    
    <!-- Primary Meta Tags -->
    <title>{{ $productTitle }} | {{ $generalSetting->site_title }}</title>
    <meta name="description" content="{{ $productDescription }}">
    <meta name="keywords" content="{{ $single_product->meta_keywords ?? '' }}">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="product">
    <meta property="og:title" content="{{ $productTitle }}">
    <meta property="og:description" content="{{ $productDescription }}">
    <meta property="og:image" content="{{ $productImage }}">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:site_name" content="{{ $generalSetting->site_title }}">
    
    <meta name="product-id" content="{{ $single_product->id }}">
    <meta name="product-name" content="{{ $single_product->name }}">
    <meta name="product-category" content="{{ $single_product->category->name ?? '' }}">
    <meta name="product-brand" content="{{ $single_product->brand->name ?? '' }}">
    @if($single_product['promotion_price'] != null && $currentDate >= $startDate && $currentDate <= $lastDate)    
    <meta name="product-price" content="{{ $single_product['promotion_price']}}">
    @else
    <meta name="product-price" content="{{ $single_product['price']}}">
    @endif

    
    <!-- Twitter -->
    <meta name="twitter:card" content="{{ getImage('images/product/large', $single_product->main_image)}}">
    <meta name="twitter:title" content="{{ $productTitle }}">
    <meta name="twitter:description" content="{{ $productDescription }}">
    <meta name="twitter:image" content="{{ $productImage }}">
    
    <!-- Product Specific -->
    <meta property="product:price:amount" content="{{ $single_product->price }}">
    <meta property="product:price:currency" content="{{ $generalSetting->currency_code ?? 'BDT' }}">
    @if($single_product->brand)
    <meta property="product:brand" content="{{ $single_product->brand->name }}">
    @endif
    
    <!-- Canonical URL -->
    <link rel="canonical" href="{{ url()->current() }}" />
@endsection
@section('content')



<div class="container-xl mt-2 mt-lg-4">
    <div class="row justify-content-between">
        <div class="col-lg-5 col-md-6 col-sm-8 col-12 img_section">
            <div id="product" class="carousel slide" data-bs-ride="false" >
                <div class="carousel-inner" role="listbox">
                    <div class="labels">
                        @if($single_product->last_date > now() && $single_product->promotion_price != null)
                            @php
                                $discount = round((($single_product->price - $single_product->promotion_price) / $single_product->price) * 100);
                            @endphp
                            <div class="tag orange-bg label text-light">
                              {{ $discount }}% OFF
                            </div>
                        @endif
                        @if($single_product->IsFree)
                            <div class="tag orange-bg label text-light">
                              Free Ship
                            </div>
                        @endif
                    </div>
                    <div class="carousel-item active shadow-lg">
                        <div class="easyzoom easyzoom--overlay w-100">
                            <a href="javascript:void(0)" data-fancybox="gallery" class="fancybox">
                                <img
                                src="{{ getImage('images/product/large', $single_product->main_image)}}"
                                class="w-100"
                                alt="First slide"
                            />
                            </a>
                        </div>
                    </div>
                    
                    @foreach($single_product->images as $key=>$im)
                    <div class="carousel-item {{$im->color}} shadow-lg">
                        <div class="easyzoom easyzoom--overlay w-100">
                            <a href="javascript:void(0)" data-fancybox="gallery" class="fancybox">
                                <img
                                src="{{ getImage('images/product/large', $im->image)}}"
                                class="w-100"
                                alt="First slide"
                            />
                            </a>
                        </div>
                    </div>
                    @endforeach
                </div>
                
                @if(count($single_product->images)==='0')
                
                @else
                <button class="carousel-control-prev" type="button" data-bs-target="#product" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#product" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
                @endif
            </div>
            <div class="slider-wrapper position-relative">
                @if(count($single_product->images) > 4)
                <button class="arrow left-arrow">&#8249;</button>
                @endif
                <div class="carousel-indicators nav_images" id="nav_images">
                    <img src="{{ getImage('images/product/xsmall', $single_product->main_image)}}" alt="" width="100" data-bs-target="#product" data-bs-slide-to="0" class="active" aria-current="true">
                    @foreach($single_product->images as $key => $im)
                        <img src="{{ getImage('images/product/xsmall', $im->image)}}" alt="" width="100" data-bs-target="#product" data-bs-slide-to="{{ $key + 1 }}">
                    @endforeach
                </div>
                @if(count($single_product->images) > 4)
                <button class="arrow right-arrow">&#8250;</button>
                @endif
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-8 col-12">
            <h2 class="title light">{!! $single_product->name !!}</h2>
            @if($generalSetting->view_active == true)
            <span><i class="fa fa-eye"></i> {{number_format($single_product->view_count)}}
            @endif
            @if(generalSetting()->without_stock != 'yes')
            (Stock: {{number_format($single_product->warehouseWiseStock(1))}})
            @endif
            </span>
            @if($single_product->size_chart)
            <span style="text-decoration:underline;padding: 0 10px" id="view-size-chart" data-bs-toggle="modal" data-bs-target="#sizeChartModal"><i class="fas fa-ruler"></i>See Size Chart</span>
            @endif
            @if($single_product['promotion_price'] != null && $currentDate >= $startDate && $currentDate <= $lastDate)    
                <div class="pro_price d-flex">
                <h4 class="pop bold"><span id="discount_price">{{ $single_product['promotion_price']}}</span> Tk</h4> 
                <del style=" font-size: 20px;color: red;"> <span style="margin-left: 5px; font-size: 20px;" id="pro_price">{{ $single_product['price']}} </span>Tk</del>
                </div>
            @else
            <h4 class="pop bold"><span id="pro_price">{{ $single_product['price']}}</span> Tk</h4>
            @endif
            <div class="size_chart mt-3 d-none">
                <img src="{{ asset('assets/image/size.png')}}" alt="" class="img-fluid">
            </div>
            
            <div id="alertDanger" class="alert alert-danger alert-dismissible fade show p-2 small d-none" role="alert"></div>
            
            <form method="POST" action="{{ route('carts.store')}}" id="order_submit">
                @csrf
            @if($single_product->is_variant)
            @foreach($options as $key=>$option)
            
            @php
                $vs=explode(",",$values[$key]);
                $op=str_replace('"','',$option);
                $stock=null;
                if(count($options)==1){
                $stock=1;
                }
                $isCheck=0;
            @endphp
            
            <div class="d-flex">
            <h4 class="pop medium">{{$op}}:</h4>
                
            <div class="sizes d-flex flex-wrap align-items-center">
                @foreach($vs as $i=>$v)
                @php
                    $value=str_replace('"','',$v);
                    $qty =$single_product->singleVariation($value?:0);
                    if($isCheck==1){
                    $isCheck=2;
                    }
                    if($stock && $isCheck==0 && $qty > 0){
                    $isCheck=1;
                    }
                @endphp
                <div class="burmanRadio me-2 {{$qty}}
                    @if($stock && $qty <=0)
                    disabled
                    @endif
                    ">
                        <input type="radio" class="burmanRadio__input {{$op}}" id="size-{{$value}}"
                        
                        @if($isCheck==1)
                        checked
                        @endif
                        
                        name="variant_{{$key+1}}"
                        
                        value="{{ $value }}">
                        <label for="size-{{$value}}" class="burmanRadio__label"> {{ $value }} </label>
                    </div>
                    @endforeach
                </div>
            </div>
            @endforeach
            @endif 
            
            
            <div class="align-items-center flex-wrap mt-2 col-lg-8">
                
                <input type="hidden" name="product_id" value="{{ $single_product->id}}">
                <input type="hidden" name="product_name" value="{{ $single_product->name}}">
                <input type="hidden" name="category_id" value="{{ $single_product->category_id}}">
        
                <div class="flex" style="width: 100%;">
                    <div class="quantity_box mb-2 quantityBtnDesign" style="overflow: hidden;">
                            <button type="button" class="minus btn">-</button>
                            <input type="text" class="quantity_value placeholder_black form-control" name="quantity" value="1"  min="1" max="12" >
                            <button type="button" class="plus btn">+</button>
                        </div>
                    
                    <button type="submit" style="overflow: hidden;" class="btn pulse-button btn-warning orange-bg mt-lg-0  semi text-white text-cap  mb-2 ord_btn orderBtnDesign rounded-5"> <i class="fa-solid fa-cart-plus text-white mx-2"></i> অর্ডার করুন</button>
                </div>
                <style>
                    
                    /* Initiate Auto-Pulse animations */
                    button.pulse-button {
                      border: 0px solid #000;
                      animation: borderPulse 2000ms infinite ease-out;
                    }
                    
                    /* Declate color shifting animation */
                    /*@keyframes colorShift {*/
                    /*  0%, 100% {*/
                    /*      background: #0045e6;*/
                    /*  }*/
                    /*  33% {*/
                    /*    background: #fb3e3e;*/
                    /*  }*/
                    /*  66%{*/
                    /*    background: #0dcc00;*/
                    /*  }*/
                    /*}*/
                    
                    /* Declare border pulse animation */
                    @keyframes borderPulse {
                      0% {
                        /* No shadow at start */
                        box-shadow: 0 0 0 0 #f14705;
                      }
                      70% {
                        /* Shadow expands and fades slightly */
                        box-shadow: 0 0 0 15px #f1470500;
                      }
                      100% {
                        /* Shadow is completely transparent and stays expanded to prevent jumping */
                        box-shadow: 0 0 0 0 rgba(0, 69, 230, 0);
                      }
                    }
                    
                    /* Declare shine on hover animation */
                    @keyframes hoverShine {
                      0%{
                        background-image: linear-gradient(135deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
                      }
                      50%{
                        background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 100%);
                      }
                      100%{
                        background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,.4) 100%);
                      }
                    }
                </style>
                
                <div class="btn_submit">
                <button class="btn btn-warning orange-bg text-white mt-lg-0 semi text-cap col-lg-6 col-md-6 col-12 add_to_cart w-100 rounded-5"> <i class="fa-solid fa-cart-plus text-white mx-2"></i>  কার্টে রাখুন</button>
                </div>
                <div class="call_now">
                        <a href="tel: {{ $ecom_setting->contact }}" class="btn btn-warning mt-lg-1 semi text-capitalize col-12 add_to_cart rounded-5 btn_design" style="background: linear-gradient(to top right, #00a5ff, #00a5ff);color: #ffffff;line-height: 1.8;border: none;"><i class="fas fa-phone" style="padding-right: 7px;"></i> Call Us</a>
                    </div>
                    <!--@if($ecom_setting->contact2)-->
                    <!-- <div class="call_now">-->
                    <!--    <a href="tel: {{ $ecom_setting->contact2 }}" class="btn btn-warning mt-lg-1 semi text-capitalize col-12 add_to_ca rounded-5r btn_design" style="background: #00276C;color: #ffffff;border: none;"><i class="fas fa-phone" style="padding-right: 7px;"></i> Call Us</a>-->
                    <!--</div>-->
                    <!--@endif-->
                   @if($ecom_setting->whats_num)
                     <div class="call_now">
                        <a href="https://api.whatsapp.com/send/?phone=+88{{$ecom_setting->whats_num}}&text=*Product%20Code:*%20{{$single_product->code}}%20-%20সম্পর্কে%20বিস্তারিত%20জানতে%20চাই।" class="btn btn-warning mt-lg-1  semi text-capitalize col-12 rounded-5 add_to_cart btn_design" style="background: #4ec95c;color: #ffffff;line-height: 1.8;border: none;"><i class="fa-brands fa-whatsapp" style="padding-right: 7px;"></i> WhatsApp</a>
                    </div>
                    @endif
            </div>
            </form>
            @if($generalSetting->description)
            <p class="noticText">{!! $generalSetting->description !!}</p>
            @endif
            
        </div>
    </div>



    </div>
    <div class="description_tab mt-4">
    <div class="container-xl">
        <!-- Nav tabs -->
    <ul class="nav nav-tabs justify-content-start border-0" id="product_des" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active border-0" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">
                Details
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link border-0" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">
                T & C
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link border-0" id="review-tab" data-bs-toggle="tab" data-bs-target="#review" type="button" role="tab" aria-controls="review" aria-selected="true">
                Reviews
            </button>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content my-5">
        <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <div class="wc-tab-inner">
                {!! str_replace('@','"', $single_product->product_details) !!}
            </div>
        </div>
        <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
             <div class="row">
                <div class="col-lg-6">
                    <p class="">
                        {!! $termCondition->page_three_text !!}
                    </p>
                </div>
             </div>
        </div>
        <div class="tab-pane" id="review" role="tabpanel" aria-labelledby="review-tab">
            
            <div class="wc-tab-inner">
                <div class="woocommerce-tabs wc-tabs-wrapper" style="background: #dbd3d39e;">
                    <div class="container">
                        <div class="reviews-wrapper pt-4">
                            <div class="row">
                                <div class="col-lg-6 mb--20">
                                    <div class="axil-comment-area pro-desc-commnet-area pt-3">
                                        <h5 class="title">(<span class="reviewCount">{{$single_product->productReviews->count()}}</span>) Relative Product</h5>
                                        <ul class="comment-list">
                                            @include("partials.reviewList")
                                        </ul>
                                    </div>
                                </div>
                                <!-- End .col -->
                                <div class="col-lg-6 mb--20">
                                    <div class="comment-respond pro-des-commend-respond mt--0">
                                        <h5 class="title mb--10">Add a Review</h5>
                                        <div class="rating-wrapper d-flex-center mb--10">
                                             <div class="wrapper">
                                                <div class="master">
                                                    <div class="rating-component">
                                                        <div class="status-msg">
                                                            <label>
                                                                <input class="rating_msg" type="hidden" name="rating_msg" value="" />
                                                            </label>
                                                        </div>
                                                        <div class="stars-box">
                                                            <i class="star fa fa-star" title="1 star" data-message="Poor" data-value="1"></i>
                                                            <i class="star fa fa-star" title="2 stars" data-message="Too bad" data-value="2"></i>
                                                            <i class="star fa fa-star" title="3 stars" data-message="Average quality" data-value="3"></i>
                                                            <i class="star fa fa-star" title="4 stars" data-message="Nice" data-value="4"></i>
                                                            <i class="star fa fa-star" title="5 stars" data-message="very good qality" data-value="5"></i>
                                                        </div>
                                                        <div class="starrate">
                                                            <label>
                                                                <input class="ratevalue" type="hidden" name="rate_value" value="" />
                                                            </label>
                                                        </div>
                                                    </div>
            
                                                    <div class="feedback-tags">
                                                        <div class="tags-container" data-tag-set="1">
                                                            <div class="question-tag">
                                                                Why was your experience so bad?
                                                            </div>
                                                        </div>
                                                        <div class="tags-container" data-tag-set="2">
                                                            <div class="question-tag">
                                                                Why was your experience so bad?
                                                            </div>
                                                        </div>
            
                                                        <div class="tags-container" data-tag-set="3">
                                                            <div class="question-tag">
                                                                Why was your average rating experience ?
                                                            </div>
                                                        </div>
                                                        <div class="tags-container" data-tag-set="4">
                                                            <div class="question-tag">
                                                                Why was your experience good?
                                                            </div>
                                                        </div>
            
                                                        <div class="tags-container" data-tag-set="5">
                                                            <div class="make-compliment">
                                                                <div class="compliment-container">
                                                                    Give a compliment
                                                                    <i class="far fa-smile-wink"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="tags-box">
                                                            <form action="{{ route('reviewStore') }}" method="POST" id="ajax_form2">
                                                              	@csrf
                                                              	<input type="hidden" name="product_id" value="{{$single_product->id}}" />
                                                              	<input type="hidden" name="review" id="review" value="" />
                                                              	
                                                                <div class="row">
                                                                    <div class="col-12">
                                                                        <div class="form-group">
                                                                            <label>Review Notes (Mandatory)</label>
                                                                            <textarea name="message" placeholder="Your Comment" class="form-control"></textarea>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-6 col-md-6 col-12 m-0">
                                                                        <div class="form-group">
                                                                            <label>Name <span class="require">*</span></label>
                                                                            <input id="name" type="text" name="name" placeholder="Your Name" class="form-control"/>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-6 col-md-6 col-12 m-0">
                                                                        <div class="form-group">
                                                                            <label>Image <span class="require">*</span></label>
                                                                            <input type="file" form="ajax_form2" class="form-control" name="image" style="padding-top: 12px;">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-12 mt-2 pb-4">
                                                                        <div class="button-box form-submit">
                                                                            <button type="submit" class="axil-btn btn-bg-primary w-auto">Submit Review</button>
                                                                        </div>
                                                                      <div class="submited-box">
                                                                          <div class="loader"></div>
                                                                          <div class="success-message">
                                                                              Thank you!
                                                                          </div>
                                                                      </div>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
         								</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                                
                    </div>
                    
                    
                    <!--  second woocomerce -->
        
            </div>
            </div>
        </div>
    </div>
    </div>

    </div>
    <div class="container-xl">
        <h3>Related Products</h3>
        <div class="products mt-3">
            @foreach($products as $product)
            @include('partials.product')
            @endforeach
        </div>
    </div>
    <br><br>
    
    @if($generalSetting->footer_active == true)
    <div class="container-xl">
     
    
    <div class="row service-support-box">
        
        <div class="col-lg-3 col-md-6 col-6 border-end mb-3">
            <div class="support service-support-single d-flex align-items-center">
                <!--<img width="40" height="40" src="https://img.icons8.com/ios/40/marker--v1.png" alt="marker--v1"/>-->
                <img src="{{url('posadmin/home_footer', $home_footers->service_one_icon)}}" width="40" height="40">
                <div class="" style="margin: 5px;padding: 0px;">
                <h6 style="margin:0px"><strong>{{ $home_footers->service_one_header }}</strong></h6>
                    <p class="font-13 m-0">
                        {{ $home_footers->service_one_text }}
                    </p>
                </div>
           </div>
        </div>
        
        <div class="col-lg-3 col-md-6 col-6 border-end mb-3">
            <div class="support service-support-single d-flex align-items-center">
                <!--<img width="30" height="30" src="https://img.icons8.com/ios/30/return.png" alt="return"/>-->
                <img src="{{url('posadmin/home_footer', $home_footers->service_two_icon)}}" width="40" height="40">
                <div class="" style="margin: 5px;padding: 0px;">
                    <h6 style="margin:0px"><strong>{{ $home_footers->service_two_header }}</strong></h6>
                    <p class="font-13 m-0">
                        {{ $home_footers->service_two_text }}
                    </p>
                </div>
            </div>
        </div>
        
       <div class="col-lg-3 col-md-6 col-6 border-end mb-3">
          <div class="support service-support-single d-flex align-items-center">
             <!--<img width="50" height="50" src="https://img.icons8.com/ios/50/geography--v1.png" alt="geography--v1"/>-->
             <img src="{{url('posadmin/home_footer', $home_footers->service_three_icon)}}" width="40" height="40">
             <div class="" style="margin: 5px;padding: 0px;">
                <h6 style="margin:0px"><strong>{{ $home_footers->service_three_header }}</strong></h6>
                <p class="font-13 m-0">
                   {{ $home_footers->service_three_text }}
                </p>
             </div>
          </div>
       </div>
       
       <div class="col-lg-3 col-md-6 col-6 mb-3">
          <div class="support service-support-single d-flex align-items-center">
             <!--<img width="50" height="50" src="https://img.icons8.com/ios/50/private2.png" alt="private2"/>-->
             <img src="{{url('posadmin/home_footer', $home_footers->service_four_icon)}}" width="40" height="40">
             <div class="" style="margin: 5px;padding: 0px;">
                <h6 style="margin:0px"><strong>{{ $home_footers->service_four_header }}</strong></h6>
                <p class="font-13 m-0">
                  {{ $home_footers->service_four_text }}
                </p>
             </div>
          </div>
       </div>
       
    </div>
    
  </div>
  @endif
  
    <!-- Modal -->
    @if($single_product->size_chart)
    <div class="modal fade" id="sizeChartModal" tabindex="-1" aria-labelledby="sizeChartModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body product_modal">
                    <div class="row">
                        <div class="size_chart text-center">
                            <img src="{{ getImage('images/product/large', $single_product->size_chart) }}" style="width: 100%; aspect-ratio: 3 / 2;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

@endsection

@push('js')
<script type="text/javascript">
$(document).ready(function () {
    const scrollAmount = 200;

    $('.right-arrow').click(function () {
        $('#nav_images').animate({
            scrollLeft: $('#nav_images').scrollLeft() + scrollAmount
        }, 400);
    });

    $('.left-arrow').click(function () {
        $('#nav_images').animate({
            scrollLeft: $('#nav_images').scrollLeft() - scrollAmount
        }, 400);
    });

    // Optional: Make clicked image "active"
    $('#nav_images img').click(function () {
        $('#nav_images img').removeClass('active');
        $(this).addClass('active');
    });
    
    setTimeout(() => {
        viewContent();
    }, 500);
    
    function viewContent(){
        let product_id   = document.querySelector('meta[name="product-id"]').content;
        let product_name = document.querySelector('meta[name="product-name"]').content;
        let categoryName  = document.querySelector('meta[name="product-category"]').content;
        let brandName  = document.querySelector('meta[name="product-brand"]').content;
        let sell_price   = parseFloat(document.querySelector('meta[name="product-price"]').content);
        const ymdhi = "{{ now()->format('ymdhi') }}";
        const eventID = "SV_{{ $single_product->id }}_" + ymdhi;
        if (typeof fbq === 'function') {
          fbq('track', 'ViewContent', {
            content_ids: [product_id],
            content_name: product_name,
            content_type: "product",
            value: sell_price,
            currency: "BDT",
            contents: [{
              id: product_id,
              product:product_name,
              barnd: brandName,
              category: categoryName,
              quantity: 1,
              item_price: sell_price,
            }]
          }, {
            eventID: eventID
          });
        }
    }
});


function trackProductView(productId) {
    $.ajax({
        url: '/product-view/server/' + productId,
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            console.log('Server-side tracking:', response.message);
        },
        error: function(xhr, status, error) {
            console.error('Server-side tracking error:', error);
        }
    });
}

$(document).ready(function() {
    var productId = {{ $single_product->id ?? 'null' }};
    if (productId) {
        setTimeout(() => {
        trackProductView(productId);
        }, 500);
    }
});





$(document).on('click', 'a#product_show', function(e) {
    e.preventDefault();

    let product_id   = $(this).data('productid').toString(); 
    let product_name = $(this).data('productname'); 
    let categoryName  = $(this).data('categoryName'); 
    let sell_price   = parseFloat($(this).closest('.product').find('.content span.current_price').text().replace(/[^\d.]/g, ''));
    let quantity = 1;

    console.log('Product ID:', product_id);
    console.log('Product Name:', product_name);
    console.log('Category ID:', categoryName);
    console.log('Sell Price:', sell_price);

    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
        event: "view_item",
        ecommerce: {
            currency: "BDT",
            value: sell_price,
            items: [
                {
                    item_id: product_id,
                    item_name: product_name,
                    item_category: categoryName,
                    price: sell_price,
                    quantity: quantity
                }
            ]
        }
    });
    
    console.log('DataLayer:', window.dataLayer);

    // redirect after slight delay
    setTimeout(() => {
        let url = $(this).attr('href');
        if (url) {
            window.location.href = url;
        } else {
            console.log('No URL found for the product.');
        }
    }, 100);
});

$(document).on('submit', 'form#cart_submit', function(e) {
    e.preventDefault();
    window.dataLayer = window.dataLayer || [];

    dataLayer.push({ ecommerce: null });

    let product_id = $('input[name="product_id"]').val().toString();
    let product_name = $('input[name="product_name"]').val();
    let category_id = $('input[name="category_id"]').val();
    let sell_price = parseFloat($('input[name="price"]').val());
    let quantity = parseInt($('input[name="quantity"]').val());

    let url = $(this).attr('action');
    let method = $(this).attr('method');
    let data = $(this).serialize();

    $.ajax({
        url: url,
        method: method,
        data: data,
        success: function(res) {
            if (res.success) {
                toastr.success(res.msg);

                if (res.html || res.view) {
                    $(document).find('div#cart_section').html(res.html);
                    $(document).find('.fixed-cart-bottom').html(res.view);
                    
                    // Fire add_to_cart event on form submission
                    dataLayer.push({
                        event: "add_to_cart",
                        ecommerce: {
                            currency: "BDT",
                            value: sell_price,
                            items: [
                                {
                                    item_id: product_id,
                                    item_name: product_name,
                                    item_category: category_id,
                                    price: sell_price,
                                    quantity: quantity
                                }
                            ]
                        }
                    });
                    
                    const eventID = "ATC_{{ now()->format('ymdhi') }}";
                    if (typeof fbq === 'function') {
                        fbq('track', 'AddToCart', {
                            content_ids: [product_id],
                            content_name: product_name,
                            content_type: 'product',
                            value: sell_price,
                            currency: 'BDT',
                            quantity: quantity
                            
                        },{
                            eventID: eventID
                        });
                    }
                }

                if (res.item) {
                    $(document).find('span.cart-count').text(res.item);
                }

                // Optionally reload or navigate
                // window.location.reload();
            } else {
                toastr.error(res.msg);
            }
        },
        error: function(response) {
            $.each(response.responseJSON.errors, function(field_name, error) {
                toastr.error(error);
            });
        }
    });
});
</script>

<script>

    $(document).on('click','.color, .Color', function(){
        let color_name = $('.color:checked, .Color:checked').val();
        if(color_name){
            if($(document).find('.carousel-item').hasClass(color_name)){
                $(document).find('.carousel-item').removeClass('active');
                $(document).find('.'+color_name).addClass('active');
                $(document).find('.colorImage').val();
            }else{
                
            }
        }
    });
    
    
    $(document).ready(function(){
        let variant_1=$('input[name="variant_1"]').val();
        let variant_2=$('input[name="variant_2"]').val();
        let variant_3=$('input[name="variant_3"]').val();
        getPrice(variant_1,variant_2,variant_3);
    });
    
    $(document).on('click','input[name="variant_1"]',function(){
        let variant_1=$(this).val();
        let variant_2=$('input[name="variant_2"]:checked').val();
        let variant_3=$('input[name="variant_3"]:checked').val();
        getPrice(variant_1,variant_2,variant_3);
    });
    
    $(document).on('click','input[name="variant_2"]',function(){
        let variant_2=$(this).val();
        let variant_1=$('input[name="variant_1"]:checked').val();
        let variant_3=$('input[name="variant_3"]:checked').val();
        getPrice(variant_1,variant_2,variant_3);
    });
    
    $(document).on('click','input[name="variant_3"]',function(){
        let variant_3=$(this).val();
        let variant_1=$('input[name="variant_1"]:checked').val();
        let variant_2=$('input[name="variant_2"]:checked').val();
        getPrice(variant_1,variant_2,variant_3);
    });
    
    function getPrice(variant_1,variant_2,variant_3){
        // let product_id=$('input[name="product_id"]').val();
        let productId="{{$single_product->id}}";
        let url="{{route('variablePrice')}}";
 
        $.ajax({
            url:url,
            data:{variant_1,variant_2,variant_3,productId},
            success:function(res){
                $('span#pro_price').text(res.variantPrice);
                $('span#discount_price').text(res.promotional_price);
            }
        });
    }
    
    $(document).on('submit','form#order_submit',function(e){
        e.preventDefault();
        let url=$(this).attr('action');
    	let method=$(this).attr('method');
    	let data= $(this).serialize();
        
        $.ajax({
            url: url,
            method: method,
            data: data,
            success: function(res) {
                if(res.success) {
                    toastr.success(res.msg);
                    window.location.href=res.url;
                    // window.location.reload();
                } else {
                    toastr.error(res.msg);
                    $('#alertDanger').removeClass('d-none');
                    $('#alertDanger').addClass('d-block');
                    $('#alertDanger').html(res.msg);
                }
            }
        });
    });
    
    $(document).on('click', 'button.add_to_cart', function(e) {
        e.preventDefault();
        $('.icon_cart').trigger('click');
        window.dataLayer = window.dataLayer || [];
        dataLayer.push({ ecommerce: null });
        let product_id = $('input[name="product_id"]').val().toString();
        let product_name = $('input[name="product_name"]').val();
        let category_id = $('input[name="category_id"]').val();
        let sell_price = parseFloat($('span#pro_price').text());
        let quantity = parseInt($('input[name="quantity"]').val());
        var formData = $(this).closest('form').serialize();
        var url = "{{ route('cartstore')}}";
        
        var method = "POST";
        $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }});
        
        $.ajax({
            url: url,
            method: method,
            data: formData,
            success: function(res) {
                if(res.success) {
                    
                    if (res.html) {
                    	$(document).find('div.cart_sidebar').html(res.html);
                    }
    
                    if (res.item) {
                    	$(document).find('span.rounded-circle').text(res.item);
                    	$(document).find('span#cart_number').text(res.item);
                    	$(document).find('p#total_amount').text(res.total_amount);
                    }
                    
                    dataLayer.push({
                        event: "add_to_cart",
                        ecommerce: {
                            currency: "BDT",
                            value: sell_price,
                            items: [
                                {
                                    item_id: product_id,
                                    item_name: product_name,
                                    item_category: category_id,
                                    price: sell_price,
                                    quantity: quantity
                                }
                            ]
                        }
                    });
                    
    
                    if (typeof fbq === 'function') {
                        const eventID = "ATC_{{ now()->format('ymdhi') }}";
                        fbq('track', 'AddToCart', {
                            content_ids: [product_id],
                            content_name: product_name,
                            content_type: 'product',
                            value: sell_price,
                            currency: 'BDT',
                            quantity: quantity
                            
                        },{
                            eventID: eventID
                        });
                    }
                    
                    
                    toastr.success(res.msg);
                    // window.location.reload();
                } else {
                    toastr.error(res.msg);
                    $('#alertDanger').removeClass('d-none');
                    $('#alertDanger').addClass('d-block');
                    $('#alertDanger').html(res.msg);
                }
            }
        });
    });
    $(document).on('submit','form#ajax_form2', function(e) {   
        e.preventDefault();
        
        var url=$(this).attr('action');
         var method=$(this).attr('method');
         var formData = new FormData($(this)[0]);
    	
    	$.ajax({
    	     type: method,
             url: url,
             data: formData,
             async: false,
             processData: false,
             contentType: false,
            success: function (res) {
                if (res.status) {
                    toastr.success(res.msg);
                    if (res.view) {
                    	$('.comment-list').empty().append(res.view);
                    }
                    $('.reviewCount').text(res.reviewCount);
                    $('form#ajax_form2')[0].reset();
                    
                    if (res.item) {
                    	$(document).find('li.comment').text(res.item);
                    }
                    if(res.url){
                    	document.location.href = res.url;
                    } else {
                        setTimeOut(function(){
                            window.location.reload();
                        }, 1000)
                    }
                    
                }else{
                    toastr.error(res.msg);
                }
            },
            error:function (response){
                $.each(response.responseJSON.errors,function(field_name,error){
                    toastr.error(error);
                })
            }
    	}); 
     
    }); 
    
    
    $(".rating-component .star").on("mouseover", function () {
        var onStar = parseInt($(this).data("value"), 10);
        $(this).parent().children("i.star")
            .each(function (e) {
                if (e < onStar) {
                    $(this).addClass("hover");
                } else {
                    $(this).removeClass("hover");
                }
            });
    }).on("mouseout", function () {
        $(this).parent().children("i.star")
            .each(function (e) {
                $(this).removeClass("hover");
            });
    });

    $(".rating-component .stars-box .star").on("click", function () {
        var onStar = parseInt($(this).data("value"), 10);
        var stars = $(this).parent().children("i.star");
        var ratingMessage = $(this).data("message");
    
        // Set the review input value
        $("input#review[name='review']").val(onStar);
    
        var msg = "";
        if (onStar > 1) {
            msg = onStar;
        } else {
            msg = onStar;
        }
    
        $(document).find("#review").val(onStar);
        $(".rating-component .starrate .ratevalue").val(msg);
    
        $(".fa-smile-wink").show();
    
        $(".button-box .done").show();
    
        if (onStar === 5) {
            $(".button-box .done").removeAttr("disabled");
        } else {
            $(".button-box .done").attr("disabled", "true");
        }
    
        for (i = 0; i < stars.length; i++) {
            $(stars[i]).removeClass("selected");
        }
    
        for (i = 0; i < onStar; i++) {
            $(stars[i]).addClass("selected");
        }
    
        $(".status-msg .rating_msg").val(ratingMessage);
        $(".status-msg").html(ratingMslick - slideressage);
        $("[data-tag-set]").hide();
        $("[data-tag-set=" + onStar + "]").show();
    });
    
    $(".feedback-tags  ").on("click", function () {
        var choosedTagsLength = $(this).parent("div.tags-box").find("input").length;
        choosedTagsLength = choosedTagsLength + 1;
    
        if ($(this).hasClass("choosed")) {
            $(this).removeClass("choosed");
            choosedTagsLength = choosedTagsLength - 2;
        } else {
            $(this).addClass("choosed");
            $(".button-box .done").removeAttr("disabled");
        }
    
        console.log(choosedTagsLength);
    
        if (choosedTagsLength <= 0) {
            $(".button-box .done").attr("enabled", "false");
        }
    });
    
    $(".compliment-container .fa-smile-wink").on("click", function () {
        $(this).fadeOut("slow", function () {
            $(".list-of-compliment").fadeIn();
        });
    });
    
    $(".done").on("click", function () {
        $(".rating-component").hide();
        $(".feedback-tags").hide();
        $(".button-box").hide();
        $(".submited-box").show();
        $(".submited-box .loader").show();
    
        setTimeout(function () {
            $(".submited-box .loader").hide();
            $(".submited-box .success-message").show();
        }, 1500);
    });

    // Manually control the carousel
var carousel = new bootstrap.Carousel(document.getElementById('product'));

// Handle slide change event
document.getElementById('product').addEventListener('slid.bs.carousel', function (event) {
var indicators = document.getElementById('nav_images').getElementsByTagName('img');

// Remove 'active' class from all indicators
for (var i = 0; i < indicators.length; i++) {
    indicators[i].classList.remove('active');
}

// Add 'active' class to the current indicator
indicators[event.to].classList.add('active');
});


</script>
@endpush