@extends('front.app',['lang_links'=>$product_lang_links])
@section('meta')
    <x-meta :meta="$meta"/>
@stop

@push('ld-json')
    <script type="application/ld+json">
        {
            "@context": "https://schema.org/",
            "@type": "Product",
            "offers": {
                  "@type": "Offer",
                  "name": "{{$goods_item->name}}",
                  "availability":"https://schema.org/InStock",
                  "price": {{$goods_item->price}},
                  "priceCurrency": "{{ShowLabelById(59)}}",
                  "priceValidUntil": "{{now()->format('Y-m-d')}}",
                  "url": "{{$product_lang_links[LANG_ID]}}"
                },
            "name": "{{$goods_item->name}}",
            "image": "{{$goods_item->image}}",
            @if($goods_item->body)
                "description": "{{$goods_item->body}}",
            @endif
            "url": "{{$product_lang_links[LANG_ID]}}"
        }
    </script>
@endpush

@section('container')

    <div class="page-content">

        <div class="breadcrumbs-wrapper">
            <div class="container">
                {{ Breadcrumbs::render('goods-item', $goods_subject,$goods_item) }}
            </div>
        </div>

        <section class="product-page">
            <div class="container">
                <div class="product-page-inner">
                    <div class="product-page-sliders">
                        <div class="product-page-thumbnails">
                            <div class="swiper">
                                <div class="swiper-wrapper">
                                    @if($goods_images->isNotEmpty())
                                        @foreach($goods_images as $image)
                                            <div class="swiper-slide">
                                                <img src="{{$image->image_s}}" oncontextmenu="return false;" alt="{{$goods_item->name.'-thumb-'.$loop->iteration}}">
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="swiper-slide">
                                            <img src="{{asset('front-assets/img/no-image-s.png')}}" oncontextmenu="return false;" alt="{{'empty-thumb-image-product'}}">
                                        </div>
                                    @endif
                                </div>
                            </div>
                            @if($goods_images->isNotEmpty())
                                <button type="button" class="thumbnails-nav thumbnails-nav--prev">
                                    <svg>
                                        <use xlink:href="{{asset('front-assets/svg/sprite.svg#slider-arrow')}}"></use>
                                    </svg>
                                </button>
                                <button type="button" class="thumbnails-nav thumbnails-nav--next">
                                    <svg>
                                        <use xlink:href="{{asset('front-assets/svg/sprite.svg#slider-arrow')}}"></use>
                                    </svg>
                                </button>
                            @endif
                        </div>
                        <div class="product-page-gallery">
                            <div class="swiper">
                                <div class="swiper-wrapper">
                                    @if($goods_images->isNotEmpty())
                                        @foreach($goods_images as $image)
                                            <div class="swiper-slide">
                                                <a href="{{$image->image}}" data-fancybox="gallery">
                                                    <img src="{{$image->image}}" oncontextmenu="return false;" alt="{{$goods_item->name.'-'.$loop->iteration}}">
                                                </a>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="swiper-slide">
                                            <a href="{{asset('front-assets/img/no-image.png')}}" data-fancybox="gallery">
                                                <img src="{{asset('front-assets/img/no-image.png')}}" oncontextmenu="return false;" alt="{{'empty-image-product'}}">
                                            </a>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="goods-item-labels">
                                @if($goods_item->price_old && $goods_item->price_old!='0.00')
                                    <p style="background-color: #F1414C;">Sale</p>
                                @endif
                                @if($goods_item->new_element)
                                    <p style="background-color: #58A942;">new</p>
                                @endif
                                @if($goods_item->popular_element)
                                    <div class="goods-item-label-row">
                                        <p style="background-color: #ED8307;">{{ShowLabelById(203)}}</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="product-page-content">
                        <div class="goods-item-labels">
                            @if($goods_item->price_old && $goods_item->price_old!='0.00')
                                <p style="background-color: #F1414C;">Sale</p>
                            @endif
                            @if($goods_item->new_element == 1)
                                <p style="background-color: #58A942;">new</p>
                            @endif
                            @if($goods_item->popular_element == 1)
                                <div class="goods-item-label-row">
                                    <p style="background-color: #ED8307;">{{ShowLabelById(203)}}</p>
                                </div>
                            @endif
                        </div>
                        <div class="product-page-title">
                            <h2>{{$goods_item->h1_title}}</h2>
                            @if($brand)
                                <div class="product-page-logo">
                                    <a href="{{$brand->href}}">
                                        <img src="{{$brand->image}}" alt="{{$brand->name}}">
                                    </a>
                                </div>
                            @endif
                        </div>

                        @if($goods_item->barcode)
                            <div class="product-page-id">{{ShowLabelById(67)}}: {{$goods_item->barcode}}</div>
                        @endif
                        @if($goods_item->model)
                            <div class="product-page-id">{{ShowLabelById(76)}}: {{$goods_item->model}}</div>
                        @endif
                        @if($goods_item->markcode)
                            <div class="product-page-id">{{ShowLabelById(201)}}: {{$goods_item->markcode}}</div>
                        @endif
                        <div class="product-page-info">
                            {{--@if($brand)
                            <div class="product-page-info-item">
                                <p>{{ShowLabelById(68)}}: <span><a href="{{$brand->href}}">{{$brand->name}}</a></span></p>
                            </div>
                            @endif--}}
                            @if($goods_colors->isNotEmpty())
                                <div class="product-page-info-item">
                                    <p>{{ShowLabelById(69)}}:
                                        @foreach($goods_colors as $goods_color)
                                            <span class="product-page-color" style="{{$goods_color->alias == 'rgb' ? 'background-image:url('.asset('front-assets/img/rgb.jpg').');':'background-color:'.$goods_color->hex.';'}} border: 1px solid"></span>
                                            <span>{{$goods_color->name}}</span>
                                        @endforeach
                                    </p>
                                </div>
                            @endif
                        </div>
                        <div class="product-page-status">
                            @if($goods_item->in_stoc == 1)
                                <img src="{{asset('front-assets/img/icons/check.svg')}}" alt="check">
                                <p>{{ShowLabelById(70)}}</p>
                            @else
                                <p style="color:#F1414C">{{ShowLabelById(71)}}</p>
                            @endif
                        </div>
                        @if($shop_count)
                            <div class="product-page-store">
                                <div class="stores-head">
                                    <button type="button" class="button inversed open-product-stores-modal">
                                        <span>{{ShowLabelById(228)}} {{$shop_count}} {{$shop_count > 1 ? ShowLabelById(229) : ShowLabelById(230)}} </span>
                                        <svg>
                                            <use xlink:href="{{asset('front-assets/svg/sprite.svg#arrow-store')}}"></use>
                                        </svg>
                                    </button>
                                </div>
                                <div class="product-stores-modal">
                                    <div class="product-stores-modal-inner">
                                        @foreach($shops as $shop_city_name=>$branches)
                                            <div class="product-stores-modal-block">
                                                <div class="product-stores-modal-title">{{$shop_city_name}}</div>
                                                <div class="product-stores-modal-list">
                                                    @foreach($branches as $branch)
                                                        <div class="product-stores-modal-item">
                                                                <div class="product-stores-modal-address">{{$branch->name}}</div>
                                                                <div class="product-stores-modal-quantity">
                                                                    <img src="{{asset('front-assets/img/icons/quantity.svg')}}" alt="quantity">
                                                                    @if($branch->show_count)
                                                                        <span>{{$branch->pivot->balance}}
                                                                            @if($goods_item->measure_name)
                                                                                {{$goods_item->measure_name}}
                                                                            @else
                                                                                {{ShowLabelById(238)}}
                                                                            @endif
                                                                        </span>
                                                                    @else
                                                                        <img src="{{asset('front-assets/img/icons/infinity.svg')}}"
                                                                             style="width: 2.2rem"
                                                                             alt="infinity">
                                                                    @endif
                                                                </div>
                                                                @if(count($branch->PhonesFromBody) > 1)
                                                                    <div class="product-stores-modal-phone">
                                                                        <svg>
                                                                            <use xlink:href="{{asset('front-assets/svg/sprite.svg#phone')}}"></use>
                                                                        </svg>
                                                                        {!! $branch->PhonesFromBody[0] ?? '' !!}
                                                                    </div>
                                                                @endif
                                                            <div class="product-stores-modal-map">
                                                                <a href="{{$branch->shop_map_link}}" data-type="iframe" data-fancybox>
                                                                    <img src="{{asset('front-assets/img/icons/pin-green.svg')}}" alt="{{$branch->name}}">
                                                                    <span>{{ShowLabelById(79)}}</span>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endif
                        <div class="goods-item-prices">
                            <div class="goods-item-current-price">{{$goods_item->price_format}} @if($goods_item->measure_name)<span>/ {{$goods_item->measure_name}}</span>@endif</div>
                            @if($goods_item->price_old && $goods_item->price_old!='0.00')
                                <div class="goods-item-old-price">{{$goods_item->price_old_format}} @if($goods_item->measure_name)<span>/ {{$goods_item->measure_name}}</span>@endif</div>
                            @endif
                            @if($goods_item->saving_money)
                                <div class="product-page-saving">{{ShowLabelById(198)}} {{$goods_item->saving_money_format}}</div>
                            @endif
                        </div>
                        @if($goods_item->to_order)
                        <div class="product-page-order">
                            <div class="product-page-order-title">{{ShowLabelById(204)}}</div>
                            @if($phone)
                            <div class="product-page-order-text">{{ShowLabelById(205)}} <a href="{{str_replace(' ','',$phone)}}">{{$phone}}</a></div>
                            @endif
                        </div>
                        @endif

                        @if(!$goods_item->to_order || !$goods_item->in_stoc)

                            @if(!$goods_item->to_order && $goods_item->in_stoc)

                                @include('front.templates.fast-order-modal')

                                <div class="product-page-ctas">
                                    <div class="product-quantity">
                                        <button type="button" class="count-minus" onclick="this.parentNode.querySelector('input[type=number]').value--">
                                            <svg>
                                                <use xlink:href="{{asset('front-assets/svg/sprite.svg#minus')}}"></use>
                                            </svg>
                                        </button>
                                        <input type="number" value="1" id="goods-id-{{$goods_item->id}}">
                                        <button type="button" class="count-plus" onclick="this.parentNode.querySelector('input[type=number]').value++">
                                            <svg>
                                                <use xlink:href="{{asset('front-assets/svg/sprite.svg#plus')}}"></use>
                                            </svg>
                                        </button>
                                    </div>
                                    <div class="goods-item-ctas">
                                        <a href="javascript:;" class="button add-to-basket" data-goods-item-id="{{$goods_item->id}}">
                                            <svg>
                                                <use xlink:href="{{asset('front-assets/svg/sprite.svg#cart')}}"></use>
                                            </svg>
                                            <span>{{ShowLabelById(72)}}</span>
                                        </a>

                                    </div>
                                </div>
                                <div class="product-page-quick">
                                    <button class="button open-common-modal"
                                            data-id="quick-modal"
                                            data-title="{{ShowLabelById(218)}}"
                                            data-type="fast-order"
                                    >
                                        <svg>
                                            <use xlink:href="{{asset('front-assets/svg/sprite.svg#cart-quick')}}"></use>
                                        </svg>
                                        <span>{{ShowLabelById(218)}}</span>
                                    </button>
                                    <a href="javascript:;" class="goods-item-favorites {{$goods_item->checkIfWish ? 'active delete-wish-item':'add-to-wish'}}" data-goods-item-id="{{$goods_item->id}}">
                                        <svg>
                                            <use xlink:href="{{asset('front-assets/svg/sprite.svg#favorites')}}"></use>
                                            <use xlink:href="{{asset('front-assets/svg/sprite.svg#favorites-active')}}"></use>
                                        </svg>
                                    </a>
                                </div>
                            @endif

                            @if(!$goods_item->in_stoc)
                                @include('front.templates.product-request-modal')
                                <div class="product-page-quick out-of-stock">
                                    <button class="button open-common-modal"
                                            data-id="quick-modal"
                                            data-title="{{ShowLabelById(219)}}"
                                            data-type="product-request"
                                    >
                                        <svg>
                                            <use xlink:href="{{asset('front-assets/svg/sprite.svg#cart-time')}}"></use>
                                        </svg>
                                        <span>{{ShowLabelById(219)}}</span>
                                    </button>
                                    <a href="javascript:;" class="goods-item-favorites">
                                        <svg>
                                            <use xlink:href="{{asset('front-assets/svg/sprite.svg#favorites')}}"></use>
                                            <use xlink:href="{{asset('front-assets/svg/sprite.svg#favorites-active')}}"></use>
                                        </svg>
                                    </a>
                                </div>
                            @endif

                        @endif

                        <div class="product-page-print">
                            <a href="javascript:;" class="print-pdf-button">
                                <svg>
                                    <use xlink:href="{{asset('front-assets/svg/sprite.svg#printer')}}"></use>
                                </svg>
                                <span>{{ShowLabelById(73)}}</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    @if($goods_item->values->isNotEmpty())
        <div class="product-page-characteristics">
            <div class="container">
                <h3>{{ShowLabelById(74)}}</h3>
                <ul>
                    @foreach($goods_item->goodsParametersId as $parameter)
                        @foreach($goods_item->goodsParametrItemId as $goods_parameter_item_id)
                            @if($parameter->id == $goods_parameter_item_id->goods_parametr_id && $goods_parameter_item_id->goodsParametrValueId->isNotEmpty())
                                <li>
                                    <p>{{$parameter->name}}</p>
                                    <p>
                                        @foreach($goods_parameter_item_id->goodsParametrValueId as $value)
                                            {{$value->name}}{{!$loop->last?', ':''}}
                                        @endforeach
                                    </p>
                                </li>
                            @endif
                        @endforeach
                    @endforeach
                </ul>
            </div>
        </div>
   @endif

        @if($goods_item->body)
            <div class="product-page-about">
                <div class="container">
                    <div class="common-text">
                        <h3>{{ShowLabelById(206)}}</h3>
                        {!! $goods_item->body !!}
                    </div>
                </div>
            </div>
        @endif

    <div class="product-page-text">
        <div class="container">
            <div class="common-text">
                <p>{{showSettingBodyByAlias('product-add-text')}}</p>
            </div>
        </div>
    </div>

    @if($siblings->isNotEmpty())
        <section class="section goods-slider {{$viewed_goods->isNotEmpty() ? 'pb-0':''}}">
            <div class="container">
                <h2>{{ShowLabelById(75)}}</h2>
                <div class="slider-wrapper">
                    <div class="swiper">
                        <div class="swiper-wrapper">
                            @foreach($siblings as $sibling)
                                <div class="swiper-slide">
                                    @include('front.templates.goods-template',['goods_item'=>$sibling])
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <button type="button" class="slider-nav slider-nav--prev">
                        <svg>
                            <use xlink:href="{{asset('front-assets/svg/sprite.svg#slider-arrow')}}"></use>
                        </svg>
                    </button>
                    <button type="button" class="slider-nav slider-nav--next">
                        <svg>
                            <use xlink:href="{{asset('front-assets/svg/sprite.svg#slider-arrow')}}"></use>
                        </svg>
                    </button>
                </div>
            </div>
        </section>
    @endif

    @if($viewed_goods->isNotEmpty())
        <section class="section goods-slider">
        <div class="container">
            <h2>{{ShowLabelById(42)}}</h2>
            <div class="slider-wrapper">
                <div class="swiper">
                    <div class="swiper-wrapper">
                        @foreach($viewed_goods as $viewed_goods_item)
                            <div class="swiper-slide">
                                @include('front.templates.goods-template',['goods_item'=>$viewed_goods_item])
                            </div>
                        @endforeach

                    </div>
                </div>
                <button type="button" class="slider-nav slider-nav--prev">
                    <svg>
                        <use xlink:href="{{asset('front-assets/svg/sprite.svg#slider-arrow')}}"></use>
                    </svg>
                </button>
                <button type="button" class="slider-nav slider-nav--next">
                    <svg>
                        <use xlink:href="{{asset('front-assets/svg/sprite.svg#slider-arrow')}}"></use>
                    </svg>
                </button>
            </div>
        </div>
    </section>
    @endif
</div>

    <form method="POST" action="{{route('product-pdf',$goods_item->id)}}" class="print-pdf-form d-none">
        @csrf
    </form>
@stop

@push('js')
    <script>
        $('.print-pdf-button').on('click',()=>{
             $('.print-pdf-form').submit();
        });
    </script>


    @if(session()->has('error_product_pdf'))
        <script>
            Notiflix.Notify.failure('{{ session()->get('error_product_pdf') }}', {
                    position: 'center-top',
                    timeout: 3000
                }
            );
       </script>
    @endif

@endpush