@extends('front.app')

@section('meta')
    <x-meta :meta="$meta"/>
@stop
@push('css')
    <style>
        .input-copyURL {
            opacity: 0;
            z-index: -9999999;
            position: absolute;
        }
    </style>
@endpush
@section('container')

    @include('front.templates.product-share')
    <div class="page-content">

        <div class="breadcrumbs-wrapper">
            <div class="container">
                {{breadcrumbs('product',$category,$product)}}
            </div>
        </div>

        <section class="section product-page pt-0">
            <div class="container">
                <div class="product-page-inner">
                    <div class="product-page-gallery">
                        @if($collection)
                            <div class="product-page-info">
                                {{$collection->name}}
                            </div>
                        @endif
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach($gallery as $photo)
                                    <div class="swiper-slide product-page-gallery-item">
                                        <a href="{{$photo->image}}" data-fancybox="gallery">
                                            <img src="{{$photo->imageXl}}" alt="{{$product->name.' photo'.$loop->iteration}}">
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                            <button type="button" class="slider-nav slider-nav--prev">
                                <img src="{{icon('arrow-right.svg')}}" alt="arrow-right">
                            </button>
                            <button type="button" class="slider-nav slider-nav--next">
                                <img src="{{icon('arrow-right.svg')}}" alt="arrow-right">
                            </button>
                            <a href="javascript:;"
                               data-id="wish-product-button"
                               data-product="{{$product->alias}}"
                               data-link="{{$linkForWish}}"
                               data-photo="{{$gallery->first()->id}}"
                               class="goods-card-favorite product-page-favorite">
                                <img src="{{icon('heart.svg')}}" alt="">
                                <img src="{{icon('heart-active.svg')}}" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="product-page-content">
                        <div class="product-page-cta">
                            <div class="product-page-share-wrapper">
                                <button type="button" class="product-page-share">
                                    <img src="{{icon('share.svg')}}" alt="share">
                                </button>
                                @include('front.templates.product-share')
                            </div>
                            <a href="javascript:;"
                               data-id="wish-product-button"
                               data-product="{{$product->alias}}"
                               data-link="{{$linkForWish}}"
                               data-photo="{{$gallery->first()->id}}"
                               class="goods-card-favorite product-page-favorite">
                                <img src="{{icon('heart.svg')}}" alt="heart">
                                <img src="{{icon('heart-active.svg')}}" alt="heart-active">
                            </a>
                        </div>
                        @if($product->article)
                            <div class="product-page-code">{{ShowLabelById(17)}}: {{$product->article}}</div>
                        @endif
                        <h1 class="h2">{{$product->name}}</h1>
                        <div class="product-page-price">
                            <div class="product-price-current" @if($product->price_old && $product->price_old!='0.00')style="color: #EA2B1F;" @endif>{{$product->priceFormat}}</div>
                            @if($product->price_old && $product->price_old!='0.00')
                                <div class="product-price-old">{{$product->priceOldFormat}}</div>
                            @endif
                        </div>
                        @if($colors->isNotEmpty())
                            <div class="product-page-colors">
                                <div class="product-page-title">{{ShowLabelById(18)}}:</div>
                                <ul>
                                    @foreach($colors as $color)
                                        <li @class(['active'=>$currentColor->color_alias == $color->color_alias])>
                                            <a href="{{$color->url}}">
                                                <img src="{{$color->photo}}" alt="{{$product->name}} {{$color->name}}">
                                                <span class="product-page-color-block @if($color->color_alias == 'alb')product-page-color-white @endif"
                                                      style="background-color: #{{$color->color_html}};"></span>
                                                <span class="product-page-color-name">{{$color->name}}</span>
                                            </a>
                                        </li>
                                        @if($currentColor->color_alias == $color->color_alias)
                                            <input type="hidden" name="color" value="{{$color->id}}">
                                        @endif
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        @if($sizes->isNotEmpty())
                            <div class="product-page-size">
                                <div class="product-size-head">
                                    <div class="product-page-title">{{ShowLabelById(19)}}:</div>
                                    @if($sizeGuideLink)
                                        <div class="product-size-link">
                                            <a target="_blank" href="{{$sizeGuideLink}}">{{ShowLabelById(20)}}</a>
                                        </div>
                                    @endif
                                </div>
                                <div class="product-size-list">
                                    <ul>
                                        @foreach($sizes as $size)
                                            <li>
                                                <input type="radio" value="{{$size->id}}" id="product-size-{{$size->id}}" name="size" @checked($loop->first)>
                                                <label for="product-size-{{$size->id}}">{{$size->name}}</label>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        @endif

                        <div class="product-page-add">
                            <button type="button"
                                    class="button button--dark active"
                                    id="wish-product-button"
                                    data-product="{{$product->alias}}"
                                    data-link="{{$linkForWish}}"
                                    data-photo="{{$gallery->first()->id}}"
                                    data-title-add="{{ShowLabelById(101)}}"
                                    data-title-remove="{{ShowLabelById(102)}}"
                            >
                                <p style="opacity: 0;">Wish shadow text</p>

                            </button>
                        </div>
                        <div class="product-page-links">
                            <ul>
                                @if($shopPage)
                                <li>
                                    <a href="{{$shopPage->url}}">
                                        <img src="{{icon('location.svg')}}" alt="{{$shopPage->name}}">
                                        <span>{{$shopPage->name}}</span>
                                    </a>
                                </li>
                                @endif
                                @if($email)
                                    <li>
                                        <a href="mailto:{{$email}}">
                                            <img src="{{icon('e-mail.svg')}}" alt="{{$email}}">
                                            <span>{{$email}}</span>
                                        </a>
                                    </li>
                                @endif
                                    <li>
                                        <div class="product-page-share-wrapper">
                                            <button type="button" class="product-page-share">
                                                <img src="{{icon('share.svg')}}" alt="share">
                                            </button>
                                        </div>
                                    </li>
                            </ul>
                        </div>
                        <div class="product-page-accordion">
                            @if($product->body)
                                <div class="product-accordion-item">
                                    <button type="button" class="product-accordion-head">{{ShowLabelById(21)}}</button>
                                    <div class="product-accordion-content">
                                        {!! $product->body !!}
                                    </div>
                                </div>
                            @endif
                            @if($product->material)
                                <div class="product-accordion-item">
                                    <button type="button" class="product-accordion-head">{{ShowLabelById(22)}}</button>
                                    <div class="product-accordion-content">
                                        {!! $product->material !!}
                                    </div>
                                </div>
                            @endif
                            @if($product->details)
                                <div class="product-accordion-item">
                                    <button type="button" class="product-accordion-head">{{ShowLabelById(23)}}</button>
                                    <div class="product-accordion-content">
                                        {!! $product->details !!}
                                    </div>
                                </div>
                            @endif

                        </div>
                    </div>
                </div>
            </div>
        </section>


        @if($recommendations->isNotEmpty())
            <section class="section goods-slider">
                <div class="container">
                    <div class="slider-head">
                        <h2>{{ShowLabelById(24)}}</h2>
                        <div class="slider-navs">
                            <button type="button" class="slider-nav slider-nav--prev">
                                <img src="{{icon('arrow-right.svg')}}" alt="arrow-right">
                            </button>
                            <button type="button" class="slider-nav slider-nav--next">
                                <img src="{{icon('arrow-right.svg')}}" alt="arrow-right">
                            </button>
                        </div>
                    </div>
                    <div class="slider-wrapper">
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach($recommendations as $recommendation)
                                    @foreach($product->gender_category as $gender)
                                        <div class="swiper-slide">
                                            @include('front.templates.goods-template',['product'=>$recommendation,'imageSize'=>'M','gender'=>$gender])
                                        </div>
                                    @endforeach
                                @endforeach

                            </div>
                        </div>
                    </div>
                    <div class="section-link">
                        <a href="{{$linkToCatalog}}" class="button">{{ShowLabelById(13)}}</a>
                    </div>
                </div>
            </section>
        @endif

    </div>

    <input type="text" value="{{$productLink}}" class="input-copyURL">
@endsection


@push('js')
    <script>
        let checkAction = '{{route('wish.check',$product->alias)}}';
        checkProductWish(checkAction);

        $('[name=size]').on('change',function(){
            checkProductWish(checkAction);
        });

        copyButton = (e) => {
            e.preventDefault();
            document.querySelector('.input-copyURL').select();
            document.execCommand("copy");

             Notiflix.Notify.success('{{ShowLabelById(87)}}', {
                        position: 'center-top',
                        timeout: 2000
                    }
                );
        };
    </script>
@endpush