@extends('partial.layout')
@section('content')
    <x-toast/>
    @php
        $amazingDiscountModel = null;
        $amazingCountdownEnd = null;

        if (isset($product)) {
            $now = now();

            $normalizeDiscount = function ($discount) use ($now) {
                if (!$discount || $discount->type !== 'amazing') {
                    return null;
                }

                $endAt = \Illuminate\Support\Carbon::parse($discount->end_time);
                if ($endAt->lessThanOrEqualTo($now)) {
                    return null;
                }

                if (!empty($discount->start_time)) {
                    $startAt = \Illuminate\Support\Carbon::parse($discount->start_time);
                    if ($startAt->greaterThan($now)) {
                        return null;
                    }
                }

                return $discount;
            };

            if ($product->relationLoaded('discount')) {
                $amazingDiscountModel = $normalizeDiscount($product->getRelation('discount'));
            }

            if (!$amazingDiscountModel) {
                $amazingDiscountModel = $normalizeDiscount(
                    $product->discount()
                        ->where('type', 'amazing')
                        ->where('start_time', '<=', $now)
                        ->where('end_time', '>', $now)
                        ->latest('end_time')
                        ->first()
                );
            }

            if (!$amazingDiscountModel) {
                $items = $product->relationLoaded('productItem')
                    ? $product->getRelation('productItem')
                    : $product->productItem()
                        ->whereHas('discount', function ($query) use ($now) {
                            $query->where('type', 'amazing')
                                ->where('start_time', '<=', $now)
                                ->where('end_time', '>', $now);
                        })
                        ->with(['discount' => function ($query) use ($now) {
                            $query->where('type', 'amazing')
                                ->where('start_time', '<=', $now)
                                ->where('end_time', '>', $now);
                        }])
                        ->get();

                foreach ($items as $item) {
                    $itemDiscount = $item->relationLoaded('discount')
                        ? $normalizeDiscount($item->getRelation('discount'))
                        : $normalizeDiscount(
                            $item->discount()
                                ->where('type', 'amazing')
                                ->where('start_time', '<=', $now)
                                ->where('end_time', '>', $now)
                                ->latest('end_time')
                                ->first()
                        );

                    if ($itemDiscount) {
                        $amazingDiscountModel = $itemDiscount;
                        break;
                    }
                }
            }

            if ($amazingDiscountModel) {
                $discountEnd = \Illuminate\Support\Carbon::parse($amazingDiscountModel->end_time);

                if ($discountEnd->greaterThan($now)) {
                    $amazingCountdownEnd = $discountEnd->toIso8601String();
                }
            }
        }

        $hasAmazingDiscount = !empty($amazingCountdownEnd);
    @endphp
    <div class="single__product sp_bottom_80">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ route('site.home') }}">{{ $config['site_title'] ?? config('app.name') }}</a>
                            </li>
                            <i class="fa-duotone fa-solid fa-angles-left breadcrumb-icon"></i>
                            @if($product->category)
                                @if($product->category->parent_id)
                                    <li class="breadcrumb-item">
                                        <a href="{{ route('category.show', $product->category->parent->slug) }}">
                                            {{ $product->category->parent->title }}
                                        </a>
                                    </li>
                                    <i class="fa-duotone fa-solid fa-angles-left breadcrumb-icon"></i>
                                    <li class="breadcrumb-item">
                                        <a href="{{ route('category.show', $product->category->slug) }}">
                                            {{ $product->category->title }}
                                        </a>
                                    </li>
                                    <i class="fa-duotone fa-solid fa-angles-left breadcrumb-icon"></i>
                                @else
                                    <li class="breadcrumb-item">
                                        <a href="{{ route('category.show', $product->category->slug) }}">
                                            {{ $product->category->title }}
                                        </a>
                                    </li>
                                @endif
                            @endif
                            <li class="breadcrumb-item active" aria-current="page">{{ $product->title }}</li>
                        </ol>
                    </nav>
                    <p class="product-title">{{$product->title}} کد {{$product->vendor_code}}</p>
                    @if($hasAmazingDiscount)
                        @include('components.front.countdown.assets')
                        <div class="product-amazing-highlight mt-4">
                            <div class="product-amazing-highlight__badge">
                                <i class="fa-duotone fa-solid fa-bolt"></i>
                            </div>
                            <div class="product-amazing-highlight__body">
                                <span class="product-amazing-highlight__title">پیشنهاد شگفت‌انگیز</span>
                                <span class="product-amazing-highlight__subtitle">فرصت باقی‌مانده برای خرید با تخفیف ویژه</span>
                            </div>
                            <div class="product-amazing-highlight__timer">
                                <div class="amazing-countdown" data-countdown-end="{{ $amazingCountdownEnd }}">
                                    <div class="countdown-segment">
                                        <span class="countdown-value" data-countdown-part="days">00</span>
                                        <span class="countdown-label">روز</span>
                                    </div>
                                    <div class="countdown-segment">
                                        <span class="countdown-value" data-countdown-part="hours">00</span>
                                        <span class="countdown-label">ساعت</span>
                                    </div>
                                    <div class="countdown-segment">
                                        <span class="countdown-value" data-countdown-part="minutes">00</span>
                                        <span class="countdown-label">دقیقه</span>
                                    </div>
                                    <div class="countdown-segment">
                                        <span class="countdown-value" data-countdown-part="seconds">00</span>
                                        <span class="countdown-label">ثانیه</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
                <div class="col-xl-5 col-lg-5 col-md-12">
                    <div class="featurearea__details__img ltr">
                        <div class="ltn__prd-share-social">
                            <button type="button"
                                    class="ltn__blog-share-social-link wishlist-btn"
                                    title="افزودن به مورد علاقه"
                                    data-product-id="{{ $product->id }}">
                                <i class="fa-duotone fa-solid fa-message-heart{{ $product->is_favorite ? ' fas' : '' }}"></i>
                            </button>
                            <button type="button"
                                    class="ltn__blog-share-social-link compare-btn"
                                    data-product-id="{{ $product->id }}"
                                    title="مقایسه محصول">
                                <i class="fa-duotone fa-solid fa-scale-balanced"></i>
                            </button>
                            <button type="button"
                                    class="ltn__blog-share-social-link notify-btn"
                                    data-bs-toggle="modal"
                                    data-bs-target="#notifyModal"
                                    data-product-id="{{ $product->id }}"
                                    title="اطلاع رسانی به من">
                                <i class="fa-duotone fa-regular fa-megaphone"></i>
                            </button>
                            <button type="button"
                                    class="ltn__blog-share-social-link share-btn"
                                    data-bs-toggle="modal"
                                    data-bs-target="#shareModal"
                                    title="اشتراک گذاری محصول">
                                <i class="fa-duotone fa-solid fa-share-nodes"></i>
                            </button>
                        </div>

                        <div class="featurearea__big__img ltr">
                            <div class="swiper product-gallery-main">
                                <div class="swiper-wrapper">
                                    @foreach($product->attachments as $image)
                                        <div class="swiper-slide">
                                            <div class="featurearea__single__big__img">
                                                <div class="{{$product->status != 0 ? 'magnify' : ''}}">
                                                    <div class="large"
                                                         style="background: url('{{ asset('storage/attachments/' . $image->path) }}') no-repeat;"></div>
                                                    <img class="small {{$product->status == 0 ? 'grayscale' : ''}}"
                                                         src="{{ asset('storage/attachments/' . $image->path) }}"
                                                         alt="{{  $product->title }}">
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div class="featurearea__thumb__img ltr">
                            <div class="swiper product-gallery-thumbs">
                                <div class="swiper-wrapper">
                                    @foreach($product->attachments as $index => $image)
                                        <div class="">
                                            <div class="featurearea__single__thumb__img">
                                                <img
                                                    class="{{ $product->status == 0 ? 'grayscale' : '' }}"
                                                    src="{{ asset('storage/attachments/' . json_decode($image->sizes)->thumbnail) }}"
                                                    alt="{{ $product->title }}"
                                                    style="cursor: pointer;"
                                                    onclick="openGalleryModal({{ $index }})"
                                                >
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-2 col-md-12">
                    <div class="single__product__wrap">

                        <p class="single-product-category"> دسته بندی محصول : {{$product->category->title}}</p>
                        <div>
                            @php
                                $approvedComments = $product->comments()->where('is_question', 0)->where('status', 1)->get();
                                $averageRate = $approvedComments->avg('rate') ?? 0;
                                $commentCount = $approvedComments->count();
                            @endphp
                            <i class="fa-duotone fa-thin fa-star single-product-rate"></i>{{ number_format($averageRate, 1) }}
                            (امتیاز
                            از {{$commentCount}} نظر)
                            <a href="#comments" class="btn primary-button me-3"><i
                                    class="fa-duotone fa-solid fa-comments"></i> {{ $commentCount }} دیدگاه</a>
                        </div>
                        @if($product->category->title != 'کارت هدیه')
                            <div class="mt-4">
                                <p class="single-brand">
                                    برند : {{$product->brand->title}}
                                </p>
                            </div>
                            <div class="mt-4">
                                @php
                                    $items = $product->productItem ?? collect();

                                    // حذف وزن‌های تکراری (فقط یکی از هر وزن)
                                    $uniqueWeights = $items->unique('weight')->values();
                                @endphp

                                @if($uniqueWeights->count() > 0)
                                    <select class="single-weight-select" name="product_item_id"
                                            id="product_item_select">
                                        @foreach($uniqueWeights as $weight)
                                            <option value="{{ $weight->id }}">{{ $weight->weight }} گرم</option>
                                        @endforeach
                                    </select>
                                @else
                                    <p class="single-weight mb-2">
                                        وزن کالا : {{ $product->default_weight }} گرم
                                    </p>
                                @endif
                                <div class="mt-4">
                                    <p class="single-weight mb-2">ویژگی ها</p>
                                    <div class="row">
                                        <div class="col-6 ">
                                            <div class="product-specification">
                                                <p class="spc-title">عیار</p>
                                                <p class="secondary-color">{{$product->karat->title}}</p>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="product-specification">
                                                <p class="spc-title">مناسب برای</p>
                                                <p class="secondary-color">
                                                    @if(count($product->productUsage) > 0)

                                                        @foreach($product->productUsage as $key => $proUsage)
                                                            {{$proUsage->title}} {{$key !== count($product->productUsage) -1 ? ',' : ''}}
                                                        @endforeach
                                                    @else
                                                        -
                                                    @endif
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                        @if(isset($features) && $features != null && count($features) > 0)
                            <div class="mt-4">
                                <p class="single-features mb-2">ویژگی ها</p>
                                <div class="container p-0">
                                    <div class="row">
                                        @foreach($features as $feature)
                                            <div class="col-6">
                                                <div class="feature-item">
                                                    <p class="feature-title mb-0">{{ $feature['title'] }}</p>
                                                    <p class="feature-value mb-0">{{ $feature['value'] }}</p>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endif

                    </div>
                </div>
                <div class="col-xl-4 col-lg-3 col-md-12 mt-md-0 mt-2">
                    <div class="single-price-section">
                        <div class="container p-0">
                            <div class="row mb-5">
                                <div class="col-4 align-content-center single-product-price-label">قیمت</div>
                                <div class="col-8 align-content-center">
                                    <div class="grid__wraper__price" id="price-display">
                                        @if($product->status == 0)
                                            توقف تولید
                                        @else
                                            @php
                                                // اگر محصول ProductItem دارد، از اولین آیتم استفاده کن
                                                $displayPrice = $product->product_price;
                                                $displayFinalPrice = $product->final_price;
                                                $displayHasDiscount = $product->has_discount;
                                                $displayDiscountPercent = $product->discount_percent;

                                                if ($product->productItem()->available()->count() > 0) {
                                                    $firstItem = $product->productItem()->available()->first();
                                                    $displayPrice = $firstItem->price;
                                                    $displayFinalPrice = $firstItem->final_price;
                                                    $displayHasDiscount = $firstItem->has_discount;
                                                    $displayDiscountPercent = $firstItem->discount_percent ?? 0;
                                                }
                                            @endphp

                                            @if($displayPrice == 0)
                                                به زودی ...
                                            @else
                                                @if($displayHasDiscount)
                                                    <span
                                                        class="text-bold">{{ number_format($displayFinalPrice) }} ریال</span>
                                                    <span class="discount-percent">{{ $displayDiscountPercent }}%</span>
                                                    <p class="mb-0 discount-price">
                                                        <del>{{ number_format($displayPrice) }} ریال</del>
                                                    </p>
                                                @else
                                                    <span
                                                        class="text-bold">{{ number_format($displayPrice) }} ریال</span>
                                                @endif
                                            @endif
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-5">
                                <div class="col-12">
                                    <div class="w-100">
                                        <i class="fa-duotone fa-solid fa-badge-check ms-2 prd-single-icon"></i>
                                        <span>گارانتی اصالت و سلامت فیزیکی کالا</span>
                                    </div>
                                    <div class="w-100">
                                        <i></i>
                                        @if(isset($product->productItem) && $product->productItem != null && count($product->productItem) > 0 && $product->status == 1 )
                                            <span>کالا موجود می باشد</span>
                                        @elseif($product->status == 1)
                                            <i class="fa-duotone fa-regular fa-truck ms-2 prd-single-icon"></i><span>آماده ارسال از <b>{{$product->time_to_create}} روز</b> کاری دیگر</span>
                                        @else
                                            <span>تولید این محصول متوقف شده است</span>
                                        @endif

                                    </div>
                                </div>
                            </div>
                            <div class="row mb-5 pe-3 ps-3">
                                @if($product->status !== 0 && $product->product_price != 0)
                                    <button onclick="addToBasket()" class="btn primary-button w-100 pt-3 pb-3 addCart"
                                            data-product-id="{{$product->id}}">
                                        افزودن به سبد خرید
                                    </button>
                                @else
                                    <button class="btn primary-button w-100 pt-3 pb-3"
                                            data-bs-toggle="modal"
                                            data-bs-target="#notifyModal"
                                            data-product-id="{{ $product->id }}"
                                            title="اطلاع رسانی به من">
                                        <i class="fa-duotone fa-regular fa-megaphone"></i>

                                        اطلاع رسانی
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- single__product__end -->
    <div class="container single-product-trust-mobile">
        <div class="row">
            <div class="col-5col">
                <div class="product-trust-home">
                    <img class="trust-icon" src="/theme/img/product-trust/icon-1.svg" alt="پرداخت مطمئن">
                    <span class="primary__color">پرداخت مطمئن</span>
                </div>
            </div>
            <div class="col-5col">
                <div class="product-trust-home">
                    <img class="trust-icon" src="/theme/img/product-trust/icon-2.svg" alt="۱ روز ضمانت بازگشت">
                    <span class="primary__color">۱ روز ضمانت بازگشت</span>
                </div>
            </div>
            <div class="col-5col">
                <div class="product-trust-home">
                    <img class="trust-icon" src="/theme/img/product-trust/icon-3.svg" alt="گارانتی مادام العمر">
                    <span class="primary__color">گارانتی مادام العمر</span>
                </div>
            </div>
            <div class="col-5col">
                <div class="product-trust-home">
                    <img class="trust-icon" src="/theme/img/product-trust/icon-4.svg" alt="ضمانت اصل بودن کالا">
                    <span class="primary__color">ضمانت اصل بودن کالا</span>
                </div>
            </div>
            <div class="col-5col">
                <div class="product-trust-home">
                    <img class="trust-icon" src="/theme/img/product-trust/icon-5.svg" alt="تضمین کیفیت">
                    <span class="primary__color">تضمین کیفیت</span>
                </div>
            </div>
        </div>
    </div>
    <div class="container single-product-trust">
        <div class="row">
            <div class="col-5col">
                <div class="product-trust-home">
                    <img class="trust-icon" src="/theme/img/product-trust/icon-1.svg" alt="پرداخت مطمئن">
                    <span class="primary__color">پرداخت مطمئن</span>
                </div>
            </div>
            <div class="col-5col">
                <div class="product-trust-home">
                    <img class="trust-icon" src="/theme/img/product-trust/icon-2.svg" alt="۱ روز ضمانت بازگشت">
                    <span class="primary__color">۱ روز ضمانت بازگشت</span>
                </div>
            </div>
            <div class="col-5col">
                <div class="product-trust-home">
                    <img class="trust-icon" src="/theme/img/product-trust/icon-3.svg" alt="گارانتی مادام العمر">
                    <span class="primary__color">گارانتی مادام العمر</span>
                </div>
            </div>
            <div class="col-5col">
                <div class="product-trust-home">
                    <img class="trust-icon" src="/theme/img/product-trust/icon-4.svg" alt="ضمانت اصل بودن کالا">
                    <span class="primary__color">ضمانت اصل بودن کالا</span>
                </div>
            </div>
            <div class="col-5col">
                <div class="product-trust-home">
                    <img class="trust-icon" src="/theme/img/product-trust/icon-5.svg" alt="تضمین کیفیت">
                    <span class="primary__color">تضمین کیفیت</span>
                </div>
            </div>
        </div>
    </div>
    @if(isset($similar_products) && count($similar_products))
        <div class="feture__section sp_bottom_80 mt-5">
            <div class="container">
                <div class="col-md-12 p-1 pb-3">
                    <div class="row">
                        <div class="col-md-6 text-end p-1">
                            <span class="product-slider-title">محصولات مشابه</span>
                        </div>
                        <div class="col-md-6 text-start p-1">
                            <span class="product-slider-title"></span>
                        </div>
                    </div>
                </div>
                <div
                    class="ltr row grid__responsive row__custom__class feature__slider__active__3 slider__default__arrow">

                    @foreach($similar_products as $similar_product)
                        <div class="col-md-3 p-1">
                            <x-front.product.slider-item :product="$similar_product"/>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif

    <!-- discription__section__start -->

    <div class="descriptionarea sp_bottom_80 ">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 descriptionarea__tab__wrapper">
                    <ul class="nav descriptionarea__tab__button" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="descriptionarea__link"
                                    data-bs-toggle="tab"
                                    data-bs-target="#description"
                                    type="button"
                                    aria-selected="true"
                                    role="tab">معرفی
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="descriptionarea__link active"
                                    data-bs-toggle="tab"
                                    data-bs-target="#specification"
                                    type="button"
                                    aria-selected="true"
                                    role="tab">مشخصات
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="descriptionarea__link"
                                    data-bs-toggle="tab"
                                    data-bs-target="#comments"
                                    type="button"
                                    aria-selected="true"
                                    role="tab">دیدگاه ها
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="descriptionarea__link"
                                    data-bs-toggle="tab"
                                    data-bs-target="#discussion"
                                    type="button"
                                    aria-selected="true"
                                    role="tab">پرسش و پاسخ
                            </button>
                        </li>
                    </ul>
                    <div class="tab-content tab__content__wrapper" id="myTabContent1">
                        <div class="tab-pane fade "
                             id="description"
                             role="tabpanel">
                            {!! $product->description !!}
                        </div>
                    </div>
                    <div class="tab-content tab__content__wrapper" id="myTabContent2">
                        <div class="tab-pane fade active show"
                             id="specification"
                             role="tabpanel">
                            <ul class="product-specification">
                                <li class="product-specification-item w-100">
                                    <div class="row">
                                        <div class="col-6 col-md-2"><p class="specification-title"> کد محصول </p></div>
                                        <div class="col-6 col-md-10"><p
                                                class="specification-value">{{$product->vendor_code ?? '-'}}</p>
                                        </div>
                                    </div>
                                </li>
                                <li class="product-specification-item w-100">
                                    <div class="row">
                                        <div class="col-6 col-md-2"><p class="specification-title">ابعاد</p></div>
                                        <div class="col-6 col-md-10"><p
                                                class="specification-value">{{$product->length ?? '-'}}</p>
                                        </div>
                                    </div>
                                </li>
                                <li class="product-specification-item w-100">
                                    <div class="row">
                                        <div class="col-6 col-md-2"><p class="specification-title">مدل</p></div>
                                        <div class="col-6 col-md-10"><p
                                                class="specification-value">{{$product->model ?? '-'}}</p></div>
                                    </div>
                                </li>
                                <li class="product-specification-item w-100">
                                    <div class="row">
                                        <div class="col-6 col-md-2"><p class="specification-title">جواهر</p></div>
                                        <div class="col-6 col-md-10"><p
                                                class="specification-value">{{$product->is_jewelry ? 'بله' : 'خیر'}}</p>
                                        </div>
                                    </div>
                                </li>
                                <li class="product-specification-item w-100">
                                    <div class="row">
                                        <div class="col-6 col-md-2"><p class="specification-title">جنس</p></div>
                                        <div class="col-6 col-md-10"><p
                                                class="specification-value">{{$product->productType->title ?? '-'}}</p>
                                        </div>
                                    </div>
                                </li>
                                <li class="product-specification-item w-100">
                                    <div class="row">
                                        <div class="col-6 col-md-2"><p class="specification-title">عیار</p></div>
                                        <div class="col-6 col-md-10"><p
                                                class="specification-value">{{$product->karat->title ?? '-'}}</p>
                                        </div>
                                    </div>
                                </li>
                                <li class="product-specification-item w-100">
                                    <div class="row">
                                        <div class="col-6 col-md-2"><p class="specification-title">رنگ آبکاری</p></div>
                                        <div class="col-6 col-md-10"><p
                                                class="specification-value">{{$product->color->title ?? '-'}}</p>
                                        </div>
                                    </div>
                                </li>
                                <li class="product-specification-item w-100">
                                    <div class="row">
                                        <div class="col-6 col-md-2"><p class="specification-title">مناسب برای</p></div>
                                        <div class="col-6 col-md-10"><p
                                                class="specification-value">
                                                @foreach($product->productUsage as $key => $proUsage)
                                                    {{$proUsage->title}} {{$key !== count($product->productUsage) -1 ? ',' : ''}}
                                                @endforeach
                                            </p>
                                        </div>
                                    </div>
                                </li>
                                <li class="product-specification-item w-100">
                                    <div class="row">
                                        <div class="col-6 col-md-2"><p class="specification-title">توضیحات</p></div>
                                        <div class="col-6 col-md-10"><p
                                                class="specification-value">{!! $product->short_description ?? '-' !!}</p>
                                        </div>
                                    </div>
                                </li>

                            </ul>
                        </div>
                    </div>
                    <div class="tab-content tab__content__wrapper" id="myTabContent3">
                        <div class="tab-pane fade"
                             id="comments"
                             role="tabpanel">
                            <div class="comments">
                                @forelse($product->comments()->where('is_question', 0)->where('status', 1)->orderBy('created_at', 'desc')->get() as $comment)
                                    <div class="comment-item mb-4">
                                        <div class="comment-card">
                                            <div class="comment-header">
                                                <div class="user-info">
                                                    <div class="user-avatar">
                                                        <i class="fas fa-user-circle"></i>
                                                    </div>
                                                    <div class="user-details">
                                                        <span
                                                            class="user-name">{{ $comment->customer ? $comment->customer->full_name : $comment->author }}</span>
                                                        @if($comment->customer)
                                                            <span class="buyer-badge">خریدار</span>
                                                        @endif
                                                        <span
                                                            class="comment-date">{{ jdate($comment->created_at)->ago() }}</span>
                                                    </div>
                                                </div>
                                                <div class="comment-actions">
                                                    <button class="btn btn-link p-0 reaction-btn"
                                                            data-type="dislike"
                                                            data-comment-id="{{ $comment->id }}"
                                                        {{ !Auth::guard('customer')->check() ? 'disabled' : '' }}>
                                                        <span class="reaction-count">{{ $comment->dislike }}</span>
                                                        <i class="far fa-thumbs-down {{ $comment->dislike > 0 ? 'secondary-color' : '' }}"></i>
                                                    </button>
                                                    <button class="btn btn-link p-0 reaction-btn"
                                                            data-type="like"
                                                            data-comment-id="{{ $comment->id }}"
                                                        {{ !Auth::guard('customer')->check() ? 'disabled' : '' }}>
                                                        <span class="reaction-count">{{ $comment->like }}</span>
                                                        <i class="far fa-thumbs-up {{ $comment->like > 0 ? 'secondary-color' : '' }}"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="comment-content">
                                                @if($comment->rate)
                                                    <div class="rating-stars mb-2">
                                                        @for($i = 1; $i <= 5; $i++)
                                                            <i class="fas fa-star {{ $i <= $comment->rate ? 'text-secondary-color' : 'text-muted' }}"></i>
                                                        @endfor
                                                    </div>
                                                @endif
                                                <p class="comment-text">{{ $comment->comment }}</p>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="no-comments">
                                        <i class="fa-duotone fa-solid fa-comments"></i>
                                        <p>هنوز هیچ نظری برای این محصول ثبت نشده است.</p>
                                    </div>
                                @endforelse
                            </div>
                            <!-- Add Comment Form -->
                            <div class="add-comment-section mt-5">
                                <h4 class="section-title">
                                    <i class="fas fa-pen"></i>
                                    ثبت نظر جدید
                                </h4>
                                <form action="{{ route('product.comment.store', $product->slug) }}" method="POST"
                                      class="comment-form">
                                    <input type="hidden" name="is_question" value="0">
                                    <div class="form-group">
                                        <label class="form-label">امتیاز شما</label>
                                        <div class="rating-input">
                                            <div class="star-rating">
                                                @for($i = 5; $i >= 1; $i--)
                                                    <input type="radio" id="star{{ $i }}" name="rate"
                                                           value="{{ $i }}"/>
                                                    <label for="star{{ $i }}"><i class="fas fa-star"></i></label>
                                                @endfor
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="comment" class="form-label">نظر شما</label>
                                        <textarea class="form-control" id="comment" name="comment" rows="4"
                                                  placeholder="نظر خود را در مورد این محصول بنویسید..."
                                                  required></textarea>
                                    </div>
                                    <div class="form-submit">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-paper-plane"></i>
                                            ثبت نظر
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="tab-content tab__content__wrapper" id="myTabContent4">
                        <div class="tab-pane fade"
                             id="discussion"
                             role="tabpanel">
                            <div class="discussion">
                                @forelse($product->comments()->where('is_question', 1)->where('status', 1)->orderBy('created_at', 'desc')->get() as $question)
                                    <div class="discussion-item mb-4">
                                        <div class="question-card">
                                            <div class="question-header">
                                                <div class="user-info">
                                                    <div class="user-avatar">
                                                        <i class="fas fa-user-circle"></i>
                                                    </div>
                                                    <div class="user-details">
                                                        <span
                                                            class="user-name">{{ $question->customer ? $question->customer->full_name : $question->author }}</span>
                                                        @if($question->customer)
                                                            <span class="buyer-badge">خریدار</span>
                                                        @endif
                                                        <span
                                                            class="question-date">{{ jdate($question->created_at)->ago() }}</span>
                                                    </div>
                                                </div>
                                                <div class="question-actions">
                                                    <button class="btn btn-link p-0 reaction-btn"
                                                            data-type="dislike"
                                                            data-comment-id="{{ $question->id }}"
                                                        {{ !Auth::guard('customer')->check() ? 'disabled' : '' }}>
                                                        <span class="reaction-count">{{ $question->dislike }}</span>
                                                        <i class="far fa-thumbs-down {{ $question->dislike > 0 ? 'secondary-color' : '' }}"></i>
                                                    </button>
                                                    <button class="btn btn-link p-0 reaction-btn"
                                                            data-type="like"
                                                            data-comment-id="{{ $question->id }}"
                                                        {{ !Auth::guard('customer')->check() ? 'disabled' : '' }}>
                                                        <span class="reaction-count">{{ $question->like }}</span>
                                                        <i class="far fa-thumbs-up {{ $question->like > 0 ? 'secondary-color' : '' }}"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="question-content">
                                                <p class="question-text">{{ $question->comment }}</p>
                                                @if($question->response)
                                                    <div class="answer-section">
                                                        <div class="answer-header">
                                                            <i class="fas fa-reply"></i>
                                                            <span>پاسخ فروشگاه</span>
                                                        </div>
                                                        <p class="answer-text">{{ $question->response }}</p>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="no-questions">
                                        <i class="fa-duotone fa-solid fa-circle-question"></i>
                                        <p>هنوز هیچ پرسشی برای این محصول ثبت نشده است.</p>
                                    </div>
                                @endforelse
                            </div>
                            <!-- Add Question Form -->
                            <div class="add-question-section mt-5">
                                <h4 class="section-title">
                                    <i class="fas fa-pen"></i>
                                    ثبت پرسش جدید
                                </h4>
                                <form action="{{ route('product.comment.store', $product->slug) }}" method="POST"
                                      class="question-form">
                                    <input type="hidden" name="is_question" value="1">
                                    <div class="form-group">
                                        <label for="question" class="form-label">پرسش شما</label>
                                        <textarea class="form-control" id="question" name="comment" rows="4"
                                                  placeholder="پرسش خود را در مورد این محصول بنویسید..."
                                                  required></textarea>
                                    </div>
                                    <div class="form-submit">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-paper-plane"></i>
                                            ثبت پرسش
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Notify Modal -->
    <div class="modal fade" id="notifyModal" tabindex="-1" aria-labelledby="notifyModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title w-100" id="notifyModalLabel">اطلاع رسانی به من</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="notifyForm">
                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label">اشتراک گذاری در صورت :</label>
                            <div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="notify_type" id="notifyAvailable"
                                           value="product_available" checked>
                                    <label class="form-check-label" for="notifyAvailable">
                                        موجود شدن کالا
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="notify_type" id="notifyAmazing"
                                           value="product_amazing">
                                    <label class="form-check-label" for="notifyAmazing">
                                        شگفت انگیز شدن کالا
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">اطلاع رسانی از طریق :</label>
                            <div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="notify_way" id="notifyEmail"
                                           value="email" checked>
                                    <label class="form-check-label" for="notifyEmail">
                                        ایمیل
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="notify_way" id="notifySms"
                                           value="sms">
                                    <label class="form-check-label" for="notifySms">
                                        پیامک
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="notify_way" id="notifyBoth"
                                           value="both">
                                    <label class="form-check-label" for="notifyBoth">
                                        هردو مورد
                                    </label>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn primary-button w-100">
                            <span class="notification-submit-btn">ثبت درخواست</span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Share Modal -->
    <div class="modal fade" id="shareModal" tabindex="-1" aria-labelledby="shareModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title w-100 text-center" id="shareModalLabel">اشتراک گذاری محصول</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}"
                       target="_blank"
                       class="ltn__blog-share-social-link d-inline-flex m-2">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="https://twitter.com/intent/tweet?url={{ urlencode(request()->url()) }}&text={{ urlencode($product->title) }}"
                       target="_blank"
                       class="ltn__blog-share-social-link d-inline-flex m-2">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(request()->url()) }}&title={{ urlencode($product->title) }}"
                       target="_blank"
                       class="ltn__blog-share-social-link d-inline-flex m-2">
                        <i class="fab fa-linkedin-in"></i>
                    </a>
                    <a href="https://t.me/share/url?url={{ urlencode(request()->url()) }}&text={{ urlencode($product->title) }}"
                       target="_blank"
                       class="ltn__blog-share-social-link d-inline-flex m-2">
                        <i class="fab fa-telegram-plane"></i>
                    </a>
                    {{-- Add more social share links here if needed --}}
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="galleryModal" tabindex="-1" aria-labelledby="galleryModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content bg-dark">
                <div class="modal-body p-0">
                    <div id="galleryCarousel" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            @foreach($product->attachments as $index => $image)
                                <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                                    <img src="{{ asset('storage/attachments/' . $image->path) }}" class="d-block w-100"
                                         alt="{{ $product->title }}">
                                </div>
                            @endforeach
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#galleryCarousel"
                                data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#galleryCarousel"
                                data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        </button>
                    </div>
                </div>
                <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="modal"
                        aria-label="Close">
                    <i class="fa fa-xmark"></i></button>
            </div>
        </div>
    </div>

    @push('styles')
        <style>
            .product-amazing-highlight {
                display: flex;
                align-items: center;
                gap: 1.25rem;
                padding: 1rem 1.5rem;
                border-radius: 20px;
                background: linear-gradient(135deg, #75cce2 0%, #19abcf 100%);
                position: relative;
                overflow: hidden;
                margin-bottom: 10px;
            }

            .product-amazing-highlight::before {
                content: '';
                position: absolute;
                inset: 0;
                background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
                opacity: 0.85;
                pointer-events: none;
            }

            .product-amazing-highlight__badge {
                width: 58px;
                height: 58px;
                border-radius: 18px;
                background: linear-gradient(135deg, #75cce2 0%, #19abcf 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                color: #0f657b;
                flex-shrink: 0;
                position: relative;
                z-index: 1;
            }

            .product-amazing-highlight__badge i {
                font-size: 1.6rem;
            }

            .product-amazing-highlight__body {
                display: flex;
                flex-direction: column;
                gap: 0.35rem;
                position: relative;
                z-index: 1;
            }

            .product-amazing-highlight__title {
                font-size: 1.15rem;
                font-weight: 700;
                color: #034454;
            }

            .product-amazing-highlight__subtitle {
                font-size: 0.9rem;
                color: #034454;
            }

            .product-amazing-highlight__timer {
                margin-right: auto;
                position: relative;
                z-index: 1;
            }

            .product-amazing-highlight .amazing-countdown {
                margin: 0;
                background: linear-gradient(135deg, #19abcf 0%, #75cce2 100%);
                box-shadow: 4px 6px 8px -1px #25252524;
                gap: 0.75rem;
                padding: 0.65rem 1.1rem;
            }

            .product-amazing-highlight .amazing-countdown .countdown-segment {
                min-width: 60px;
            }

            .product-amazing-highlight .amazing-countdown .countdown-segment:not(:last-child)::after {
                right: -0.55rem;
            }

            @media (max-width: 992px) {
                .product-amazing-highlight {
                    flex-wrap: wrap;
                    align-items: flex-start;
                }

                .product-amazing-highlight__timer {
                    width: 100%;
                    margin-top: 0.75rem;
                }

                .product-amazing-highlight .amazing-countdown {
                    width: 100%;
                    justify-content: center;
                }
            }

            @media (max-width: 576px) {
                .product-amazing-highlight {
                    padding: 0.9rem 1rem;
                    gap: 0.85rem;
                }

                .product-amazing-highlight__badge {
                    width: 52px;
                    height: 52px;
                    border-radius: 16px;
                }

                .product-amazing-highlight__title {
                    font-size: 1.05rem;
                }

                .product-amazing-highlight__subtitle {
                    font-size: 0.82rem;
                }

                .product-amazing-highlight .amazing-countdown {
                    gap: 0.6rem;
                    padding: 0.55rem 0.85rem;
                }

                .product-amazing-highlight .amazing-countdown .countdown-segment {
                    min-width: 54px;
                }
            }

            .carousel-control-prev,
            .carousel-control-next {
                width: 48px;
                height: 48px;
                margin-top: auto;
                margin-bottom: auto;
                border-radius: 9999px;
                background: rgba(255, 255, 255, 0.1); /* پس زمینه شیشه‌ای */
                backdrop-filter: blur(4px); /* شیشه‌ای واقعی */
                display: flex;
                align-items: center;
                justify-content: center;
                transition: background 0.3s ease;
                border: 1px solid rgba(255, 255, 255, 0.2);
            }

            .carousel-control-prev:hover,
            .carousel-control-next:hover {
                background: rgba(255, 255, 255, 0.25); /* هاور روشن‌تر */
            }

            .btn-close.position-absolute.top-0.end-0.m-3 {
                z-index: 99999999;
                padding: 10px 10px 15px 13px;
                border-radius: 0;
                color: var(--primaryColor);
            }

            .gallery-modal img {
                max-height: 80vh;
                object-fit: contain;
            }

            /* Breadcrumb Styles */
            .breadcrumb {
                background: transparent;
                padding: 1rem 0;
                display: flex;
                flex-wrap: wrap;
                list-style: none;
                border-radius: 0;
                direction: rtl;
            }

            .breadcrumb-item {
                display: flex;
                align-items: center;
                font-size: 0.95rem;
            }

            .breadcrumb-item + .breadcrumb-item {
                padding-left: 0.5rem;
            }


            .breadcrumb-item a {
                color: var(--primaryColor);
                text-decoration: none;
                transition: all 0.3s ease;
                position: relative;
                padding: 0.25rem 0;
            }

            .breadcrumb-item a:hover {
                color: var(--secondaryColor);
            }

            .breadcrumb-item a::after {
                content: '';
                position: absolute;
                width: 0;
                height: 1px;
                bottom: 0;
                right: 0;
                background-color: var(--secondaryColor);
                transition: width 0.3s ease;
            }

            .breadcrumb-item a:hover::after {
                width: 100%;
            }

            .breadcrumb-item.active {
                color: #666;
                font-weight: 500;
            }

            @media (max-width: 768px) {
                .breadcrumb {
                    padding: 0.75rem 0;
                    margin-bottom: 1rem;
                }

                .breadcrumb-item {
                    font-size: 0.85rem;
                }

                .breadcrumb-item + .breadcrumb-item::before {
                    padding-right: 0.5rem;
                    font-size: 0.7rem;
                }
            }

            * {
                margin: 0;
                padding: 0;
            }

            .magnify {
                position: relative;
            }

            .large {
                width: 280px;
                height: 280px;
                position: absolute;
                box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
                0 0 7px 7px rgba(0, 0, 0, 0.25),
                inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
                display: none;
            }

            .small {
                display: block;
            }

            .product-specification .secondary-color {
                font-size: 13px;
            }

            .spc-title {
                color: #7B7B7B;
                font-size: 14px;
                font-weight: 500;
            }

            .product-specification {
                border: 1px solid var(--primaryColor);
                border-radius: 15px;
                padding: 10px;
            }

            /* Star Rating Styles */
            .star-rating {
                display: inline-flex;
                flex-direction: row-reverse;
                gap: 0.3rem;
            }

            .star-rating input {
                display: none;
            }

            .star-rating label {
                cursor: pointer;
                font-size: 1.5rem;
                color: #ddd;
                transition: color 0.2s ease-in-out;
            }

            .star-rating label:hover,
            .star-rating label:hover ~ label,
            .star-rating input:checked ~ label {
                color: #ffc107;
            }

            /* Form Styles */
            .add-comment-section,
            .add-question-section {
                background: #f8f9fa;
                padding: 2rem;
                border-radius: 8px;
                margin-top: 2rem;
            }

            .comment-form textarea,
            .question-form textarea {
                resize: vertical;
                min-height: 100px;
            }

            .rating-input {
                margin-bottom: 1rem;
            }

            .rating-input label {
                display: block;
                margin-bottom: 0.5rem;
                font-weight: 500;
            }

            /* Reaction button styles */
            .reaction-btn {
                color: inherit;
                text-decoration: none;
                margin-left: 10px;
                cursor: pointer;
            }

            .reaction-btn:disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }

            .reaction-btn i {
                transition: color 0.2s ease;
            }

            .reaction-btn:hover:not(:disabled) i {
                color: var(--secondary-color);
            }

            .reaction-btn.active i {
                color: var(--secondary-color);
            }

            /* Trust section responsive styles */
            @media (max-width: 767px) {
                .single-product-trust {
                    display: none !important;
                }

                .single-product-trust-mobile {
                    display: block;
                }
            }

            @media (min-width: 768px) {
                .single-product-trust {
                    display: block;
                }

                .single-product-trust-mobile {
                    display: none !important;
                }
            }

            .single-product-trust-mobile {
                padding: 0 20px;
                background-color: #f7f7f7;
                width: 92%;
                border: 1px solid #D9D9D9;
                border-radius: 20px;
            }

            .single-product-trust-mobile .col-5col {
                padding: 10px 20px;
            }

            .single-product-trust-mobile .trust-icon {
                padding-left: 10px;
            }

            .single-product-trust-mobile span {
                font-size: 16px;
            }

            .ltn__prd-share-social {
                position: absolute;
                right: 5px;
                top: 5px;
                z-index: 9999;
                display: grid;
            }

            .ltn__prd-share-social a,
            .ltn__prd-share-social button {
                border: 1px solid var(--secondaryColor);
                padding: 10px 10px;
                margin-bottom: 10px;
                border-radius: 10px;
                color: var(--primaryColor);
                font-size: 20px;
                background: none;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
            }

            .ltn__prd-share-social a:hover,
            .ltn__prd-share-social button:hover {
                background-color: var(--secondaryColor);
                color: white;
            }

            .wishlist-btn.active i {
                color: #ff0000;
            }

            .wishlist-btn.active:hover i {
                color: white;
            }

            /* Modal Styles */
            .modal-content {
                border-radius: 15px;
                border: none;
                box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
            }

            .modal-header {
                border-bottom: 1px solid #e0e0e0;
                padding: 25px;
                background-color: #f5f5f5;
                border-top-left-radius: 15px;
                border-top-right-radius: 15px;
            }

            .modal-title {
                color: #333;
                font-weight: 700;
                font-size: 1.25rem;
            }

            .modal-body {
                padding: 25px;
            }

            #productSearch {
                border-radius: 8px;
                padding: 12px;
                border: 1px solid #edf2f7;
                transition: all 0.3s ease;
            }

            #productSearch:focus {
                border-color: #3498db;
                box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
            }

            /* === Notify Modal Styles === */
            #notifyModal .modal-content {
                border-radius: 15px;
                border: none;
                box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);
                overflow: hidden;
            }

            #notifyModal .modal-header {
                background-color: #eef2f7; /* Lighter, calming background */
                border-bottom: 1px solid #d0d6de;
                padding: 25px 30px;
                position: relative;
                border-top-left-radius: 15px;
                border-top-right-radius: 15px;
            }

            #notifyModal .modal-header::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 60px;
                height: 4px;
                background-color: #19abcf; /* A more vibrant blue */
                border-radius: 2px;
            }

            #notifyModal .modal-title {
                color: #1a2e3f; /* Even darker title color */
                font-weight: 800;
                font-size: 1.4rem;
                text-align: center;
                width: 100%;
            }

            #notifyModal .modal-body {
                padding: 30px;
                background-color: #ffffff;
            }

            #notifyModal .form-label {
                font-weight: 700;
                color: #222; /* Darker label */
                margin-bottom: 18px;
                display: block;
                font-size: 1.1rem;
            }

            #notifyModal .form-check {
                margin-bottom: 18px; /* Increased spacing */
                padding-left: 2.2em; /* More space for custom radio */
                display: flex;
                align-items: center;
            }

            #notifyModal .form-check-input {
                margin-top: 0; /* Reset default margin-top */
                margin-right: 0; /* Reset default margin-right */
                margin-left: 1rem; /* Add space to the left */
                /* Custom radio button styles */
                width: 1.4em;
                height: 1.4em;
                border: 2px solid #ccc;
                background-color: #fff; /* White background for unchecked */
                border-radius: 50%;
                transition: all 0.3s ease-in-out;
                cursor: pointer;
                flex-shrink: 0;
                position: relative; /* For custom checked indicator */
            }

            #notifyModal .form-check-input:checked {
                border-color: #19abcf;
                background-color: #19abcf;
                box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.3);
            }

            #notifyModal .form-check-input:checked::after {
                content: '';
                width: 0.5em;
                height: 0.5em;
                background-color: #fff;
                border-radius: 50%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            #notifyModal .form-check-input:focus {
                box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.3);
                outline: 0;
                border-color: #19abcf;
            }

            #notifyModal .form-check-label {
                cursor: pointer;
                color: #333;
                font-size: 1.05rem;
                line-height: 1.4em;
                padding-top: 0;
            }

            #notifyModal .btn-primary {
                background: #19abcf; /* Vibrant blue */
                border-color: #19abcf;
                padding: 15px 30px;
                border-radius: 8px;
                font-weight: 700;
                transition: all 0.3s ease;
                font-size: 1.2rem;
                margin-top: 20px;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
            }

            #notifyModal .btn-primary:hover {
                background: #357bd8; /* Darker blue on hover */
                border-color: #357bd8;
                transform: translateY(-2px);
                box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
            }

            #notifyModal .alert {
                margin-top: 25px;
                border-radius: 8px;
                font-size: 1rem;
                padding: 15px;
            }

            /* Status Badges */
            /* Question Section Styles */
            .discussion-item {
                margin-bottom: 2rem;
            }

            .question-card {
                background: #fff;
                border-radius: 12px;
                padding: 1.5rem;
                transition: transform 0.2s ease;
            }

            .question-card:hover {
                transform: translateY(-2px);
            }

            .question-header {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                margin-bottom: 1rem;
            }

            .user-info {
                display: flex;
                align-items: center;
                gap: 1rem;
            }

            .user-avatar {
                width: 40px;
                height: 40px;
                background: #f0f2f5;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #666;
                font-size: 1.5rem;
            }

            .user-details {
                display: flex;
                flex-direction: inherit;
                gap: 0.50rem;
            }

            .user-name {
                font-weight: 600;
                color: #333;
            }

            .buyer-badge {
                background: #e3f2fd;
                color: #1976d2;
                padding: 0.25rem 0.75rem;
                border-radius: 12px;
                font-size: 0.8rem;
                font-weight: 500;
            }

            .question-date {
                color: #666;
                font-size: 0.85rem;
            }

            .question-actions {
                display: flex;
                gap: 1rem;
            }

            .reaction-btn {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                color: #666;
                transition: color 0.2s ease;
            }

            .reaction-btn:hover {
                color: var(--secondary-color);
            }

            .reaction-count {
                font-size: 0.9rem;
            }

            .question-content {
                margin-top: 1rem;
            }

            .question-text {
                color: #333;
                line-height: 1.6;
                margin-bottom: 1rem;
            }

            .answer-section {
                background: #f8f9fa;
                border-radius: 8px;
                padding: 1rem;
                margin-top: 1rem;
            }

            .answer-header {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                color: #1976d2;
                font-weight: 600;
                margin-bottom: 0.5rem;
            }

            .answer-text {
                color: #555;
                line-height: 1.6;
                margin: 0;
            }

            .no-questions {
                text-align: center;
                padding: 3rem 1rem;
                background: #f8f9fa;
                border-radius: 12px;
                color: #666;
            }

            .no-questions i {
                font-size: 3rem;
                color: #ccc;
                margin-bottom: 1rem;
            }

            .add-question-section {
                background: #fff;
                border-radius: 12px;
                padding: 2rem;
                box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
            }

            .section-title {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                color: #333;
                margin-bottom: 1.5rem;
                font-weight: 600;
            }

            .section-title i {
                color: var(--secondary-color);
            }

            .form-group {
                margin-bottom: 1.5rem;
            }

            .form-label {
                font-weight: 500;
                color: #333;
                margin-bottom: 0.75rem;
            }

            .form-control {
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                padding: 1rem;
                transition: all 0.2s ease;
            }

            .form-control:focus {
                border-color: var(--secondary-color);
                box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
            }

            .form-submit {
                display: flex;
                justify-content: flex-end;
            }

            .btn-primary {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.75rem 1.5rem;
                font-weight: 500;
                border-radius: 8px;
                transition: all 0.2s ease;
            }

            .btn-primary:hover {
                transform: translateY(-1px);
            }

            @media (max-width: 768px) {
                .question-header {
                    flex-direction: column;
                    gap: 1rem;
                }

                .question-actions {
                    width: 100%;
                    justify-content: flex-end;
                }

                .user-info {
                    width: 100%;
                }
            }

            /* Comment Section Styles */
            .comment-item {
                margin-bottom: 2rem;
            }

            .comment-card {
                background: #fff;
                border-radius: 12px;
                padding: 1.5rem;
                transition: transform 0.2s ease;
            }

            .comment-card:hover {
                transform: translateY(-2px);
            }

            .comment-header {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                margin-bottom: 1rem;
            }

            .comment-content {
                margin-top: 1rem;
            }

            .rating-stars {
                display: flex;
                gap: 0.25rem;
            }

            .rating-stars i {
                font-size: 1.1rem;
            }

            .comment-text {
                color: #333;
                line-height: 1.6;
                margin: 0;
            }

            .no-comments {
                text-align: center;
                padding: 3rem 1rem;
                background: #f8f9fa;
                border-radius: 12px;
                color: #666;
            }

            .no-comments i {
                font-size: 3rem;
                color: #ccc;
                margin-bottom: 1rem;
            }

            /* Star Rating Styles */
            .rating-input {
                margin-bottom: 1.5rem;
            }

            .star-rating {
                display: inline-flex;
                flex-direction: row-reverse;
                gap: 0.3rem;
            }

            .star-rating input {
                display: none;
            }

            .star-rating label {
                cursor: pointer;
                font-size: 1.8rem;
                color: #ddd;
                transition: color 0.2s ease-in-out;
            }

            .star-rating label:hover,
            .star-rating label:hover ~ label,
            .star-rating input:checked ~ label {
                color: #ffc107;
            }

            @media (max-width: 768px) {
                .comment-header {
                    flex-direction: column;
                    gap: 1rem;
                }

                .comment-actions {
                    width: 100%;
                    justify-content: flex-end;
                }

                .user-info {
                    width: 100%;
                }
            }

            .breadcrumb-icon {
                align-content: center;
                margin: 0 8px;
                color: var(--primaryColor);
            }

            #galleryModal .modal-dialog {
                max-width: 100vw; /* کل عرض صفحه */
                height: 100vh; /* کل ارتفاع مانیتور */
                margin: 0; /* وسط‌چینی پیش‌فرض رو حذف کن */
            }

            #galleryModal .modal-content {
                height: 100vh;
                border-radius: 0; /* گوشه‌های گرد حذف بشه (اختیاری) */
                background: black; /* بک‌گراند مشکی */
            }

            #galleryModal .modal-body {
                height: 100%;
                padding: 0;
            }

            #galleryModal .carousel-item img {
                width: 100%;
                max-height: 100vh;
                object-fit: scale-down;
            }

        </style>
    @endpush

    @push('scripts')
        <script>
            function openGalleryModal(index) {
                const modal = new bootstrap.Modal(document.getElementById('galleryModal'));
                modal.show();

                // فعال‌سازی اسلاید خاص
                const carousel = document.querySelector('#galleryCarousel');
                const bsCarousel = bootstrap.Carousel.getInstance(carousel) || new bootstrap.Carousel(carousel);
                bsCarousel.to(index);
            }
        </script>

    @endpush
    @push('scripts')
        <script>
            $(document).ready(function () {
                // Initialize Swiper for product gallery
                var thumbsSwiper = new Swiper('.product-gallery-thumbs', {
                    spaceBetween: 10,
                    slidesPerView: 4,
                    freeMode: true,
                    watchSlidesProgress: true,
                    direction: 'horizontal',
                    breakpoints: {
                        768: {
                            slidesPerView: 3,
                        },
                        480: {
                            slidesPerView: 2,
                        }
                    }
                });

                var mainSwiper = new Swiper('.product-gallery-main', {
                    spaceBetween: 10,
                    thumbs: {
                        swiper: thumbsSwiper,
                    },
                    allowTouchMove: false,
                    direction: 'horizontal'
                });

                // Magnify effect for product images
                var native_width = 0;
                var native_height = 0;

                function initializeMagnify() {
                    // Remove existing event handlers
                    $(".magnify").off('mouseleave mousemove');

                    // Get the current active slide
                    var currentSlide = $('.product-gallery-main .swiper-slide-active');
                    var currentMagnify = currentSlide.find('.magnify');
                    var currentSmall = currentSlide.find('.small');
                    var currentLarge = currentSlide.find('.large');

                    // Add new event handlers only to the current active slide
                    currentMagnify.mouseleave(function (e) {
                        currentLarge.fadeOut(100);
                    });

                    currentMagnify.mousemove(function (e) {
                        if (!native_width && !native_height) {
                            var image_object = new Image();
                            image_object.src = currentSmall.attr("src");

                            native_width = image_object.width;
                            native_height = image_object.height;
                        } else {
                            var magnify_offset = $(this).offset();
                            var mx = e.pageX - magnify_offset.left;
                            var my = e.pageY - magnify_offset.top;

                            if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
                                currentLarge.fadeIn(100);
                            } else {
                                currentLarge.fadeOut(100);
                            }
                            if (currentLarge.is(":visible")) {
                                var rx = Math.round(mx / currentSmall.width() * native_width - currentLarge.width() / 2) * -1;
                                var ry = Math.round(my / currentSmall.height() * native_height - currentLarge.height() / 2) * -1;
                                var bgp = rx + "px " + ry + "px";

                                var px = mx - currentLarge.width() / 2;
                                var py = my - currentLarge.height() / 2;

                                currentLarge.css({left: px, top: py, backgroundPosition: bgp});
                            }
                        }
                    });
                }

                // Initialize magnify effect on page load
                initializeMagnify();

                // Update magnify effect when slider changes
                mainSwiper.on('slideChange', function () {
                    // Reset dimensions for new image
                    native_width = 0;
                    native_height = 0;

                    // Reinitialize magnify effect after a short delay
                    setTimeout(function () {
                        initializeMagnify();
                    }, 100);
                });
            });
            document.addEventListener('DOMContentLoaded', function () {
                // Handle form submissions
                const commentForm = document.querySelector('.comment-form');
                const questionForm = document.querySelector('.question-form');

                if (commentForm) {
                    commentForm.addEventListener('submit', async function (e) {
                        e.preventDefault();
                        await submitForm(this);
                    });
                }

                if (questionForm) {
                    questionForm.addEventListener('submit', async function (e) {
                        e.preventDefault();
                        await submitForm(this);
                    });
                }

                // Handle compare button click
                document.querySelector('.compare-btn')?.addEventListener('click', function () {
                    const productId = this.dataset.productId;
                    fetch('/compare/add', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        },
                        body: JSON.stringify({product_id: productId})
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.status === 'success') {
                                showAlert({type: 'success', message: data.message});
                                // Redirect to compare page after a short delay
                                setTimeout(() => {
                                    window.location.href = '/compare';
                                }, 1000);
                            } else {
                                showAlert({type: 'danger', message: data.message});
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            showAlert({type: 'danger', message: 'خطا در افزودن به لیست مقایسه'});
                        });
                });

                async function submitForm(form) {
                    try {
                        const formData = new FormData(form);
                        const response = await fetch(form.action, {
                            method: 'POST',
                            body: formData,
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                            }
                        });

                        const result = await response.json();

                        if (response.ok) {
                            showAlert({type: 'success', message: result.message});

                            form.reset();
                            setTimeout(() => window.location.reload(), 2000);
                        } else if (response.status === 422) {
                            const errors = result.errors;
                            const firstError = Object.values(errors)[0]?.[0] || 'خطا در اعتبارسنجی';
                            showAlert({type: 'danger', message: firstError});
                        } else {
                            showAlert({type: 'danger', message: result.message || 'خطا در ثبت نظر'});
                        }
                    } catch (error) {
                        showAlert({type: 'danger', message: 'خطا در ارتباط با سرور'});
                        console.error('Error:', error);
                    }
                }

                // Handle like/dislike reactions
                const reactionButtons = document.querySelectorAll('.reaction-btn');

                reactionButtons.forEach(button => {
                    button.addEventListener('click', async function (e) {
                        e.preventDefault();

                        if (!this.dataset.commentId || !this.dataset.type) return;

                        const commentId = this.dataset.commentId;
                        const type = this.dataset.type;
                        const isAuthenticated = {{ Auth::guard('customer')->check() ? 'true' : 'false' }};

                        if (!isAuthenticated) {
                            showAlert({
                                type: 'warning',
                                message: 'برای لایک کردن لطفا وارد حساب کاربری خود شوید'
                            });
                            return;
                        }

                        try {
                            const response = await fetch(`/product/comment/${commentId}/${type}/store`, {
                                method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                                    'Accept': 'application/json'
                                }
                            });

                            const result = await response.json();

                            if (response.ok) {
                                // Update the count in the button
                                const countElement = this.childNodes[0];
                                const newCount = type === 'like' ? result.likes : result.dislikes;
                                countElement.textContent = newCount;

                                // Update the icon color
                                const icon = this.querySelector('i');
                                if (newCount > 0) {
                                    icon.classList.add('secondary-color');
                                } else {
                                    icon.classList.remove('secondary-color');
                                }

                                showAlert({
                                    type: 'success',
                                    message: result.message
                                });
                            } else {
                                showAlert({
                                    type: 'danger',
                                    message: result.message || 'خطا در ثبت واکنش'
                                });
                            }
                        } catch (error) {
                            console.error('Error:', error);
                            showAlert({
                                type: 'danger',
                                message: 'خطا در ارتباط با سرور'
                            });
                        }
                    });
                });

                // Wishlist button handler
                const wishlistBtn = document.querySelector('.wishlist-btn');
                if (wishlistBtn) {
                    wishlistBtn.addEventListener('click', function (e) {
                        e.preventDefault();
                        const isAuthenticated = {{ Auth::guard('customer')->check() ? 'true' : 'false' }};

                        if (!isAuthenticated) {
                            showAlert({
                                type: 'warning',
                                message: 'برای افزودن به علاقه‌مندی‌ها لطفا وارد حساب کاربری خود شوید'
                            });
                            return;
                        }

                        const productId = this.dataset.productId;
                        const btn = $(this);

                        $.ajax({
                            url: "{{ route('favorites.toggle') }}",
                            method: "POST",
                            data: {
                                _token: "{{ csrf_token() }}",
                                product_id: productId
                            },
                            success: function (res) {
                                const icon = btn.find('i');
                                if (res.status === 'added') {
                                    icon.removeClass('far').addClass('fas');
                                    showAlert({
                                        type: 'success',
                                        message: 'محصول به علاقه‌مندی‌ها اضافه شد'
                                    });
                                } else {
                                    icon.removeClass('fas').addClass('far');
                                    showAlert({
                                        type: 'success',
                                        message: 'محصول از علاقه‌مندی‌ها حذف شد'
                                    });
                                }
                            },
                            error: function () {
                                showAlert({
                                    type: 'danger',
                                    message: 'خطا در افزودن به علاقه‌مندی‌ها'
                                });
                            }
                        });
                    });
                }

                // Handle notify button click
                document.querySelector('.notify-btn')?.addEventListener('click', function (e) {
                    const isAuthenticated = {{ Auth::guard('customer')->check() ? 'true' : 'false' }};
                    if (!isAuthenticated) {
                        // Let the show.bs.modal handler handle this
                        // We only need to prevent the default action if there was no data-bs-toggle
                        // But we still check here for clarity and maybe future changes
                        // e.preventDefault();
                        // e.stopPropagation();
                        showAlert({
                            type: 'warning',
                            message: 'برای ثبت درخواست اطلاع رسانی لطفا وارد حساب کاربری خود شوید.'
                        });
                        return; // Stop further execution in this handler
                    }
                    // Modal will be shown by data-bs-toggle="modal"
                });

                // Prevent notify modal from showing if user is not logged in
                const notifyModalElement = document.getElementById('notifyModal');
                if (notifyModalElement) {
                    notifyModalElement.addEventListener('show.bs.modal', function (e) {
                        const isAuthenticated = {{ Auth::guard('customer')->check() ? 'true' : 'false' }};
                        if (!isAuthenticated) {
                            e.preventDefault(); // This stops the modal from showing
                            // showAlert({ type: 'warning', message: 'برای ثبت درخواست اطلاع رسانی باید وارد حساب کاربری خود شوید.' }); // Already shown by button click handler
                        }
                    });
                }

                // Handle notify form submission
                document.getElementById('notifyForm')?.addEventListener('submit', function (e) {
                    e.preventDefault();

                    const form = this;
                    const formData = new FormData(form);

                    fetch('{{ route('front.product.notify.store') }}', {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content // Corrected token header name
                        }
                    })
                        .then(response => response.json())
                        .then(data => {
                            showAlert({type: data.status, message: data.message});
                            if (data.status === 'success') {
                                const modal = bootstrap.Modal.getInstance(document.getElementById('notifyModal'));
                                modal.hide();
                                form.reset(); // Reset the form fields
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            showAlert({type: 'danger', message: 'خطا در ثبت درخواست اطلاع رسانی.'});
                        });
                });

                function addToBasket() {
                    const productId = $('.addCart').data('product-id');
                    const productItemId = $('#product_item_select').length ? $('#product_item_select').val() : null;

                    $.ajax({
                        url: "{{ route('basket.store') }}",
                        method: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            product_id: productId,
                            product_item_id: productItemId
                        },
                        success: function (res) {
                            if (res.status === 'success') {
                                showAlert({
                                    type: 'success',
                                    message: res.message
                                });
                                // Update cart count if needed
                                if (res.cart_count) {
                                    $('.cart-count').text(res.cart_count);
                                }
                            } else {
                                showAlert({
                                    type: 'danger',
                                    message: res.message
                                });
                            }
                        },
                        error: function (xhr) {
                            const response = xhr.responseJSON;
                            showAlert({
                                type: 'danger',
                                message: response.message || 'خطا در افزودن به سبد خرید'
                            });
                        }
                    });
                }

                // Handle product item selection change for price update
                $('#product_item_select').on('change', function () {
                    const productItemId = $(this).val();
                    updatePriceDisplay(productItemId);
                });

                function updatePriceDisplay(productItemId) {
                    if (!productItemId) {
                        // Reset to original product price
                        resetToOriginalPrice();
                        return;
                    }

                    // Get product item data via AJAX
                    $.ajax({
                        url: "{{ route('product.item.price', $product->id) }}",
                        method: "GET",
                        data: {
                            product_item_id: productItemId
                        },
                        success: function (response) {
                            if (response.status === 'success') {
                                displayProductItemPrice(response.data);
                            } else {
                                resetToOriginalPrice();
                            }
                        },
                        error: function () {
                            resetToOriginalPrice();
                        }
                    });
                }

                function displayProductItemPrice(itemData) {
// 1) دیکودر ساده برای هر متنی که HTML-encoded رسیده
                    const decodeHTML = (s) => {
                        const txt = document.createElement('textarea');
                        txt.innerHTML = s == null ? '' : String(s);
                        return txt.value;
                    };

// 2) فرمت اعداد به فارسی
                    const fmt = new Intl.NumberFormat('fa-IR');
                    const fmtDecimal = new Intl.NumberFormat('fa-IR', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    });
