@extends('frontEnd.layouts.master')
@section('title', $details->name)
@push('seo')
<meta name="app-url" content="{{ route('product', $details->slug) }}" />
<meta name="robots" content="index, follow" />
<meta name="description" content="{{ $details->meta_description }}" />
<meta name="keywords" content="{{ $details->slug }}" />

<!-- Twitter Card data -->
<meta name="twitter:card" content="product" />
<meta name="twitter:site" content="{{ $details->name }}" />
<meta name="twitter:title" content="{{ $details->name }}" />
<meta name="twitter:description" content="{{ $details->meta_description }}" />
<meta name="twitter:creator" content="gomobd.com" />
<meta property="og:url" content="{{ route('product', $details->slug) }}" />
<meta name="twitter:image" content="{{ asset($details->image->image) }}" />

<!-- Open Graph data -->
<meta property="og:title" content="{{ $details->name }}" />
<meta property="og:type" content="product" />
<meta property="og:url" content="{{ route('product', $details->slug) }}" />
<meta property="og:image" content="{{ asset($details->image->image) }}" />
<meta property="og:description" content="{{ $details->meta_description }}" />
<meta property="og:site_name" content="{{ $details->name }}" />
@endpush

@push('css')
<link rel="stylesheet" href="{{ asset('public/frontEnd/css/zoomsl.css') }}">
@endpush

