@extends('layouts.app')
@section('meta')
    <meta property="product:modified_time" content="{{ $product->updated_at }}"/>
    @php
        $effectiveDate = date('Y-m-d', strtotime("+3 months", strtotime($product->updated_at )));
    @endphp
@endsection
@section('header')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/category.css?v=2.1.19') }}"/>
    @if($product->faq)
        <script type="application/ld+json">
            {
              "@context": "https://schema.org",
              "@type": "FAQPage",
              "mainEntity": [
              @foreach($product->faq as $f)
                {
                    "@type": "Question",
                    "name": "{{ $f['question'] }}",
                        "acceptedAnswer": {
                            "@type": "Answer",
                            "text": "{{ $f['answer'] }}"
                        }
                    }
                    @unless($loop->last) , @endunless
            @endforeach
            ]
          }
        </script>
    @endif
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Product",
      "name": "{{ $product->name }}",
      "image": [
        "{{ asset($product->image) }}"
       ],
      "description": "{{ $product->short_description }}",
      "sku": "{{ $product->code }}",
      "brand": {
        "@type": "Brand",
        "name": "{{ $product->brand->name }}"
      },
      "review": {
        "@type": "Review",
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": "{{ $product->score }}",
          "bestRating": "5"
        },
        "author": {
          "@type": "Person",
          "name": "havin"
        }
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "{{ $product->score }}",
        "reviewCount": "{{ $product->number_of_participants }}"
      },
      "offers": {
        "@type": "Offer",
        "url": "{{ route('products.show', $product->slug) }}",
        "priceCurrency": "USD",
        "price": "{{ round($product->price) }} ",
        "priceValidUntil": "{{ $effectiveDate }}",
        "itemCondition": "https://schema.org/UsedCondition",
        "availability": "https://schema.org/InStock"
      }
    }
    </script>
    <script type="application/ld+json">
        {
         "@context": "https://schema.org",
         "@type": "BreadcrumbList",
         "itemListElement":
         [
          {
           "@type": "ListItem",
           "position": 1,
           "item":
           {
            "@id": "{{ route('index') }}",
     "name": "{{ settings('title') }}"
    }
  },@foreach($product_category->parents ?? [] as $p)
            {
            "@type": "ListItem",
            "position": {{ $loop->iteration + 1 }},
   "item":
   {
    "@id": "{{ route('categories.show', ['category' => $p->slug]) }}",
    "name": "{{ $p->name }}"
    }
  },@endforeach{
           "@type": "ListItem",
           "position": {{ count($product_category->parents ?? []) + 2 }},
           "item":
           {
            "@id": "{{ route('products.show', $product->slug) }}",
    "name": "{{ $product->name }}"
    }
  }
 ]
}
    </script>
