@extends('index')

@section('main')

    <main id="main" class="subpage bgWhite">
        <article>
            @if(!empty($product->description->top_anchor->button) && !empty($product->description->top_anchor->url))
            <div class="grey-heading">
                <div class="container">
                    <div class="grey-heading__inner">
                        <a href="{{ $product->description->top_anchor->url }}" class="grey-heading__item grey-heading__item--angel">{{ $product->description->top_anchor->button }} <i class="ico icoChevronRight"></i></a>
                    </div>
                </div>
            </div>
            @endif
            <div class="content product overflow-h" itemscope itemtype="http://schema.org/Product">
                <div itemprop="brand" itemtype="http://schema.org/Thing" itemscope>
                    <meta itemprop="name" content="Jumper">
                </div>
                <div class="row-flex no-gutter">
                    <div class="col-lg-7 col-md-5">
                        @include('products::product.show.gallery')
                    </div>
                    <div class="col-lg-5 col-md-7">
                        <div class="product__right">
                            <div class="product-info">
                                @if(!empty($product->description->mobileapp->info))
                                    <h1 class="product-info__title" style="margin-bottom: 3px;" itemprop="name">{!! $product->name !!}</h1>
                                    <p style="margin-bottom: 35px; color: #f46aa4; font-size: 16px;">{{ $product->description->mobileapp->info }}</p>
                                @else
                                    <h1 class="product-info__title" itemprop="name">{!! $product->name !!}</h1>
                                @endif

                                <div class="tabs">
                                    <div class="tabs__nav">
                                        @if(!empty($product->short_description))
                                            <a class="tabs__nav-item active" data-tab="opis-produktu">Opis produktu</a>
                                        @endif
                                        @if(!empty($product->details))
                                            <a class="tabs__nav-item{{ empty($product->short_description) ? ' active' : '' }}" data-tab="szczegoly">Szczegóły</a>
                                        @endif
                                    </div>
                                    <div class="product-info__desc">
                                        <div class="tabs__container">
                                            @if(!empty($product->short_description))
                                                <div class="opis-produktu tabs__content active" itemprop="description">
                                                    {!! $product->short_description !!}
                                                </div>
                                            @endif
                                            @if(!empty($product->details))
                                                <div class="szczegoly tabs__content">
                                                    {!! $product->details !!}
                                                </div>
                                            @endif
                                        </div>
                                    </div>

                                    @include('products::product.item-add-to-cart')


                                    <div class="product-info__desc-extra">
                                        {!! nl2br($settings['delivery_info']->value_i18n->product ?? '') !!}

                                        {!! !empty($product->description->delivery->info) ? '<br>' . nl2br($product->description->delivery->info) : '' !!}
                                    </div>

                                    @if($product->isBuyable())
                                        @if(!empty($product->description->buyable->info))
                                            <div class="product-info__important">
                                                {!! nl2br($product->description->buyable->info) !!}
                                            </div>
                                        @endif
                                    @else
                                        <div class="product-info__important">
                                            <strong>WAŻNA INFORMACJA:</strong> zostaw nam swojego maila a poinformujemy Cię, kiedy {!! $product->name !!} będzie znowu dostępny w naszym sklepie!
                                            <form class="form js-validate--ajax" action="{{ route('products.availability-subscribe') }}" method="post">
                                                @csrf
                                                @captcha
                                                <input type="hidden" name="product_id" value="{{ $product->id }}">
                                                <input type="hidden" name="terms" value="on">
                                                <input type="hidden" name="action" value="notify">
                                                <div class="product-info__form flex flex--stretch">
                                                    <input name="email" class="product-info__form-input required email" placeholder="Twój e-mail" type="text">
                                                    <button type="submit" class="product-info__form-btn flex flex--center-y flex--center-x"><span>Zostaw e-mail</span></button>
                                                </div>
                                            </form>
                                        </div>
                                    @endif

                                    @messages

                                    <div class="product-info__benefits flex flex--space-around">
                                        <div class="product-info__benefits-item">
                                            <i class="ico icoCarTime"></i>
                                            <strong>Wysyłka w 24h</strong>
                                        </div>
                                        <div class="product-info__benefits-item">
                                            <i class="ico icoHeartCart"></i>
                                            <strong>Bezpieczne zakupy</strong>
                                        </div>
                                        <div class="product-info__benefits-item">
                                            <i class="ico icoBadgeOk"></i>
                                            <strong>Oryginalny produkt</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @if(!empty($product->description->gallery))
                    <div class="overflow-h">
                        <div class="img-fullwidth img-fullwidth--four">
                            <div class="row-flex gutter-4">
                                @foreach($product->description->gallery as $image)
                                    @php($file = new FileModel(['path' => $image->path, 'data' => $image->data]))
                                    <div class="col-sm-3">
                                        <img src="{{ $file->adaptive(477, 477) }}" alt="{{ $file->data->name }}">
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                @if(!empty($product->description->pros->items))

                    <div class="container">
                        <div class="product-advantages">
                            <h2 class="product__title product__title--center">{!! nl2br($product->description->pros->header ?? '') !!}</h2>
                            <div class="row-flex">
                                @foreach($product->description->pros->items as $image)
                                    @php($file = new FileModel(['path' => $image->path, 'data' => $image->data]))
                                    <div class="col-sm-4">
                                        <div class="product-advantage">
                                            <figure class="product-advantage__img">
                                                <img src="{{ $file->adaptive(370, 200) }}" alt="{{ $file->data->name }}">
                                            </figure>
                                            <h3 class="product-advantage__title">{!! $file->data->header ?? '' !!}</h3>
                                            <p class="product-advantage__text">{!! nl2br($file->data->text ?? '') !!}</p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        @endif
                        @if(!empty($product->description->icons->items))
                            <div class="pink-circles">
                                <h2 class="product__title product__title--center">{!! nl2br($product->description->icons->header ?? '') !!}</h2>
                                <div class="row-flex">
                                    @foreach($product->description->icons->items as $item)
                                        <div class="col-sm-3">
                                            <div class="pink-circles__item">
                                                <i class="ico {{ $item->icon ?? '' }}"></i>
                                                <strong>{!! nl2br($item->text ?? '') !!}</strong>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        @if($product->opinions->isNotEmpty())
                            <div class="opinions-list">
                                <h2 class="product__title product__title--center">Opinie</h2>
                                <h3 class="product__subtitle product__subtitle--center">{!! $product->description->opinions->description ?? '' !!}</h3>
                                <div class="row-flex">
                                    <div class="col-lg-10 col-lg-offset-1">
                                        @foreach ($product->opinions as $opinion)
                                            <div class="opinion" itemprop="review" itemscope itemtype="http://schema.org/Review">
                                                <div class="opinion__inner">
                                                    <div class="opinion__header flex flex--center-y">
                                                        <div class="opinion__name" itemprop="author">{{ $opinion->name }}</div>
                                                        <div class="opinion__stars" itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
                                                <span class="star-rating">
                                                    <span class="star-rating__stars" title="{{ $opinion->rating }}">
                                                        <i class="ico icoHeart-3{{ $opinion->rating > 0 ? ' filled' : '' }}"></i>
                                                        <i class="ico icoHeart-3{{ $opinion->rating > 1.5 ? ' filled' : '' }}"></i>
                                                        <i class="ico icoHeart-3{{ $opinion->rating > 2.5 ? ' filled' : '' }}"></i>
                                                        <i class="ico icoHeart-3{{ $opinion->rating > 3.5 ? ' filled' : '' }}"></i>
                                                        <i class="ico icoHeart-3{{ $opinion->rating > 4.5 ? ' filled' : '' }}"></i>
                                                    </span>
                                                    <meta itemprop="ratingValue" content="{{ $opinion->rating }}">
                                                </span>
                                                        </div>
                                                    </div>
                                                    <div class="opinion__body">
                                                        <div class="opinion__title" itemprop="name">{{ $opinion->title ?? '' }}</div>
                                                        <div class="opinion__desc" itemprop="description">{!! nl2br(e($opinion->body), false) !!}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                {{--
                                <div class="opinions-list__action">
                                    <a href="#" class="btn btn-primary btn-primary--small btn-primary--outline-grey" data-offset="{$opinions.limit + $opinions.offset}">Wczytaj więcej opinii</a>
                                </div>
                                --}}
                            </div>
                        @endif
                    </div>
            </div>
            <div class="grey-heading grey-heading--border-bottom-mobile">
                <div class="container">
                    <div class="grey-heading__inner">
                        <p class="grey-heading__item grey-heading__item--safety">Jesteś w bezpiecznym procesie zakupowym</p>
                        <p class="grey-heading__item grey-heading__item--warranty">Gwarancja zakupu oryginalnego produktu</p>
                    </div>
                </div>
            </div>

            @if($product->isBuyable())
                <form action="{{ $product->cart_add_url }}" method="post" class="buy-now js-product-add-cart">
                    <div class="container">
                        <button type="submit" class="btn btn-primary">Kup teraz</button>
                    </div>
                </form>
            @endif
        </article>
    </main>
@endsection