// 3) رشتهٔ «ریال» به‌صورت یونیکد (تا گرفتار charset نشی) + NBSP برای فاصلهٔ غیرقابل‌شکست
                    const RIAL = '\u00A0\u0631\u06CC\u0627\u0644';

// 4) درصد: اگر 0..1 بود ×100، اگر 95 بود همان، بعد گرد کردن
                    const rawPct = Number(itemData.discount_percent);
                    const pct = Number.isFinite(rawPct) ? rawPct : 0;
                    let pctText = fmtDecimal.format(pct).replace('/', '.') + '%';

// 5) ساخت DOM امن
                    const priceDisplay = $('#price-display');
                    priceDisplay.empty();

                    if (itemData.status == 0) {
                        priceDisplay.text('توقف تولید');
                    } else if (Number(itemData.price) == 0) {
                        priceDisplay.text('به زودی ...');
                    } else if (itemData.has_discount && pct > 0) {
                        const wrap = document.createElement('div');
                        wrap.className = 'price-wrap';

                        const sFinal = document.createElement('span');
                        sFinal.className = 'text-bold';
                        sFinal.textContent = fmt.format(Number(decodeHTML(itemData.final_price))) + RIAL;

                        const sPercent = document.createElement('span');
                        sPercent.className = 'discount-percent';
                        sPercent.textContent = pctText;

                        const sDelWrap = document.createElement('span');
                        sDelWrap.className = 'discount-price d-block';
                        const delEl = document.createElement('del');
                        delEl.textContent = fmt.format(Number(decodeHTML(itemData.price))) + RIAL;
                        sDelWrap.appendChild(delEl);

                        wrap.append(sFinal, sPercent, sDelWrap);
                        priceDisplay.append(wrap);

                    } else {
                        priceDisplay.html(`
                            <span class="text-bold">${number_format(itemData.price)} ریال</span>
                        `);
                    }
                }

                function resetToOriginalPrice() {
                    const priceDisplay = $('#price-display');

                    @if($product->status == 0)
                    priceDisplay.html('توقف تولید');
                    @else
                    @php
                        // استفاده از همان منطق PHP که در بالا تعریف کردیم
                        $displayPrice = $product->product_price;
                        $displayFinalPrice = $product->final_price;
                        $displayHasDiscount = $product->has_discount;
                        $displayDiscountPercent = $product->discount_percent;

                        if($product->productItem && $product->productItem->count() > 0) {
                            $firstItem = $product->productItem->first();
                            $displayPrice = $firstItem->price;
                            $displayFinalPrice = $firstItem->final_price;
                            $displayHasDiscount = $firstItem->has_discount;
                            $displayDiscountPercent = $firstItem->discount_percent ?? 0;
                        }
                    @endphp

                    @if($displayPrice == 0)
                    priceDisplay.html('به زودی ...');
                    @elseif($displayHasDiscount)
                    priceDisplay.html(`
                                <span class="text-bold">{{ number_format($displayFinalPrice) }} ریال</span>
                                <span class="discount-percent">{{ $displayDiscountPercent }}%</span>
                                <p class="mb-0 discount-price">
                                    <del>{{ number_format($displayPrice) }} ریال</del>
                                </p>
                            `);
                    @else
                    priceDisplay.html(`
                                <span class="text-bold">{{ number_format($displayPrice) }} ریال</span>
                            `);
                    @endif
                    @endif
                }

                // Helper function to format numbers
                function number_format(number) {
                    return new Intl.NumberFormat('fa-IR').format(number);
                }
            });
        </script>
    @endpush

@endsection