@endsection
@section('content')
    <div class="container-fluid body-content mt-4 mb-3">
        <div class="row">
        <div class="col-12">
            <ul class="breadcrumbs ps-0">
                <li>
                    <a class="link" href="{{ route('index') }}">
                        <span> {{ settings('title') }} </span>
                    </a>
                </li>
                @if($product_category?->parents)
                    @foreach($product_category?->parents as $p)
                    <li>
                        <a href="{{ route('categories.show', $p->slug) }}"
                           class="link">
                            {{ $p->name }}
                        </a>
                    </li>
                  @endforeach
                @endif

                <li>
                    <a class="link" href="{{ route('products.show', $product->slug) }}">
                        <span>{{ $product->name }}</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    </div>
    <div class="container-fluid product-sec mb-4">
        <div class="row c-product pt-3">
        <div class="col-lg-4 col-md-12 col-12 ps-md-0 pe-md-0">
            <div class="row">
                <div class="col-lg-12 col-md-6 col-12 p-0 mx-auto">
                    <div class="row  gallery-box">
                        <div class="col-md-12 col-12 mx-auto product-gallery p-0">

                            <div class="btn-group box-icon">
                                <ul class="share-box">
                                    <li>
                                        <div class="btn-group">
                                            <a id="SocialShare"
                                               class="icon-share f-icon"
                                               data-bs-toggle="modal"
                                               data-bs-target="#shareModal"
                                               href="#"
                                               title="اشتراک‌گذاری">
                                                <i class="fas fa-share-alt"></i>
                                            </a>
                                        </div>
                                    </li>
                                    <livewire:frontend.product.add-to-compare :product="$product" />
                                    <livewire:frontend.product.add-to-favorite :product="$product" />
                                </ul>
                            </div>
                            <div class="d-xl-none d-lg-none  row mt-2 position-relative">
                                <div class="col-12 p-0">
                                    <div class="col-12 slide-image2 p-0 ">
                                        <div class="owl-carousel owl-theme thumb-product3-mob">
                                            <div class="item">
                                                <a>
                                                    <img src="{{ asset($product->image) }}"
                                                         title="{{ $product->name }}"
                                                         alt="{{ $product->name }}">
                                                </a>
                                            </div>
                                            @foreach($product->images as $index=> $image)
                                                <div class="item">
                                                    <a>
                                                        <img src="{{ asset($image->path) }}"
                                                             title="عکس شماره {{ $index+1 }} {{ $product->name }}"
                                                             alt="عکس شماره {{ $index+1 }} {{ $product->name }}">
                                                    </a>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <ul class="thumbnails d-none d-lg-block ps-0">
                                <li style="list-style: none;">
                                    <a class="thumbnail first_thumbnail"
                                       href="{{ asset($product->image) }}"
                                       onclick="return false;">
                                        <img id="zoom_01"
                                             src="{{ asset($product->image) }}"
                                             alt="دسکتاپ {{ $product->name }}"
                                             data-zoom-image="{{ asset($product->image) }}"
                                             data-loaded="true">
                                    </a>
                                </li>

                                <div class="col-12 slide-image2 p-0 mt-2">
                                    <div class="owl-carousel owl-theme thumb-product3">
                                        <div class="item">
                                            <a class="thumbnail"
                                               data-fancybox="mygallery"
                                               href="{{ asset($product->image) }}">
                                                <img src="{{ asset($product->image) }}"
                                                     alt="{{ $product->name }}"
                                                     data-loaded="true">
                                            </a>
                                        </div>
                                        @foreach($product->images as $index=> $image)
                                            <div class="item">
                                                <a class="thumbnail"
                                                   data-fancybox="mygallery"
                                                   href="{{ asset($image->path) }}">
                                                    <img src="{{ asset($image->path) }}"
                                                         alt="عکس شماره {{ $index+1 }} دسکتاپ {{ $product->name }}"
                                                         data-loaded="true">
                                                </a>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-8 col-md-12 col-12 pe-md-0 p-xs-0">
            <div class="row">
                <div class="col-lg-7 col-md-7 col-12">
                      <div class="row row-pro-name">
                       <div class="col-12 d-lhg-block p-xs-0">
                    <h1 class="c-product__title">
                        {{ $product->name }}
                        <span>{{ $product->latin_name }}</span>
                    </h1>
                </div>
                      </div>
                      <div class="row">
                          <div class="col-md-7 col-12 rate-box p-xs-0">
                            <span class="rate">
                                @for($i = 5; $i > 0; $i--)
                                    <i class="fa{{ $product->score >= $i || ($product->score < $i && $product->score > $i - 1) ? 's' : 'r' }} fa-star{{ $product->score < $i && $product->score > $i - 1 ? '-half-alt' : '' }}"></i>
                                @endfor
                            </span>
                            <span>از {{ $product->number_of_participants }} رای</span>
                        </div>
                        <div class="col-md-5 col-12 text-end p-0">
                            <button type="button" class="btn btn-comment-form" data-bs-toggle="modal" data-bs-target="#commentModal">
                             <span class="button-icon"><i class="fal fa-comments"></i></span>
                            <span class="button-text">ثبت نظر و امتیاز</span>
                           </button>
                        </div>
                      </div>
                  @if($product->short_description)
             <div class="product-desc-cont">
                    <div class="block-more-content-cont">
                        <div class="block-content-deleted">{!! $product->short_description !!}</div>
                    </div>
                </div>
               @endif
               @if(isset($highlightAttributes[0]))
               <div class="d-block">
                   <div class="title-desc">ویژگی ها</div>
                  <ul class="ps-0 some-attrib">
                    @foreach($highlightAttributes[0] as $attribute)
                      <li>
                          <div class="t-attrib">{{ $attribute->name }}  </div>
                         <div class="v-attrib">{{ $product->values->where('attribute_id', $attribute->id)->first()->value }}</div>
                      </li>
                    @endforeach
                  </ul>
               </div>
               <div class="d-block show-more-attrib text-center mt-4 position-relative">
                   <a href="#category-options-container">
                       مشاهده همه ویژگی‌ها
                    <i class="fal fa-chevron-left"></i>
                   </a>
               </div>
               @endif
                    <livewire:frontend.product.option-single :productId="$product->id"/>
                </div>
                <div class="col-lg-5 col-md-5 col-12 pe-md-0">
                    <div class="card crd-cost">
                        <livewire:frontend.product.info :Product="$product" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
      <div class="col-12 bg-header">
        <span class="title-section">   معرفی </span>
    </div>
    </div>
    <div class="row product-description mt-2">
        <div class="col-12 ps-md-3 pe-md-3">
           @if($product->description)
                <div class="product-desc-cont">
                    <div class="block-more-content-cont">
                        <div class="block-content-deleted">{!! $product->description !!}</div>
                    </div>
                </div>
               @endif
        </div>
    </div>

    </div>
   <div class="container-fluid  mt-3">
       <div class="container p-0">
            <div class="row">
           @if(count($groupedAttributes))
              <div class="col-12 crd-desc p-xs-0">
                 <div class="row" id="category-options-container">
                     <div class="col-12 pb-3 ">
                        <article class="category-options-container">
                        @foreach($groupedAttributes as $groupedAttribute)
                            <section>
                                @foreach($groupedAttribute as $attribute)
                                    @if($loop->first)
                                         <div class="row mt-3">
                                              <div class="col-12 bg-header">
                                                <h3 class="title-section">
                                          {{ $attribute->group->name }}
                                               </h3>
                                            </div>
                                            </div>

                                    @endif
                                    <ul class="c-params__list">
                                        <li>
                                            <div class="c-params__list-key">
                                                <span class="block">{{ $attribute->name }}</span>
                                            </div>
                                            <div class="c-params__list-value">
                                                <span class="block">{{ $product->values->where('attribute_id', $attribute->id)->first()->value }}</span>
                                            </div>
                                        </li>
                                    </ul>
                                @endforeach
                            </section>
                        @endforeach
                    </article>
                     </div>
                 </div>
             </div>
            @endif
        </div>
       </div>
   </div>
       @if(count($relatedProducts))
         <div class="container-fluid related-product pt-3 pb-3">
           <div class="container p-xs-0">
             <div class="row">
                <div class="col-12 p-xs-0">
                     <div class="row mt-4 ">
                      <div class="col-12 bg-header">
                        <span class="title-section">محصولات مرتبط با {{ $product->name }}</span>
                    </div>
                  </div>
                <div class="row mt-3">
                     <div class="col-12  p-0">
                        <div class="owl-carousel owl-theme owl-related owl-pro">
                            @foreach($relatedProducts as $relatedProduct)
                                <div class="item item-pro position-relative">
    <div class="product-card">
        <a href="{{ route('products.show', $relatedProduct->slug) }}" >
            <div class="card-front">
                <div class="card-header">
                    @if($relatedProduct->country_code)
                        <div class="country-flag ">
                            <img src="{{asset(config('countries')[$relatedProduct->country_code]['flag'])}}" alt             ="{{$relatedProduct->country_code}}">
                        </div> 
                    @endif
                    @if($relatedProduct->code)
                        <div class="product-code">کد کالا {{$relatedProduct->code}}</div>
                    @endif
                </div>
                <div class="product-image">
                    <img src="{{ asset($relatedProduct->image) }}">
                </div>
                <div class="card-footer">
                    <div class="product-info">
                        <div class="product-name">{{ $relatedProduct->name }}</div>
                        @if($relatedProduct->special)
                            <div class="product-price d-flex align-items-end justify-content-between" >
                                <div class="off-percent hover-hidden mt-2">{{$relatedProduct->discount}}%</div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            <div class="card-back d-flex flex-column justify-content-end">
                @if(auth()->check())
                    <div class="product-price d-flex align-items-end justify-content-between">
                        @if($relatedProduct->special)
                            <div class="off-percent">{{number_format($relatedProduct->discount, '0')}}%</div>
                        @endif    
                        @if($relatedProduct->stock && $relatedProduct->price)
                            <div class="price-off">
                                @if($relatedProduct->special)
                                    <div class="off">{{ number_format($relatedProduct->price +
                                              ($relatedProduct->activeOptionValues->first()?->pivot?->price ?? 0)) }}</div>
                                @endif    
                                <div class="price">{{ number_format(($relatedProduct->special ?: $relatedProduct->price) +
                                          ($relatedProduct->activeOptionValues->first()?->pivot?->price ?? 0)) }} تومان</div>
                            </div>
                        @else
                            <div class="price-off">
                               
                                <div class="price">ناموجود</div>
                            </div>
                        @endif
                    </div>
                @else
                    <p class="text-white">برای دیدن قیمت ثبت نام کنید</p>
                @endif
            </div>
        </a>
    </div>
