@extends('master.front')

@section('title')
    {{ $item->name }}
@endsection

@section('meta')
    <meta name="tile" content="{{ $item->title }}">
    <meta name="keywords" content="{{ $item->meta_keywords }}">
    <meta name="description" content="{{ $item->meta_description }}">

    <meta name="twitter:title" content="{{ $item->title }}">
    <meta name="twitter:image" content="{{ asset('assets/images/' . $item->photo) }}">
    <meta name="twitter:description" content="{{ $item->meta_description }}">

    <meta name="og:title" content="{{ $item->title }}">
    <meta name="og:image" content="{{ asset('assets/images/' . $item->photo) }}">
    <meta name="og:description" content="{{ $item->meta_description }}">
@endsection



@section('content')

    <style>
        .product-badge.bg-secondary.border-default.text-body {
            height: 70px;
            width: 70px;
            left: 44%;
            border-radius: 50px;
            padding: 22px 8px;
            top: 35%;
        }

        @media (max-width: 420px) {
            .product-badge.bg-secondary.border-default.text-body {
                height: 70px;
                width: 70px;
                left: 38% !important;
                border-radius: 50px;
                padding: 22px 8px;
                top: 30% !important;
            }
        }

        .a2a_kit a::before,
        .btn.btn-primary::before,
        .footer-social-links a::before {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background: #0E0C62;
            -webkit-transition: .3s linear;
            -moz-transition: .3s linear;
            transition: .3s linear;

        }

        .ns-related-products {
            padding: 50px 0;

        }

        .ns-section-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .ns-label {
            display: inline-block;
            background: #0E0C62;
            color: #fff;
            padding: 8px 16px;
            border-radius: 25px;
            font-size: 0.9rem;
            margin-bottom: 15px;
        }

        .ns-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: #0E0C62;
        }

        .ns-highlight {
            background: linear-gradient(45deg, #FF4E50, #FC913A);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .ns-products-grid {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 16px;
            padding: 10px;
        }

        .ns-product-card {
            background: #fff;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transition: all 0.4s ease;
        }

        .ns-product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(14, 12, 98, 0.15);
        }

        .ns-image-wrapper {
            position: relative;
            /*aspect-ratio: 1;*/
            overflow: hidden;
        }

        .ns-product-img {
            width: 100%;
            /*height: 100%;*/
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        .ns-product-card:hover .ns-product-img {
            transform: scale(1.08);
        }

        .ns-badge {
            position: absolute;
            top: 15px;
            left: 15px;
            padding: 6px 15px;
            border-radius: 25px;
            font-size: 0.85rem;
            font-weight: 500;
            z-index: 2;
        }

        .ns-badge-feature {
            background: #ffc107;
            color: #000;
        }

        .ns-badge-top {
            background: #17a2b8;
            color: #fff;
        }

        .ns-badge-best {
            background: #343a40;
            color: #fff;
        }

        .ns-badge-flash_deal {
            background: #28a745;
            color: #fff;
        }

        .ns-badge-outstock {
            background: #6c757d;
            color: #fff;
        }

        .ns-discount {
            position: absolute;
            top: 15px;
            right: 15px;
            background: #FF4E50;
            color: #fff;
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .ns-actions {
            position: absolute;
            right: 15px;
            top: 70px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            transform: translateX(60px);
            transition: all 0.3s ease;
        }

        .ns-product-card:hover .ns-actions {
            transform: translateX(0);
        }

        .ns-action-btn {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            border: none;
            background: #fff;
            color: #0E0C62;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .ns-action-btn:hover {
            background: #0E0C62;
            color: #fff;
            transform: translateX(-5px);
        }

        .ns-content {
            padding: 20px;
        }

        .ns-category a {
            color: #666;
            font-size: 0.9rem;
            text-decoration: none;
        }

        .ns-name {
            margin: 10px 0;
        }

        .ns-name a {
            color: #0E0C62;
            font-size: 1rem;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
        }

        .ns-name a:hover {
            color: #FF4E50;
        }

        .ns-price-block {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }

        .ns-old-price {
            color: #999;
            text-decoration: line-through;
            font-size: 0.9rem;
        }

        .ns-current-price {
            color: #0E0C62;
            font-size: 1.2rem;
            font-weight: 600;
        }

        .ns-shop-now {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #0E0C62;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .ns-shop-now:hover {
            color: #FF4E50;
            gap: 12px;
        }

        /* Mobile Styles */
        @media (max-width: 768px) {
            .ns-related-products {
                padding: 40px 0;
            }

            .ns-title {
                font-size: 2rem;
            }

            .ns-products-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 10px;
            }

            .ns-name a {
                font-size: 14px;
                line-height: 18px !important;
            }

            .ns-content {
                padding: 15px;
            }
        }

        @media (max-width: 480px) {
            .ns-discount {
                position: absolute;
                top: 85%;
                right: 8px;
                width: 35px;
                height: 35px;
                border-radius: 50%;
                font-weight: 500;
                font-size: 0.8rem;
            }

            .ns-badge {
                padding: 4px 10px;
                top: 8px;
                left: 8px;
                height: 50px;
                width: 55px;
            }

            .ns-products-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 16px;
            }

            .ns-price-block {
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 5px;
                margin-bottom: 10px;
            }

            .ns-products-grid {
                gap: 10px;
                padding: 1px;
            }

            .ns-product-card {
                max-width: 300px;
                margin: 0 auto;
            }
        }
    </style>


    <style>
        /* Add this CSS */
        #instantCheckoutModal {
            --primary-color: #0E0C62;
            --accent-color: #FF00A3;
        }

        #instantCheckoutModal .modal-content {
            border: none;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        #instantCheckoutModal .modal-header {
            background: var(--primary-color);
            color: white;
            border-radius: 20px 20px 0 0;
            padding: 20px 30px;
        }

        #instantCheckoutModal .modal-title {
            font-size: 24px;
            font-weight: 600;
            color: white
        }

        #instantCheckoutModal .btn-close {
            background-color: white;
            opacity: 0.8;
        }

        .checkout-product {
            display: flex;
            gap: 20px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 15px;
            margin-bottom: 30px;
        }

        .product-image {
            width: 120px;
            height: 120px;
            border-radius: 10px;
            overflow: hidden;
        }

        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .product-info h4 {
            color: var(--primary-color);
            font-size: 18px;
            margin-bottom: 10px;
        }

        .product-info .price {
            color: var(--accent-color);
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .checkout-form {
            padding: 0 10px;
        }

        .form-floating {
            margin-bottom: 5px;
        }

        .form-control,
        .form-select {
            border: 2px solid #e1e1e1;
            border-radius: 12px;
            padding: 12px 18px;
            height: auto;
            font-size: 15px;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: none;
        }

        .form-floating label {
            padding-left: 18px;
        }

        .payment-method {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 12px;
        }

        .payment-label {
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 15px;
            display: block;
        }

        .payment-option {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .payment-option label {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 16px;
            cursor: pointer;
        }

        .payment-option i {
            color: var(--accent-color);
        }

        .modal-footer {
            border-top: none;
            padding: 20px 30px;
        }

        .btn-primary {
            background: var(--accent-color);
            border: none;
            padding: 12px 30px;
            border-radius: 12px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background: var(--primary-color);
            transform: translateY(-2px);
        }

        .btn-outline-secondary {
            border: 2px solid #e1e1e1;
            padding: 12px 30px;
            border-radius: 12px;
            font-weight: 600;
            color: #666;
        }

        .btn-outline-secondary:hover {
            background: #f8f9fa;
            border-color: #e1e1e1;
            color: #444;
        }

        @media (max-width: 768px) {
            .checkout-product {
                flex-direction: column;
                text-align: center;
            }

            .product-image {
                width: 100%;
                height: 200px;
            }

            .modal-dialog {
                margin: 10px;
            }
        }
    </style>


    <div class="page-title mb-2">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <ul class="breadcrumbs">
                        <li><a href="{{ route('front.index') }}">{{ __('Home') }}</a>
                        </li>
                        <li class="separator"></li>
                        <li><a href="{{ route('front.catalog') }}">{{ __('Shop') }}</a>
                        </li>
                        <li class="separator"></li>
                        <!-- <li>{{ $item->name }}</li> -->
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Content-->
    <div class="container padding-bottom-1x mb-1">
        <div class="row">

            <div class="col-12">
                <div class="row">
                    <!-- Poduct Gallery-->
                    <div class=" col-xl-5 col-lg-4 col-md-6 col-sm-12 col-12">
                        <div class="product-gallery">
                            @if ($item->video)
                                <div class="gallery-wrapper">
                                    <div class="gallery-item video-btn text-center">
                                        <a href="{{ $item->video }}" title="Watch video"></a>
                                    </div>
                                </div>
                            @endif
                            @if ($item->is_stock())
                                <!-- <span
                                            class="product-badge
        @if ($item->is_type == 'feature') bg-warning
      @elseif($item->is_type == 'new')
        bg-success
      @elseif($item->is_type == 'top')
        bg-info
      @elseif($item->is_type == 'best')
        bg-dark
      @elseif($item->is_type == 'flash_deal')
        bg-success @endif
        ">{{ $item->is_type != 'undefine' ? ucfirst(str_replace('_', ' ', $item->is_type)) : '' }}</span> -->
                            @else
                                <span
                                    class="product-badge bg-secondary border-default text-body
        ">{{ __('Sold Out') }}</span>
                            @endif

                            @if ($item->previous_price && $item->previous_price != 0)
                                <div class="product-badge bg-goldenrod  ppp-t">
                                    -{{ PriceHelper::DiscountPercentage($item) }}</div>
                            @endif

                            <div class="product-thumbnails insize">
                                <div class="product-details-slider owl-carousel ">
                                    <div class="item"><img src="{{ asset('assets/images/' . $item->photo) }}"
                                            alt="zoom" /></div>
                                    @foreach ($galleries as $key => $gallery)
                                        <div class="item"><img src="{{ asset('assets/images/' . $gallery->photo) }}"
                                                alt="zoom" /></div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Product Info-->
                    <div class="col-xl-7 col-lg-8 col-md-6 col-sm-12 col-12">
                        <div class="details-page-top-right-content d-flex  p-3 ">
                            <div class="div w-100">
                                <input type="hidden" id="item_id" value="{{ $item->id }}">
                                <input type="hidden" id="demo_price"
                                    value="{{ PriceHelper::setConvertPrice($item->discount_price) }}">
                                <input type="hidden" value="{{ PriceHelper::setCurrencySign() }}" id="set_currency">
                                <input type="hidden" value="{{ PriceHelper::setCurrencyValue() }}" id="set_currency_val">
                                <input type="hidden" value="{{ $setting->currency_direction }}" id="currency_direction">
                                <h4 class="mb-2 p-title-main">{{ $item->name }}</h4>
                                <div class="mb-3">
                                    <div class="rating-stars d-inline-block gmr-3">
                                        {!! renderStarRating($item->reviews->avg('rating')) !!}
                                    </div>
                                    @if ($item->is_stock())
                                        <span class="text-success  d-inline-block">{{ __('In Stock') }}
                                            <b>({{ $item->stock }}
                                                @lang('items'))</b></span>
                                    @else
                                        <span class="text-danger  d-inline-block">{{ __('Out of stock') }}</span>
                                    @endif
                                </div>


                                @if ($item->is_type == 'flash_deal')
                                    @if (date('d-m-y') != \Carbon\Carbon::parse($item->date)->format('d-m-y'))
                                        <div class="countdown countdown-alt mb-3" data-date-time="{{ $item->date }}">
                                        </div>
                                    @endif
                                @endif

                                <span class="h3 d-block price-area">
                                    @if ($item->previous_price != 0)
                                        <small
                                            class="d-inline-block"><del>{{ PriceHelper::setPreviousPrice($item->previous_price) }}</del></small>
                                    @endif
                                    <span id="main_price"
                                        class="main-price">{{ PriceHelper::grandCurrencyPrice($item) }}</span>
                                </span>

                                <!--<p class="text-muted">{{ $item->sort_details }} <a href="#details" class="scroll-to">{{ __('Read more') }}</a>-->
                                </p>

                                <div class="row margin-top-1x">
                                    @foreach ($attributes as $attribute)
                                        @if ($attribute->options->count() != 0)
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label for="{{ $attribute->name }}">{{ $attribute->name }}</label>
                                                    <select class="form-control attribute_option"
                                                        id="{{ $attribute->name }}">
                                                        @foreach ($attribute->options->where('stock', '!=', '0') as $option)
                                                            <option value="{{ $option->name }}"
                                                                data-type="{{ $attribute->id }}"
                                                                data-href="{{ $option->id }}"
                                                                data-target="{{ PriceHelper::setConvertPrice($option->price) }}">
                                                                {{ $option->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                                <div class="row align-items-end pb-4">
                                    <div class="col-sm-12">
                                        @if ($item->item_type == 'normal')
                                            <div class="qtySelector product-quantity">
                                                <span class="decreaseQty subclick"><i class="fas fa-minus "></i></span>
                                                <input type="text" class="qtyValue cart-amount" value="1">
                                                <span class="increaseQty addclick"><i class="fas fa-plus"></i></span>
                                                <input type="hidden" value="3333" id="current_stock">
                                            </div>
                                        @endif
                                        <div class="p-action-button ">
                                            @if ($item->item_type != 'affiliate')
                                                @if ($item->is_stock())
                                                    <button class="btn btn-primary m-0 a-t-c-mr w-100 my-2"
                                                        id="add_to_cart"
                                                        style="padding: 9px 15px; background:#ff7068 !important"> <i
                                                            class="bi bi-cart"></i>
                                                        <span>Add To Cart</span></button>
                                                    <button class="btn btn-primary m-0 w-100 shake-btn" id="but_to_cart"
                                                        onclick="window.location.href='{{ route('front.checkout.billing') }}'; return true;"
                                                        style="padding: 9px 15px; font-size:19px; font-weight: 600;"><i
                                                            class="bi bi-receipt"></i><span> অর্ডার করতে এই বাটনে ক্লিক করুন
                                                        </span></button>
                                                    <button class="btn mt-2 d-none" id="cashOnDeleveryInstant">
                                                        Instant Cash on Delevery button
                                                    </button>
                                                    <style>
                                                        /* Smooth shake animation */
                                                        @keyframes smoothShake {
                                                            0% {
                                                                transform: rotate(0deg);
                                                            }

                                                            25% {
                                                                transform: rotate(1.5deg);
                                                            }

                                                            50% {
                                                                transform: rotate(0deg);
                                                            }

                                                            75% {
                                                                transform: rotate(-1.5deg);
                                                            }

                                                            100% {
                                                                transform: rotate(0deg);
                                                            }
                                                        }

                                                        .shake-btn {
                                                            animation: smoothShake 1.3s infinite ease-in-out;
                                                            transform-origin: center;
                                                            /* Center theke shake hobe */
                                                        }
                                                    </style>
                                                @else
                                                    <button class="btn btn-primary m-0 me-2"><i
                                                            class="icon-bag"></i><span>{{ __('Out of stock') }}</span>
                                                    </button>
                                                    <button type="button" class="btn m-0" id="pre_order_button"
                                                        data-bs-toggle="modal" data-bs-target="#preOrderModal"
                                                        style="color: white;">
                                                        Pre Order Now
                                                    </button>
                                                    {{-- Success flash (outside modal) --}}
                                                    @if (session('preorder_success'))
                                                        <div class="alert alert-success mt-3">
                                                            {{ session('preorder_success') }}
                                                        </div>
                                                    @endif
                                                @endif
                                            @else
                                                <a href="{{ $item->affiliate_link }}" target="_blank"
                                                    class="btn btn-primary m-0"><span><i class="icon-bag"></i>Order
                                                        Now</span></a>
                                            @endif
                                            <div class="row">
                                                <div class="col-12 col-md-4 col-lg-4">

                                                    <a href="https://m.me/100206931506502?source=qr_link_share"
                                                        target="_blank">
                                                        <button class="btn btn-primary m-0 w-100 my-2"
                                                            style="padding: 9px 15px; background:#095ce2 !important;">
                                                            <i class="bi bi-messenger"
                                                                style="color:rgb(109, 161, 239)"></i>
                                                            <span>
                                                                Chat with Us</span>
                                                        </button>
                                                    </a>
                                                </div>
                                                <div class="col-12 col-md-4 col-lg-4">

                                                    <a href="https://wa.me/8801920872123" target="_blank">
                                                        <button class="btn btn-primary my-2 w-100 "
                                                            style="padding: 9px 15px; background:#0f9c43 !important;">
                                                            <i class="bi bi-whatsapp"></i>
                                                            <span> WhatsApp Us</span>
                                                        </button>
                                                    </a>
                                                </div>
                                                <div class="col-12 col-md-4 col-lg-4">

                                                    <a href="tel:01920872123">
                                                        <button class="btn btn-success m-0 w-100 my-2"
                                                            style="padding: 9px 15px; background:black !important; border:none;">
                                                            <i class="bi bi-telephone-fill" style="color:white;"></i>
                                                            <span>Call Us</span>
                                                        </button>
                                                    </a>
                                                </div>

                                            </div>

                                        </div>

                                    </div>
                                </div>


                                <div class="div">
                                    <div class="t-c-b-area">
                                        @if ($item->brand_id)
                                            <div class="pt-1 mb-1"><span class="text-medium">{{ __('Brand') }}:</span>
                                                <a
                                                    href="{{ route('front.catalog') . '?brand=' . $item->brand->slug }}">{{ $item->brand->name }}</a>
                                            </div>
                                        @endif

                                        <div class="pt-1 mb-1"><span class="text-medium">{{ __('Categories') }}:</span>
                                            <a
                                                href="{{ route('front.catalog') . '?category=' . $item->category->slug }}">{{ $item->category->name }}</a>
                                            @if ($item->subcategory->name)
                                                /
                                            @endif
                                            <a
                                                href="{{ route('front.catalog') . '?subcategory=' . $item->subcategory->slug }}">{{ $item->subcategory->name }}</a>
                                            @if ($item->childcategory->name)
                                                /
                                            @endif
                                            <a
                                                href="{{ route('front.catalog') . '?childcategory=' . $item->childcategory->slug }}">{{ $item->childcategory->name }}</a>
                                        </div>
                                        <div class="pt-1 mb-1"><span class="text-medium">{{ __('Tags') }}:</span>
                                            @if ($item->tags)
                                                @foreach (explode(',', $item->tags) as $tag)
                                                    @if ($loop->last)
                                                        <a
                                                            href="{{ route('front.catalog') . '?tag=' . $tag }}">{{ $tag }}</a>
                                                    @else
                                                        <a
                                                            href="{{ route('front.catalog') . '?tag=' . $tag }}">{{ $tag }}</a>,
                                                    @endif
                                                @endforeach
                                            @endif
                                        </div>
                                        @if ($item->item_type == 'normal')
                                            <div class="pt-1 mb-4"><span class="text-medium">{{ __('SKU') }}:</span>
                                                #{{ $item->sku }}</div>
                                        @endif
                                    </div>

                                    <div class="mt-4 p-d-f-area">
                                        <div class="left">
                                            <a class="btn btn-primary btn-sm wishlist_store wishlist_text"
                                                href="{{ route('user.wishlist.store', $item->id) }}"><span><i
                                                        class="icon-heart"></i></span>
                                                @if (Auth::check() &&
                                                        App\Models\Wishlist::where('user_id', Auth::user()->id)->where('item_id', $item->id)->exists())
                                                    <span>{{ __('Added To Wishlist') }}</span>
                                                @else
                                                    <span class="wishlist1">{{ __('Wishlist') }}</span>
                                                    <span class="wishlist2 d-none">{{ __('Added To Wishlist') }}</span>
                                                @endif
                                            </a>
                                            <!-- <button class="btn btn-primary btn-sm  product_compare"
                                                        data-target="{{ route('fornt.compare.product', $item->id) }}"><span><i
                                                                class="icon-repeat"></i>{{ __('Compare') }}</span></button> -->
                                        </div>

                                        <div class="d-flex align-items-center mt-2">
                                            <span class="text-muted mr-1">{{ __('Share') }}: </span>
                                            <div class="d-inline-block a2a_kit">
                                                <a class="facebook  a2a_button_facebook" href="">
                                                    <span><i class="fab fa-facebook-f"></i></span>
                                                </a>
                                                <a class="twitter  a2a_button_twitter" href="">
                                                    <span><i class="fab fa-twitter"></i></span>
                                                </a>
                                                <a class="linkedin  a2a_button_linkedin" href="">
                                                    <span><i class="fab fa-linkedin-in"></i></span>
                                                </a>
                                                <a class="pinterest   a2a_button_pinterest" href="">
                                                    <span><i class="fab fa-pinterest"></i></span>
                                                </a>
                                            </div>
                                            <script async src="https://static.addtoany.com/menu/page.js"></script>
                                        </div>

                                    </div>
                                </div>
                                <div class="mt-2" id="details">
                                    <div class="col-lg-12">
                                        <ul class="nav nav-tabs" role="tablist">
                                            <li class="nav-item" role="presentation">
                                                <a class="nav-link active" id="" data-bs-toggle="tab"
                                                    data-bs-target="#description" type="button" role="tab"
                                                    aria-controls="description"
                                                    aria-selected="true">{{ __('Descriptions') }}</a>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <a class="nav-link" id="specification-tab description-tab"
                                                    data-bs-toggle="tab" data-bs-target="#specification" type="button"
                                                    role="tab" aria-controls="specification"
                                                    aria-selected="false">{{ __('Specifications') }}</a>
                                            </li>
                                        </ul>
                                        <div class="tab-content card">
                                            <div class="tab-pane fade show active" id="description" role="tabpanel"
                                                aria-labelledby="description-tab"">
                                                {!! $item->details !!}
                                            </div>
                                            <div class=" tab-pane fade show" id="specification" role="tabpanel"
                                                aria-labelledby="specification-tab">
                                                <div class="comparison-table">
                                                    <table class="table table-bordered">
                                                        <thead class="bg-secondary">
                                                        </thead>
                                                        <tbody>
                                                            <tr class="bg-secondary">
                                                                <th class="text-uppercase">{{ __('Specifications') }}</th>
                                                                <td><span
                                                                        class="text-medium">{{ __('Descriptions') }}</span>
                                                                </td>
                                                            </tr>
                                                            @if ($sec_name)
                                                                @foreach (array_combine($sec_name, $sec_details) as $sname => $sdetail)
                                                                    <tr>
                                                                        <th>{{ $sname }}</th>
                                                                        <td>{{ $sdetail }}</td>
                                                                    </tr>
                                                                @endforeach
                                                            @else
                                                                <tr class="text-center">
                                                                    <td colspan="2">{{ __('No Specifications') }}</td>
                                                                </tr>
                                                            @endif
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>


                </div>



            </div>


            {{-- Pre Order Modal --}}
            <div class="modal fade" id="preOrderModal" tabindex="-1" aria-labelledby="preOrderLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content border-0">
                        <div class="modal-header">
                            <h5 class="modal-title" id="preOrderLabel">Pre Order</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>

                        <form method="POST" action="{{ route('front.product.preorder', $item->id) }}">
                            @csrf
                            <div class="modal-body">
                                {{-- Product summary (read-only, optional) --}}
                                <div class="mb-3 p-2 rounded bg-light">
                                    <div class="d-flex justify-content-between">
                                        <span>Product</span>
                                        <strong>{{ $item->name ?? $item->title }}</strong>
                                    </div>
                                </div>

                                {{-- Customer inputs --}}
                                <div class="mb-3">
                                    <label class="form-label">আপনার নাম <span class="text-danger">*</span></label>
                                    <input type="text" name="name" class="form-control"
                                        value="{{ old('name') }}" placeholder="আপনার নাম লিখুন" required>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">ঠিকানা <span class="text-danger">*</span></label>
                                    <textarea name="address" class="form-control" rows="3" required
                                        placeholder="জেলা সহ আপনার সম্পূর্ণ ঠিকানা লিখুন">{{ old('address') }}</textarea>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">মোবাইল নাম্বার <span class="text-danger">*</span></label>
                                    <input type="text" name="phone" class="form-control"
                                        value="{{ old('phone') }}" required placeholder="মোবাইল নাম্বার লিখুন">
                                </div>

                                {{-- লক্ষ্য করুন: product_name / product_price ইনপুটে নেই! --}}
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-outline-secondary"
                                    data-bs-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Submit Pre Order</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            {{-- Re-open modal if there were validation errors (so user can fix and resubmit) --}}
            @if ($errors->any())
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        // Bootstrap 5
                        var myModal = new bootstrap.Modal(document.getElementById('preOrderModal'));
                        myModal.show();
                    });
                </script>
            @endif



            @php
                function renderStarRating($rating, $maxRating = 5)
                {
                    $fullStar = "<i class = 'far fa-star filled'></i>";
                    $halfStar = "<i class = 'far fa-star-half filled'></i>";
                    $emptyStar = "<i class = 'far fa-star'></i>";
                    $rating = $rating <= $maxRating ? $rating : $maxRating;

                    $fullStarCount = (int) $rating;
                    $halfStarCount = ceil($rating) - $fullStarCount;
                    $emptyStarCount = $maxRating - $fullStarCount - $halfStarCount;

                    $html = str_repeat($fullStar, $fullStarCount);
                    $html .= str_repeat($halfStar, $halfStarCount);
                    $html .= str_repeat($emptyStar, $emptyStarCount);
                    $html = $html;
                    return $html;
                }
            @endphp







        </div>
    </div>



    <!-- Reviews-->



    <section class="ns-related-products">
        @if (count($related_items) > 0)
            <div class="container-fluid">
                <div class="ns-section-header">
                    <!--<span class="ns-label">More to Love</span>-->
                    <h2 class="ns-title">Similar Products <span class="ns-highlight">You May Like</span></h2>
                </div>

                <div class="ns-products-grid">
                    @foreach ($related_items as $related)
                        <div class="ns-product-item ">
                            <div class="ns-product-card">
                                <div class="ns-image-wrapper">
                                    <img src="{{ asset('assets/images/' . $related->photo) }}"
                                        alt="{{ $related->name }}" class="ns-product-img">

                                    @if ($related->is_stock())
                                        @if ($related->is_type != 'new')
                                            <!-- <div class="ns-badge ns-badge-{{ $related->is_type }}">
                                                        {{ ucfirst(str_replace('_', ' ', $related->is_type)) }}
                                                    </div> -->
                                        @endif
                                    @else
                                        <div class="ns-badge ns-badge-outstock">
                                            {{ __('out of stock') }}
                                        </div>
                                    @endif

                                    @if ($related->previous_price && $related->previous_price != 0)
                                        <div class="ns-discount">
                                            <span>-{{ PriceHelper::DiscountPercentage($related) }}</span>
                                        </div>
                                    @endif


                                </div>

                                <div class="ns-content">
                                    <div class="ns-category">
                                        <a href="{{ route('front.catalog') . '?category=' . $related->category->slug }}">
                                            {{ $related->category->name }}
                                        </a>
                                    </div>

                                    <p class="ns-name">
                                        <a href="{{ route('front.product', $related->slug) }}">
                                            {{ Str::limit($related->name, 30) }}
                                        </a>
                                    </p>

                                    <div class="ns-price-block">
                                        @if ($related->previous_price != 0)
                                            <del class="ns-old-price">
                                                {{ PriceHelper::setPreviousPrice($related->previous_price) }}
                                            </del>
                                        @endif
                                        <span class="ns-current-price">
                                            {{ PriceHelper::grandCurrencyPrice($related) }}
                                        </span>
                                    </div>

                                    <a href="{{ route('front.product', $related->slug) }}" class="ns-shop-now">
                                        Shop Now <i class="bi bi-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </section>

    <section>
        <div class="container">
            <div class="container  review-area">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="section-title">
                            <h2 class="h3">{{ __('Latest Reviews') }}</h2>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        @forelse ($reviews as $review)
                            <div class="single-review">
                                <div class="comment">
                                    <div class="comment-author-ava"><img class="lazy"
                                            data-src="{{ asset('assets/images/' . $review->user->photo) }}"
                                            alt="Comment author"></div>
                                    <div class="comment-body">
                                        <div class="comment-header d-flex flex-wrap justify-content-between">
                                            <div>
                                                <h4 class="comment-title mb-1">{{ $review->subject }}</h4>
                                                <span>{{ $review->user->first_name }}</span>
                                                <span class="ml-3">{{ $review->created_at->format('M d, Y') }}</span>
                                            </div>
                                            <div class="mb-2">
                                                <div class="rating-stars">
                                                    @php
                                                        for ($i = 0; $i < $review->rating; $i++) {
                                                            echo "<i class = 'far fa-star filled'></i>";
                                                        }
                                                    @endphp
                                                </div>
                                            </div>
                                        </div>
                                        <p class="comment-text  mt-2">{{ $review->review }}</p>

                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="card p-5">
                                {{ __('No Review') }}
                            </div>
                        @endforelse
                        <div class="row mt-15">
                            <div class="col-lg-12 text-center">
                                {{ $reviews->links() }}
                            </div>
                        </div>

                    </div>
                    <div class="col-md-4 mb-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="text-center">
                                    <div class="d-inline align-baseline display-3 mr-1">
                                        {{ round($item->reviews->avg('rating'), 2) }}</div>
                                    <div class="d-inline align-baseline text-sm text-warning mr-1">
                                        <div class="rating-stars">{!! renderStarRating($item->reviews->avg('rating')) !!}</div>
                                    </div>
                                </div>
                                <div class="pt-3">
                                    <label class="text-medium text-sm">5 {{ __('stars') }} <span class="text-muted">-
                                            {{ $item->reviews->where('status', 1)->where('rating', 5)->count() }}</span></label>
                                    <div class="progress margin-bottom-1x">
                                        <div class="progress-bar bg-warning" role="progressbar"
                                            style="width: {{ $item->reviews->where('status', 1)->where('rating', 5)->sum('rating') * 20 }}%; height: 2px;"
                                            aria-valuenow="100"
                                            aria-valuemin="{{ $item->reviews->where('rating', 5)->sum('rating') * 20 }}"
                                            aria-valuemax="100"></div>
                                    </div>
                                    <label class="text-medium text-sm">4 {{ __('stars') }} <span class="text-muted">-
                                            {{ $item->reviews->where('status', 1)->where('rating', 4)->count() }}</span></label>
                                    <div class="progress margin-bottom-1x">
                                        <div class="progress-bar bg-warning" role="progressbar"
                                            style="width: {{ $item->reviews->where('status', 1)->where('rating', 4)->sum('rating') * 20 }}%; height: 2px;"
                                            aria-valuenow="{{ $item->reviews->where('rating', 4)->sum('rating') * 20 }}"
                                            aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <label class="text-medium text-sm">3 {{ __('stars') }} <span class="text-muted">-
                                            {{ $item->reviews->where('status', 1)->where('rating', 3)->count() }}</span></label>
                                    <div class="progress margin-bottom-1x">
                                        <div class="progress-bar bg-warning" role="progressbar"
                                            style="width: {{ $item->reviews->where('rating', 3)->sum('rating') * 20 }}%; height: 2px;"
                                            aria-valuenow="{{ $item->reviews->where('rating', 3)->sum('rating') * 20 }}"
                                            aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <label class="text-medium text-sm">2 {{ __('stars') }} <span class="text-muted">-
                                            {{ $item->reviews->where('status', 1)->where('rating', 2)->count() }}</span></label>
                                    <div class="progress margin-bottom-1x">
                                        <div class="progress-bar bg-warning" role="progressbar"
                                            style="width: {{ $item->reviews->where('status', 1)->where('rating', 2)->sum('rating') * 20 }}%; height: 2px;"
                                            aria-valuenow="{{ $item->reviews->where('rating', 2)->sum('rating') * 20 }}"
                                            aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <label class="text-medium text-sm">1 {{ __('star') }} <span class="text-muted">-
                                            {{ $item->reviews->where('status', 1)->where('rating', 1)->count() }}</span></label>
                                    <div class="progress mb-2">
                                        <div class="progress-bar bg-warning" role="progressbar"
                                            style="width: {{ $item->reviews->where('status', 1)->where('rating', 1)->sum('rating') * 20 }}; height: 2px;"
                                            aria-valuenow="0"
                                            aria-valuemin="{{ $item->reviews->where('rating', 1)->sum('rating') * 20 }}"
                                            aria-valuemax="100"></div>
                                    </div>
                                </div>
                                @if (Auth::user())
                                    <div class="pb-2"><a class="btn btn-primary btn-block" href="#"
                                            data-bs-toggle="modal"
                                            data-bs-target="#leaveReview"><span>{{ __('Leave a Review') }}</span></a>
                                    </div>
                                @else
                                    <div class="pb-2"><a class="btn btn-primary btn-block"
                                            href="{{ route('user.login') }}"><span>{{ __('Login') }}</span></a></div>
                                @endif
                            </div>
                        </div>
                    </div>


                </div>

            </div>

        </div>
    </section>

    <div class="modal fade" id="instantCheckoutModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Quick Checkout</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="checkout-product">
                        <div class="product-image">
                            <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e" alt="Product">
                        </div>
                        <div class="product-info">
                            <h4>jemi Chu Georgette party Saree</h4>
                            <div class="price">3,250.00</div>
                            <div class="quantity">Quantity: 1</div>
                        </div>
                    </div>

                    <form id="instantCheckoutForm" class="checkout-form">
                        <div class="row g-4">
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="name" placeholder="আপনার নাম ">
                                    <label for="name">আপনার নাম </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="tel" class="form-control" id="phone"
                                        placeholder="ফোন নাম্বার ">
                                    <label for="phone">ফোন নাম্বার </label>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-floating">
                                    <textarea class="form-control" id="address" placeholder="ঠিকানা" style="height: 100px"></textarea>
                                    <label for="address">ঠিকানা </label>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <select class="form-select" aria-label="Select District">
                                    <option selected disabled>ঢাকা সিটির বাহিরে না ভিতরে থাকেন সিলেক্ট করুন </option>
                                    <option>ঢাকা সিটির ভিতরে</option>
                                    <option>ঢাকা সিটির বাহিরে </option>
                                </select>
                            </div>



                            <div class="col-12">
                                <div class="payment-method">
                                    <label class="payment-label">পেমেন্ট মেথড সিলেক্ট করুন </label>
                                    <div class="payment-option">
                                        <input type="radio" id="cod" name="payment" checked>
                                        <label for="cod">
                                            <i class="fas fa-money-bill-wave"></i>
                                            Cash on Delivery
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-floating">
                                    <textarea class="form-control" id="notes" placeholder="Additional Notes" style="height: 100px"></textarea>
                                    <label for="notes">Additional Notes (Optional)</label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary">Place Order</button>
                </div>
            </div>
        </div>
    </div>




    @auth
        <form class="modal fade ratingForm" action="{{ route('front.review.submit') }}" method="post" id="leaveReview"
            tabindex="-1">
            @csrf
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">{{ __('Leave a Review') }}</h4>
                        <button class="close modal_close" type="button" data-bs-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        @php
                            $user = Auth::user();
                        @endphp
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="review-name">{{ __('Your Name') }}</label>
                                    <input class="form-control" type="text" id="review-name"
                                        value="{{ $user->first_name }}" required>
                                </div>
                            </div>
                            <input type="hidden" name="item_id" value="{{ $item->id }}">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="review-email">{{ __('Your Email') }}</label>
                                    <input class="form-control" type="email" id="review-email"
                                        value="{{ $user->email }}" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="review-subject">{{ __('Subject') }}</label>
                                    <input class="form-control" type="text" name="subject" id="review-subject" required>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="review-rating">{{ __('Rating') }}</label>
                                    <select name="rating" class="form-control" id="review-rating">
                                        <option value="5">5 {{ __('Stars') }}</option>
                                        <option value="4">4 {{ __('Stars') }}</option>
                                        <option value="3">3 {{ __('Stars') }}</option>
                                        <option value="2">2 {{ __('Stars') }}</option>
                                        <option value="1">1 {{ __('Star') }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="review-message">{{ __('Review') }}</label>
                            <textarea class="form-control" name="review" id="review-message" rows="8" required></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" type="submit"><span>{{ __('Submit Review') }}</span></button>
                    </div>
                </div>
            </div>
        </form>
    @endauth

    <input id="item_id" value="{{ $item->id }}" type="hidden">

    <input id="name" value="{{ $item->name }}" type="hidden">

    <input id="item_category" value="{{ $item->category->name }}" type="hidden">

    <input id="item_brand" value="{{ $item->brand->name }}" type="hidden">

    <input id="price" value="{{ PriceHelper::grandCurrencyPrice($item) }}" type="hidden">





    <script>
        item_id = document.getElementById('item_id').value;
        name = document.getElementById('name').value;
        item_category = document.getElementById('item_category').value;
        item_brand = document.getElementById('item_brand').value;
        price = document.getElementById('price').value;

        window.dataLayer.push({
            'event': 'view_item',
            'ecommerce': {
                'currency': "BDT",
                'value': price,
                'items': [{
                    'item_id': item_id,
                    'item_name': name,
                    'price': price,
                    'item_brand': '{{ $item->brand->name ?? 'Null' }}',
                    'id': item_id,
                }]
            }
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#cashOnDeleveryInstant').click(function() {
                $('#instantCheckoutModal').modal('show');
            });
        });
    </script>



@endsection