@extends('customer.app')

@section('content')
    @php
        $discount = checkDiscount($product);
    @endphp
    <script type="application/ld+json">
{
"@context": "http://schema.org/",
  "@type": "Product",
  "name": "{{@$product->name}}",
  "gtin8": "{{@$product->ean}}",
  "sku": "{{@$product->stock_code}}",
  "image": "{{asset(@$product->images[0]->image_dest)}}",
  "description": "{{$product->meta_description}}",
"brand": {
  "@type": "Thing",
  "name": "{{isset($product->brands->brand_name) ? $product->brands->brand_name : ''}}"
  },
"aggregateRating": {
  "@type": "AggregateRating",
  "ratingValue": "{{$product->rate_avg > 0 ? $product->rate_avg : 5}}",
  "reviewCount": "{{count($product->reviews) > 0 ? $product->reviews : 1}}"
 },
       "offers": {
         "@type": "Offer",
         "priceCurrency": "TRY",
         "availability": @if($product->stock > 0)"InStock"@else"OutOfStock"@endif,
         @if($discount)
            "price": "{{pricemio($product,true,false)['discountedPrice']}}"
         @else
            "price": "{{pricemio($product,false,false)['price']}}"
             @endif
        }
@if(count($product->reviews) > 0)
            @foreach($product->reviews as $prw)
                ,
    "review": {
      "@type": "Review",
      "author": "{{$prw->user->name}}",
  "datePublished": "{{$prw->created_at}}",
  "description": "{{$prw->content}}",
  "name": "Yorum!",
 "reviewRating": {
  "@type": "Rating",
  "bestRating": "5",
  "ratingValue": "{{$prw->stars}}",
  "worstRating": "1"
  }
 }
 @endforeach
    @else
            ,
"review": {
"@type": "Review",
"author": "SanatsalDünya",
  "datePublished": "{{$product->created_at}}",
  "description": "{{'Sanatsal Dünya'}}",
  "name": "Yorum!",
 "reviewRating": {
  "@type": "Rating",
  "bestRating": "5",
  "ratingValue": "5",
  "worstRating": "1"
  }
 }
        @endif

        }

    </script>
    <script>
        gtag('event', 'view_item', {
            "items": [
                {
                    "id": "{{$product->id}}",
                    "name": "{{@$product->name}}",
                    @if(isset($product->brands->brand_name))
                    "brand": "{{$product->brands->brand_name}}",
                    @endif
                        @if($discount)
                    "price": '{{pricemio($product,$discount,false)['discountedPrice']}}'
                    @else
                    "price": '{{pricemio($product,false,false)['price']}}'
                    @endif
                }
            ]
        });
    </script>
    <script>
        fbq('track', 'ViewContent', {
            @if($discount)
            value: '{{pricemio($product,$discount,false)['discountedPrice']}}',
            @else
            value: '{{pricemio($product,false,false)['price']}}',
            @endif
            currency: 'TRY'
        });
    </script>
    <style>
        .pswp img{
            position: absolute;
            left: 0;
            right: 0;
            margin: auto!important;
        }
    </style>
    <div class="page-header">
        <div class="page-header__container container">
            <div class="page-header__breadcrumb">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb" itemscope="" itemtype="http://schema.org/BreadcrumbList">
                        <li class="breadcrumb-item" itemprop="itemListElement" itemscope=""
                            itemtype="http://schema.org/ListItem">
                            <a href="/">{{__('general.home')}}</a>
                            <svg class="breadcrumb-arrow" width="6px" height="9px">
                                <use xlink:href="/customer/images/sprite.svg#arrow-rounded-right-6x9"></use>
                            </svg>
                        </li>

                        @if($product->categories && count($product->categories) > 0)
                            @foreach($product->categories as $pc)
                                <li class="breadcrumb-item" itemprop="itemListElement" itemscope=""
                                    itemtype="http://schema.org/ListItem">
                                    <a href="{{$pc->category->uri->url}}" itemprop="item"><span
                                            itemprop="name">{{$pc->name}}</span></a>
                                    <svg class="breadcrumb-arrow" width="6px" height="9px">
                                        <use xlink:href="/customer/images/sprite.svg#arrow-rounded-right-6x9"></use>
                                    </svg>
                                </li>
                            @endforeach
                        @endif
                        <li class="breadcrumb-item active" aria-current="page">{{$product->name}}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <div class="block">
        <div class="container">
            <div class="product product--layout--standard" data-layout="standard">
                <div class="product__content">
                    <!-- .product__gallery -->
                    <div class="product__gallery">
                        <div class="product-gallery">
                            <div class="product-gallery__featured" style="border: none">
                                <button class="product-gallery__zoom">
                                    <svg width="24px" height="24px">
                                        <use xlink:href="/customer/images/sprite.svg#zoom-in-24"></use>
                                    </svg>
                                </button>


                                <div class="owl-carousel" id="product-image">
                                    @if($product->images && count($product->images) > 0)
                                        @foreach($product->images as $pi)
                                            <div class="product-image product-image--location--gallery">
                                                <!--
                                                The data-width and data-height attributes must contain the size of a larger version
                                                of the product image.

                                                If you do not know the image size, you can remove the data-width and data-height
                                                attribute, in which case the width and height will be obtained from the naturalWidth
                                                and naturalHeight property of img.product-image__img.
                                                -->
                                                <a data-href="{{asset($pi->image_dest_b)}}" data-width="100%"
                                                   data-height="700"
                                                   class="product-image__body" target="_blank">
                                                    <img class="product-image__img" src="{{asset($pi->image_dest_b)}}"
                                                         alt="">
                                                </a>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                            <div class="product-gallery__carousel">
                                <div class="owl-carousel" id="product-carousel">
                                    @if($product->images && count($product->images) > 0)
                                        @foreach($product->images as $pi)
                                            <a data-href="{{asset($pi->image_dest_b)}}"
                                               class="product-image product-gallery__carousel-item">
                                                <div class="product-image__body">
                                                    <img class="product-image__img product-gallery__carousel-image"
                                                         src="{{asset($pi->image_dest)}}" alt="">
                                                </div>
                                            </a>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- .product__gallery / end -->
                    <!-- .product__info -->
                    <div class="product__info">
                        <h1 class="product__name">{{$product->name}}</h1>
                        <div class="product__rating">
                            <div class="product__rating-stars">
                                <div class="rating">
                                    <div class="rating__body">
                                        @for($i = 0;$i<round($product->rate_avg);$i++)
                                            <svg class="rating__star rating__star--active" width="13px" height="12px">
                                                <g class="rating__fill">
                                                    <use xlink:href="/customer/images/sprite.svg#star-normal"></use>
                                                </g>
                                                <g class="rating__stroke">
                                                    <use
                                                        xlink:href="/customer/images/sprite.svg#star-normal-stroke"></use>
                                                </g>
                                            </svg>
                                            <div class="rating__star rating__star--only-edge">
                                                <div class="rating__fill">
                                                    <div class="fake-svg-icon"></div>
                                                </div>
                                                <div class="rating__stroke">
                                                    <div class="fake-svg-icon"></div>
                                                </div>
                                            </div>
                                        @endfor
                                        @for($i;$i<5;$i++)
                                            <svg class="rating__star" width="13px" height="12px">
                                                <g class="rating__fill">
                                                    <use xlink:href="/customer/images/sprite.svg#star-normal"></use>
                                                </g>
                                                <g class="rating__stroke">
                                                    <use
                                                        xlink:href="/customer/images/sprite.svg#star-normal-stroke"></use>
                                                </g>
                                            </svg>
                                            <div class="rating__star rating__star--only-edge rating__star--active">
                                                <div class="rating__fill">
                                                    <div class="fake-svg-icon"></div>
                                                </div>
                                                <div class="rating__stroke">
                                                    <div class="fake-svg-icon"></div>
                                                </div>
                                            </div>
                                        @endfor
                                    </div>
                                </div>
                            </div>
                            <div class="product__rating-legend">
                                <a href="">{{count($product->reviews)}} {{__('general.reviews')}}</a><span>/</span><a
                                    href="">{{__('general.write-review')}}</a>
                            </div>
                        </div>
                        @if(isset($product->filters) && count($product->filters)>0)
                            <ul class="product__features">
                                @foreach($product->filters as $pf)
                                    <li>{{$pf->filter_name}}: {{$pf->filter->value_name}}</li>
                                @endforeach
                            </ul>
                        @endif
                        <ul class="product__meta">
                            <li class="product__meta-availability">{{__('general.status')}}: <span
                                    class="text-{{$product->stock > 0 ? 'success' : 'danger'}}">{{$product->stock > 0 ? __('general.in-stock') : __('general.out-stock')}}</span>
                            </li>
                            @if(isset($product->brands->brand_name))
                                <li>{{__('general.brand')}}: <a class="text-info"
                                                                href="{{@$product->brands->uri->url}}">{{$product->brands->brand_name}}</a>
                                </li>
                            @endif
                            <li> {{__('general.stock_code')}}: <span
                                    class="text-success">{{$product->stock_code}}</span></li>
                        </ul>
                    </div>
                    <!-- .product__info / end -->
                    <!-- .product__sidebar -->
                    <div class="product__sidebar">
                        <div class="product__availability">
                            {{__('general.status')}}: <span
                                class="text-{{$product->stock > 0 ? 'success' : 'danger'}}">{{$product->stock > 0 ? __('general.in-stock') : __('general.out-stock')}}</span>
                        </div>
                        <div class="product__prices">
                            @if($discount)
                                <div class="product-card__badge"
                                     style="background-color:var(--product-discount-rate-badge);color:var(--product-discount-rate-badge-fc);width: 80px;height:40px;padding-top:12px;font-size: 16px;text-align: center;">
                                    %{!! $discount !!}</div>
                            @endif

                            @if($discount)
                                <div class="row">
                                    <div class="@if($bt_discount) col-sm-5 @else col-sm-12 @endif">
                                        <span id="pip" class="product-card__new-price">{{pricemio($product,$discount)['discountedPrice']}}</span>
                                        <span class="product-card__old-price">{{pricemio($product)['price']}}</span>
                                    </div>

                                </div>
                            @else
                                <span id="pip">{{pricemio($product)['price']}}</span>
                            @endif
                        </div>
                        <!-- .product__options -->
                        <form id="product_options">
                        {!! $options !!}
                        </form>
                            <div class="form-group product__option">
                                <label class="product__option-label"
                                       for="product-quantity">{{__('general.quantity')}}</label>
                                <div class="product__actions">
                                    <div class="product__actions-item">
                                        <div class="input-number product__quantity">
                                            <input id="product-quantity"
                                                   class="input-number__input form-control form-control-lg"
                                                   type="number" min="1" value="1">
                                            <div class="input-number__add"></div>
                                            <div class="input-number__sub"></div>
                                        </div>
                                    </div>
                                    <div class="product__actions-item product__actions-item--addtocart">
                                        @if($product->stock > 0)
                                            <button type="button" class="btn btn-primary btn-lg"
                                                    onclick="addCart('{{$product->id}}',$('#product-quantity').val(),$('#product_options').serialize());">{{__('general.add-to-cart')}}</button>
                                            <!--<a class="btn btn-lg btn-success"
                                               href="https://api.whatsapp.com/send?phone=905348935911&text=Merhaba%20{{asset($_SERVER['REQUEST_URI'])}}%20sipari%C5%9Fi%20vermek%20istiyorum."
                                               target="_blank"><i class="fab fa-whatsapp" style="font-size: 20px"
                                                                  aria-hidden="true"></i> Whatsapp İle Sipariş Ver</a>-->
                                        @else
                                            <button type="button" class="btn btn-primary btn-lg"
                                                    disabled>{{__('general.out-stock')}}</button>
                                        @endif

                                    </div>


                                    <!--<div class="product__actions-item product__actions-item--wishlist">
                                        <button type="button" class="btn btn-secondary btn-svg-icon btn-lg" data-toggle="tooltip" title="Wishlist">
                                            <svg width="16px" height="16px">
                                                <use xlink:href="/customer/images/sprite.svg#wishlist-16"></use>
                                            </svg>
                                        </button>
                                    </div>
                                    <div class="product__actions-item product__actions-item--compare">
                                        <button type="button" class="btn btn-secondary btn-svg-icon btn-lg" data-toggle="tooltip" title="Compare">
                                            <svg width="16px" height="16px">
                                                <use xlink:href="/customer/images/sprite.svg#compare-16"></use>
                                            </svg>
                                        </button>
                                    </div>-->
                                </div>
                            </div>

                        <!-- .product__options / end -->
                    </div>
                    <!-- .product__end -->
                    <div class="product__footer">
                        @if(!empty($product->labels))
                        <div class="product__share-links share-links">
                            <ul class="share-links__list">
                                @foreach($product->labels as $label)
                                <li class="share-links__item share-links__item--type--like"><img src="{{!empty($label->label->image) ? asset($label->label->image) : '/resim_yok.png'}}"></li>
                                @endforeach
                            </ul>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            <style>
                @media only screen and (max-width: 800px) {
                    .product-tabs__item {
                        font-size: 14px !important;
                    }

                    .product-tabs:not(.product-tabs--stuck) .product-tabs__item {
                        padding: 6px 13px !important;
                    }
                }
            </style>
            <div class="product-tabs">
                <div class="product-tabs__list">
                    <div class="product-tabs__list-body">
                        <div class="product-tabs__list-container container">
                            <a href="#tab-description"
                               class="product-tabs__item product-tabs__item--active">{{__('general.product-description')}}</a>
                            <a href="#tab-specification"
                               class="product-tabs__item">{{__('general.product-filters')}}</a>
                            <a href="#tab-reviews" class="product-tabs__item">{{__('general.product-reviews')}}</a>
                            <a href="#tab-installments" class="product-tabs__item">{{__('general.installments')}}</a>
                        </div>
                    </div>
                </div>
                <div class="product-tabs__content">
                    <div class="product-tabs__pane product-tabs__pane--active" id="tab-description">
                        <div class="typography">
                            {!! html_entity_decode($product->description) !!}
                        </div>
                    </div>
                    <div class="product-tabs__pane product-tabs__pane--active" id="tab-installments">
                        <div class="typography">
                            <div class="row">
                                @if($discount)