@section('content')
<div class="homeproduct main-details-page">
    <section class="detail-page product-section">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 position-relative">
                    <!-- @if($details->old_price)
                                            <div class="product-details-discount-badge">
                                                <div class="sale-badge">
                                                    <div class="sale-badge-inner">
                                                        <div class="sale-badge-box">
                                                            <span class="sale-badge-text">
                                                                <p> @php $discount=(((($details->old_price)-($details->new_price))*100) / ($details->old_price)) @endphp {{ number_format($discount, 0) }}%</p>

                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @endif -->
                    <div class="details_slider owl-carousel">
                        @foreach ($details->images as $value)
                        <div class="dimage_item">
                            <img src="{{ asset($value->image) }}" class="block__pic" />
                        </div>
                        @endforeach
                    </div>
                    @if ($details->images->count() > 1)
                    <div class="indicator_thumb @if ($details->images->count() > 4) thumb_slider owl-carousel @endif">
                        @foreach ($details->images as $key => $image)
                        <div class="indicator-item" data-id="{{ $key }}">
                            <img src="{{ asset($image->image) }}" />
                        </div>
                        @endforeach
                    </div>
                    @endif

                </div>
                <div class="col-sm-6">
                    <div class="details_right">
                        <!-- <div class="breadcrumb">
                            <ul>
                                <li><a href="{{ url('/') }}">Home</a></li>
                                <li><span>/</span></li>
                                <li><a
                                        href="{{ url('/category/' . $details->category->slug) }}">{{ $details->category->name }}</a>
                                </li>
                                @if ($details->subcategory)
                                <li><span>/</span></li>
                                <li><a
                                        href="#">{{ $details->subcategory ? $details->subcategory->subcategoryName : '' }}</a>
                                </li>
                                @endif @if ($details->childcategory)
                                <li><span>/</span></li>
                                <li><a href="#">{{ $details->childcategory->childcategoryName }}</a>
                                </li>
                                @endif
                            </ul>
                        </div> -->

                        <div class="product">
                            <div class="product-cart">
                                <p class="name">{{ $details->name }}</p>
                                <p class="details-price" id="variantPrice">
                                    Tk <span id="currentPrice">{{ $variantData[0]['price'] ?? $variantData[0]['price'] }}</span>
                                    @if (!empty($variantData[0]['old_price']))
                                        <del id="oldPrice">Tk {{ $variantData[0]['old_price'] }}</del>
                                    @endif
                                </p>

                                <div class="details-ratting-wrapper d-none">
                                    @php
                                    $averageRating = $reviews->avg('ratting');
                                    $filledStars = floor($averageRating);
                                    $emptyStars = 5 - $filledStars;
                                    @endphp

                                    @if ($averageRating >= 0 && $averageRating <= 5)
                                        @for ($i=1; $i <=$filledStars; $i++)
                                        <i class="fas fa-star"></i>
                                        @endfor

                                        @if ($averageRating == $filledStars)
                                        {{-- If averageRating is an integer, don't display half star --}}
                                        @else
                                        <i class="far fa-star-half-alt"></i>
                                        @endif

                                        @for ($i = 1; $i <= $emptyStars; $i++)
                                            <i class="far fa-star"></i>
                                            @endfor

                                            <span>{{ number_format($averageRating, 2) }}/5</span>
                                            @else
                                            <span>Invalid rating range</span>
                                            @endif
                                            <a class="all-reviews-button" href="#writeReview">See Reviews</a>
                                </div>
                                <!-- <div class="product-code">
                                    <p><span>প্রোডাক্ট কোড : </span>{{ $details->product_code }}</p>
                                </div> -->
                                <form action="{{ route('cart.store') }}" method="POST" name="formName">
                                    @csrf
                                    <input type="hidden" name="id" value="{{ $details->id }}" />
                                    @if ($productcolors->count() > 0)
                                    <div class="pro-color" style="width: 100%;">
                                        <div class="color_inner">
                                            <p>Color -</p>
                                            <div class="size-container">
                                                <div class="selector">
                                                    @foreach ($productcolors as $index => $procolor)
                                                    <div class="selector-item">
                                                        <input type="radio" id="fc-option{{ $procolor->id }}"
                                                            value="{{ $procolor->color ? $procolor->color->colorName : '' }}"
                                                            name="product_color" class="selector-item_radio emptyalert"
                                                            required {{ $index === 0 ? 'checked' : '' }} />
                                                        <label for="fc-option{{ $procolor->id }}"
                                                            style="background-color: {{ $procolor->color ? $procolor->color->color : '' }}"
                                                            class="selector-item_label">
                                                            <span>
                                                                <img src="{{ asset('public/frontEnd/images') }}/check-icon.svg"
                                                                    alt="Checked Icon" />
                                                            </span>
                                                        </label>
                                                    </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endif @if ($productsizes->count() > 0)
                                    <div class="pro-size" style="width: 100%;">
                                        <div class="size_inner">
                                            <p>Size - <span class="attibute-name"></span></p>
                                            <div class="size-container">
                                                <div class="selector">
                                                    @foreach ($productsizes as $index => $prosize)
                                                    <div class="selector-item">
                                                        <input type="radio" id="f-option{{ $prosize->id }}"
                                                            value="{{ $prosize->size ? $prosize->size->sizeName : '' }}"
                                                            name="product_size" class="selector-item_radio emptyalert"
                                                            required {{ $index === 0 ? 'checked' : '' }} />
                                                        <label for="f-option{{ $prosize->id }}"
                                                            class="selector-item_label">{{ $prosize->size ? $prosize->size->sizeName : '' }}</label>
                                                    </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                    @if ($details->pro_unit)
                                    <div class="pro_unig">
                                        <label>Unit: {{ $details->pro_unit }}</label>
                                        <input type="hidden" name="pro_unit" value="{{ $details->pro_unit }}" />
                                    </div>
                                    @endif

                                    @if ($details->brand)
                                    <div class="pro_brand">
                                        <p>Brand :
                                            {{ $details->brand->name }}
                                        </p>
                                    </div>
                                    @endif


                                    <div class="row">
                                        <div class="qty-cart col-sm-12 d-none">
                                            <div class="quantity">
                                                <span class="minus">-</span>
                                                <input type="hidden" name="qty" value="1" />
                                                <span class="plus">+</span>
                                            </div>
                                        </div>
                                        <div class="d-flex single_product col-sm-12">
                                            <!-- <input type="submit" class="btn px-4 add_cart_btn"
                                                                        onclick="return sendSuccess();" name="add_cart"
                                                                        value="কার্টে যোগ করুন " /> -->

                                            <button type="submit"
                                                class="btn px-4 order_now_btn order_now_btn_m w-100 btn-jump"
                                                onclick="return sendSuccess();" name="order_now">
                                                <i class="fas fa-shopping-basket"></i>
                                                অর্ডার করুন
                                            </button>
                                        </div>
                                    </div>
                                    <div class="mt-md-2 mt-2">
                                        <h4 class="font-weight-bold">

                                            @for ($i = 1; $i <= 3; $i++)
                                                @php
                                                    $enabled=$settings["product_details_button_{$i}_enable"] ?? 0;
                                                    $text=$settings["product_details_button_{$i}_text"] ?? "Button {$i}" ;
                                                    $icon=$settings["product_details_button_{$i}_icon"] ?? 'fa fa-link' ;
                                                    $link=$settings["product_details_button_{$i}_link"] ?? '#' ;
                                                    $bgColor=$settings["product_details_button_{$i}_color_background"] ?? '#007bff' ;
                                                    $textColor=$settings["product_details_button_{$i}_text_color"] ?? '#ffffff' ;
                                                @endphp

                                                @if ($enabled)
                                                    <a href="{{ $link }}" class="btn btn-success mb-2 w-100" style="background-color: {{ $bgColor }};border-color: {{ $bgColor }}; color: {{ $textColor }};padding: 10px 0;" target="_blank">
                                                        <i class="{{ $icon }}" style="margin-right: 10px;"></i> {{ $text }}
                                                    </a>
                                                @endif
                                            @endfor



                                        </h4>
                                    </div>
                                    <div class="mt-2 mb-3">
                                        <table class="table lead shippingtable">
                                            <tbody>
                                                <tr>
                                                    <th class="font-weight-bold">কুরিয়ার ডেলিভারি খরচ</th>
                                                </tr>
                                                @foreach ($shippingcharge as $key => $value)
                                                <tr>
                                                    <td> {{ $value->name }} </td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>

                                    </div>

                                </form>
                                <!-- {!! $details->short_description !!} -->
                                <p style="box-sizing: border-box; margin: 0px; padding: 0px; text-align: left; color: rgb(0, 0, 0); font-family: Rubik, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; color: rgb(245, 27, 27); font-family: Nunito, sans-serif; font-size: 15px;">বিঃদ্রঃ-&nbsp;&nbsp;দয়া করে ১০০% শিউর হয়ে অর্ডার করবেন।&nbsp;&nbsp;ছবি এবং বর্ণনার সাথে পণ্যের মিল থাকা সত্যেও আপনি পণ্য গ্রহন করতে না চাইলে কুরিয়ার চার্জ ১৩০ টাকা কুরিয়ার ডেলিভারি ম্যানকে প্রদান করে পণ্য সাথে সাথে রিটার্ন করবেন। পরে কোন কমপ্লেইন/রিটার্ন গ্রহণযোগ্য নয়!&nbsp;&nbsp;অযথা অর্ডার থেকে বিরত থাকুন, কারন আপনার মোবাইল নাম্বার এড্রেস ডিভাইস আইপি নাম্বার দেখা যায়।</span></p>
                                <h4 style="text-align: center; margin-right: 0px; margin-left: 0px; padding: 0px; outline: 0px; margin-top: 25px !important; margin-bottom: 1rem !important;"><span style="font-family: Poppins, sans-serif; letter-spacing: 0.5px; font-weight: bold; color: #0d6efd;"><a href="/" target="_blank" style="color: #0d6efd;">একই ডেলিভারি চার্জে আরো প্রোডাক্ট নিতে ক্লিক করুন</a></span></h4>
                                <div class="details-meta">
                                    <p>Product Code: <span>{{ $details->product_code }}</span></p>
                                </div>
                                <div class="details-list-group">
                                    <label class="details-list-title">Tags: </label>
                                    <div class="details-tag-list d-inline-block">
                                        <a href="{{ url('/category/' . $details->category->slug) }}"><span class="badge bg-success display-1 mr-2">{{ $details->category->name }}</span></a>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<div class="description-nav-wrapper">
    <div class="container bg-white">
        <div class="row">
            <div class="col-lg-12">
                <ul class="nav nav-tabs justify-content-start">
                    <li><a href="#tab-desc" class="tab-link active" data-bs-toggle="tab">পণ্যের বিস্তারিত</a></li>
                    <li><a href="#tab-spec" class="tab-link" data-bs-toggle="tab">ডেলিভারি এবং রিটার্ন পলিসি</a></li>
                    <li><a href="#tab-review" class="tab-link" data-bs-toggle="tab">Review ({{ $reviews->count() }})</a>
                    </li>
                </ul>
                <hr class="m-0">
                <div class="tab-pane fade active show p-3 bg-white description details-action-box " id="tab-desc">
                    <div class="row">
                        <div class="col-sm-8">
                            {!! $details->description !!}
                        </div>
                        <div class="col-sm-4">
                            @if ($details->pro_video)
                            <div class="pro_vide">
                                <h2>ভিডিও</h2>
                                <iframe width="100%" height="315"
                                    src="https://www.youtube.com/embed/{{ $details->pro_video }}"
                                    title="YouTube video player" frameborder="0"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                    allowfullscreen></iframe>
                            </div>
                            @endif


                        </div>
                    </div>
                </div>
                <div class="tab-pane fade p-3 bg-white details-action-box " id="tab-spec">
                    {!! $deliveryRule->description !!}
                </div>
                <div class="tab-pane fade p-3 bg-white details-action-box " id="tab-review">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="section-head">
                                <div class="title">
                                    <!-- <h2>Reviews ({{ $reviews->count() }})</h2>
                                            <p>Get specific details about this product from customers who own it.</p> -->
                                </div>
                                <div class="action">
                                    <div>
                                        <button type="button" class="details-action-btn question-btn btn-overlay"
                                            data-bs-toggle="modal" data-bs-target="#exampleModal">
                                            Write a review
                                        </button>
                                    </div>
                                </div>
                            </div>
                            @if ($reviews->count() > 0)
                            <div class="customer-review">
                                <div class="row">
                                    @foreach ($reviews as $key => $review)
                                    <div class="col-sm-12 col-12">
                                        <div class="review-card">
                                            <p class="reviewer_name"><i data-feather="message-square"></i>
                                                {{ $review->name }}
                                            </p>
                                            <p class="review_data">{{ $review->created_at->format('d-m-Y') }}</p>
                                            <p class="review_star">
                                                {!! str_repeat('<i class="fa-solid fa-star"></i>', $review->ratting) !!}
                                            </p>
                                            <p class="review_content">{{ $review->review }}</p>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                            @else
                            <div class="empty-content">
                                <i class="fa fa-clipboard-list"></i>
                                <p class="empty-text">This product has no reviews yet. Be the first one to write a
                                    review.</p>
                            </div>
                            @endif
                            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                                aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h1 class="modal-title fs-5" id="exampleModalLabel">Your review</h1>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="insert-review">
                                                @if (Auth::guard('customer')->user())
                                                <form action="{{ route('customer.review') }}" id="review-form"
                                                    method="POST">
                                                    @csrf
                                                    <input type="hidden" name="product_id" value="{{ $details->id }}">
                                                    <div class="fz-12 mb-2">
                                                        <div class="rating">
                                                            <label title="Excelent">
                                                                ☆
                                                                <input required type="radio" name="ratting" value="5" />
                                                            </label>
                                                            <label title="Best">
                                                                ☆
                                                                <input required type="radio" name="ratting" value="4" />
                                                            </label>
                                                            <label title="Better">
                                                                ☆
                                                                <input required type="radio" name="ratting" value="3" />
                                                            </label>
                                                            <label title="Very Good">
                                                                ☆
                                                                <input required type="radio" name="ratting" value="2" />
                                                            </label>
                                                            <label title="Good">
                                                                ☆
                                                                <input required type="radio" name="ratting" value="1" />
                                                            </label>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label for="message-text"
                                                            class="col-form-label">Message:</label>
                                                        <textarea required class="form-control radius-lg" name="review"
                                                            id="message-text"></textarea>
                                                        <span id="validation-message" style="color: red;"></span>
                                                    </div>
                                                    <div class="form-group">
                                                        <button class="details-review-button" type="submit">Submit
                                                            Review</button>
                                                    </div>

                                                </form>
                                                @else
                                                <a class="customer-login-redirect"
                                                    href="{{ route('customer.login') }}">Login
                                                    to Post
                                                    Your Review</a>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- <div class="col-sm-12">
                                    <div class="description-nav">
                                        <ul class="desc-nav-ul">
                                            {{-- <li class="active">
                                                <a href="#specification" target="_self">Specification</a>
                                            </li> --}}
                                            <li>
                                                <a href="#description" target="_self">Description</a>
                                            </li>
                                            {{-- <li>
                                                <a href="#question" target="_self">Questions (0)</a>
                                            </li> --}}
                                            <li>
                                                <a href="#writeReview" target="_self">Reviews ({{ $reviews->count() }}) </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div> -->
        </div>
    </div>
</div>

<section class="related-product-section">
    <div class="container">
        <div class="row">
            <div class="related-title">
                <h5>Related Product</h5>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="product-inner">
                    @foreach ($products as $key => $value)
                    <x-frontend-product-card :product="$value" />
                    <div class="product_item wist_item d-none">
                        <div class="product_item_inner">
                            @if($value->old_price)
                            <div class="sale-badge">
                                <div class="sale-badge-inner">
                                    <div class="sale-badge-box">
                                        <span class="sale-badge-text">
                                            <p>
                                                -@php
                                                $discount = (((($value->old_price) - ($value->new_price)) * 100) / ($value->old_price))
                                                @endphp
                                                {{ number_format($discount, 0) }}%
                                            </p>

                                        </span>
                                    </div>
                                </div>
                            </div>
                            @endif
                            <div class="pro_img">
                                <a href="{{ route('product', $value->slug) }}">
                                    <img src="{{ asset($value->image ? $value->image->image : '') }}"
                                        alt="{{ $value->name }}" />
                                </a>
                            </div>
                            <div class="pro_des">
                                <div class="pro_name">
                                    <a
                                        href="{{ route('product', $value->slug) }}">{{ Str::limit($value->name, 80) }}</a>
                                </div>
                                <div class="pro_price">
                                    <p>
                                        TK {{ $value->new_price }} @if ($value->old_price)
                                        <del>TK {{ $value->old_price }}</del>
                                        @endif


                                    </p>
                                </div>
                            </div>
                        </div>

                        @if (!$value->prosizes->isEmpty() || !$value->procolors->isEmpty())
                        <!-- <div class="pro_btn">

                            <div class="cart_btn order_button">
                                <a href="{{ route('product', $value->slug) }}" class="addcartbutton">{{ $settings['product_card_button_text'] }}</a>
                            </div>
                        </div> -->
                        @else
                        <div class="pro_btn">

                            <!-- <form action="{{ route('cart.store') }}" method="POST">
                                @csrf
                                <input type="hidden" name="id" value="{{ $value->id }}" />
                                <input type="hidden" name="qty" value="1" />
                                <button type="submit">{{ $settings['product_card_button_text'] }}</button>
                            </form> -->
                        </div>
                        @endif
                        <div class="pro_btn">
                            <form action="{{ route('cart.store') }}" method="POST">
                                @csrf
                                @if (!$value->prosizes->isEmpty())
                                <input type="hidden" name="product_size" value="{{ $value->prosizes[0]->size->sizeName }}" />
                                @endif
                                @if (!$value->procolors->isEmpty())
                                <input type="hidden" name="product_color" value="{{ $value->procolors[0]->color->colorName }}" />
                                @endif
                                <input type="hidden" name="id" value="{{ $value->id }}" />
                                <input type="hidden" name="qty" value="1" />
                                <button type="submit">{{ $settings['product_card_button_text'] }}</button>
                            </form>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

@endsection @push('script')
<script src="{{ asset('public/frontEnd/js/owl.carousel.min.js') }}"></script>

<script src="{{ asset('public/frontEnd/js/zoomsl.min.js') }}"></script>

<script>
    $(document).ready(function() {
        $(".details_slider").owlCarousel({
            margin: 15,
            items: 1,
            loop: true,
            dots: false,
            autoplay: true,
            autoplayTimeout: 6000,
            autoplayHoverPause: true,
        });
        $(".indicator-item").on("click", function() {
            var slideIndex = $(this).data("id");
            $(".details_slider").trigger("to.owl.carousel", slideIndex);
        });
    });
</script>

@push('script')
<script type="text/javascript">
    window.dataLayer = window.dataLayer || [];

    // Push product data when the page loads
    window.dataLayer.push({
        'event': 'product_page',
        'item_id': "{{ $details->id }}",
        'item_name': "{{ $details->name }}",
        'price': "{{ $details->new_price }}",
        'currency': "BDT",
        'category': "{{ $details->category->name }}",
        'brand': "Tailor Birds BD",
        'product_code': "{{ $details->product_code }}",
        'availability': "{{ $details->stock > 0 ? 'In Stock' : 'in stock' }}"
    });



    $(document).ready(function() {
        function getFbp() {
            return document.cookie.match(/_fbp=([^;]+)/)?.[1] || '';
        }
        @if($settings['fb_pageview_event'] == 1)
        fbq('track', 'PageView', {}, {
            event_id: '{{ $eventID }}-1',
            pageType: 'details',
            pageName: document.title,
            url: window.location.href,
            path: window.location.pathname,
            referrer: document.referrer || 'direct',
        });
        @endif

        @if($settings['fb_view_content_event'] == 1)
            fbq('track', 'ViewContent', {
                content_ids: '{{ $details->id }}',
                content_name: '{{ $details->name }}',
                content_type: 'product',
                currency: 'BDT',
                value: "{{ $details->new_price }}",
                contents: [{
                    id: '{{ $details->id }}',
                    quantity: 1,
                    item_price: "{{ $details->new_price }}"
                }],
                content_category: '{{ $details->category->name ?? "" }}',
                availability: "{{ $details->stock > 0 ? 'in stock' : 'in stock'  }}",
            }, {
                event_id: '{{ $eventID }}'
            });
        @endif

        setTimeout(function() {
            @if($settings['fb_view_content_event'] == 1)
                sendEventData({
                    event_id: '{{ $eventID }}',
                    fbp: getFbp(),
                    event_name: "ViewContent",
                    page_title: document.title,
                    page_url: window.location.href,
                    custom_data: {
                        content_ids: '{{ $details->id }}',
                        content_name: "{{ $details->name }}",
                        content_type: 'product',
                        value: '{{ $details->new_price }}',
                        currency: 'BDT',
                        contents: [{
                            id: '{{ $details->id }}',
                            quantity: 1,
                            item_price: "{{ $details->new_price }}"
                        }],
                        content_category: '{{ $details->category->name ?? "" }}',
                        availability: "{{ $details->stock > 0 ? 'in stock' : 'in stock'  }}",
                    }

                });
            @endif

            @if($settings['fb_pageview_event'] == 1)
                sendEventData({
                    event_id: '{{ $eventID }}-1',
                    fbp: getFbp(),
                    event_name: "PageView",
                    page_title: document.title,
                    page_url: window.location.href,
                });
            @endif

        }, 4000);
        $('.order_now_btn, .add_cart_btn').click(function() {
            var quantity = $("input[name='qty']").val() || 1;

            // Push product data when a purchase/cart action happens
            window.dataLayer.push({
                'event': 'purchase_action',
                'action_type': $(this).hasClass('order_now_btn') ? 'Order Now' : 'Add to Cart',
                'items': [{
                    'item_id': "{{ $details->id }}",
                    'item_name': "{{ $details->name }}",
                    'price': "{{ $details->new_price }}",
                    'currency': "BDT",
                    'quantity': quantity
                }]
            });
        });
    });
</script>

<script src="{{asset('public/frontEnd/')}}/js/parsley.min.js"></script>
<script src="{{asset('public/frontEnd/')}}/js/form-validation.init.js"></script>
@endpush



<!-- Data Layer End-->
<script>
    $(document).ready(function() {
        $(".related_slider").owlCarousel({
            margin: 10,
            items: 6,
            loop: true,
            dots: true,
            nav: true,
            autoplay: true,
            autoplayTimeout: 6000,
            autoplayHoverPause: true,
            responsiveClass: true,
            responsive: {
                0: {
                    items: 2,
                    nav: true,
                },
                600: {
                    items: 3,
                    nav: false,
                },
                1000: {
                    items: 6,
                    nav: true,
                    loop: true,
                },
            },
        });
        // $('.owl-nav').remove();
    });
</script>
<script>
    $(document).ready(function() {
        $(".minus").click(function() {
            var $input = $(this).parent().find("input");
            var count = parseInt($input.val()) - 1;
            count = count < 1 ? 1 : count;
            $input.val(count);
            $input.change();
            return false;
        });
        $(".plus").click(function() {
            var $input = $(this).parent().find("input");
            $input.val(parseInt($input.val()) + 1);
            $input.change();
            return false;
        });
    });
</script>

<script>
    function sendSuccess() {
        // size validation
        size = document.forms["formName"]["product_size"].value;
        if (size != "") {
            // access
        } else {
            toastr.warning("Please select any size");
            return false;
        }
        color = document.forms["formName"]["product_color"].value;
        if (color != "") {
            // access
        } else {
            toastr.error("Please select any color");
            return false;
        }
    }
</script>
<script>
    $(document).ready(function() {
        $(".rating label").click(function() {
            $(".rating label").removeClass("active");
            $(this).addClass("active");
        });
        const variants = @json($variantData);
        function updatePrice() {
            const selectedColor = $("input[name='product_color']:checked").val();
            const selectedSize = $("input[name='product_size']:checked").val();

            console.log("Selected Color: ", selectedColor);
            console.log("Selected Size: ", selectedSize);
            

            // Try to find a matching variant
            const match = variants.find(v =>
                (!v.color || v.color === selectedColor) &&
                (!v.size || v.size === selectedSize)
            );
            console.log("Matching Variant: ", match);
            

            if (match) {
                $("#currentPrice").text(match.price);
                if (match.old_price) {
                    $("#oldPrice").text("Tk " + match.old_price).show();
                } else {
                    $("#oldPrice").hide();
                }
            } else {
                $("#currentPrice").text("{{ $details->new_price }}");
                @if ($details->old_price)
                    $("#oldPrice").text("Tk {{ $details->old_price }}").show();
                @else
                    $("#oldPrice").hide();
                @endif
            }
        }

        $("input[name='product_color'], input[name='product_size']").on("change", updatePrice);

        // Run on page load
        //updatePrice();

    });
    $(document).ready(function() {
        $(".thumb_slider").owlCarousel({
            margin: 15,
            items: 4,
            loop: true,
            dots: false,
            nav: true,
            autoplayTimeout: 6000,
            autoplayHoverPause: true,
        });
    });
</script>

<script type="text/javascript">
    $(".block__pic").imagezoomsl({
        zoomrange: [3, 3]
    });
</script>
@endpush