</div>
                                
                                
                            @endforeach
                        </div>
                    </div>
                 </div>
                </div>
             </div>
          </div>
       </div>
      @endif
      @if(count($suggestProducts))
         <div class="container-fluid related-product pt-3 pb-3 mt-3">
           <div class="container p-xs-0">
             <div class="row">
                <div class="col-12 p-xs-0">
                     <div class="row mt-4 ">
                      <div class="col-12 bg-header">
                        <span class="title-section">  محصولات پیشنهادی </span>
                    </div>
                  </div>
                <div class="row mt-3">
                     <div class="col-12  p-0">
                        <div class="owl-carousel owl-theme owl-sugest owl-pro">
                        @foreach($suggestProducts as $suggestProduct)
                            <div class="item item-pro position-relative">
                                <div class="product-card">
                                    <a href="{{ route('products.show', $suggestProduct->slug) }}" >
                                        <div class="card-front">
                                            <div class="card-header">
                                                @if($suggestProduct->country_code)
                                                    <div class="country-flag ">
                                                        <img src="{{asset(config('countries')[$suggestProduct->country_code]['flag'])}}" alt             ="{{$suggestProduct->country_code}}">
                                                    </div> 
                                                @endif
                                                @if($suggestProduct->code)
                                                    <div class="product-code">کد کالا {{$suggestProduct->code}}</div>
                                                @endif
                                            </div>
                                            <div class="product-image">
                                                <img src="{{ asset($suggestProduct->image) }}">
                                            </div>
                                            <div class="card-footer">
                                                <div class="product-info">
                                                    <div class="product-name">{{ $suggestProduct->name }}</div>
                                                    @if($suggestProduct->special)
                                                        <div class="product-price d-flex align-items-end justify-content-between" >
                                                            <div class="off-percent hover-hidden mt-2">{{$suggestProduct->discount}}%</div>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-back d-flex flex-column justify-content-end">
                                            @if(auth()->check())
                                            <div class="product-price d-flex align-items-end justify-content-between">
                                                @if($suggestProduct->special)
                                                    <div class="off-percent">{{number_format($suggestProduct->discount, '0')}}%</div>
                                                @endif    
                                                @if($suggestProduct->stock && $suggestProduct->price)
                                                    <div class="price-off">
                                                        @if($suggestProduct->special)
                                                            <div class="off">
                                                                
                                             {{ number_format($suggestProduct->price +
                                              ($suggestProduct->activeOptionValues->first()?->pivot?->price ?? 0)) }}
                                                                <!--{{ number_format($suggestProduct->price) }}-->
                                                                </div>
                                                        @endif    
                                                        <div class="price">
                                                            {{ number_format(($suggestProduct->special ?: $suggestProduct->price) +
                                          ($suggestProduct->activeOptionValues->first()?->pivot?->price ?? 0)) }}
                                                            <!--{{ number_format($suggestProduct->special ?: $suggestProduct->price) }} -->
                                                        
                                                        تومان</div>
                                                    </div>
                                                @else
                                                    <div class="price-off">
                                                       
                                                        <div class="price">ناموجود</div>
                                                    </div>
                                                @endif
                                            </div>
                                            @else
                                            <p class="text-white">برای مشاهد قیمت ثبت نام کنید</p>
                                            @endif
                                        </div>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    </div>
                 </div>
                </div>
             </div>
          </div>
       </div>
        @endif
      
        <div class="container-fluid  pt-3 pb-3">
           <div class="container p-xs-0">
             <div class="row">
                <div class="col-12 p-xs-0">
                     <div class="row mt-4 ">
                      <div class="col-12 bg-header">
                        <span class="title-section">
                             نظرات کاربران
                          ({{ $product->approved_comments_count }})   </span>
                    </div>
                  </div>
                <div class="row mt-3">
                     <div class="col-12  p-0">
                        <livewire:frontend.product.comment.index :commentableT="\App\Models\Product::class" :commentableI="$product->id" />
                    </div>
                 </div>
                </div>
             </div>
          </div>
       </div>
         @if($product->faq)
         <div class="container-fluid  related-product pt-3 pb-3">
           <div class="container p-xs-0">
             <div class="row">
                <div class="col-12 p-xs-0">
                     <div class="row mt-4 ">
                      <div class="col-12 bg-header">
                        <h3 class="title-section">
                            پرسش و پاسخ
                          </h3>
                    </div>
                  </div>
                <div class="row mt-3">
                     <div class="col-12  p-0">
                        <div class="accordion" id="accordionExample1">
                                    @foreach($product->faq as $f)
                                        <div class="accordion-item m-3">
                                            <h5 class="accordion-header" id="heading{{ $loop->iteration }}">
                                                <button class="accordion-button"
                                                        type="button"
                                                        data-bs-toggle="collapse"
                                                        data-bs-target="#collapse{{ $loop->iteration }}"
                                                        aria-expanded="true"
                                                        aria-controls="collapse{{ $loop->iteration }}">
                                                    {{ $f['question'] }}
                                                </button>
                                            </h5>
                                            <div id="collapse{{ $loop->iteration }}"
                                                 class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}"
                                                 aria-labelledby="heading{{ $loop->iteration }}"
                                                 data-bs-parent="#accordionExample1">
                                                <div class="accordion-body">
                                                    {{ $f['answer'] }}
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                    </div>
                 </div>
                </div>
             </div>
          </div>
       </div>
            @endif
           @if(count($relatedArticles))
         <div class="container-fluid  pt-3 pb-3">
           <div class="container p-xs-0">
             <div class="row">
                <div class="col-12 p-xs-0">
                     <div class="row mt-4 ">
                      <div class="col-12 bg-header">
                         <span>مطالب مرتبط با {{ $product->name }} </span>
                    </div>
                  </div>
                <div class="row mt-3">
                     <div class="col-12  p-0">
                        <div class="owl-carousel owl-theme owl-news">
                        @foreach($relatedArticles as $article)
                            <div class="item item-category">
                                <a class="d-block" href="{{ route('articles.show', $article->slug) }}">
                                    <div class="img-pro-category text-center">
                                        <img class="img-fluid" alt="{{ $article->title }}" src="{{ asset($article->image) }}">
                                    </div>
                                    <div class="d-block title-blog">{{ $article->title }}</div>
                                    <div class="row mt-2 text-center mb-3">
                                        <div class="col-12 p-0 short-des-blog">{{ $article->description }}</div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                    </div>
                 </div>
                </div>
             </div>
          </div>
       </div>
            @endif

                 @if(count($product->tags))
         <div class="container-fluid  pt-3 pb-3">
           <div class="container p-xs-0">
             <div class="row">
                <div class="col-12 p-xs-0">
                     <div class="row mt-4 ">
                      <div class="col-12 bg-header">
                         <span>  برچسب ها </span>
                    </div>
                  </div>
                <div class="row mt-3">
                     <div class="col-12  p-0">
                        <div class="owl-carousel owl-theme owl-news">
                       @foreach($product->tags as $tag)
                            <a class="lnk-tag" href="{{ route('tags.show', $tag->slug) }}">
                               {{ $tag->name }}
                            </a>
                        @endforeach
                    </div>
                    </div>
                 </div>
                </div>
             </div>
          </div>
       </div>
            @endif





    <div class="modal fade" id="commentModal" tabindex="-1" aria-labelledby="commentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-fullscreen-sm-down">
            <livewire:frontend.product.comment.form :product="$product" />
        </div>
    </div>
   
    <div class="modal fade" id="shareModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-bs-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">بستن</span></button>
                    <h3 class="modal-title" id="lineModalLabel">اشتراک گذاری</h3>
                </div>
                <div class="modal-body">
                    <div id="frmSocialShare" class="sharing-panel">
                        <div class="sharing-socials clearfix"> <span class="sharing-socials-label">با استفاده از روش‌های زیر می‌توانید این صفحه را با دوستان خود به اشتراک بگذارید.</span>
                            <div class="c-share__options mt-5">
                                <div class="c-share__social-buttons">
                                    <a href="https://twitter.com/home?status={{ url()->full() }}"
                                       rel="nofollow"
                                       class="o-btn c-share__social c-share__social--twitter"
                                       target="_blank">
                                        <i class="fab fa-twitter"></i>
                                    </a>
                                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ url()->full() }}"
                                       rel="nofollow"
                                       class="o-btn c-share__social c-share__social--fb"
                                       target="_blank">
                                        <i class="fab fa-facebook-f"></i>
                                    </a>
                                    <a href="whatsapp://send?text={{ url()->full() }}"
                                       data-action="share/whatsapp/share"
                                       rel="nofollow"
                                       class="o-btn c-share__social c-share__social--whatsapp"
                                       target="_blank">
                                        <i class="fab fa-whatsapp"></i>
                                    </a>
                                    <a href="https://t.me/share/url?url={{ url()->full() }}&text={{ $product->name }}"
                                       rel="nofollow"
                                       class="o-btn c-share__social c-share__social--twitter js-twitter-btn"
                                       target="_blank">
                                        <i class="far fa-paper-plane"></i>
                                    </a>
                                </div>
                                <div class="copy-link" id="copy-button">&nbsp; کپی لینک</div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection
@section('footer')
    <script src="{{ asset('js/zoom.js') }}"></script>
    <script>
        ///اسکریپت نمایش ویژگی محصول///
        $('#showmenu').click(function() {
            $('.menu-item').show();
            $('#showmenu').hide();
            $('.close-box').show();
        });
        $('.close-box').click(function() {
            $('.menu-item').hide();
            $('#showmenu').show();
            $('.close-box').hide();
        });

        $(function(){
            var owl = $('.thumb-product3');
            owl.owlCarousel({
                rtl:true,
                margin:5,
                loop:false,
                nav:false,
                dots:false,
                autoplay:false,
                items:4,
                touchDrag: false,
                mouseDrag: false,
                navText:['<i class="fa fa-angle-left fa-2x fa-fw" aria-hidden="true"></i>','<i class="fa fa-angle-right fa-2x fa-fw" aria-hidden="true"></i>']
            });
        });

        $(function(){
            var owl = $('.thumb-product3-mob');
            owl.owlCarousel({
                rtl:true,
                margin:5,
                loop:false,
                nav:false,
                dots:true,
                autoplay:false,
                items:1,
                navText:['<i class="fa fa-angle-left fa-2x fa-fw" aria-hidden="true"></i>','<i class="fa fa-angle-right fa-2x fa-fw" aria-hidden="true"></i>']
            });
        });

        var heroSlider = $('.owl-related');
        var owlCarouselTimeout = 1000;
        $('.owl-related').owlCarousel({
            loop: false,
            autoplayHoverPause: true,
            smartSpeed:450,
            rtl:true,
            margin:20,
            nav:true,
            dots:false,
            navText: [""],
            lazyLoad: true,
            nav:true,
            responsive:{
                0:{
                    items:2
                },
                500:{
                    items:2
                },
                768:{
                    items:3

                },
                1200:{
                    items:5
                }
            }
        });
        heroSlider.on('mouseleave',function(){
            heroSlider.trigger('stop.owl.autoplay');
            heroSlider.trigger('play.owl.autoplay', [owlCarouselTimeout]);
        })

        ///اسکرول محصولات پیشنهادی///
        var heroSlider = $('.owl-sugest');
        var owlCarouselTimeout = 1000;
        $('.owl-sugest').owlCarousel({
            loop: false,
            autoplayHoverPause: true,
            smartSpeed:450,
            rtl:true,
            margin:20,
            nav:true,
            dots:false,
            navText: [""],
            lazyLoad: true,
            responsive:{
                0:{
                    items:2
                },
                500:{
                    items:2
                },
                768:{
                    items:3
                },
                1200:{
                    items:5
                }
            }
        });
        heroSlider.on('mouseleave',function(){
            heroSlider.trigger('stop.owl.autoplay');
            heroSlider.trigger('play.owl.autoplay', [owlCarouselTimeout]);
        })

        var viewportWidth = $(window).width();
        if( viewportWidth > 767 ){
            $("#zoom_01").elevateZoom({
                scrollZoom: true,
                zoomWindowPosition: 10
            });
        }
    </script>
    <script>
        $('#copy-button').on("click", function() {
            navigator.clipboard.writeText(`{{ url()->full() }}`);
            iziToast.success({
                message: 'با موفقیت کپی شد',
                position: 'topLeft',
            });
        });
    </script>
    <script>
        $.fn.toggleText = function (t1, t2) {
            if (this.text() == t1) {
                this.text(t2);
            } else {
                this.text(t1);
            }
            return this;
        };
        $('.block-more-content-cont').on('click', '.btn-more-content', function () {
            $(this).toggleText('نمایش بیشتر', 'بستن');
            $(this).parent().find('.block-content').toggleClass('open');
     });
    </script>
@endsection